/* ===================================================================
   LIFE BALANCE CHECK — "4 บัญชีชีวิต"
   Page-scoped styles. Loaded AFTER /styles.min.css so it inherits the
   WealthBuddy design tokens (:root) and overrides with custom styling.
   Scope: body.life-balance-check-page
   =================================================================== */

body.life-balance-check-page {
  /* tokens — WealthBuddy Authentic Executive Palette & Color Coding */
  --navy: #0b367b;
  --navy-dark: #07214d;
  --navy-mid: #164fa8;
  --blue: #1d57b8;
  --blue-light: #4b93e8;
  --blue-sky: #7cbdf1;
  --blue-pale: #e8f2fd;
  --blue-mist: #f4f9fe;

  --ink: #0b367b;
  --ink-soft: #3c4a63;
  --ink-faint: #64769a;
  --bg: #f4f9fe;
  --card: #FFFFFF;
  --brand1: #0b367b;
  --brand2: #1d57b8;

  /* The 4 Accounts matching WealthBuddy design system */
  --rel: #0f766e;    /* Deep Supportive Teal */
  --money: #1d57b8;  /* WealthBuddy Royal Navy */
  --body: #0284c7;   /* Vitality Cobalt Blue */
  --mind: #2b8534;   /* WealthBuddy Forest Green */
  --dep: #10B981;    /* Deposit Emerald Green */
  --wd: #EF4444;     /* Withdrawal Rose Red */

  --radius: 22px;
  --shadow: 0 6px 24px rgba(11, 54, 123, 0.07);
  --shadow-sm: 0 2px 8px rgba(11, 54, 123, 0.04);

  --lbc-bg: #f4f9fe;
  --lbc-card: #ffffff;
  --lbc-tint: #f8fbff;
  --lbc-border: rgba(11, 54, 123, 0.08);
  --lbc-border-strong: #c3d7ef;
  --lbc-border-focus: #1d57b8;
  --lbc-ink: #0b367b;
  --lbc-body: #3c4a63;
  --lbc-muted: #64769a;
  --lbc-accent: #1d57b8;
  --lbc-accent-hover: #164fa8;
  --lbc-accent-soft: #e8f2fd;
  --lbc-good: #10B981;
  --lbc-good-soft: #ecfdf5;
  --lbc-warn: #EF4444;
  --lbc-warn-soft: #fef2f2;

  /* the four accounts */
  --lbc-c-rel: #0f766e;
  --lbc-c-money: #1d57b8;
  --lbc-c-body: #0284c7;
  --lbc-c-mind: #2b8534;

  /* 8px spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;

  --lbc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lbc-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lbc-dur: 0.4s;

  --bar-h: 0px;
  padding-bottom: 0;
  background: var(--lbc-bg);
  color: var(--lbc-body);
  font-family: 'Noto Sans Thai', var(--font, 'Sarabun'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.life-balance-check-page *,
body.life-balance-check-page *::before,
body.life-balance-check-page *::after {
  box-sizing: border-box;
}

.lbc-shell {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--s4);
}

.lbc-main {
  padding-bottom: 0;
}

/* Numerals formatting */
.lbc-bal-val,
.lbc-sub-big,
.lbc-sub-eq,
.lbc-ledger-n,
.lbc-sum-sc,
.lbc-sum-math b,
.lbc-tick,
.lbc-tab-count {
  font-family: var(--font-en, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Account colour applied by data-attribute */
[data-acct='rel'] { --c: var(--rel); --acc: var(--rel); --acc-soft: #ecfdf5; }
[data-acct='money'] { --c: var(--money); --acc: var(--money); --acc-soft: #e8f2fd; }
[data-acct='body'] { --c: var(--body); --acc: var(--body); --acc-soft: #e0f2fe; }
[data-acct='mind'] { --c: var(--mind); --acc: var(--mind); --acc-soft: #ebf6e8; }

/* ===================================================================
   TOP BAR
   =================================================================== */
.lbc-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 249, 254, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lbc-border);
  transition: all 0.3s var(--lbc-ease);
}

.lbc-topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 56px;
  padding-block: 8px;
}

/* — Brand in topbar (Clean author / tool identity) — */
.lbc-top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease;
}

.lbc-top-brand:hover {
  opacity: 0.88;
}

.lbc-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.lbc-brand-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.lbc-brand-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--lbc-ink, #0b367b);
  letter-spacing: -0.01em;
}

.lbc-brand-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--lbc-muted, #64769a);
}

/* — Back button: clean circular icon, no text — */
.lbc-top-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--lbc-accent, #0b367b);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lbc-top-back:hover {
  background: rgba(11, 54, 123, 0.08);
}

.lbc-top-back:active {
  transform: scale(0.88);
  background: rgba(11, 54, 123, 0.12);
}

.lbc-top-back svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* — Centered page title (used on quiz screen) — */
.lbc-top-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lbc-ink, #0b367b);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.lbc-top-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.lbc-bal-chip {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.05);
  border: 1px solid #dbe6f4;
  color: #3c4a63;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.lbc-bal-chip.is-on { display: inline-flex; }
.lbc-bal-chip.pulse { transform: scale(1.08); }

.lbc-bal-chip.pos { background: #10B981; color: #ffffff; border-color: transparent; }
.lbc-bal-chip.pos .lbc-bal-lab { color: rgba(255, 255, 255, 0.88); }
.lbc-bal-chip.pos .lbc-bal-val { color: #ffffff; }

.lbc-bal-chip.neg { background: #EF4444; color: #ffffff; border-color: transparent; }
.lbc-bal-chip.neg .lbc-bal-lab { color: rgba(255, 255, 255, 0.88); }
.lbc-bal-chip.neg .lbc-bal-val { color: #ffffff; }

.lbc-bal-lab {
  font-size: 11px;
  color: var(--ink-faint, #64769a);
  font-weight: 600;
}

.lbc-bal-val {
  font-weight: 800;
  color: var(--ink, #0b367b);
  transition: color 0.25s ease;
}

.lbc-bal-val.is-neg { color: var(--lbc-warn); }

.lbc-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lbc-border);
  color: var(--lbc-body);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.06);
  transition: all 0.2s var(--lbc-ease);
  -webkit-tap-highlight-color: transparent;
}

.lbc-btn-icon:hover {
  background: var(--lbc-tint);
  border-color: var(--lbc-border-strong);
  color: var(--lbc-ink);
  transform: translateY(-1px);
}

.lbc-btn-icon svg { width: 18px; height: 18px; }

.lbc-rail {
  height: 3.5px;
  background: rgba(195, 215, 239, 0.4);
  width: 100%;
  overflow: hidden;
}

.lbc-rail-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--lbc-accent), var(--lbc-c-mind));
  transition: width 0.45s var(--lbc-ease);
}

/* ===================================================================
   SCREENS
   =================================================================== */
.lbc-screen { display: none; }
.lbc-screen.is-on { display: block; animation: lbcRise 0.45s var(--lbc-ease) both; }

#lbc-sc-intro {
  padding-bottom: var(--s4, 24px);
}

#lbc-sc-quiz {
  padding-bottom: 96px;
}

#lbc-sc-result {
  padding-bottom: 20px;
}

@keyframes lbcRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.lbc-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--lbc-ease), transform 0.5s var(--lbc-ease);
}

.lbc-reveal.is-in { opacity: 1; transform: translateY(0); }

/* ===================================================================
   HERO / INTRO (Soft WealthBuddy Theme · Matching Home Page)
   =================================================================== */
.lbc-intro-shell {
  max-width: 480px;
  margin-inline: auto;
  padding-inline: 14px;
}

@media (min-width: 640px) {
  .lbc-intro-shell {
    max-width: 520px;
    padding-inline: 0;
  }
}

/* Soft Hero Card matching Home page */
.lbc-hero-card {
  margin: 12px 0 0;
  border-radius: 22px;
  padding: 24px 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 20px rgba(11, 54, 123, 0.04);
  position: relative;
  overflow: hidden;
}

.lbc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e8f2fd;
  border: 1px solid #d0e4fa;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1d57b8;
}

.lbc-hero-title {
  font-size: clamp(21px, 5vw, 25px);
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 10px;
  color: #0b367b;
  letter-spacing: -0.01em;
}

.lbc-hl {
  position: relative;
  display: inline-block;
  color: #0b367b;
  background: linear-gradient(180deg, transparent 65%, rgba(72, 163, 63, 0.22) 65%);
  padding: 0 4px;
  border-radius: 4px;
}

.lbc-hero-lede {
  font-size: 13.5px;
  line-height: 1.7;
  color: #3c4a63;
  margin: 0;
}

.lbc-hero-stats {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.lbc-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f8fbff;
  border: 1px solid #dbe6f4;
  padding: 5px 10px;
  border-radius: 10px;
  color: #1d57b8;
}

/* Outcome Teaser Banner */
.lbc-outcome-card {
  margin: 12px 0 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2fd 100%);
  border: 1px solid #cfe2f8;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.04);
}

.lbc-outcome-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #1d57b8;
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(29, 87, 184, 0.25);
}

.lbc-outcome-badge svg {
  width: 18px;
  height: 18px;
}

.lbc-outcome-txt strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #0b367b;
  margin-bottom: 2px;
}

.lbc-outcome-txt p {
  font-size: 11.5px;
  line-height: 1.45;
  color: #334155;
  margin: 0;
}

/* 4 Account Cards (Compact, Soft, Non-clickable overview) */
.lbc-cards {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbc-acct-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8eef5;
  box-shadow: 0 2px 10px rgba(11, 54, 123, 0.03);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  cursor: default;
  user-select: none;
}

.lbc-acct-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--acc-soft, #eff6ff);
  color: var(--c, #1d57b8);
  border: 1px solid var(--acc-border, #dbeafe);
}

.lbc-acct-badge svg {
  width: 20px;
  height: 20px;
}

.lbc-acct-info {
  flex: 1;
  min-width: 0;
}

.lbc-acct-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.lbc-acct-top-row h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #0b367b;
  margin: 0;
}

.lbc-acct-info p {
  font-size: 12px;
  color: #64769a;
  line-height: 1.4;
  margin: 0;
}

.lbc-qchip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--c, #1d57b8);
  background: var(--acc-soft, #eff6ff);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tip Card (Soft Amber) */
.lbc-tip {
  margin: 14px 0 0;
  background: #fffdf5;
  border: 1px solid #fef3c7;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.04);
}

.lbc-tip-bulb {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #f59e0b;
  color: #fff;
  display: grid;
  place-items: center;
}

.lbc-tip-body h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 2px;
}

.lbc-tip-body p {
  font-size: 11.5px;
  line-height: 1.6;
  color: #78350f;
  margin: 0;
}

/* Trust Row */
.lbc-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}

.lbc-trust div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64769a;
  font-weight: 600;
}

.lbc-trust svg {
  color: #16a34a;
}

/* Hero CTA Bar */
.lbc-intro-cta-bar {
  margin-top: 24px;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lbc-btn-start-primary {
  width: 100%;
  border: none;
  cursor: pointer;
  background: #1d57b8;
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(29, 87, 184, 0.25);
  transition: all 0.2s var(--lbc-ease);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.lbc-btn-start-primary:hover {
  background: #164fa8;
  box-shadow: 0 6px 20px rgba(29, 87, 184, 0.35);
  transform: translateY(-1px);
}

.lbc-btn-start-primary:active {
  transform: scale(0.98);
}

.lbc-btn-start-ghost {
  width: 100%;
  border: 1.5px solid #1d57b8;
  background: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1d57b8;
  padding: 10px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.2s var(--lbc-ease);
  -webkit-tap-highlight-color: transparent;
}

.lbc-btn-start-ghost:hover {
  background: #e8f2fd;
}

/* Screen 2 quiz transition */
#lbc-acct-body.is-entering {
  animation: lbcStepEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes lbcStepEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.lbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 var(--s4);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--lbc-ease);
  box-sizing: border-box;
}

.lbc-btn:active { transform: scale(0.98); }
.lbc-btn svg { width: 19px; height: 19px; flex: none; }

.lbc-btn-primary {
  background: var(--lbc-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 87, 184, 0.26);
}

.lbc-btn-primary:hover {
  background: var(--lbc-accent-hover);
  box-shadow: 0 10px 28px rgba(29, 87, 184, 0.35);
  transform: translateY(-1px);
}

.lbc-btn-ghost {
  background: var(--lbc-card);
  border-color: var(--lbc-border-strong);
  color: var(--lbc-ink);
}

.lbc-btn-ghost:hover {
  background: var(--lbc-tint);
  border-color: var(--lbc-muted);
  transform: translateY(-1px);
}

.lbc-btn-share {
  background: #f0f7ff;
  border-color: var(--lbc-border-strong);
  color: var(--lbc-accent);
}

.lbc-btn-share:hover {
  background: var(--lbc-accent-soft);
  border-color: var(--lbc-accent);
  transform: translateY(-1px);
}

.lbc-btn-line {
  background: #06c755;
  color: #fff;
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.25);
}

.lbc-btn-line:hover {
  background: #05b34c;
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.35);
  transform: translateY(-1px);
}

.lbc-btn-lg {
  min-height: 56px;
  font-size: 1.08rem;
  padding: 0 var(--s5);
}

.lbc-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ===================================================================
   SCREEN 2 · TABS / STEP CHIPS
   =================================================================== */
#lbc-sc-quiz .lbc-shell {
  max-width: 480px;
  margin-inline: auto;
  padding-inline: 14px;
}

@media (min-width: 640px) {
  #lbc-sc-quiz .lbc-shell {
    max-width: 520px;
    padding-inline: 0;
  }
}

.lbc-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 4px;
  scrollbar-width: none;
  border-bottom: none;
  -webkit-overflow-scrolling: touch;
}

.lbc-tabs::-webkit-scrollbar { display: none; }

.step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 999px;
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint, #94A3B8);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.step .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}

.step.done {
  color: var(--ink-soft, #475569);
}

.step.done .dot {
  opacity: 1;
  background: var(--dep, #10B981);
}

.step.active {
  border-color: var(--c);
  color: var(--ink, #0F172A);
  background: #ffffff;
}

.step.active .dot {
  opacity: 1;
  background: var(--c);
}

.step .cnt {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, white);
  padding: 2px 7px;
  border-radius: 99px;
}

.step:not(.active) .cnt {
  color: var(--ink-faint, #94a3b8);
  background: rgba(15, 23, 42, 0.05);
}

/* ===================================================================
   SECTION HERO CARD (.sect)
   =================================================================== */
.sect {
  margin: 14px 0 0;
  border-radius: 26px;
  padding: 22px 20px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
  transition: background 0.3s ease;
}

.sect[data-acct="rel"],
[data-acct="rel"] .sect {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.28);
}

.sect[data-acct="money"],
[data-acct="money"] .sect {
  background: linear-gradient(135deg, #0b367b 0%, #1d57b8 100%);
  box-shadow: 0 12px 28px rgba(11, 54, 123, 0.28);
}

.sect[data-acct="body"],
[data-acct="body"] .sect {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
  box-shadow: 0 12px 28px rgba(3, 105, 161, 0.28);
}

.sect[data-acct="mind"],
[data-acct="mind"] .sect {
  background: linear-gradient(135deg, #15803d 0%, #2b8534 100%);
  box-shadow: 0 12px 28px rgba(35, 133, 52, 0.28);
}

.sect::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.sect .row {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.sect .badge {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  color: #fff;
}

.sect .badge svg {
  width: 24px;
  height: 24px;
}

.sect .eyebrow {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.88;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.sect h1 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  color: #ffffff;
}

.sect p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 10px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* ===================================================================
   CHECKLIST CARDS (.list-card, .item)
   =================================================================== */
.list-card {
  margin: 14px 0 0;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(11, 54, 123, 0.05);
  border: 1px solid #e8eef5;
  overflow: hidden;
}

.list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(11, 54, 123, 0.06);
  background: #fafcff;
}

.list-head .ic {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, white);
}

.list-head h2 {
  font-size: 14.5px;
  font-weight: 800;
  flex: 1;
  color: var(--ink, #0b367b);
  margin: 0;
}

.per-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, white);
  padding: 3px 8px;
  border-radius: 99px;
}

.list-head .count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint, #64769a);
}

.list-head .count b {
  color: var(--ink, #0b367b);
  font-weight: 800;
}

.item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(11, 54, 123, 0.04);
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: #ffffff;
}

.item:last-child {
  border-bottom: none;
}

.item:hover {
  background: #f8fbff;
}

.item:active {
  transform: scale(0.99);
  background: #f1f6fd;
}

.box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid #d0dceb;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: #ffffff;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(11, 54, 123, 0.04);
}

.box svg {
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.item span:last-child {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft, #3c4a63);
  font-weight: 500;
  transition: color 0.18s ease;
}

/* Soft, elegant checked state */
.item.on {
  background: color-mix(in srgb, var(--c) 5%, white);
}

.item.on .box {
  background: var(--c);
  border-color: var(--c);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 30%, transparent);
}

.item.on .box svg {
  opacity: 1;
  transform: scale(1);
  color: #ffffff;
}

.item.on span:last-child {
  color: var(--ink, #0b367b);
  font-weight: 500;
}

/* ===================================================================
   BALANCE SUMMARY CARD (.balance) — Rich Theme Gradient + Subtle Motif
   =================================================================== */
.balance {
  margin: 16px 0 0;
  border-radius: 22px;
  padding: 18px 20px;
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
    linear-gradient(135deg, #0b367b 0%, #154b9d 60%, #2563eb 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 28px rgba(11, 54, 123, 0.25);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.balance[data-acct="rel"] {
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
    linear-gradient(135deg, #094740 0%, #0f766e 60%, #14b8a6 100%);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.28);
}

.balance[data-acct="fin"],
.balance[data-acct="money"] {
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
    linear-gradient(135deg, #0b367b 0%, #154b9d 60%, #2563eb 100%);
  box-shadow: 0 10px 28px rgba(11, 54, 123, 0.28);
}

.balance[data-acct="body"] {
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
    linear-gradient(135deg, #034b75 0%, #0284c7 60%, #38bdf8 100%);
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.28);
}

.balance[data-acct="mind"] {
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 0, transparent 18px),
    linear-gradient(135deg, #14532d 0%, #15803d 60%, #2b8534 100%);
  box-shadow: 0 10px 28px rgba(35, 133, 52, 0.28);
}

.balance::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.balance::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -45px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.balance .txt {
  flex: 1;
  position: relative;
  z-index: 1;
}

.balance .txt small {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.balance .txt b {
  font-size: 16px;
  font-weight: 800;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.balance .txt .sub {
  font-size: 11.5px;
  margin-top: 6px;
  display: flex;
  gap: 8px;
  font-weight: 600;
}

.balance .txt .sub i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.balance .num {
  font-size: 28px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  min-width: 68px;
  padding: 7px 14px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.25s ease;
  font-family: var(--font-en, 'Inter', sans-serif);
  line-height: 1;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  color: #ffffff;
}

.balance .num.pos {
  background: rgba(52, 211, 153, 0.35);
  border-color: rgba(52, 211, 153, 0.7);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(5, 150, 105, 0.5);
}

.balance .num.neg {
  background: rgba(248, 113, 113, 0.35);
  border-color: rgba(248, 113, 113, 0.7);
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(220, 38, 38, 0.5);
}

.balance .num.zero {
  color: #ffffff;
}

.hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint, #64769a);
  margin: 16px 20px 0;
  line-height: 1.7;
}

/* ===================================================================
   BOTTOM FLOATING NAVIGATION (.lbc-navbar)
   =================================================================== */
.lbc-navbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(11, 54, 123, 0.1);
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(11, 54, 123, 0.08);
}

.lbc-navbar.is-on { display: block; }

.lbc-navbar-inner {
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (min-width: 640px) {
  .lbc-navbar-inner {
    max-width: 520px;
  }
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid #dbe6f4;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.06);
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0b367b);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-back:hover {
  background: #f8fbff;
  border-color: #bfdbfe;
  transform: translateY(-1px);
}

.btn-back:active {
  transform: scale(0.96);
}

.dots {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 40px;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #CBD5E1;
  transition: all 0.25s ease;
}

.dots i.on {
  width: 20px;
  background: linear-gradient(90deg, #0b367b, #1d57b8);
}

.btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(135deg, #0b367b 0%, #1d57b8 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(29, 87, 184, 0.28);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-next:hover {
  background: linear-gradient(135deg, #08285c 0%, #164fa8 100%);
  box-shadow: 0 6px 20px rgba(29, 87, 184, 0.38);
  transform: translateY(-1px);
}

.btn-next:active {
  transform: scale(0.96);
}

/* ===================================================================
   SCREEN 3 · RESULT (Light, Soft & Ultra-Readable)
   =================================================================== */
#lbc-sc-result .lbc-shell {
  max-width: 500px;
  margin-inline: auto;
  padding-inline: 14px;
}

@media (min-width: 640px) {
  #lbc-sc-result .lbc-shell {
    max-width: 520px;
    padding-inline: 0;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.rise { animation: rise 0.45s ease both; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.12s; }
.d3 { animation-delay: 0.20s; }
.d4 { animation-delay: 0.28s; }
.d5 { animation-delay: 0.36s; }

/* Result Hero (Royal WealthBuddy Gradient Card) */
.hero {
  margin: 12px 0 0;
  border-radius: 28px;
  padding: 28px 20px 62px;
  background: linear-gradient(150deg, #0b367b 0%, #1d57b8 65%, #2563eb 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 14px 34px rgba(11, 54, 123, 0.18);
}

.hero::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.hero .eyebrow {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 27px;
  font-weight: 800;
  margin: 4px 0 8px;
  color: #ffffff;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.hero p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 auto;
  max-width: 40ch;
  position: relative;
  z-index: 1;
}

.hero-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.hero-chips span {
  font-size: 13.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 16px;
  border-radius: 999px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hero-chips b {
  color: #FDE68A;
  font-weight: 800;
  font-size: 14.5px;
}

/* Verdict Card (Overlaps Hero) */
.verdict {
  margin: -36px 14px 0;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(11, 54, 123, 0.12);
  border: 1px solid rgba(11, 54, 123, 0.06);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  z-index: 3;
}

.verdict .ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #FEF3C7;
  color: #D97706;
}

.verdict h2 {
  font-size: 16.5px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--ink, #0b367b);
  line-height: 1.35;
}

.verdict p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft, #3c4a63);
  margin: 0;
}

/* Section titles */
.sect-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  margin: 30px 0 12px;
}

.sect-title h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #0b367b);
  margin: 0;
}

.sect-title small {
  font-size: 13px;
  color: var(--ink-faint, #64769a);
  font-weight: 600;
}

/* Radar Card · 2026 Concentric Square Design */
.radar-card {
  background: #ffffff;
  border-radius: 26px;
  box-shadow: var(--shadow, 0 6px 24px rgba(11, 54, 123, 0.07));
  border: 1.5px solid #e2e8f0;
  padding: 16px 10px 12px;
  position: relative;
  overflow: hidden;
}

.radar-card svg.lbc-concentric-radar {
  width: 100%;
  height: auto;
  display: block;
  max-width: 420px;
  margin-inline: auto;
  overflow: visible;
}

.radar-badge-group {
  transition: transform 0.2s ease;
}

.radar-badge-group:hover {
  transform: translateY(-1px);
}

.radar-data-layer polygon {
  animation: lbcPolyPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s;
  transform-origin: 210px 230px;
}

.radar-data-layer circle {
  animation: lbcDotPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.4s;
  transform-origin: center;
}

@keyframes lbcPolyPop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lbcDotPop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

.radar-note {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 10px 8px;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(11, 54, 123, 0.08);
  margin-top: 8px;
}

.radar-note span {
  font-size: 12px;
  color: var(--ink-faint, #64769a);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashline {
  width: 16px;
  border-top: 2px dashed #0b367b;
  display: inline-block;
}

/* In-Page Share Action (Right under Radar Card) */
.lbc-res-share-card {
  margin: 12px 0 24px;
  text-align: center;
}

.lbc-btn-share-main {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #0b367b 0%, #1d57b8 100%);
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 54, 123, 0.22);
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lbc-btn-share-main:hover {
  background: linear-gradient(135deg, #07214d 0%, #164fa8 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(11, 54, 123, 0.28);
}

.lbc-btn-share-main:active {
  transform: scale(0.98);
}

/* Individual Account Cards */
.acct {
  margin-bottom: 14px;
  background: #ffffff;
  border-radius: var(--radius, 24px);
  box-shadow: 0 4px 18px rgba(11, 54, 123, 0.05);
  border: 1.5px solid #e2e8f0;
  border-top: 4px solid var(--c);
  padding: 20px 20px;
}

.acct .top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.acct .dot {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 12%, white);
  color: var(--c);
}

.acct .dot svg {
  width: 20px;
  height: 20px;
}

.acct h3 {
  font-size: 17px;
  font-weight: 800;
  flex: 1;
  color: var(--ink, #0b367b);
  margin: 0;
}

.acct .score {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink, #0b367b);
  text-align: right;
  line-height: 1;
  font-family: var(--font-en, 'Inter', sans-serif);
}

.acct .score.pos { color: var(--dep, #10B981); }
.acct .score.neg { color: var(--wd, #EF4444); }

.acct .score small {
  font-size: 11px;
  color: var(--ink-faint, #64769a);
  font-weight: 600;
  display: block;
  text-align: right;
  margin-top: 2px;
  font-family: var(--font, 'Noto Sans Thai', sans-serif);
}

.status-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.status-chip.warn { color: #B45309; background: #FEF3C7; }
.status-chip.leak { color: #DC2626; background: #FEE2E2; }
.status-chip.good { color: #047857; background: #D1FAE5; }

.acct p {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-soft, #3c4a63);
  margin-bottom: 14px;
}

.bar {
  position: relative;
  height: 11px;
  border-radius: 999px;
  background: #F1F5F9;
  margin-bottom: 10px;
  overflow: hidden;
}

.bar .zero {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #CBD5E1;
  z-index: 2;
}

.bar .fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--c);
  transition: width 0.4s ease;
}

.acct .meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft, #3c4a63);
}

.acct .meta .d { color: var(--dep, #10B981); }
.acct .meta .w { color: var(--wd, #EF4444); }

/* Leaks */
.leaks {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.06);
  border: 1.5px solid #fee2e2;
  overflow: hidden;
}

.leaks .head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #FEF2F2, #FFF7F7);
  border-bottom: 1px solid #FEE2E2;
}

.leaks .head .ic {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--wd, #EF4444);
  color: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.leaks .head h2 {
  font-size: 16.5px;
  font-weight: 800;
  color: #991b1b;
  margin: 0;
}

.leaks .head p {
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.6;
  margin: 2px 0 0;
}

.leak {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.leak:last-child { border-bottom: none; }

.leak .minus {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: var(--wd, #EF4444);
  color: #ffffff;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.leak .tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--c);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.leak .tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.leak p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink, #0b367b);
  margin: 0;
}

/* Quote */
.quote {
  margin: 28px 0 0;
  text-align: center;
  padding: 24px 20px;
  background: #f8fbff;
  border: 1px dashed #dbe6f4;
  border-radius: 22px;
}

.quote .mark {
  font-size: 38px;
  line-height: 1;
  color: #93c5fd;
  font-family: Georgia, serif;
}

.quote p {
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-soft, #3c4a63);
  margin: 0;
}

.quote b {
  color: var(--navy, #0b367b);
  font-weight: 800;
}

/* Advisor Card (WealthBuddy Royal Executive Blue with Decorative Motif) */
.advisor {
  margin: 28px 0 0;
  border-radius: 26px;
  padding: 26px 22px;
  background: 
    radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 0, transparent 20px),
    linear-gradient(135deg, #0b367b 0%, #164fa8 55%, #1d57b8 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px rgba(11, 54, 123, 0.22);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.advisor::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.advisor::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.advisor .badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.advisor h2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  color: #ffffff;
}

.advisor > p {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.btn-line {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: #06C755;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.35);
  position: relative;
  z-index: 1;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-line:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(6, 199, 85, 0.45);
}

.btn-line:active { transform: scale(0.98); }

.advisor .row2 {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.btn-call {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 8px;
  border-radius: 12px;
  white-space: nowrap;
  transition: all 0.18s;
}

.btn-call:hover { background: rgba(255, 255, 255, 0.22); }

.btn-next2 {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  background: #ffffff;
  color: #0b367b;
  font-size: 13.5px;
  font-weight: 800;
  padding: 12px 8px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.12);
  transition: all 0.18s;
}

.btn-next2:hover { background: #f8fbff; }

.advisor .privacy {
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.advisor .privacy svg { flex-shrink: 0; margin-top: 2px; }

/* Result Sub-Actions (Soft & Minimal Utility Links) */
.res-sub-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 0;
  padding: 4px 0;
}

.btn-sub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft, #5a6e8c);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.btn-sub-link:hover {
  color: var(--lbc-accent, #1d57b8);
  background: var(--lbc-accent-soft, #eef4ff);
}

.btn-sub-link:active {
  transform: scale(0.97);
}

.sub-sep {
  color: #cbd5e1;
  font-weight: 700;
  user-select: none;
}

/* References */
details.refs {
  margin: 22px 0 0;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(11, 54, 123, 0.04);
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
}

details.refs summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 18px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft, #3c4a63);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details.refs summary::-webkit-details-marker { display: none; }
details.refs summary .chev { transition: transform 0.2s; }
details.refs[open] summary .chev { transform: rotate(180deg); }

details.refs .body {
  padding: 0 18px 16px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-faint, #64769a);
}

.refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.refs-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(11, 54, 123, 0.07);
}

.refs-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.refs-list li b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy, #0b367b);
}

.refs-list li span {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-faint, #64769a);
}

/* Sticky Bottom Bar for Result */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(11, 54, 123, 0.06);
}

.btn-ghost2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #dbe6f4;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.04);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0b367b);
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-ghost2:hover { background: #f8fbff; }

.btn-save {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(135deg, #0b367b, #1d57b8);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11, 54, 123, 0.25);
  transition: all 0.2s ease;
}

.btn-save:hover {
  background: linear-gradient(135deg, #07214d, #164fa8);
  transform: translateY(-1px);
}

.lbc-sum-desc {
  margin: var(--s2) 0 0;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--lbc-body);
}

.lbc-sum-math {
  margin: var(--s2) 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--lbc-border);
  font-size: 0.86rem;
  color: var(--lbc-muted);
}

.lbc-sum-math b { font-weight: 800; color: var(--lbc-ink); }

/* Leaks section */
.lbc-leak-card {
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--lbc-card);
  border: 1.5px solid var(--lbc-border);
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(11, 54, 123, 0.06);
}

.lbc-leak-card h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--lbc-ink);
}

.lbc-leak-hint {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--lbc-muted);
}

.lbc-leak-list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.lbc-leak-list li {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  padding: 13px var(--s3);
  border-radius: 12px;
  background: var(--lbc-tint);
  border: 1px solid var(--lbc-border);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--lbc-body);
}

.lbc-tick {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lbc-warn);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.lbc-leak-who {
  display: block;
  margin-bottom: 2px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--acc, var(--lbc-muted));
}

.lbc-allgood {
  margin-top: var(--s3);
  padding: 16px var(--s3);
  border-radius: 12px;
  background: var(--lbc-good-soft);
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--lbc-body);
}

.lbc-quote {
  margin: var(--s5) 0 0;
  padding: var(--s5) var(--s4);
  text-align: center;
  border-top: 1px solid var(--lbc-border);
  border-bottom: 1px solid var(--lbc-border);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
  line-height: 2;
  color: var(--lbc-body);
}

.lbc-quote em {
  font-style: normal;
  font-weight: 800;
  color: var(--lbc-ink);
}

/* ===================================================================
   CONTACT CTA — CLAUDE.md §8 priority 1
   =================================================================== */
.lbc-cta {
  margin-top: var(--s5);
  padding: var(--s5) var(--s4);
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(160deg, #e8f2fd 0%, #f4f9fe 100%);
  border: 1.5px solid var(--lbc-border);
  box-shadow: 0 8px 32px rgba(11, 54, 123, 0.08);
}

.lbc-cta-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lbc-accent);
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--lbc-border);
  margin-bottom: var(--s2);
}

.lbc-cta h3 {
  margin: 0;
  font-size: clamp(1.22rem, 1.2vw + 1rem, 1.55rem);
  font-weight: 800;
  color: var(--lbc-ink);
  text-wrap: balance;
}

.lbc-cta p {
  margin: var(--s2) auto 0;
  max-width: 54ch;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--lbc-body);
}

.lbc-cta-actions {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
}

.lbc-cta-note {
  margin-top: var(--s3);
  font-size: 0.84rem;
  color: var(--lbc-muted);
}

.lbc-res-actions {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
}

.lbc-refs {
  margin-top: var(--s5);
  padding-bottom: var(--s4);
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--lbc-muted);
  text-align: center;
}

.lbc-refs strong { color: var(--lbc-body); }

/* ===================================================================
   FOOTER (1-Row Compact Segmented Bar · High Touch Affordance)
   =================================================================== */
.lbc-footer {
  border-top: 1px solid var(--lbc-border);
  background: var(--lbc-card);
  padding-block: var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: var(--lbc-muted);
}

.lbc-footer-copy {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--lbc-muted);
  font-weight: 500;
}

.lbc-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  padding: 4px;
  background: #f1f6fc;
  border: 1px solid rgba(11, 54, 123, 0.1);
  border-radius: 999px;
  gap: 4px;
}

.lbc-footer-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  min-height: 36px;
  border-radius: 999px;
  color: var(--lbc-accent);
  font-size: 0.80rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s var(--lbc-ease);
  -webkit-tap-highlight-color: transparent;
}

.lbc-footer-tab svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

.lbc-footer-tab:hover {
  background: #ffffff;
  color: #0b367b;
  box-shadow: 0 2px 6px rgba(11, 54, 123, 0.08);
}

.lbc-footer-tab:active {
  transform: scale(0.96);
  background: #ffffff;
}

/* Hide footer when actively doing the questionnaire to keep UI uncluttered */
body:has(#lbc-sc-quiz.is-on) .lbc-footer {
  display: none;
}

/* On Result screen, add bottom padding so footer is fully visible above fixed .cta-bar */
body:has(#lbc-sc-result.is-on) .lbc-footer {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ===================================================================
   MODAL DIALOGS (SAVE IMAGE & SHARE)
   =================================================================== */
.lbc-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(11, 54, 123, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lbcFade 0.25s var(--lbc-ease) both;
}

.lbc-sheet[hidden] { display: none; }

@keyframes lbcFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lbc-sheet-inner {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s4);
  background: var(--lbc-card);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(11, 54, 123, 0.22);
  text-align: center;
  position: relative;
  animation: lbcPop 0.3s var(--lbc-bounce) both;
}

@keyframes lbcPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lbc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
  text-align: left;
}

.lbc-sheet-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--lbc-ink);
}

.lbc-modal-x {
  border: 0;
  background: var(--lbc-tint);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--lbc-muted);
  font-size: 0.9rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

.lbc-modal-x:hover {
  background: var(--lbc-accent-soft);
  color: var(--lbc-ink);
}

.lbc-sheet-preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--lbc-border);
  box-shadow: 0 4px 20px rgba(11, 54, 123, 0.1);
  background: #f8fbff;
}

.lbc-sheet-save-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 54, 123, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* พรีวิวสูงกว่าจอมือถือ ถ้าโชว์เต็มใบ ปุ่ม "ส่งรูปนี้ให้เพื่อน" จะไปอยู่ใต้จอ
   จึงตัดไว้แค่ส่วนหัว (ส่วนที่บอกว่าเป็นผลของใคร) แล้วไล่เฉดบอกว่ายังมีต่อ */
.lbc-sheet-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: cover;
  object-position: top center;
  -webkit-touch-callout: default;
  user-select: auto;
}

.lbc-sheet-preview::after {
  content: "💡 กดค้างที่รูปเพื่อบันทึก หรือกดปุ่มด้านล่าง";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--lbc-ink, #0b367b);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 55%);
  pointer-events: none;
  text-align: center;
}

.lbc-sheet-tip {
  margin: var(--s3) 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--lbc-muted);
  text-align: left;
  background: var(--lbc-tint);
  padding: 10px 14px;
  border-radius: 10px;
}

.lbc-sheet-tip b { color: var(--lbc-ink); }

.lbc-sheet-btns {
  margin-top: var(--s3);
  display: grid;
  gap: var(--s2);
}

/* Share modal */
.lbc-share-sub {
  margin: 0 0 var(--s3);
  font-size: 0.92rem;
  color: var(--lbc-muted);
  text-align: left;
}

.lbc-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lbc-share-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--lbc-border);
  background: var(--lbc-tint);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lbc-ink);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s var(--lbc-ease);
  font-family: inherit;
}

.lbc-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 54, 123, 0.1);
  border-color: var(--lbc-accent);
}

.lbc-share-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.lbc-share-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lbc-share-line:hover { background: #ebfaf0; border-color: #06c755; color: #059b43; }
.lbc-share-fb:hover { background: #edf2fa; border-color: #1877f2; color: #1877f2; }
.lbc-share-x:hover { background: #f0f0f0; border-color: #000; color: #000; }
.lbc-share-copy:hover { background: var(--lbc-accent-soft); border-color: var(--lbc-accent); color: var(--lbc-accent); }

.lbc-share-foot {
  margin-top: var(--s3);
}

.lbc-share-foot .lbc-btn { width: 100%; }

/* ===================================================================
   SHARE SHEET v2 · "แชร์ผลลัพธ์สมดุลชีวิต" (Clean & Soft UX)
   =================================================================== */
#lbc-sheet .lbc-sheet-inner {
  max-width: 440px;
  padding: 22px 20px;
}

.lbc-sheet-subtitle {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lbc-muted);
}

.lbc-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--s3) 0 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: var(--lbc-tint);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lbc-opt:hover {
  border-color: var(--lbc-accent);
  background: #ffffff;
}

.lbc-opt input {
  flex: none;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--lbc-accent);
  cursor: pointer;
}

.lbc-opt b {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--lbc-ink);
}

.lbc-opt small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--lbc-muted);
}

.lbc-sheet-actions {
  margin-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 1 Hero Action Button */
.lbc-btn-share-hero {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, #0b367b, #1d57b8);
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 14px 20px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 54, 123, 0.22);
  transition: all 0.2s ease;
}

.lbc-btn-share-hero:hover {
  background: linear-gradient(135deg, #07214d, #164fa8);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(11, 54, 123, 0.28);
}

.lbc-btn-share-hero:active {
  transform: scale(0.98);
}

/* Quick Social Share Buttons */
.lbc-social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 2px;
}

.lbc-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border-radius: 10px;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.lbc-social-line {
  background: #ebfaf0;
  color: #059b43;
  border-color: #c7edd4;
}
.lbc-social-line:hover {
  background: #06c755;
  color: #ffffff;
  border-color: #06c755;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(6, 199, 85, 0.2);
}

.lbc-social-fb {
  background: #edf4ff;
  color: #1877f2;
  border-color: #d0e1fd;
}
.lbc-social-fb:hover {
  background: #1877f2;
  color: #ffffff;
  border-color: #1877f2;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.2);
}

.lbc-social-x {
  background: #f4f4f5;
  color: #18181b;
  border-color: #e4e4e7;
}
.lbc-social-x:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Secondary Micro-Pills (1 Single Clean Row) */
.lbc-pill-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.lbc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lbc-ink);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.lbc-pill-btn:hover {
  background: #f8fbff;
  border-color: var(--lbc-accent);
  color: var(--lbc-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(11, 54, 123, 0.08);
}

.lbc-pill-btn:active {
  transform: scale(0.97);
}

.lbc-pill-btn svg {
  flex-shrink: 0;
  color: var(--lbc-muted);
  transition: color 0.18s ease;
}

.lbc-pill-btn:hover svg {
  color: var(--lbc-accent);
}

/* ===================================================================
   SHARED-RESULT BANNER · เปิดผลของคนอื่นจากลิงก์ #r=
   =================================================================== */
.shared-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1.5px solid var(--lbc-accent);
  background: var(--lbc-accent-soft);
}

.shared-banner[hidden] { display: none; }

.shared-banner .ic {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--lbc-accent);
  color: #ffffff;
}

.shared-banner .txt { flex: 1 1 200px; min-width: 0; }

.shared-banner .txt b {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--lbc-ink);
}

.shared-banner .txt p {
  margin: 3px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--lbc-muted);
}

.shared-banner .btn {
  flex: none;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--lbc-accent);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}

.shared-banner .btn:hover { background: var(--lbc-accent-hover); }

@media (max-width: 480px) {
  .shared-banner .btn { width: 100%; }
}

.print-only { display: none; }

/* Toast */
.lbc-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 100;
  background: var(--lbc-ink);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(11, 54, 123, 0.35);
  animation: lbcToastIn 0.3s var(--lbc-bounce) both;
}

.lbc-toast[hidden] { display: none; }

@keyframes lbcToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===================================================================
   ACCESSIBILITY & FOCUS
   =================================================================== */
body.life-balance-check-page :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--lbc-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ===================================================================
   RESPONSIVE (MOBILE OPTIMIZATION)
   =================================================================== */
@media (max-width: 600px) {
  .lbc-topbar-inner {
    min-height: 48px;
    padding-block: 4px;
    gap: 4px;
  }
  .lbc-top-back {
    width: 36px;
    height: 36px;
  }
  .lbc-top-back svg {
    width: 20px;
    height: 20px;
  }
  .lbc-top-title {
    font-size: 0.84rem;
  }
  .lbc-top-actions {
    gap: 6px;
  }
  .lbc-bal-chip {
    padding: 4px 10px;
    gap: 5px;
  }
  .lbc-bal-chip .lbc-bal-lab {
    font-size: 0.72rem;
  }
  .lbc-bal-val {
    font-size: 0.95rem;
  }
  .lbc-btn-icon {
    width: 34px;
    height: 34px;
  }
  .lbc-btn-icon svg {
    width: 16px;
    height: 16px;
  }
  .lbc-shell { padding-inline: var(--s3); }
  .lbc-hero { padding-block: var(--s6) var(--s1); }
  .lbc-badge { width: 48px; height: 48px; border-radius: 14px; }
  .lbc-badge svg { width: 26px; height: 26px; }
  .lbc-btn { padding: 0 var(--s3); font-size: 0.95rem; }
  .lbc-btn-lg { width: 100%; }
  .lbc-intro-action { flex-direction: column; }
  .lbc-intro-action .lbc-btn { width: 100%; }
  .lbc-res-actions .lbc-btn,
  .lbc-cta-actions .lbc-btn { flex: 1 1 auto; width: 100%; }
  .lbc-share-grid { grid-template-columns: 1fr; }
  .lbc-acct-line { padding: 14px var(--s3); }
  #lbc-sc-intro { padding-bottom: 12px; }
  #lbc-sc-result { padding-bottom: 12px; }
  .lbc-intro-cta-bar { margin-top: 18px; gap: 8px; }
  .lbc-footer {
    padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#lbc-sc-result.is-on) .lbc-footer {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  .lbc-footer-copy {
    font-size: 0.74rem;
    margin-bottom: 8px;
  }
  .lbc-footer-bar {
    max-width: 100%;
    padding: 3px;
    gap: 3px;
  }
  .lbc-footer-tab {
    padding: 6px 4px;
    font-size: 0.74rem;
    gap: 4px;
    min-height: 33px;
  }
  .lbc-footer-tab svg {
    width: 12px;
    height: 12px;
  }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
/* ===================================================================
   PRINT · แผ่นสรุป A4 (ใช้ "บันทึกเป็น PDF" ได้เลย)
   เดิม @media print อ้างคลาสที่ไม่มีอยู่จริง (.lbc-res-actions, .lbc-cta-actions)
   ปุ่มและแถบล่างจึงติดไปในกระดาษด้วย — บล็อกนี้เขียนใหม่ทั้งหมด
   =================================================================== */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  /* สิ่งที่ไม่ควรอยู่บนกระดาษ */
  .lbc-topbar,
  .lbc-rail,
  .lbc-navbar,
  .lbc-bal-chip,
  .cta-bar,
  .actions,
  .lbc-sheet,
  .lbc-toast,
  .lbc-footer,
  .shared-banner .btn,
  details.refs .chev { display: none !important; }

  html, body { background: #ffffff !important; }

  body.life-balance-check-page {
    color: #10233f !important;
    font-size: 10.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .lbc-main { padding: 0 !important; }
  .lbc-shell { max-width: none !important; padding: 0 !important; }

  /* หัว–ท้ายกระดาษ (โชว์เฉพาะตอนพิมพ์) */
  .print-only { display: block !important; }

  .print-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10pt;
    padding-bottom: 6pt;
    border-bottom: 1.5pt solid #0b367b;
  }

  .print-head b { font-size: 14pt; font-weight: 800; color: #0b367b; }
  .print-head span { font-size: 9pt; color: #64769a; }

  .print-foot {
    margin-top: 10pt;
    padding-top: 6pt;
    border-top: 1pt solid #dbe6f4;
    font-size: 8.5pt;
    color: #64769a;
    text-align: center;
  }

  /* การ์ดทั้งหมด: เรียบ อ่านง่าย ไม่ตกหน้า */
  .hero, .verdict, .radar-card, .acct, .leak, .advisor, details.refs, .shared-banner {
    box-shadow: none !important;
    border: 1pt solid #d8e3f2 !important;
    background: #ffffff !important;
    break-inside: avoid;
    page-break-inside: avoid;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* กล่องรอยรั่วยาวกว่าหน้ากระดาษได้ ปล่อยให้ไหลข้ามหน้า
     ไม่งั้นหัวข้อจะค้างอยู่หน้าเดิมแล้วเหลือที่ว่างครึ่งหน้า */
  .leaks {
    box-shadow: none !important;
    border: 1pt solid #d8e3f2 !important;
    background: #ffffff !important;
    break-inside: auto;
    page-break-inside: auto;
  }

  .sect-title { break-after: avoid; page-break-after: avoid; }

  /* hero เป็นตัวอักษรขาวบนพื้นไล่สี — บนกระดาษต้องกลับเป็นตัวเข้มบนพื้นขาว */
  .hero { padding: 10pt 12pt !important; margin-bottom: 8pt !important; }
  .hero::before, .hero::after { display: none !important; }
  .hero h1 { font-size: 15pt !important; color: #0b367b !important; }
  .hero .eyebrow { font-size: 9pt !important; color: #64769a !important; }
  .hero p { font-size: 9pt !important; color: #3c4a63 !important; }
  .hero-chips { margin-top: 6pt !important; }
  .hero-chips span {
    background: #f5f9ff !important;
    border: 1pt solid #d8e3f2 !important;
    color: #0b367b !important;
    box-shadow: none !important;
    font-size: 9pt !important;
  }
  .hero-chips b { color: #1d57b8 !important; }

  .verdict { margin: 0 0 10pt !important; padding: 10pt 12pt !important; }
  .verdict h2 { font-size: 12pt !important; }
  .verdict p { font-size: 9.5pt !important; }

  /* กราฟ: บีบให้พอดีครึ่งหน้าบน */
  .radar-card { padding: 6pt !important; margin-bottom: 10pt !important; }
  .radar-card svg { width: 100% !important; height: auto !important; max-height: 88mm; }
  .lbc-poly { animation: none !important; opacity: 1 !important; transform: none !important; }
  .radar-note { font-size: 8pt !important; }

  /* 4 บัญชี: 2 คอลัมน์ ประหยัดกระดาษ */
  #lbc-summary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8pt !important; align-items: start; }
  .acct { padding: 8pt 10pt !important; margin-bottom: 0 !important; }
  .acct h3 { font-size: 10.5pt !important; }
  .acct p { font-size: 8.5pt !important; }
  .acct .score { font-size: 14pt !important; }

  .sect-title h2 { font-size: 11.5pt !important; }
  .leaks { padding: 8pt 10pt !important; }
  .leak p { font-size: 9pt !important; }

  /* CTA ที่ปรึกษา: เหลือบรรทัดเดียวพอ — บนกระดาษเบอร์โทรมีประโยชน์จริง */
  .advisor { padding: 8pt 10pt !important; margin-top: 8pt !important; }
  .advisor::after, .advisor .badge { display: none !important; }
  /* การ์ดนี้เป็นตัวอักษรขาวบนพื้นเข้ม — บนกระดาษต้องกลับสีตัวอักษรด้วย */
  .advisor h2 { font-size: 11pt !important; color: #0b367b !important; margin-bottom: 2pt !important; }
  .advisor > p, .advisor .privacy { display: none !important; }
  .advisor .btn-line, .advisor .row2 .btn-next2 { display: none !important; }
  .advisor .row2 { margin: 4pt 0 0 !important; }
  .advisor .row2 .btn-call {
    border: 0 !important;
    background: none !important;
    color: #0b367b !important;
    padding: 0 !important;
    font-size: 10pt !important;
  }

  /* แหล่งอ้างอิง: กางให้เห็นบนกระดาษ */
  details.refs { margin-top: 8pt !important; }
  details.refs > summary { font-size: 9.5pt !important; list-style: none; }
  details.refs .body { display: block !important; font-size: 7.8pt !important; line-height: 1.5 !important; }

  .shared-banner { margin-bottom: 8pt !important; }
  .shared-banner .txt p { font-size: 8.5pt !important; }

  .lbc-reveal, .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.life-balance-check-page *,
  body.life-balance-check-page *::before,
  body.life-balance-check-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .lbc-reveal { opacity: 1; transform: none; }
  .lbc-poly { opacity: 1; transform: none; }
}