/* ============================================================
   Theme 2 — simple, modern, multi-colour.
   Loaded after app.css / access.css; everything here is override-only,
   so removing this file restores the previous look.
   ============================================================ */
:root {
  --c-coral: #FF6B6B; --c-amber: #FFB020; --c-mint: #20C997;
  --c-sky: #3B82F6;   --c-violet: #8B5CF6; --c-pink: #EC4899;
  --soft: #F3F4FB; --line: #E7E9F5; --muted: #5B6275;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(31,36,48,.05), 0 8px 24px rgba(79,70,229,.07);
  --shadow-lg: 0 2px 4px rgba(31,36,48,.06), 0 18px 44px rgba(79,70,229,.14);
}
body { background: var(--ivory); }
h1, h2, h3 { color: var(--charcoal); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--emerald); }

/* header: clean white bar with a multicolour hairline */
.site-header { background: #fff; backdrop-filter: none; border-bottom: 0; position: sticky; }
.site-header::after { content: ''; display: block; height: 4px;
  background: linear-gradient(90deg, var(--c-coral), var(--c-amber), var(--c-mint), var(--c-sky), var(--c-violet), var(--c-pink)); }
.brand-text strong { color: var(--charcoal); }
.brand-text small { color: var(--muted); letter-spacing: .5px; }
.main-nav a { color: var(--charcoal); }
.main-nav a:hover { background: var(--soft); }
.nav-join { background: var(--emerald); color: #fff !important; box-shadow: none; }
.nav-join:hover { background: var(--c-violet) !important; }
.nav-admin, .lang-switch { color: var(--emerald) !important; }
.lang-switch { border-color: var(--line); }
.nav-more summary { color: var(--charcoal); }

/* buttons: flat, solid, round */
.btn { box-shadow: none; }
.btn-primary { background: var(--emerald); }
.btn-primary:hover { background: var(--c-violet); transform: none; box-shadow: none; }
.btn-gold { background: var(--c-amber); color: #1F2430; }
.btn-outline { border-color: var(--line); color: var(--charcoal); background: #fff; }
.btn-outline:hover { background: var(--soft); color: var(--charcoal); }

/* hero: big colourful tree, nothing else shouting */
.hero { background: var(--ivory); padding: 36px 20px 8px; }
.hero-cedar { display: block; width: min(440px, 80vw); height: auto; margin: 0 auto 6px; filter: none; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.hero .hero-en { color: var(--muted); letter-spacing: 3px; }
.hero .slogan { color: var(--emerald); }
.hero p.sub { color: var(--muted); }

/* tiles: one colour each */
.tile { border: 0; border-radius: 24px; box-shadow: none; background: var(--soft); --tc: var(--emerald); position: relative; overflow: hidden; }
.tile::before { content: ''; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 6px; border-radius: 6px; background: var(--tc); }
.tile .t-ico { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem;
  background: color-mix(in srgb, var(--tc) 18%, #fff); }
.tile strong { color: var(--charcoal); }
.tile:hover, .tile:focus-visible { background: color-mix(in srgb, var(--tc) 10%, #fff); transform: translateY(-2px); }
.tile.primary { background: var(--tc); }
.tile.primary .t-ico { background: rgba(255,255,255,.25); }
.tile.primary strong, .tile.primary .t-sub { color: #fff; }
.tile.primary::before { background: rgba(255,255,255,.5); }
.tile.primary:hover { background: color-mix(in srgb, var(--tc) 88%, #000); }
.tiles .tile:nth-child(1) { --tc: var(--c-violet); }
.tiles .tile:nth-child(2) { --tc: var(--c-sky); }
.tiles .tile:nth-child(3) { --tc: var(--c-coral); }
.tiles .tile:nth-child(4) { --tc: var(--c-amber); }
.tiles .tile:nth-child(5) { --tc: var(--c-pink); }
.tiles .tile:nth-child(6) { --tc: var(--c-mint); }
html[data-contrast="high"] .tile { border: 3px solid #000; }

/* cards & stats */
.card { border: 0; box-shadow: var(--shadow); }
.grid-4 > .stat-card:nth-child(4n+1) .num { color: var(--c-violet); }
.grid-4 > .stat-card:nth-child(4n+2) .num { color: var(--c-sky); }
.grid-4 > .stat-card:nth-child(4n+3) .num { color: var(--c-coral); }
.grid-4 > .stat-card:nth-child(4n+4) .num { color: var(--c-mint); }
.stat-card .lbl, section.block .section-sub { color: var(--muted); }
.photos-block { background: var(--ivory); }
section.block[style*="background:#fff"] { background: var(--soft) !important; }
.grid-3 > a.card:nth-child(6n+1) strong { color: var(--c-violet); } .grid-3 > a.card:nth-child(6n+2) strong { color: var(--c-sky); }
.grid-3 > a.card:nth-child(6n+3) strong { color: var(--c-coral); } .grid-3 > a.card:nth-child(6n+4) strong { color: var(--c-amber); }
.grid-3 > a.card:nth-child(6n+5) strong { color: var(--c-pink); } .grid-3 > a.card:nth-child(6n+6) strong { color: var(--c-mint); }

/* closing band + footer */
section.block[style*="linear-gradient(135deg"] { background: linear-gradient(120deg, var(--c-violet), var(--c-sky) 55%, var(--c-mint)) !important; }
.site-footer { background: var(--charcoal); color: #D5D9E8; }
.site-footer .slogan { color: var(--c-amber); } .footer-links a { color: #E8EBF7; } .copyright { color: #98A0B8; }

/* forms, badges, steps */
input:focus, select:focus, textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(79,70,229,.18); }
.wizard-steps .step.active { background: var(--emerald); } .wizard-steps .step.active .n { background: var(--c-amber); color: #1F2430; }
.wizard-steps .step.done { background: #E3F8F1; color: #0B7A5F; } .wizard-steps .step.done .n { background: var(--c-mint); }
.mode-switch button { border-color: var(--line); color: var(--charcoal); }
.mode-switch button.active { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.table.data th, table.data th { background: var(--soft); color: var(--charcoal); }
.bar-row .bar > i { background: var(--emerald); }
.kin-result { background: var(--soft); border-inline-start-color: var(--c-amber); color: var(--charcoal); }

/* ---------- The tree: coloured branches, soft rounded cards ---------- */
.tree-scroll { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 34px 12px 48px; }
.ftree { --bc: #C9CEE8; }
.ftree li { --bc: inherit; }
.ftree li::before, .ftree li::after { border-top: 3px solid var(--bc, #C9CEE8); height: 28px; }
.ftree li::before { border-right: 3px solid var(--bc, #C9CEE8); }
html[dir="rtl"] .ftree li::before { border-right: none; border-left: 3px solid var(--bc, #C9CEE8); }
.ftree li:last-child::before { border-right: 3px solid var(--bc, #C9CEE8); border-radius: 0 16px 0 0; }
html[dir="rtl"] .ftree li:last-child::before { border-right: none; border-radius: 16px 0 0 0; }
.ftree li:first-child:not(:only-child)::after { border-radius: 16px 0 0 0; }
html[dir="rtl"] .ftree li:first-child:not(:only-child)::after { border-radius: 0 16px 0 0; }
.ftree ul { padding-top: 28px; }
.ftree ul::before { width: 3px; height: 28px; background: var(--bc, #C9CEE8); margin-inline-start: -1.5px; }
.ftree li { padding-top: 28px; }
.ftree > li { padding-top: 0; }

.leaf { border: 0; border-radius: 20px; min-width: 124px; padding: 12px 10px 10px; box-shadow: none; --lc: var(--memorial);
  background: color-mix(in srgb, var(--lc) 11%, #fff); }
.leaf:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.leaf.leaf-male { --lc: var(--c-sky); } .leaf.leaf-female { --lc: var(--c-pink); }
.leaf.leaf-wife { --lc: var(--c-violet); } .leaf.leaf-husband { --lc: var(--c-mint); }
.leaf .avatar, .leaf.leaf-male .avatar, .leaf.leaf-female .avatar, .leaf.leaf-wife .avatar, .leaf.leaf-husband .avatar {
  width: 54px; height: 54px; background: #fff; box-shadow: 0 0 0 3px var(--lc); }
.leaf .lname { color: var(--charcoal); font-size: .92rem; }
.leaf .lgen { color: var(--muted); }
.couple .ring { color: var(--c-amber); }
.toggle-kids { background: var(--bc, #C9CEE8); color: #fff; mix-blend-mode: normal; padding: 1px 12px; }
.leaf.highlight { outline: 4px solid var(--c-amber); }
.legend i { border-radius: 50%; }
.legend span:nth-child(1) i { background: var(--c-sky) !important; } .legend span:nth-child(2) i { background: var(--c-pink) !important; }
.legend span:nth-child(3) i { background: var(--c-violet) !important; } .legend span:nth-child(4) i { background: var(--c-mint) !important; }
.badge-blood-male { color: #1D5FC4; background: rgba(59,130,246,.14); } .badge-blood-female { background: rgba(236,72,153,.14); color: #B4236F; }
.badge-spouse-female { background: rgba(139,92,246,.14); color: #6D3FD0; } .badge-spouse-male { background: rgba(32,201,151,.16); color: #0B7A5F; }
.popup { border-radius: 28px; } .popup .avatar { box-shadow: 0 0 0 4px var(--c-violet); }

/* 3D tree backdrop to match */
.t3d { background: radial-gradient(ellipse at 50% 30%, #3B3F8F 0%, #1F2150 60%, #121335 100%); border-radius: 26px; }

/* mobile tab bar */
.tabbar { background: #fff; }

/* social sign-in */
.social-login { margin-top: 18px; }
.social-or { text-align: center; position: relative; color: var(--muted); margin-bottom: 12px; }
.social-or::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--line); }
.social-or span { position: relative; background: #fff; padding: 0 12px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 10px; background: #fff; border: 2px solid var(--line); color: var(--charcoal); border-radius: 999px; padding: 12px 20px; font-weight: 700; }
.social-btn:hover { background: var(--soft); }
.social-btn::before { display: none; }
.social-google { }
.social-btn { font-size: 1.05rem; }
.social-facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
.social-facebook:hover { background: #1466d6; }