/* ==========================================================================
   FARLENDAR USER PORTAL & WEB APP — HERITAGE & ELEMENTAL DESIGN SYSTEM V5
   Themes: LIGHT_HERITAGE, DARK_MIDNIGHT / DARK_ANCESTRAL, DARK_AGARWOOD,
           JADE_FESTIVAL (Mộc), ROYAL_GOLD_KIM (Kim), OCEAN_SAPPHIRE_THUY (Thủy),
           SYSTEM_AUTO (OS Light/Dark)
   ========================================================================== */

:root {
  color-scheme: light dark;
  --bg-primary: var(--fl-bg, #FBF8F3);
  --bg-secondary: var(--fl-surface-2, #F4EEE6);
  --bg-surface: var(--fl-surface, #FFF);
  --bg-surface-elevated: var(--fl-surface, #FFF);
  --bg-elevated: var(--fl-surface-2, #F4EEE6);
  --bg-glass: rgba(251, 248, 243, 0.94);
  --text-primary: var(--fl-text, #2A211C);
  --text-secondary: var(--fl-muted, #6B5D52);
  --text-muted: var(--fl-muted, #6B5D52);
  --vermilion: var(--fl-primary, #8B1E1E);
  --vermilion-bright: #A62424;
  --vermilion-soft: rgba(139, 30, 30, 0.10);
  --gold: var(--fl-gold-text, #7A5512);
  --gold-bright: var(--fl-gold-icon, #B8892B);
  --gold-soft: rgba(184, 137, 43, 0.14);
  --jade: var(--fl-success, #1F6B4A);
  --jade-soft: rgba(31, 107, 74, 0.12);
  --amber: #B45309;
  --amber-soft: rgba(180, 83, 9, 0.14);
  --danger: var(--fl-danger, #B42318);
  --danger-soft: rgba(180, 35, 24, 0.12);
  --border-color: var(--fl-border, #E6DDD1);
  --border-subtle: var(--fl-border, #E6DDD1);
  --border-gold: var(--fl-border, #E6DDD1);
  --border-strong: rgba(139, 30, 30, 0.35);
  --shadow-card: 0 4px 16px rgba(42, 33, 28, 0.06);
  --shadow-floating: 0 10px 28px rgba(42, 33, 28, 0.12);
  --header-gradient: var(--fl-primary, #8B1E1E);
  --font-scale: 1;
  --font-serif: "Noto Serif", Georgia, serif;
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --scrollbar-thumb: #B8892B;
  --scrollbar-track: rgba(244, 238, 230, 0.65);
  --ambient-motif-pattern: none;

  accent-color: var(--vermilion);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme="LIGHT_HERITAGE"] {
  color-scheme: light;
  --bg-primary: var(--fl-bg, #FBF8F3);
  --bg-secondary: var(--fl-surface-2, #F4EEE6);
  --bg-surface: var(--fl-surface, #FFF);
  --bg-surface-elevated: var(--fl-surface, #FFF);
  --bg-elevated: var(--fl-surface-2, #F4EEE6);
  --bg-glass: rgba(251, 248, 243, 0.94);
  --text-primary: var(--fl-text, #2A211C);
  --text-secondary: var(--fl-muted, #6B5D52);
  --text-muted: var(--fl-muted, #6B5D52);
  --vermilion: var(--fl-primary, #8B1E1E);
  --vermilion-bright: #A62424;
  --vermilion-soft: rgba(139, 30, 30, 0.10);
  --gold: var(--fl-gold-text, #7A5512);
  --gold-bright: var(--fl-gold-icon, #B8892B);
  --gold-soft: rgba(184, 137, 43, 0.14);
  --jade: var(--fl-success, #1F6B4A);
  --jade-soft: rgba(31, 107, 74, 0.12);
  --amber: #B45309;
  --amber-soft: rgba(180, 83, 9, 0.14);
  --danger: var(--fl-danger, #B42318);
  --danger-soft: rgba(180, 35, 24, 0.12);
  --border-color: var(--fl-border, #E6DDD1);
  --border-subtle: var(--fl-border, #E6DDD1);
  --border-gold: var(--fl-border, #E6DDD1);
  --border-strong: rgba(139, 30, 30, 0.35);
  --shadow-card: 0 4px 16px rgba(42, 33, 28, 0.06);
  --shadow-floating: 0 10px 28px rgba(42, 33, 28, 0.12);
  --header-gradient: var(--fl-primary, #8B1E1E);
  --scrollbar-thumb: #9E1B1B;
  --scrollbar-track: #F3EAD6;
}

[data-theme="DARK_MIDNIGHT"],
[data-theme="DARK_ANCESTRAL"] {
  color-scheme: dark;
  --bg-primary: #0D111A;
  --bg-secondary: #151C2C;
  --bg-surface: rgba(22, 30, 46, 0.94);
  --bg-surface-elevated: #1D283E;
  --bg-elevated: #1D283E;
  --bg-glass: rgba(15, 21, 35, 0.88);
  --text-primary: #F6EFE2;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --vermilion: #E5484D;
  --vermilion-bright: #FF6369;
  --vermilion-soft: rgba(229, 72, 77, 0.16);
  --gold: #EAB308;
  --gold-bright: #FACC15;
  --gold-soft: rgba(250, 204, 21, 0.15);
  --jade: #34D399;
  --jade-soft: rgba(52, 211, 153, 0.15);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.16);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --border-color: rgba(234, 179, 8, 0.24);
  --border-subtle: rgba(234, 179, 8, 0.20);
  --border-gold: rgba(250, 204, 21, 0.45);
  --border-strong: rgba(229, 72, 77, 0.42);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-floating: 0 20px 50px rgba(0, 0, 0, 0.65);
  --header-gradient: linear-gradient(135deg, #1E1324 0%, #58151C 55%, #161E31 100%);
  --scrollbar-thumb: #EAB308;
  --scrollbar-track: #151C2C;
}

[data-theme="DARK_AGARWOOD"] {
  color-scheme: dark;
  --bg-primary: #18110D;
  --bg-secondary: #241914;
  --bg-surface: rgba(38, 26, 20, 0.94);
  --bg-surface-elevated: #312119;
  --bg-elevated: #312119;
  --bg-glass: rgba(26, 18, 13, 0.90);
  --text-primary: #F7ECDC;
  --text-secondary: #DFC7A9;
  --text-muted: #B09272;
  --vermilion: #DC3535;
  --vermilion-bright: #F05252;
  --vermilion-soft: rgba(220, 53, 53, 0.18);
  --gold: #E5B84B;
  --gold-bright: #F5CE62;
  --gold-soft: rgba(229, 184, 75, 0.18);
  --jade: #4ADE80;
  --jade-soft: rgba(74, 222, 128, 0.15);
  --amber: #FBBF24;
  --amber-soft: rgba(251, 191, 36, 0.16);
  --danger: #FB7185;
  --danger-soft: rgba(251, 113, 133, 0.18);
  --border-color: rgba(229, 184, 75, 0.28);
  --border-subtle: rgba(229, 184, 75, 0.22);
  --border-gold: rgba(245, 206, 98, 0.48);
  --border-strong: rgba(220, 53, 53, 0.45);
  --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.50);
  --shadow-floating: 0 20px 54px rgba(0, 0, 0, 0.72);
  --header-gradient: linear-gradient(135deg, #3D1210 0%, #6D1B17 50%, #271811 100%);
  --scrollbar-thumb: #E5B84B;
  --scrollbar-track: #241914;
}

/* Chủ đề Ngọc Bích Lễ Hội — Tương hợp Mệnh Mộc & Hỏa */
[data-theme="JADE_FESTIVAL"] {
  color-scheme: light;
  --bg-primary: #F0FAF4;
  --bg-secondary: #E1F4E9;
  --bg-surface: rgba(247, 253, 250, 0.94);
  --bg-surface-elevated: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(240, 250, 244, 0.88);
  --text-primary: #0F2E1E;
  --text-secondary: #1E4D36;
  --text-muted: #4A7A61;
  --vermilion: #047857;
  --vermilion-bright: #059669;
  --vermilion-soft: rgba(4, 120, 87, 0.11);
  --gold: #B45309;
  --gold-bright: #D97706;
  --gold-soft: rgba(217, 119, 6, 0.15);
  --jade: #065F46;
  --jade-soft: rgba(6, 95, 70, 0.12);
  --amber: #9E1B1B;
  --amber-soft: rgba(158, 27, 27, 0.12);
  --danger: #B91C1C;
  --danger-soft: rgba(185, 28, 28, 0.12);
  --border-color: rgba(4, 120, 87, 0.25);
  --border-subtle: rgba(4, 120, 87, 0.20);
  --border-gold: rgba(217, 119, 6, 0.45);
  --border-strong: rgba(4, 120, 87, 0.38);
  --shadow-card: 0 10px 28px rgba(15, 46, 30, 0.08);
  --shadow-floating: 0 16px 42px rgba(15, 46, 30, 0.16);
  --header-gradient: linear-gradient(135deg, #064E3B 0%, #047857 52%, #115E59 100%);
  --scrollbar-thumb: #047857;
  --scrollbar-track: #E1F4E9;
}

/* Chủ đề Bạch Kim Hoàng Gia — Tương hợp Mệnh Kim & Thủy */
[data-theme="ROYAL_GOLD_KIM"] {
  color-scheme: light;
  --bg-primary: #F8F7F2;
  --bg-secondary: #EDEAE0;
  --bg-surface: rgba(255, 255, 252, 0.95);
  --bg-surface-elevated: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(248, 247, 242, 0.90);
  --text-primary: #1F242D;
  --text-secondary: #3F4756;
  --text-muted: #687385;
  --vermilion: #92400E;
  --vermilion-bright: #B45309;
  --vermilion-soft: rgba(180, 83, 9, 0.11);
  --gold: #A16207;
  --gold-bright: #CA8A04;
  --gold-soft: rgba(202, 138, 4, 0.16);
  --jade: #0F766E;
  --jade-soft: rgba(15, 118, 110, 0.12);
  --amber: #854D0E;
  --amber-soft: rgba(133, 77, 14, 0.14);
  --danger: #B91C1C;
  --danger-soft: rgba(185, 28, 28, 0.12);
  --border-color: rgba(161, 98, 7, 0.28);
  --border-subtle: rgba(161, 98, 7, 0.22);
  --border-gold: rgba(202, 138, 4, 0.50);
  --border-strong: rgba(146, 64, 14, 0.36);
  --shadow-card: 0 10px 28px rgba(31, 36, 45, 0.08);
  --shadow-floating: 0 16px 42px rgba(31, 36, 45, 0.16);
  --header-gradient: linear-gradient(135deg, #451A03 0%, #92400E 52%, #334155 100%);
  --scrollbar-thumb: #92400E;
  --scrollbar-track: #EDEAE0;
}

/* Chủ đề Lam Ngọc Huyền Thủy — Tương hợp Mệnh Thủy & Mộc */
[data-theme="OCEAN_SAPPHIRE_THUY"] {
  color-scheme: dark;
  --bg-primary: #071324;
  --bg-secondary: #0D213A;
  --bg-surface: rgba(15, 36, 64, 0.94);
  --bg-surface-elevated: #142E52;
  --bg-elevated: #142E52;
  --bg-glass: rgba(9, 24, 44, 0.88);
  --text-primary: #F0F7FF;
  --text-secondary: #BAE6FD;
  --text-muted: #7DD3FC;
  --vermilion: #38BDF8;
  --vermilion-bright: #7DD3FC;
  --vermilion-soft: rgba(56, 189, 248, 0.16);
  --gold: #FACC15;
  --gold-bright: #FDE047;
  --gold-soft: rgba(250, 204, 21, 0.16);
  --jade: #34D399;
  --jade-soft: rgba(52, 211, 153, 0.15);
  --amber: #F59E0B;
  --amber-soft: rgba(245, 158, 11, 0.16);
  --danger: #FB7185;
  --danger-soft: rgba(251, 113, 133, 0.18);
  --border-color: rgba(56, 189, 248, 0.26);
  --border-subtle: rgba(56, 189, 248, 0.20);
  --border-gold: rgba(250, 204, 21, 0.45);
  --border-strong: rgba(56, 189, 248, 0.44);
  --shadow-card: 0 12px 32px rgba(2, 8, 20, 0.48);
  --shadow-floating: 0 20px 54px rgba(2, 8, 20, 0.72);
  --header-gradient: linear-gradient(135deg, #082F49 0%, #1E3A8A 54%, #0F172A 100%);
  --scrollbar-thumb: #38BDF8;
  --scrollbar-track: #0D213A;
}

/* Legacy WebKit Scrollbar Fallback when scrollbar-color is unsupported */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

/* Font Scale Modes (A .. A4 & aliases A+, A++) */
[data-font-scale="A"]   { --font-scale: 1; }
[data-font-scale="A1"],
[data-font-scale="A+"]  { --font-scale: 1.12; }
[data-font-scale="A2"],
[data-font-scale="A++"] { --font-scale: 1.24; }
[data-font-scale="A3"]  { --font-scale: 1.38; }
[data-font-scale="A4"]  { --font-scale: 1.52; }

/* Cultural Ambient Background Motifs (SVG Data URI Watermarks) */
[data-motif="DONG_SON_DRUM"] {
  --ambient-motif-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.075' stroke-width='1.2'%3E%3Ccircle cx='90' cy='90' r='76'/%3E%3Ccircle cx='90' cy='90' r='56' stroke-dasharray='4 4'/%3E%3Ccircle cx='90' cy='90' r='34'/%3E%3Ccircle cx='90' cy='90' r='12'/%3E%3Cpath d='M90 14v152M14 90h152M36 36l108 108M144 36L36 144'/%3E%3C/g%3E%3C/svg%3E");
}
[data-motif="LOTUS_ZEN"] {
  --ambient-motif-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.08' stroke-width='1.3'%3E%3Cpath d='M70 28c14 20 14 44 0 64-14-20-14-44 0-64Z'/%3E%3Cpath d='M70 92c18-12 34-10 44 4-16 8-30 6-44-4ZM70 92c-18-12-34-10-44 4 16 8 30 6 44-4Z'/%3E%3Ccircle cx='70' cy='106' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
[data-motif="ROYAL_CLOUD"] {
  --ambient-motif-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.08' stroke-width='1.4'%3E%3Cpath d='M25 65a18 18 0 0 1 28-15 24 24 0 0 1 46 0 18 18 0 0 1 28 15H25Z'/%3E%3Ccircle cx='80' cy='50' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
[data-motif="BAMBOO_SCHOLAR"] {
  --ambient-motif-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160' viewBox='0 0 120 160'%3E%3Cg fill='none' stroke='%231B6B45' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M36 0v160M30 40h12M30 95h12M36 45c14-8 26-6 34 2-12 6-22 6-34-2ZM36 100c-14-8-24-6-30 2 10 6 20 6 30-2Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-motif="MINIMAL_SILK"] {
  --ambient-motif-pattern: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: calc(15.5px * var(--font-scale));
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 400 var(--fs-3, 17px)/1.6 var(--font-sans);
  background-color: var(--fl-bg, #FBF8F3);
  color: var(--fl-text, #2A211C);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, .serif-title {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: var(--fs-6, 30px); }
h2 { font-size: var(--fs-5, 24px); }
h3 { font-size: var(--fs-4, 20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually Hidden Utility for Screen Readers */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Accessible Focus Ring */
:where(a:any-link, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ==========================================================================
   PROMINENT FARLENDAR BRAND WORDMARK & CONTINUOUS FEATURE MARQUEE
   ========================================================================== */
.farlendar-brand-showcase {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.36), rgba(92, 16, 16, 0.55));
  border: 2px solid #FACC15;
  border-radius: 18px;
  padding: 0.55rem 1.15rem;
  box-shadow: 0 8px 28px rgba(250, 204, 21, 0.25), inset 0 0 18px rgba(250, 204, 21, 0.15);
}

.farlendar-brand-emblem {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FDE047 0%, #D4AF37 55%, #B45309 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.farlendar-brand-wordmark {
  font-family: var(--font-serif);
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #FFFDF7 0%, #FDE047 45%, #F59E0B 80%, #FFFDF7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(250, 204, 21, 0.38));
  line-height: 1.05;
}

.farlendar-brand-tagline {
  font-size: 0.74rem;
  font-weight: 700;
  color: #FDE047;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Continuous Feature Marquee on Login Hero */
.feature-marquee-viewport {
  margin-top: 1.55rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0.35rem 0;
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}

.feature-marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: farlendarMarqueeScroll 38s linear infinite;
}

.feature-marquee-viewport:hover .feature-marquee-track,
.feature-marquee-viewport:focus-within .feature-marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .feature-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

@keyframes farlendarMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.feature-marquee-card {
  width: 215px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 14px;
  padding: 0.72rem 0.85rem;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-marquee-card:hover {
  transform: translateY(-2px);
  border-color: #FDE047;
  background: rgba(0, 0, 0, 0.42);
}

/* ==========================================================================
   AUTH & VERIFICATION GATE OVERLAY
   ========================================================================== */
.auth-gate-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.22), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(158, 27, 27, 0.24), transparent 45%),
    var(--bg-primary);
}

.auth-gate-container {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1.12fr 0.95fr;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  backdrop-filter: blur(18px);
}

@media (max-width: 920px) {
  .auth-gate-container {
    grid-template-columns: 1fr;
  }
}

.auth-hero-panel {
  background: var(--header-gradient);
  color: #FFFDF7;
  padding: 2.35rem 2.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.auth-hero-panel::after {
  content: "🏮";
  position: absolute;
  right: -12px;
  bottom: -24px;
  font-size: 9rem;
  opacity: 0.11;
  pointer-events: none;
}

.auth-form-panel {
  padding: 2.35rem 2.15rem;
  background: var(--bg-surface-elevated);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.verification-policy-box {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 16px;
  padding: 1.05rem 1.2rem;
  margin-top: 1.15rem;
}

.default-block-alert {
  background: var(--danger-soft);
  border: 1.5px solid var(--danger);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.15rem;
  color: var(--text-primary);
}

/* ==========================================================================
   GIANT HERO GENEALOGY CARD ON HOME PAGE (THẺ GIA PHẢ ĐẠI DÒNG TỘC)
   ========================================================================== */
.hero-genealogy-banner {
  background: linear-gradient(135deg, #6E1111 0%, #9E1B1B 48%, #4A0E0E 100%);
  color: #FFFDF7;
  border: 2.5px solid #FACC15;
  border-radius: 26px;
  padding: 1.65rem 1.85rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 18px 44px rgba(127, 20, 20, 0.28), inset 0 0 32px rgba(250, 204, 21, 0.14);
  position: relative;
  overflow: hidden;
}

.hero-genealogy-banner::before {
  content: "🌳";
  position: absolute;
  right: 16px;
  bottom: -18px;
  font-size: 8.5rem;
  opacity: 0.12;
  pointer-events: none;
}

.hero-genealogy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.hero-genealogy-kpi-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
}

/* ==========================================================================
   HOME EVENT & HOLIDAY STATISTICS DASHBOARD
   ========================================================================== */
.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.stat-kpi-card {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
}

.stat-kpi-card:hover,
.stat-kpi-card.active {
  border-color: var(--vermilion);
  background: var(--vermilion-soft);
  transform: translateY(-2px);
}

/* ==========================================================================
   CATEGORY-FIRST EVENT SELECTOR & CARD STUDIO GRID
   ========================================================================== */
.category-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.category-step-card {
  appearance: none;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.16s ease;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.category-step-card:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.category-step-card.selected {
  border: 2px solid var(--vermilion);
  background: var(--vermilion-soft);
  box-shadow: 0 4px 12px rgba(158, 27, 27, 0.18);
}

.card-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
  max-height: 230px;
  overflow-y: auto;
  padding: 0.25rem;
}

.card-design-thumb {
  appearance: none;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-design-thumb.active {
  outline: 3px solid var(--vermilion);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   APP SHELL & NAVIGATION MODES (BOTTOM_BAR, FLOATING_PILL, LEFT_RAIL + COLLAPSED)
   ========================================================================== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 124px;
  transition: padding 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-nav-mode="FLOATING_PILL"] .app-shell {
  padding-bottom: 132px;
}

body[data-nav-mode="LEFT_RAIL"] .app-shell {
  padding-left: 232px;
  padding-bottom: 36px;
}

body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .app-shell {
  padding-left: 72px;
  padding-bottom: 36px;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .app-shell {
    padding-left: 68px;
    padding-bottom: 32px;
  }
  body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .app-shell {
    padding-left: 60px;
    padding-bottom: 32px;
  }
}

.top-heritage-banner {
  background: var(--header-gradient);
  color: #FFFDF7;
  border-bottom: 2px solid var(--gold-bright);
  padding: 0.85rem 1.4rem;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.top-banner-inner {
  max-width: 1420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.main-workspace {
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 3.5rem;
  flex: 1;
  min-width: 0;
}

.farlendar-nav {
  z-index: 50;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-nav-mode="BOTTOM_BAR"] .farlendar-nav,
body:not([data-nav-mode]) .farlendar-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  max-height: 64px;
  background: var(--fl-surface, #FFF);
  border-top: 1px solid var(--fl-border, #E6DDD1);
  box-shadow: var(--shadow-floating);
  padding: 4px max(8px, calc((100vw - 1080px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  overflow-x: hidden;
}

body[data-nav-mode="BOTTOM_BAR"] .nav-tab-btn,
body:not([data-nav-mode]) .nav-tab-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 138px;
  height: 56px;
  min-block-size: 44px;
  padding: 4px 2px;
  font-size: 12px;
}

body[data-nav-mode="FLOATING_PILL"] .farlendar-nav {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 1020px);
  background: var(--bg-glass);
  backdrop-filter: blur(22px);
  border: 1.5px solid var(--border-gold);
  border-radius: 999px;
  box-shadow: var(--shadow-floating);
  padding: 0.4rem 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  overflow-x: auto;
}

body[data-nav-mode="FLOATING_PILL"] .nav-tab-btn {
  flex: 1 1 0;
  min-width: 62px;
}

/* Collapsed Horizontal Menu (Thu nhỏ menu chính ở chế độ ngang) */
body:not([data-nav-mode="LEFT_RAIL"])[data-nav-collapsed="true"] .farlendar-nav {
  width: max-content;
  max-width: 96vw;
  left: 50%;
  right: auto;
  bottom: 12px;
  transform: translateX(-50%);
  border: 1.5px solid var(--border-gold);
  border-radius: 999px;
  padding: 0.34rem 0.55rem;
  gap: 0.28rem;
}

body[data-nav-collapsed="true"] .nav-tab-btn .nav-label,
body[data-nav-collapsed="true"] .nav-utility-btn .nav-label {
  display: none !important;
}

body:not([data-nav-mode="LEFT_RAIL"])[data-nav-collapsed="true"] .nav-tab-btn {
  flex: 0 0 auto;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

/* Left Vertical Sidebar Menu (Chuyển menu chính dọc sang bên trái màn hình) */
body[data-nav-mode="LEFT_RAIL"] .farlendar-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 232px;
  background: var(--bg-surface-elevated);
  border-right: 2px solid var(--border-gold);
  box-shadow: var(--shadow-floating);
  padding: 5.4rem 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.42rem;
  overflow-y: auto;
}

body[data-nav-mode="LEFT_RAIL"] .nav-tab-btn {
  flex-direction: row;
  justify-content: flex-start;
  padding: 0.68rem 0.9rem;
  font-size: 0.88rem;
  gap: 0.7rem;
  width: 100%;
  border-radius: 14px;
}

/* Collapsed Left Vertical Rail */
body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .farlendar-nav {
  width: 72px;
  padding: 5.2rem 0.45rem 1.1rem;
  align-items: center;
}

body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .nav-tab-btn {
  justify-content: center;
  padding: 0.55rem 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .farlendar-nav {
    width: 68px;
    padding: 4.8rem 0.35rem 1rem;
    align-items: center;
  }
  body[data-nav-mode="LEFT_RAIL"] .nav-tab-btn {
    flex-direction: column;
    justify-content: center;
    padding: 0.4rem 0.2rem;
    font-size: 0.62rem;
    gap: 0.14rem;
    text-align: center;
  }
  body[data-nav-mode="LEFT_RAIL"] .nav-tab-btn .nav-label {
    font-size: 0.58rem;
    line-height: 1.05;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 2 Navigation Utility Icon Buttons (Collapse Menu + Switch to Left Vertical Menu) */
.nav-utility-divider {
  width: 1px;
  height: 28px;
  background: var(--border-gold);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

body[data-nav-mode="LEFT_RAIL"] .nav-utility-divider {
  width: 100%;
  height: 1px;
  margin: 0.3rem 0;
}

.nav-utility-group {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

body[data-nav-mode="LEFT_RAIL"] .nav-utility-group {
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding-top: 0.4rem;
}

.nav-utility-btn {
  appearance: none;
  border: 1.5px solid var(--border-gold);
  background: var(--gold-soft);
  color: var(--vermilion);
  border-radius: 13px;
  padding: 0.38rem 0.55rem;
  min-block-size: 40px;
  min-inline-size: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.68rem;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

body[data-nav-mode="LEFT_RAIL"] .nav-utility-btn {
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  padding: 0.52rem 0.75rem;
  font-size: 0.78rem;
  gap: 0.55rem;
}

body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .nav-utility-btn,
body:not([data-nav-mode="LEFT_RAIL"])[data-nav-collapsed="true"] .nav-utility-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .nav-utility-btn {
    justify-content: center;
    padding: 0.4rem;
  }
  body[data-nav-mode="LEFT_RAIL"] .nav-utility-btn .nav-label {
    display: none;
  }
}

.nav-utility-btn:hover {
  background: var(--header-gradient);
  color: #FFFDF7;
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}

.nav-utility-btn.is-active {
  background: var(--vermilion);
  color: #FFFDF7;
  border-color: var(--gold-bright);
}

body[data-nav-mode="MINI_ICON"] .farlendar-nav {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  box-shadow: var(--shadow-floating);
  padding: 0.65rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

body[data-nav-mode="MINI_ICON"] .nav-tab-btn .nav-label {
  display: none;
}

body[data-nav-mode="MINI_ICON"] .nav-tab-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  justify-content: center;
  padding: 0;
}

.nav-tab-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 16px;
  padding: 0.5rem 0.35rem;
  min-block-size: 44px;
  min-inline-size: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  transition: all 0.18s ease;
}

.nav-tab-btn:hover {
  background: var(--gold-soft);
  color: var(--text-primary);
}

.nav-tab-btn.active {
  background: var(--header-gradient);
  color: #FFFDF7;
  border-color: var(--gold-bright);
  box-shadow: 0 4px 14px rgba(158, 27, 27, 0.32);
}

.nav-tab-btn .nav-icon {
  font-size: 1.28rem;
  line-height: 1;
}

/* ==========================================================================
   CARDS, BADGES, BUTTONS & FORMS (WEB-DS-05)
   ========================================================================== */
.heritage-card {
  background: var(--fl-surface, #FFF);
  border: 1px solid var(--fl-border, #E6DDD1);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.heritage-card-elevated {
  background: var(--fl-surface, #FFF);
  border: 1px solid var(--fl-border, #E6DDD1);
  border-radius: 12px;
  padding: 1.15rem;
  box-shadow: var(--shadow-card);
}

.subtab-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
  scrollbar-width: thin;
}

.subtab-pill {
  appearance: none;
  border: 1px solid var(--fl-border, #E6DDD1);
  background: var(--fl-surface, #FFF);
  color: var(--fl-muted, #6B5D52);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  min-height: 44px;
  min-block-size: 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  transition: all 0.18s ease;
}

.subtab-pill:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--text-primary);
}

.subtab-pill.active {
  background: var(--fl-primary, #8B1E1E);
  color: #FFF;
  border-color: var(--fl-primary, #8B1E1E);
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  min-height: 44px;
  min-block-size: 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  transition: all 0.18s ease;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--header-gradient);
  color: #FFFDF7;
  border-color: var(--gold-bright);
  box-shadow: 0 4px 14px rgba(158, 27, 27, 0.25);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, #B8860B, #D4AF37);
  color: #1E120A;
  border-color: #FDE047;
  font-weight: 700;
}

.btn-outline {
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-outline:hover:not(:disabled) {
  background: var(--gold-soft);
  border-color: var(--gold);
}

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-verified,
.badge-jade {
  background: var(--jade-soft);
  color: var(--jade);
  border: 1px solid var(--jade);
}

.badge-gold {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold);
}

.badge-vermilion {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
}

.badge-amber {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber);
}

/* Form Controls */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  margin-bottom: 0.88rem;
}

.form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.64rem 0.88rem;
  border-radius: 8px;
  border: 1px solid var(--fl-border, #E6DDD1);
  background: var(--fl-surface, #FFF);
  color: var(--fl-text, #2A211C);
  font-family: inherit;
  font-size: 17px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px var(--vermilion-soft);
}

.form-input:user-invalid,
.form-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error-msg {
  font-size: 0.78rem;
  color: var(--danger);
  font-weight: 600;
  min-height: 1.1rem;
}

.template-chip-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.template-chip-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  background: var(--gold-soft);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.template-chip-btn:hover {
  border-color: var(--vermilion);
  background: var(--vermilion-soft);
}

.password-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field-wrapper .form-input {
  padding-right: 4.5rem;
}

.password-toggle-btn {
  position: absolute;
  right: 0.45rem;
  background: var(--gold-soft);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.28rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   NATIVE HTML <dialog> LIGHT-DISMISS MODALS
   ========================================================================== */
dialog.heritage-dialog {
  border: 2px solid var(--gold);
  border-radius: 22px;
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  padding: 0;
  max-width: min(95vw, 880px);
  width: 100%;
  max-height: 92vh;
  box-shadow: var(--shadow-floating);
}

dialog.heritage-dialog::backdrop {
  background-color: rgba(15, 10, 8, 0.62);
  backdrop-filter: blur(5px);
}

.dialog-header {
  background: var(--header-gradient);
  color: #FFFDF7;
  padding: 1.05rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--gold-bright);
}

.dialog-body {
  padding: 1.3rem 1.35rem;
  overflow-y: auto;
  max-height: calc(92vh - 130px);
}

.dialog-footer {
  padding: 0.9rem 1.35rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  background: var(--bg-surface);
}

/* ==========================================================================
   BLOC CALENDAR & MONTHLY GRID WITH EVENT COUNTERS
   ========================================================================== */
.bloc-calendar-card {
  background: linear-gradient(180deg, var(--bg-surface-elevated) 0%, var(--bg-surface) 100%);
  border: 2.5px solid var(--gold);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.bloc-header {
  background: var(--header-gradient);
  color: #FFFDF7;
  padding: 1.15rem 1.35rem;
  text-align: center;
  border-bottom: 2px solid var(--gold-bright);
}

.bloc-solar-giant {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--vermilion);
  text-shadow: 0 4px 14px var(--vermilion-soft);
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.42rem;
}

.calendar-day-cell {
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  border-radius: 13px;
  padding: 0.45rem 0.4rem;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.calendar-day-cell:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.calendar-day-cell.selected {
  border: 2px solid var(--vermilion);
  background: var(--vermilion-soft);
}

.calendar-day-cell.today {
  box-shadow: inset 0 0 0 2px var(--gold-bright);
}

.calendar-day-cell.has-events {
  border-color: var(--vermilion);
  background: linear-gradient(180deg, var(--bg-surface-elevated), var(--gold-soft));
}

.cal-event-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  background: var(--vermilion);
  color: #FFFDF7;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
}

/* ==========================================================================
   FLOATING 12-ZODIAC MASCOT COMPANION + EDGE-DOCKED MINIMIZE + ENG2 POPOVER
   ========================================================================== */
.floating-mascot-widget {
  position: fixed;
  bottom: 96px;
  right: 18px;
  z-index: 48;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0.45rem 0.7rem 0.45rem 0.55rem;
  box-shadow: var(--shadow-floating);
  transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: min(92vw, 430px);
}

.floating-mascot-widget.docked-left {
  right: auto;
  left: 18px;
}

body[data-nav-mode="LEFT_RAIL"] .floating-mascot-widget.docked-left {
  left: 246px;
}

body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .floating-mascot-widget.docked-left {
  left: 84px;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .floating-mascot-widget.docked-left {
    left: 76px;
  }
}

/* Edge-Docked Minimized Mascot (Thu gọn bám sát cạnh màn hình) */
.floating-mascot-widget.is-edge-minimized {
  right: 0;
  bottom: 118px;
  border-radius: 22px 0 0 22px;
  border-right: none;
  padding: 0.42rem 0.48rem 0.42rem 0.58rem;
  gap: 0.35rem;
  max-width: 110px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--vermilion), #5C1010);
  color: #FFFDF7;
  border-color: var(--gold-bright);
}

.floating-mascot-widget.docked-left.is-edge-minimized {
  left: 0;
  right: auto;
  border-radius: 0 22px 22px 0;
  border-left: none;
  border-right: 2px solid var(--gold-bright);
  padding: 0.42rem 0.58rem 0.42rem 0.48rem;
}

body[data-nav-mode="LEFT_RAIL"] .floating-mascot-widget.docked-left.is-edge-minimized {
  left: 232px;
}

body[data-nav-mode="LEFT_RAIL"][data-nav-collapsed="true"] .floating-mascot-widget.docked-left.is-edge-minimized {
  left: 72px;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .floating-mascot-widget.docked-left.is-edge-minimized {
    left: 68px;
  }
}

.floating-mascot-widget[data-size="MINI_PEEK"] {
  padding: 0.35rem;
  border-radius: 50%;
}
.floating-mascot-widget[data-size="MINI_PEEK"] .mascot-bubble-info {
  display: none;
}

.floating-mascot-widget[data-size="COMPACT"] {
  transform: scale(0.92);
  transform-origin: bottom right;
}

.floating-mascot-widget.docked-left[data-size="COMPACT"] {
  transform-origin: bottom left;
}

.floating-mascot-widget[data-size="EXPANDED"] {
  transform: scale(1.05);
  transform-origin: bottom right;
}

.floating-mascot-widget.docked-left[data-size="EXPANDED"] {
  transform-origin: bottom left;
}

.mascot-avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--header-gradient);
  border: 2px solid var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.mascot-count-pill {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #DC2626;
  color: #FEF08A;
  border: 1.5px solid #FACC15;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.mascot-mini-actions {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  flex-shrink: 0;
}

.mascot-mini-btn {
  appearance: none;
  border: 1px solid var(--border-gold);
  background: var(--gold-soft);
  color: var(--vermilion);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.16s ease;
  padding: 0;
}

.mascot-mini-btn:hover {
  background: var(--vermilion);
  color: #FFFDF7;
  border-color: var(--gold-bright);
  transform: scale(1.08);
}

/* Mascot Companion Interactive Speech Bubble / Hub Card (Greeting + 7-Day Reminder + Eng2 Alarms) */
.mascot-companion-popover {
  position: fixed;
  bottom: 162px;
  right: 18px;
  z-index: 49;
  width: min(94vw, 420px);
  max-height: min(74vh, 560px);
  overflow-y: auto;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--gold);
  border-radius: 22px;
  box-shadow: var(--shadow-floating);
  padding: 1rem 1.1rem;
  animation: mascotPopoverSlideUp 0.22s ease-out;
}

.mascot-companion-popover.docked-left {
  right: auto;
  left: 18px;
}

body[data-nav-mode="LEFT_RAIL"] .mascot-companion-popover.docked-left {
  left: 246px;
}

@media (max-width: 720px) {
  body[data-nav-mode="LEFT_RAIL"] .mascot-companion-popover.docked-left {
    left: 74px;
    width: calc(100vw - 84px);
  }
}

@keyframes mascotPopoverSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sticky Save & Cloud Sync Bar in Appearance & Mascot Studio */
.appearance-sticky-save-bar {
  position: sticky;
  bottom: 84px;
  z-index: 38;
  margin-top: 1.25rem;
  padding: 0.85rem 1.15rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #6E1111 0%, #9E1B1B 52%, #4A0E0E 100%);
  color: #FFFDF7;
  border: 2px solid #FACC15;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

body[data-nav-mode="LEFT_RAIL"] .appearance-sticky-save-bar {
  bottom: 18px;
}

/* ==========================================================================
   TELEPROMPTER FULLSCREEN MODE
   ========================================================================== */
.teleprompter-box {
  background: #1A110B;
  color: #FCE7B2;
  border: 2px solid #D4AF37;
  border-radius: 22px;
  padding: 1.85rem 1.7rem;
  max-height: 540px;
  overflow-y: auto;
  font-family: var(--font-serif);
  line-height: 1.95;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   DIVINATION & ASTROLOGY HUB: 12-PALACE TỬ VI CHART, RESPONSIVE TABLES & I-CHING
   ========================================================================== */
.table-wrapper {
  overflow: auto;
  max-inline-size: 100%;
  max-block-size: min(520px, 80vh);
  container-type: inline-size;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
}

.table-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.table-wrapper caption {
  text-align: left;
  padding: 0.75rem 1rem;
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--vermilion);
  background: var(--gold-soft);
  border-bottom: 1px solid var(--border-color);
}

.table-wrapper th,
.table-wrapper td {
  padding: 0.68rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table-wrapper thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--bg-secondary);
  color: var(--vermilion);
}

.table-wrapper tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg-surface-elevated);
  font-weight: 800;
  color: var(--vermilion);
}

@container (width < 600px) {
  .table-wrapper table,
  .table-wrapper thead,
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper th,
  .table-wrapper td {
    display: block;
  }

  .table-wrapper thead {
    /* MANDATORY: Hide column header from layout and screen readers. */
    display: none;
  }

  .table-wrapper tr {
    margin-block-end: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
  }

  .table-wrapper tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--gold-soft);
  }

  .table-wrapper td:nth-child(2)::before {
    content: var(--label-2) ": ";
    font-weight: 700;
    color: var(--text-secondary);
  }
  .table-wrapper td:nth-child(3)::before {
    content: var(--label-3) ": ";
    font-weight: 700;
    color: var(--text-secondary);
  }
  .table-wrapper td:nth-child(4)::before {
    content: var(--label-4) ": ";
    font-weight: 700;
    color: var(--text-secondary);
  }
  .table-wrapper td:nth-child(5)::before {
    content: var(--label-5) ": ";
    font-weight: 700;
    color: var(--text-secondary);
  }
}

/* 12-Palace Tử Vi Đẩu Số Traditional 4x4 Grid */
.tuvi-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-template-rows: repeat(4, minmax(175px, auto));
  gap: 0.55rem;
  background: var(--bg-secondary);
  padding: 0.75rem;
  border-radius: 18px;
  border: 2px solid var(--gold);
  overflow-x: auto;
}

.tuvi-thien-ban {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: linear-gradient(145deg, var(--bg-surface-elevated), var(--gold-soft));
  border: 2px solid var(--vermilion);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.16);
}

.tuvi-palace-cell {
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-color);
  border-radius: 13px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  text-align: left;
}

.tuvi-palace-cell:hover,
.tuvi-palace-cell.selected {
  border-color: var(--vermilion);
  box-shadow: 0 6px 18px rgba(158, 27, 27, 0.16);
  transform: translateY(-2px);
}

.tuvi-palace-cell.is-menh {
  border: 2px solid var(--vermilion);
  background: linear-gradient(180deg, var(--bg-surface-elevated), var(--vermilion-soft));
}

.tuvi-palace-cell.is-than {
  border-color: var(--gold-bright);
}

@media (max-width: 960px) {
  .tuvi-chart-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .tuvi-thien-ban {
    grid-column: 1 / -1;
    grid-row: auto;
    order: -1;
  }
}

/* I-Ching 6-Line Visual Bars */
.iching-hexagram-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.38rem;
  padding: 0.85rem 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.iching-line-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.iching-line-visual {
  flex: 1;
  height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iching-bar-yang {
  width: 100%;
  height: 100%;
  background: var(--vermilion);
  border-radius: 4px;
}

.iching-bar-yin {
  width: 44%;
  height: 100%;
  background: var(--text-primary);
  border-radius: 4px;
}

/* ==========================================================================
   PERSONALIZATION STUDIO: AVATAR FRAMES, CLAN SEALS, ICON PACKS & MOTIFS
   ========================================================================== */
.personalization-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.15rem;
}

.personalization-option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.72rem 0.9rem;
  border-radius: 13px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  font-family: var(--font-sans);
}

.personalization-option-card:hover {
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}

.personalization-option-card.is-selected {
  border: 2px solid var(--vermilion);
  background: linear-gradient(135deg, var(--vermilion-soft), var(--gold-soft));
  box-shadow: 0 6px 16px rgba(158, 27, 27, 0.12);
}

/* Avatar Aura Frames */
.user-avatar-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-avatar-shell[data-frame="SILK_VERMILION"] {
  border: 2.5px solid #DC2626;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.45), 0 6px 18px rgba(158, 27, 27, 0.35);
}

.user-avatar-shell[data-frame="JADE_DYNASTY"] {
  border: 2.5px solid #10B981;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.35), 0 6px 18px rgba(4, 120, 87, 0.38);
}

.user-avatar-shell[data-frame="ROYAL_DRAGON_GOLD"] {
  border: 3px solid #FACC15;
  box-shadow: 0 0 0 2px #9E1B1B, 0 0 20px rgba(250, 204, 21, 0.55);
}

.user-avatar-shell[data-frame="LOTUS_HALO"] {
  border: 2.5px dashed #F59E0B;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.28), 0 0 22px rgba(217, 119, 6, 0.45);
}

/* Traditional Carved Clan Seal Stamp (Ấn Triện Đỏ Dòng Tộc) */
.clan-seal-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #B91C1C;
  outline: 1px solid rgba(185, 28, 28, 0.55);
  outline-offset: -5px;
  background: linear-gradient(145deg, #991B1B 0%, #7F1D1D 100%);
  color: #FEF9C3;
  border-radius: 10px;
  padding: 0.28rem 0.52rem;
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(153, 27, 27, 0.38);
  user-select: none;
}

/* Custom Seal & Vector Icon Packs inside Navigation & Headers */
.nav-seal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1.6px solid currentColor;
  background: var(--vermilion-soft);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.nav-tab-btn.active .nav-seal-badge {
  background: var(--gold-bright);
  color: #2B1810;
  border-color: #FFFDF7;
}

.nav-svg-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ==========================================================================
   BLOC CALENDAR & MONTHLY 7-COLUMN GRID (TAB 1: LỊCH VẠN NIÊN)
   ========================================================================== */
.bloc-calendar-wrapper {
  background: var(--bg-surface);
  border: 2px solid var(--border-gold);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.bloc-header {
  color: #FFFDF7;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--gold-bright);
}

.bloc-body {
  padding: 1.15rem 1.25rem 1.35rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bloc-solar-day {
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  color: var(--vermilion);
  text-shadow: 0 2px 10px var(--vermilion-soft);
  margin: 0.2rem 0;
}

.bloc-lunar-box {
  margin-top: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--gold-soft);
  border: 1.5px solid var(--border-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: left;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

.day-cell {
  min-height: 68px;
  padding: 0.42rem 0.48rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
  user-select: none;
}

.day-cell:hover {
  border-color: var(--gold);
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.day-cell.other-month {
  opacity: 0.42;
  background: var(--bg-primary);
}

.day-cell.today {
  border: 2px solid var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.day-cell.selected {
  border: 2px solid var(--vermilion);
  background: var(--vermilion-soft);
  box-shadow: 0 4px 12px rgba(158, 27, 27, 0.16);
}

.day-solar {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.day-lunar {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.1;
}

.day-lunar.lunar-special {
  color: var(--vermilion);
  font-weight: 900;
}

.day-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
}

.day-dot.hoang-dao {
  background: var(--jade);
  box-shadow: 0 0 6px var(--jade);
}

@media (max-width: 560px) {
  .month-grid {
    gap: 0.24rem;
  }
  .day-cell {
    min-height: 54px;
    padding: 0.3rem 0.32rem;
    border-radius: 9px;
  }
  .day-solar {
    font-size: 0.84rem;
  }
  .day-lunar {
    font-size: 0.66rem;
  }
}

/* ==========================================================================
   COMPLETE COMPONENT LAYOUTS & MULTI-SCREEN RESPONSIVE GRIDS
   (Fixes layout overflow/breaking across Mobile, Tablet, Laptop & Desktop)
   ========================================================================== */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
  width: 100%;
}

.profile-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.1rem;
  width: 100%;
}

.prayer-studio-layout {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.card-studio-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.15fr);
  gap: 1.15rem;
  align-items: start;
}

.share-qr-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
}

.checklist-add-form {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr auto;
  gap: 0.45rem;
  align-items: end;
}

.responsive-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.responsive-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.responsive-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

/* Tree Canvas & Digital Ancestral Altar Stage (Tab 3) */
.tree-canvas-container {
  width: 100%;
  height: clamp(420px, 68vh, 660px);
  border-radius: 16px;
  border: 2px solid var(--border-gold);
  background: var(--bg-surface-elevated);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.08);
}

/* Interactive Royal Genealogy Board (DOM + SVG Lineage Studio) */
.genealogy-studio-shell {
  border-radius: 20px;
  border: 2px solid var(--border-gold);
  padding: 1.25rem;
  position: relative;
  overflow-x: auto;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-card);
}

.genealogy-studio-shell[data-tree-style="ROYAL_SCROLL"] {
  background: radial-gradient(circle at 50% 0%, #FFFBEB 0%, #FEF3C7 55%, #FDE68A 100%);
  color: #1F1614;
  border-color: #D97706;
}

.genealogy-studio-shell[data-tree-style="JADE_DYNASTY"] {
  background: radial-gradient(circle at 50% 0%, #ECFDF5 0%, #D1FAE5 60%, #A7F3D0 100%);
  color: #064E3B;
  border-color: #059669;
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] {
  background: radial-gradient(circle at 50% 0%, #3E241E 0%, #271713 60%, #1B0F0C 100%);
  color: #FFFBEB;
  border-color: #F59E0B;
}

.genealogy-studio-shell[data-tree-style="MODERN_CLEAN"] {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
  color: #0F172A;
  border-color: #64748B;
}

.genealogy-gen-row {
  position: relative;
  padding: 1rem 1.05rem 1.2rem;
  margin-bottom: 1.35rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1.5px dashed rgba(180, 83, 9, 0.38);
  backdrop-filter: blur(6px);
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] .genealogy-gen-row {
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(250, 204, 21, 0.35);
}

.genealogy-gen-row::after {
  content: "⬇ Huyết mạch truyền thừa sang đời kế tiếp ⬇";
  position: absolute;
  bottom: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  background: #8B1818;
  color: #FDE047;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.14rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #FACC15;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.genealogy-gen-row:last-child {
  margin-bottom: 0.25rem;
}

.genealogy-gen-row:last-child::after {
  display: none;
}

.genealogy-gen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(180, 83, 9, 0.22);
}

.genealogy-gen-nodes-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

.genealogy-couple-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem;
  border-radius: 16px;
  background: rgba(217, 119, 6, 0.09);
  border: 1.5px solid rgba(217, 119, 6, 0.42);
  position: relative;
}

.genealogy-couple-badge {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #9B1C1C, #B45309);
  color: #FFFDF7;
  border: 1.5px solid #FDE047;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(155, 28, 28, 0.25);
  min-width: 44px;
  text-align: center;
}

.genealogy-node-card {
  width: 272px;
  max-width: 100%;
  border-radius: 14px;
  padding: 0.8rem 0.88rem;
  background: #FFFDF9;
  color: #1F1614;
  border: 2px solid #D97706;
  box-shadow: 0 6px 18px rgba(31, 22, 20, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  position: relative;
  text-align: left;
}

.genealogy-node-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(155, 28, 28, 0.18);
  border-color: #9B1C1C;
}

.genealogy-node-card.is-deceased {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #B45309;
}

.genealogy-node-card.is-self {
  border: 2.5px solid #9B1C1C;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.45), 0 10px 24px rgba(155, 28, 28, 0.22);
}

.genealogy-node-card.is-selected {
  border: 2.5px solid #15803D;
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.28), 0 12px 28px rgba(21, 128, 61, 0.22);
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] .genealogy-node-card {
  background: #361F1A;
  color: #FFFBEB;
  border-color: #D97706;
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] .genealogy-node-card.is-deceased {
  background: #481E1E;
  border-color: #F59E0B;
}

.genealogy-node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(180, 83, 9, 0.28);
}

.genealogy-mini-btn {
  padding: 0.22rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid rgba(155, 28, 28, 0.28);
  background: rgba(155, 28, 28, 0.06);
  color: #9B1C1C;
  cursor: pointer;
  transition: all 0.14s ease;
}

.genealogy-mini-btn:hover {
  background: #9B1C1C;
  color: #FFFDF7;
  border-color: #9B1C1C;
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] .genealogy-mini-btn {
  background: rgba(250, 204, 21, 0.14);
  color: #FDE047;
  border-color: rgba(250, 204, 21, 0.4);
}

.genealogy-studio-shell[data-tree-style="AGARWOOD_TEMPLE"] .genealogy-mini-btn:hover {
  background: #FACC15;
  color: #1F1614;
}

.altar-tablet-card {
  background: linear-gradient(180deg, #581010 0%, #330707 100%);
  border: 2.5px solid #FACC15;
  outline: 1px solid rgba(250, 204, 21, 0.4);
  outline-offset: -6px;
  border-radius: 16px 16px 10px 10px;
  padding: 1.05rem 1.15rem;
  width: 245px;
  max-width: 100%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
}

.altar-tablet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(250, 204, 21, 0.28);
}

.altar-stage {
  background: radial-gradient(circle at 50% 25%, #7F1D1D 0%, #450A0A 62%, #1C0908 100%);
  color: #FFFDF7;
  border: 3px solid #FACC15;
  border-radius: 24px;
  padding: 1.85rem 1.4rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 0 48px rgba(250, 204, 21, 0.18);
  position: relative;
  overflow: hidden;
}

.altar-scroll-banner {
  display: inline-block;
  margin: 0.5rem auto 1rem;
  padding: 0.65rem 1.45rem;
  border-radius: 12px;
  background: linear-gradient(90deg, #78350F, #B45309, #78350F);
  border: 2px solid #FDE047;
  color: #FEF08A;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2.2vw, 1.32rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: 100%;
}

.incense-stick {
  display: inline-block;
  width: 5px;
  height: 54px;
  margin: 0 6px;
  background: linear-gradient(180deg, #EF4444 0%, #F59E0B 18%, #B45309 100%);
  border-radius: 999px;
  box-shadow: 0 -6px 14px rgba(251, 191, 36, 0.85);
}

/* Clan Chat Box & Bubbles (Tab 4) */
.chat-box {
  max-height: 420px;
  min-height: 240px;
  overflow-y: auto;
  padding: 0.95rem;
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.chat-bubble {
  max-width: min(85%, 540px);
  padding: 0.68rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  align-self: flex-start;
  box-shadow: var(--shadow-card);
  word-break: break-word;
}

.chat-bubble.me {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--vermilion-soft), var(--gold-soft));
  border-color: var(--vermilion);
}

/* Category Selector & Card Studio Thumbs */
.category-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0.55rem;
}

.category-step-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface-elevated);
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
  font-family: inherit;
}

.category-step-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.cat-emoji {
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
}

.cat-title {
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--vermilion);
}

.cat-sub {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.category-step-card.active {
  border: 2px solid var(--vermilion);
  background: var(--vermilion-soft);
  box-shadow: 0 4px 12px rgba(158, 27, 27, 0.18);
}

/* Studio Thiết Kế Thiệp 90 Mẫu — Rich Thumbnails, Background & Illustration Pickers */
.card-studio-layout {
  display: grid;
  grid-template-columns: minmax(310px, 1.05fr) minmax(320px, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}

.card-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.52rem;
  max-height: 255px;
  overflow-y: auto;
  padding: 0.35rem;
  border-radius: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.card-design-thumb {
  position: relative;
  border-radius: 12px;
  padding: 0.52rem 0.55rem;
  border: 2px solid rgba(250, 204, 21, 0.35);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.card-design-thumb:hover {
  transform: translateY(-2px);
  border-color: #FDE047;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.card-design-thumb.active {
  border: 2.5px solid #FDE047;
  outline: 2px solid var(--vermilion);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(158, 27, 27, 0.35);
}

.card-design-thumb .thumb-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.38;
  pointer-events: none;
}

.design-name {
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.22;
  margin-top: 0.22rem;
  position: relative;
  z-index: 1;
}

.card-art-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 0.45rem;
  max-height: 195px;
  overflow-y: auto;
  padding: 0.35rem;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.card-art-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-art-chip:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}

.card-art-chip.active {
  border: 2px solid var(--vermilion);
  background: linear-gradient(135deg, var(--vermilion-soft), var(--gold-soft));
  color: var(--vermilion);
  box-shadow: 0 4px 12px rgba(158, 27, 27, 0.15);
}

.card-preview-stage {
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-surface));
  border: 2px solid var(--border-gold);
  border-radius: 20px;
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 86px;
}

.luban-ruler-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.dual-solar-lunar-widget {
  width: 100%;
  max-width: 100%;
}

/* Responsive Breakpoints for Tablets & Mobile Screens */
@media (max-width: 960px) {
  .prayer-studio-layout,
  .card-studio-layout {
    grid-template-columns: 1fr !important;
  }

  .checklist-add-form {
    grid-template-columns: 1fr 1fr !important;
  }

  .checklist-add-form > button[type="submit"] {
    grid-column: 1 / -1;
  }

  .responsive-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .top-heritage-banner {
    padding: 0.45rem 0.65rem;
    position: relative;
  }

  .top-heritage-banner .banner-inner {
    gap: 0.45rem;
  }

  .top-heritage-banner .brand-subtitle {
    display: none;
  }

  .top-heritage-banner .banner-actions-wrap {
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .top-heritage-banner .banner-actions-wrap .btn {
    padding: 0.32rem 0.55rem;
    font-size: 0.74rem;
  }

  .main-workspace {
    padding: 0.95rem 0.75rem 4.5rem;
  }

  .hero-genealogy-banner {
    padding: 1.15rem 1rem;
    border-radius: 20px;
  }

  .heritage-card,
  .heritage-card-elevated {
    padding: 0.95rem;
    border-radius: 16px;
  }

  .share-qr-layout,
  .responsive-grid-2,
  .responsive-grid-3,
  .responsive-grid-4,
  .checklist-add-form {
    grid-template-columns: 1fr !important;
  }

  .dialog-header,
  .dialog-body,
  .dialog-footer {
    padding: 0.85rem 0.95rem;
  }
}

.prayer-list-item .prayer-item-title,
#prayer-sidebar-list button div {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .tuvi-chart-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   NEW USER ONBOARDING ASSISTANT, INLINE FORM HELPERS & HELP/ABOUT CENTER
   ========================================================================== */
.onboarding-assistant-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.onboarding-assistant-card:hover {
  box-shadow: 0 12px 32px rgba(155, 28, 28, 0.14);
}

.inline-form-helper-banner {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

details.disclosure {
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

details.disclosure[open] {
  box-shadow: 0 6px 18px rgba(155, 28, 28, 0.08);
  border-color: var(--vermilion) !important;
}

details.disclosure summary::-webkit-details-marker {
  display: none;
}

/* ==========================================================================
   FORCED COLORS / HIGH CONTRAST ACCESSIBILITY FALLBACK
   ========================================================================== */
@media (forced-colors: active) {
  .btn,
  .heritage-card,
  .personalization-option-card,
  .clan-seal-stamp,
  .user-avatar-shell,
  dialog.heritage-dialog {
    border: 2px solid CanvasText;
  }
  .nav-tab-btn.active,
  .personalization-option-card.is-selected {
    border: 3px solid Highlight;
    outline: 2px solid ButtonText;
  }
}

/* ==========================================================================
   UI REFRESH v5.7 — COMPACT HEADER, POPOVER MENU, TOAST, NAV & MASCOT FIXES
   ========================================================================== */

/* ---------- Compact one-row header ---------- */
.top-heritage-banner {
  padding: 0.55rem 1.25rem;
}
.top-banner-inner {
  flex-wrap: nowrap;
  gap: 0.85rem;
}
.top-brand-block {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.top-brand-text {
  min-width: 0;
}
.top-brand-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.top-brand-logo {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #FDE047;
  font-size: 0.78rem;
  white-space: nowrap;
}
.top-brand-name {
  font-size: 1.08rem;
  color: #FFFDF7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-verified-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  flex-shrink: 0;
}
.top-brand-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  opacity: 0.85;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-brand-meta a {
  color: inherit;
  text-decoration: none;
}
.top-brand-meta a:hover {
  text-decoration: underline;
  color: #FDE047;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.top-date-chip {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(250, 204, 21, 0.3);
  padding: 0.3rem 0.7rem;
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-right: 0.2rem;
}
.top-date-sub {
  font-size: 0.68rem;
  color: #FDE68A;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.top-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 0.15rem;
}
.top-status-dot.is-online { background: #34D399; }
.top-status-dot.is-offline { background: #FBBF24; }

.top-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: #FFFDF7;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.top-icon-btn:hover {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(250, 204, 21, 0.6);
}
.top-icon-btn:focus-visible {
  outline: 2px solid #FDE047;
  outline-offset: 2px;
}
.top-icon-btn.is-primary {
  background: linear-gradient(135deg, #FACC15, #D97706);
  color: #451A03;
  border-color: transparent;
}
.top-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---------- "☰ Tiện ích" popover panel ---------- */
.top-more-menu {
  /* Anchor positioning is not widely supported yet → pin to top-right of the viewport */
  position: fixed;
  inset: auto;
  top: 64px;
  right: 12px;
  margin: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 0.4rem;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.top-more-menu:not(:popover-open):not(.is-fallback-open) {
  display: none;
}
.top-more-menu-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.45rem 0.65rem 0.3rem;
}
.top-more-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.top-more-menu button:hover,
.top-more-menu button:focus-visible {
  background: var(--gold-soft, rgba(250, 204, 21, 0.14));
  outline: none;
}
.top-more-menu button.is-danger {
  color: var(--danger, #B91C1C);
}
.top-more-menu hr {
  border: 0;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  margin: 0.3rem 0.4rem;
}

/* ---------- Toasts: bottom-center, above the nav bar, never cover the header ---------- */
.farlendar-toast-container {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}
.farlendar-toast {
  pointer-events: auto;
  width: 100%;
  margin: 0;
}

/* ---------- Bottom nav: never clip the first tab when it overflows ---------- */
body[data-nav-mode="BOTTOM_BAR"] .farlendar-nav,
body:not([data-nav-mode]) .farlendar-nav,
body[data-nav-mode="FLOATING_PILL"] .farlendar-nav {
  justify-content: safe center;
  scrollbar-width: none;
}

/* ---------- Floating mascot: keep it out of the content's way ---------- */
.floating-mascot-widget {
  bottom: 88px;
  max-width: min(92vw, 360px);
}

/* ---------- Tablet & mobile ---------- */
@media (max-width: 960px) {
  .top-date-chip {
    display: none;
  }
}

@media (max-width: 720px) {
  .top-heritage-banner {
    padding: 0.45rem 0.7rem;
    position: sticky;
  }
  .top-brand-logo,
  .top-brand-meta,
  .top-icon-label {
    display: none;
  }
  .top-brand-name {
    font-size: 1rem;
  }
  .top-icon-btn {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0.4rem;
    font-size: 1rem;
  }
  .top-more-menu {
    top: 56px;
  }

  body[data-nav-mode="BOTTOM_BAR"] .farlendar-nav,
  body:not([data-nav-mode]) .farlendar-nav {
    justify-content: flex-start;
    gap: 0.15rem;
    padding: 0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom));
    scroll-snap-type: x proximity;
  }
  body[data-nav-mode="BOTTOM_BAR"] .nav-tab-btn,
  body:not([data-nav-mode]) .nav-tab-btn {
    min-width: 60px;
    scroll-snap-align: start;
  }
  body[data-nav-mode="BOTTOM_BAR"] .nav-utility-divider,
  body[data-nav-mode="BOTTOM_BAR"] .nav-utility-group,
  body:not([data-nav-mode]) .nav-utility-divider,
  body:not([data-nav-mode]) .nav-utility-group {
    display: none;
  }

  /* Mascot collapses to a small round avatar on phones */
  .floating-mascot-widget:not(.is-edge-minimized) {
    padding: 0.3rem;
    border-radius: 50%;
    right: 10px;
    bottom: 80px;
  }
  .floating-mascot-widget:not(.is-edge-minimized) .mascot-bubble-info,
  .floating-mascot-widget:not(.is-edge-minimized) .mascot-mini-btn {
    display: none;
  }

  .farlendar-toast-container {
    bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-icon-btn,
  .floating-mascot-widget {
    transition: none;
  }
}