/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #7B1D00;
  --navy-light: #A02A00;
  --gold: #E55A00;
  --gold-light: #FF7A1F;
  --cream: #FFF8EF;
  --white: #ffffff;
  --gray-50: #f4f2ec;
  --gray-100: #ece9e2;
  --gray-200: #dedad2;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #0D3D52;
  --gray-800: #071E2A;
  --blue: #3b82f6;
  --red: #ef4444;
  --green: #22c55e;
  --pink: #ec4899;
  --purple: #8b5cf6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 999px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
html { font-size: 15px; }
body { font-family: var(--font); background: var(--cream); color: var(--gray-800); line-height: 1.5; min-height: 100vh; }
a { color: var(--gold); text-decoration: none; }
img { max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }

/* ── Auth Pages ──────────────────────────────────────────────────── */
#view-auth { flex-direction: column; }

/* ── Screen notice ───────────────────────────────────────────────── */
.screen-notice { display: flex; align-items: flex-start; gap: .75rem; background: linear-gradient(135deg, #7B1D00, #A02A00); color: #e2e8f0; padding: .85rem 1.25rem; font-size: .85rem; line-height: 1.6; border-bottom: 2px solid rgba(229,90,0,.4); }
.screen-notice-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: .1rem; }
.screen-notice-body strong { color: var(--gold); }
.screen-dims-badge { display: inline-block; background: rgba(255,255,255,.12); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 700; margin-left: .3rem; letter-spacing: .02em; }

/* ── Auth page — Tiger × Peacock blended design ───────────────────── */
/* Base: deep Tiger-red top-left bleeding into Peacock-teal bottom-right */
#auth-page { min-height: 100vh; display: flex; align-items: stretch; position: relative; overflow: hidden; background: linear-gradient(145deg, #4A1000 0%, #2C0900 22%, #051820 58%, #011018 100%); }
/* Atmospheric glow orbs: Tiger orange (top-left) + Peacock teal (bottom-right) */
#auth-page::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(229,90,0,.52) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 80% 82%, rgba(0,201,177,.38) 0%, transparent 65%), radial-gradient(ellipse 35% 35% at 45% 52%, rgba(0,107,122,.18) 0%, transparent 55%), radial-gradient(ellipse 22% 22% at 88% 15%, rgba(0,201,177,.18) 0%, transparent 50%); }
/* Subtle grid texture */
#auth-page::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(255,255,255,.022) 49px, rgba(255,255,255,.022) 50px), repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(255,255,255,.022) 49px, rgba(255,255,255,.022) 50px); }
.auth-hero { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 3.5rem 3rem; }
.auth-hero-inner { max-width: 500px; color: #fff; }
.auth-hero-logo { font-size: 5.5rem; margin-bottom: 1rem; }
.auth-hero-title { font-size: 3.2rem; font-weight: 900; color: #fff; margin-bottom: .75rem; letter-spacing: -.03em; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.auth-hero-sub { font-size: 1.2rem; color: rgba(255,255,255,.72); margin-bottom: 2.5rem; line-height: 1.65; }
.auth-hero-sub em { color: #FFB347; font-style: normal; }
.auth-quotes-wrap { position: relative; min-height: 130px; }
.auth-hero-dev { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); }
/* Dual-ring avatar: Tiger orange inner + Peacock teal outer */
.auth-dev-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #E55A00, 0 0 0 4px rgba(0,201,177,.5), 0 0 20px rgba(229,90,0,.5); }
.auth-dev-info { flex: 1; }
.auth-dev-name { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.auth-dev-name a { color: #FFB347; font-weight: 800; font-size: 1rem; text-decoration: none; }
.auth-dev-name a:hover { text-decoration: underline; }
.auth-dev-handle { font-size: .78rem; color: rgba(255,255,255,.42); }
.auth-dev-bio { font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: .6rem; }
.auth-made-bharat { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.88); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full); padding: .25rem .75rem; letter-spacing: .04em; }
.auth-dev-collab { font-size: .72rem; color: rgba(255,255,255,.45); margin-top: .35rem; margin-bottom: 0; }
.auth-collab-claude { color: #a78bfa; font-weight: 700; letter-spacing: .02em; }
.auth-quote { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; display: flex; flex-direction: column; gap: .4rem; }
.auth-quote.visible { opacity: 1; }
.auth-quote-text { font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,.92); font-style: italic; padding-left: 1.1rem; border-left: 3px solid #E55A00; }
.auth-quote-emoji { font-size: 1.6rem; }
/* Card: always light/white, anchored with Peacock teal left accent */
.auth-card { background: #ffffff; border-radius: 0; padding: 3rem; width: 100%; max-width: 460px; box-shadow: -8px 0 60px rgba(0,0,0,.4); border-left: 4px solid #006B7A; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo .logo-icon { font-size: 3rem; display: block; margin-bottom: .6rem; }
.auth-logo h1 { font-size: 2rem; font-weight: 800; color: #7B1D00; }
.auth-logo p { color: #5B7280; font-size: .95rem; }
.auth-tabs { display: flex; background: #F3F4F6; border-radius: var(--radius); padding: 4px; margin-bottom: 1.5rem; }
.auth-tab { flex: 1; padding: .6rem; text-align: center; border-radius: var(--radius-sm); font-weight: 600; color: #6B7280; transition: all .2s; font-size: .95rem; }
.auth-tab.active { background: #fff; color: #7B1D00; box-shadow: var(--shadow-sm); }
@media (max-width: 768px) {
  #auth-page { flex-direction: column; min-height: auto; }
  .auth-hero { display: none; }
  .auth-card { max-width: 100%; border-radius: 0; box-shadow: none; border-left: none; border-top: 4px solid #006B7A; padding: 2rem 1.25rem; }
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: .85rem; color: var(--gray-600); margin-bottom: .4rem; }
.form-control { width: 100%; padding: .65rem .9rem; border: 2px solid var(--gray-200); border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; transition: border-color .2s, box-shadow .2s; background: var(--white); color: var(--gray-800); }
.form-control:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229,90,0,.15); }
.form-control::placeholder { color: var(--gray-400); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-hint { font-size: .78rem; color: var(--gray-500); margin-top: .25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.2rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; transition: all .2s; cursor: pointer; border: none; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-danger { background: var(--red); color: var(--white); }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: var(--gray-600); padding: .4rem .8rem; }
.btn-ghost:hover { background: var(--gray-100); }
.btn-sm { padding: .35rem .75rem; font-size: .82rem; }
.btn-lg { padding: .8rem 2rem; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn-icon { padding: .5rem; border-radius: var(--radius-sm); }

/* ── Layout ──────────────────────────────────────────────────────── */
#app { display: none; min-height: 100vh; }
#app.ready { display: flex; flex-direction: column; }
/* Fill viewport height on non-tree pages to eliminate dead space below content */
#view-main { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { background: var(--navy); color: var(--white); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.header-brand { display: flex; flex-direction: column; gap: .05rem; flex-shrink: 0; }
.header-logo { font-size: 1.1rem; font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: .4rem; text-decoration: none; }
.header-byline { font-size: .75rem; color: rgba(255,255,255,.82); text-decoration: none; letter-spacing: .04em; white-space: nowrap; transition: color .15s; }
.header-byline strong { color: #fff; font-weight: 700; }
.header-byline:hover .byline-glow { animation-duration: .8s; }
.byline-glow { color: #f5c842; font-weight: 700; animation: glowPulse 2s ease-in-out infinite; }
@keyframes glowPulse {
  0%   { text-shadow: 0 0 4px #f5c842, 0 0 10px rgba(245,200,66,.5); color: #f5c842; }
  25%  { text-shadow: 0 0 10px #ffad00, 0 0 22px rgba(255,173,0,.7), 0 0 40px rgba(255,173,0,.3); color: #ffad00; }
  50%  { text-shadow: 0 0 14px #ff8c00, 0 0 28px rgba(255,140,0,.8), 0 0 50px rgba(255,140,0,.4); color: #ffc94d; }
  75%  { text-shadow: 0 0 10px #f5c842, 0 0 22px rgba(245,200,66,.7), 0 0 40px rgba(245,200,66,.3); color: #f5e642; }
  100% { text-shadow: 0 0 4px #f5c842, 0 0 10px rgba(245,200,66,.5); color: #f5c842; }
}
.header-search { flex: 1; max-width: 360px; position: relative; }
.header-search input { width: 100%; padding: .5rem 1rem .5rem 2.4rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-full); color: var(--white); font-size: .85rem; font-family: inherit; }
.header-search input::placeholder { color: rgba(255,255,255,.5); }
.header-search input:focus { outline: none; background: rgba(255,255,255,.15); border-color: var(--gold); }
.header-search .search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); font-size: .9rem; }
.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.notif-btn { position: relative; padding: .5rem; border-radius: var(--radius-sm); color: rgba(255,255,255,.8); transition: color .2s, background .2s; }
.notif-btn:hover { color: var(--white); background: rgba(255,255,255,.1); }
.notif-badge { position: absolute; top: 2px; right: 2px; background: var(--red); color: var(--white); font-size: .65rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.avatar-btn { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: var(--radius-sm); color: var(--white); transition: background .2s; }
.avatar-btn:hover { background: rgba(255,255,255,.1); }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: var(--gold); flex-shrink: 0; overflow: hidden; }
.avatar-md { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: var(--gold); flex-shrink: 0; overflow: hidden; }
.avatar-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--navy-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.8rem; color: var(--gold); flex-shrink: 0; overflow: hidden; }

.main-layout { display: flex; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; padding: 1.5rem; gap: 1.5rem; }
.main-layout.tree-page { max-width: 100%; padding: .75rem 1rem; gap: 1rem; min-height: 0; overflow: hidden; }
.main-layout.tree-page .tree-viewer { flex: 1; min-height: 0; height: auto; }
/* Lock tree page to exact viewport — no body scroll */
body.tree-mode { overflow: hidden; }
body.tree-mode #app { height: 100vh; min-height: 0; overflow: hidden; }
body.tree-mode #view-main { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
body.tree-mode .app-header { flex-shrink: 0; }
body.tree-mode .main-layout { flex: 1 !important; min-height: 0 !important; overflow: hidden; }
body.tree-mode #main-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
body.tree-mode .page-header { flex-shrink: 0; margin-bottom: .75rem; }
body.tree-mode .tree-viewer { height: auto !important; min-height: 0 !important; flex: 1 !important; }
/* Tree page header — single inline row, no subtitle row below */
body.tree-mode .page-header { min-width: 0; align-items: center; }
.tree-title-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.tree-meta-inline { font-size: .78rem; color: var(--gray-500); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; white-space: nowrap; }
body.tree-mode .page-title { font-size: 1.25rem; }
/* ── Sidebar collapse toggle ─────────────────────────────────────── */
/* Displayed as a small muted button at the BOTTOM of the sidebar-nav, visually distinct from nav links */
.sidebar-collapse-btn { display: none; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .75rem; font-size: .78rem; font-weight: 600; cursor: pointer; color: var(--gray-400); border-top: 1px solid var(--gray-100); background: var(--gray-50); letter-spacing: .03em; transition: background .15s, color .15s; }
.sidebar-collapse-btn:hover { background: var(--gray-100); color: var(--navy); }
body.tree-mode .sidebar-collapse-btn { display: flex; }
/* Collapsed: narrow icon-only rail */
body.tree-mode .main-layout.sidebar-collapsed .sidebar { width: 52px !important; min-width: 52px; overflow: hidden; }
body.tree-mode .main-layout.sidebar-collapsed .sidebar-collapse-btn { padding: .55rem .25rem; font-size: 1rem; border-top: 1px solid var(--gray-100); }
/* Nav items show as icon-only centered tiles */
body.tree-mode .main-layout.sidebar-collapsed .nav-item { justify-content: center; padding: .65rem .25rem; border-left: 3px solid transparent; }
body.tree-mode .main-layout.sidebar-collapsed .nav-item.active { background: rgba(229,90,0,.12); border-left-color: var(--gold); }
body.tree-mode .main-layout.sidebar-collapsed .nav-item .nav-icon { width: auto; font-size: 1.2rem; }
body.tree-mode .main-layout.sidebar-collapsed .nav-label { display: none; }
body.tree-mode .main-layout.sidebar-collapsed .clippy-card { display: none; }
[data-theme="dark"] .sidebar-collapse-btn { color: #475569; border-top-color: #0D3D52; background: #031520; }
[data-theme="dark"] .sidebar-collapse-btn:hover { background: #071E2A; color: #cbd5e1; }
[data-theme="dark"] body.tree-mode .main-layout.sidebar-collapsed .sidebar-nav { background: #071E2A; }
[data-theme="dark"] body.tree-mode .main-layout.sidebar-collapsed .nav-item.active { background: rgba(229,90,0,.1); }
.sidebar { width: 240px; flex-shrink: 0; position: sticky; top: 72px; align-self: flex-start; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-nav { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; color: var(--gray-700); font-weight: 500; transition: all .15s; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--gray-50); color: var(--navy); }
.nav-item.active { background: rgba(123,29,0,.05); color: var(--navy); border-left-color: var(--gold); font-weight: 700; }
.nav-item .nav-icon { font-size: 1.1rem; width: 20px; text-align: center; }
.main-content { flex: 1; min-width: 0; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.card-header { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-weight: 700; font-size: 1rem; color: var(--gray-800); }
.card-body { padding: 1.25rem; }
.card-footer { padding: .85rem 1.25rem; border-top: 1px solid var(--gray-100); background: var(--gray-50); }

/* ── Page Sections ───────────────────────────────────────────────── */
.page-header { margin-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 1.6rem; font-weight: 800; color: var(--navy); }
.page-subtitle { color: var(--gray-500); font-size: .9rem; margin-top: .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Gen-depth badge — shown in tree header and tree list rows */
.gen-depth-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: linear-gradient(135deg, rgba(107,84,192,.12), rgba(51,96,200,.12)); border: 1px solid rgba(107,84,192,.25); color: #5a48b0; white-space: nowrap; }
.gen-depth-level { font-size: .68rem; font-weight: 600; opacity: .75; margin-left: .15rem; }
.gen-depth-inline { font-size: .78rem; color: #6b54c0; font-weight: 600; }
[data-theme="dark"] .gen-depth-pill { background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(96,165,250,.12)); border-color: rgba(167,139,250,.3); color: #a78bfa; }
[data-theme="dark"] .gen-depth-inline { color: #a78bfa; }

/* ── Theme pill toggle (3-position: Day | Auto | Night) ──────────── */
.theme-pill { display: flex; align-items: center; }
.theme-pill-track {
  position: relative;
  display: flex;
  background: rgba(0,0,0,.28);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08);
}
.theme-pill-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  width: calc(33.333% - 3px);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: left .22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  left: 3px;
}
.theme-pill-thumb[data-pos="auto"]  { left: calc(33.333% + 0px); }
.theme-pill-thumb[data-pos="dark"]  { left: calc(66.666% - 0px); }
.theme-pill-opt {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 4px;
  padding: .32rem .72rem;
  border: none; background: none; cursor: pointer;
  font-size: .82rem; font-weight: 700; line-height: 1.2;
  color: rgba(255,255,255,.7);
  border-radius: 999px;
  transition: color .18s;
  white-space: nowrap;
  user-select: none;
}
.theme-pill-opt:hover { color: rgba(255,255,255,.92); }
.theme-pill-opt.active { color: #071E2A; }
.theme-pill-opt span { font-size: .74rem; font-weight: 700; letter-spacing: .01em; }

/* ── Tree List (explorer view) ───────────────────────────────────── */
.trees-list { display: flex; flex-direction: column; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.tree-row { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; background: var(--white); border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: background .12s; }
.tree-row:last-child { border-bottom: none; }
.tree-row:hover { background: var(--gray-50); }
.tree-row-selected { background: rgba(229,90,0,.1) !important; }
.tree-row-icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.tree-row-main { flex: 1; min-width: 0; }
.tree-row-name { font-weight: 600; font-size: .95rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row-meta { font-size: .78rem; color: var(--gray-500); display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem; }
.tree-row-badges { display: flex; gap: .4rem; flex-shrink: 0; align-items: center; }

/* ── Tree Cards (kept for any remaining uses) ────────────────────── */
.trees-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.tree-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; display: flex; flex-direction: column; }
.tree-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tree-card-cover { height: 110px; background: linear-gradient(135deg, var(--navy), var(--navy-light)); position: relative; overflow: hidden; }
.tree-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.tree-card-cover .tree-card-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; opacity: .3; }
.tree-card-body { padding: 1rem; flex: 1; }
.tree-card-name { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: .25rem; }
.tree-card-meta { font-size: .8rem; color: var(--gray-500); display: flex; gap: .75rem; flex-wrap: wrap; }
.tree-card-footer { padding: .75rem 1rem; border-top: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.tree-privacy-badge { font-size: .72rem; padding: .2rem .5rem; border-radius: var(--radius-full); font-weight: 600; }
.privacy-family { background: rgba(229,90,0,.15); color: #B34500; }
.privacy-public { background: rgba(34,197,94,.12); color: #16683a; }
.privacy-private { background: rgba(100,116,139,.12); color: #475569; }
.tree-role-badge { font-size: .72rem; padding: .2rem .5rem; border-radius: var(--radius-full); font-weight: 600; background: rgba(59,130,246,.1); color: #1d4ed8; }
.new-tree-card { border: 2px dashed var(--gray-300); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem 1rem; color: var(--gray-500); transition: all .2s; cursor: pointer; border-radius: var(--radius); min-height: 180px; }
.new-tree-card:hover { border-color: var(--gold); color: var(--gold); background: rgba(229,90,0,.04); }
.new-tree-card .icon { font-size: 2rem; }

/* ── Tree Viewer ─────────────────────────────────────────────────── */
.tree-viewer { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 148px); min-height: 520px; }
body.tree-mode .tree-viewer { height: auto; min-height: 0; }
#tree-tab-viz { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tree-viewer-header { padding: 1rem 1.25rem; background: var(--navy); color: var(--white); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tree-tabs { display: flex; background: var(--white); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.tree-tab { padding: .75rem 1.25rem; font-weight: 600; color: var(--gray-500); border-bottom: 3px solid transparent; transition: all .15s; cursor: pointer; }
.tree-tab:hover { color: var(--navy); }
.tree-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
#tree-canvas { background: var(--gray-50); display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Stage: the actual zoomable/pannable canvas – fills all remaining space */
.tree-stage { flex: 1; min-height: 0; overflow: hidden; position: relative; cursor: grab; user-select: none; background: var(--gray-50); }
.tree-stage:active { cursor: grabbing; }
/* Toolbar */
.tree-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background: var(--white); border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; flex-shrink: 0; z-index: 10; }
.tree-filter-group { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tree-toolbar-label { font-size: .82rem; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.tree-toolbar-sep { font-size: .75rem; color: var(--gray-300); padding: 0 .1rem; user-select: none; }
.tree-select { font-size: .78rem; padding: .25rem .5rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: var(--white); color: var(--gray-700); cursor: pointer; max-width: 130px; }
.tree-filter-btn { font-size: .75rem; padding: .25rem .6rem; border: 1px solid var(--gray-300); border-radius: var(--radius-full); color: var(--gray-600); background: var(--white); transition: all .15s; white-space: nowrap; }
.tree-filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.tree-filter-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* Filter pill switch */
.tree-filter-pill { display: flex; align-items: center; }
.tree-filter-pill-track { position: relative; display: flex; background: var(--gray-300); border-radius: 999px; padding: 3px; gap: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.tree-filter-pill-thumb { position: absolute; top: 3px; bottom: 3px; width: calc(33.333% - 3px); background: var(--navy); border-radius: 999px; box-shadow: 0 1px 5px rgba(0,0,0,.3); transition: left .22s cubic-bezier(.4,0,.2,1); pointer-events: none; left: 3px; }
.tree-filter-pill-thumb[data-pos="all"]      { left: calc(33.333% + 0px); }
.tree-filter-pill-thumb[data-pos="maternal"] { left: calc(66.666% - 0px); }
.tree-filter-pill-opt { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; padding: .32rem .72rem; border: none; background: none; cursor: pointer; font-size: .82rem; font-weight: 700; line-height: 1.2; color: var(--gray-600); border-radius: 999px; transition: color .18s; white-space: nowrap; user-select: none; }
.tree-filter-pill-opt:hover { color: var(--gray-900); }
.tree-filter-pill-opt.active { color: #fff; }
.tree-filter-pill-opt span { font-size: .74rem; font-weight: 700; letter-spacing: .01em; }
/* Search */
.tree-search-group { display: flex; align-items: center; gap: .45rem; }
.tree-search-wrap { position: relative; display: flex; align-items: center; }
.tree-search-icon { position: absolute; left: .55rem; font-size: .8rem; pointer-events: none; }
.tree-search-input { padding: .28rem .7rem .28rem 1.8rem; border: 1px solid var(--gray-300); border-radius: var(--radius-full); font-size: .8rem; width: 160px; background: var(--gray-50); color: var(--gray-800); transition: border-color .15s, width .2s; font-family: inherit; }
.tree-search-input:focus { outline: none; border-color: var(--gold); width: 200px; background: var(--white); }
.tree-add-pill { padding: .28rem .85rem; border: 1px solid var(--navy); border-radius: var(--radius-full); font-size: .8rem; font-weight: 600; background: var(--navy); color: #fff; cursor: pointer; white-space: nowrap; transition: opacity .15s; font-family: inherit; }
.tree-add-pill:hover { opacity: .85; }
/* Controls */
.tree-controls-row { display: flex; align-items: center; gap: .35rem; }
.tree-btn { min-width: 36px; height: 34px; padding: 0 .6rem; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-size: .92rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--navy); border: 1px solid var(--gray-300); transition: background .15s; white-space: nowrap; cursor: pointer; }
.tree-btn:hover { background: var(--gray-100); }
.tree-btn-dl { font-size: .72rem; padding: 0 .55rem; color: var(--gray-600); }
/* Collapse button hover */
.col-btn circle { transition: opacity .15s; }
.col-btn:hover circle { opacity: .75; }
.tree-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; gap: 1rem; color: var(--gray-500); }
.tree-empty-icon { font-size: 4rem; }
.tree-empty p { font-size: 1rem; }
/* Keep tree-scroll as alias for backward compat (old code may ref it) */
.tree-scroll { flex: 1; min-height: 0; overflow: hidden; }
/* Non-viz tree tabs: scrollable flex column */
#tree-tab-list, #tree-tab-feed, #tree-tab-collab { flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem; }
/* Fullscreen — whole canvas div (toolbar + stage) goes fullscreen */
#tree-canvas:-webkit-full-screen { width: 100vw !important; height: 100vh !important; background: var(--gray-50); display: flex; flex-direction: column; }
#tree-canvas:fullscreen         { width: 100vw !important; height: 100vh !important; background: var(--gray-50); display: flex; flex-direction: column; }
/* .tree-btn-add removed — replaced by .tree-add-pill beside search bar */
/* Fullscreen exit button highlight */
.tree-btn-fs-active { background: rgba(229,90,0,.12) !important; color: var(--tiger) !important; }
/* Bulk add member form */
.bulk-member-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem; align-items: end; padding: .6rem 0; border-bottom: 1px solid var(--gray-100); }
.bulk-member-row:last-of-type { border-bottom: none; }
.bulk-member-row label { font-size: .72rem; color: var(--gray-500); display: block; margin-bottom: .2rem; }
.bulk-member-row input, .bulk-member-row select { padding: .4rem .6rem; font-size: .82rem; }

/* ── Member Panels ───────────────────────────────────────────────── */
.members-list-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0 .75rem; }
.members-list { display: flex; flex-direction: column; gap: .75rem; }
.member-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: box-shadow .2s, background .15s; cursor: pointer; }
.member-item:hover { box-shadow: var(--shadow); }
.member-item.bulk-selected { background: rgba(229,90,0,.12); box-shadow: 0 0 0 2px var(--gold); }
.bulk-checkbox { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--gold); }
.bulk-action-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--navy); color: var(--white); padding: .65rem 1rem; border-radius: var(--radius-sm); margin-top: 1rem; z-index: 10; }
.bulk-action-bar #bulk-count-label { font-weight: 700; font-size: .85rem; flex: 1; }
[data-theme="dark"] .member-item.bulk-selected { background: rgba(229,90,0,.1); }
.member-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--gray-200); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--gray-500); overflow: hidden; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-weight: 700; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-meta { font-size: .8rem; color: var(--gray-500); }
.gender-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gender-male { background: var(--blue); }
.gender-female { background: var(--pink); }
.gender-other { background: var(--purple); }

/* ── Feed / Social ───────────────────────────────────────────────── */
.feed-compose { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem; margin-bottom: 1.25rem; }
.compose-row { display: flex; align-items: flex-start; gap: .75rem; }
.compose-input { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: .65rem .9rem; font-family: inherit; font-size: .9rem; resize: none; min-height: 60px; transition: border-color .2s; background: var(--gray-50); }
.compose-input:focus { outline: none; border-color: var(--gold); background: var(--white); }
.compose-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--gray-100); flex-wrap: wrap; }
.compose-tools { display: flex; gap: .5rem; align-items: center; }
.compose-tree-select { font-size: .82rem; padding: .35rem .6rem; flex-shrink: 0; }
/* Post-type pill toggle */
.post-type-toggle { display: inline-flex; background: var(--gray-100); border-radius: var(--radius-full); padding: 2px; }
.ptt-btn { background: none; border: none; border-radius: var(--radius-full); padding: .22rem .55rem; font-size: .85rem; cursor: pointer; color: var(--gray-500); transition: background .15s, box-shadow .15s; font-family: inherit; line-height: 1; }
.ptt-btn.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
[data-theme="dark"] .post-type-toggle { background: #0D3D52; }
[data-theme="dark"] .ptt-btn { color: #64748b; }
[data-theme="dark"] .ptt-btn.active { background: #071E2A; color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.members-search-bar { padding: .5rem .75rem; border-bottom: 1px solid var(--gray-100); }
.members-search-input { width: 100%; padding: .4rem .75rem; border: 1px solid var(--gray-200); border-radius: var(--radius-full); font-size: .83rem; font-family: inherit; background: var(--gray-50); color: var(--gray-800); transition: border-color .15s; }
.members-search-input:focus { outline: none; border-color: var(--gold); background: var(--white); }
.post-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 1rem; overflow: hidden; }
.post-header { padding: 1rem 1.25rem .75rem; display: flex; align-items: center; gap: .75rem; }
.post-body { padding: 0 1.25rem .75rem; font-size: .92rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.post-image { width: 100%; max-height: 400px; object-fit: cover; }
.post-footer { padding: .5rem 1.25rem; border-top: 1px solid var(--gray-100); display: flex; align-items: center; gap: .25rem; }
.post-action-btn { display: flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .85rem; color: var(--gray-500); font-weight: 500; transition: all .15s; }
.post-action-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.post-action-btn.reacted { color: #e11d48; }
.post-comments { padding: 0 1.25rem 1rem; display: none; }
.post-comments.open { display: block; }
.comment-item { display: flex; gap: .6rem; margin-bottom: .75rem; }
.comment-bubble { background: var(--gray-100); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm); padding: .5rem .8rem; flex: 1; }
.comment-author { font-weight: 700; font-size: .8rem; color: var(--gray-700); }
.comment-text { font-size: .88rem; }
.comment-form { display: flex; gap: .5rem; margin-top: .5rem; }
.comment-input { flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius-full); padding: .5rem 1rem; font-size: .85rem; font-family: inherit; }
.comment-input:focus { outline: none; border-color: var(--gold); }
.post-type-badge { font-size: .72rem; padding: .15rem .5rem; border-radius: var(--radius-full); font-weight: 600; margin-left: .5rem; }
.type-memory { background: rgba(139,92,246,.1); color: #6d28d9; }
.type-milestone { background: rgba(229,90,0,.15); color: #B34500; }
.type-update { background: rgba(59,130,246,.1); color: #1d4ed8; }

/* ── Member Detail Modal ─────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform .2s; }
.modal-overlay.open .modal { transform: none; }
.modal-header { padding: 1.25rem; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white); z-index: 1; }
.modal-title { font-weight: 700; font-size: 1.1rem; color: var(--navy); }
.modal-close { font-size: 1.3rem; padding: .25rem; border-radius: var(--radius-sm); color: var(--gray-500); transition: color .15s; }
.modal-close:hover { color: var(--gray-800); }
.modal-body { padding: 1.25rem; }
.modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: .75rem; }
.member-detail-header { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: flex-start; }
.member-detail-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--gray-400); flex-shrink: 0; overflow: hidden; }
.member-detail-info h2 { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.member-detail-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.tag { font-size: .75rem; padding: .2rem .55rem; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-600); font-weight: 600; }
.member-relations { display: grid; gap: .6rem; margin-top: 1rem; }
.relation-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--gray-50); border-radius: var(--radius-sm); font-size: .85rem; }
.relation-label { color: var(--gray-600); font-weight: 600; min-width: 80px; }
.relation-name { cursor: pointer; color: var(--navy); font-weight: 600; }
.relation-name:hover { text-decoration: underline; }
.member-detail-bio { margin-bottom: 1rem; color: var(--gray-600); font-size: .92rem; line-height: 1.6; }

/* ── Notifications ───────────────────────────────────────────────── */
.notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 200; max-height: 480px; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: all .2s; }
.notif-dropdown.open { opacity: 1; pointer-events: all; transform: none; }
.notif-header { padding: .85rem 1rem; border-bottom: 1px solid var(--gray-100); font-weight: 700; color: var(--navy); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white); z-index: 1; }
.notif-item { padding: .7rem 1rem; border-bottom: 1px solid var(--gray-100); display: flex; gap: .65rem; cursor: pointer; transition: background .12s; align-items: flex-start; border-left: 3px solid transparent; }
.notif-item:hover { background: var(--gray-50); }
.notif-item.unread { background: rgba(229,90,0,.08); border-left-color: var(--gold); }
.notif-item.unread:hover { background: rgba(229,90,0,.13); }
.notif-item-icon { font-size: 1.1rem; flex-shrink: 0; width: 1.6rem; text-align: center; padding-top: .05rem; }
.notif-text { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .85rem; color: var(--gray-800); line-height: 1.4; }
.notif-body { font-size: .79rem; color: var(--gray-600); margin-top: .1rem; line-height: 1.4; }
.notif-time { font-size: .71rem; color: var(--gray-500); margin-top: .25rem; display: flex; align-items: center; gap: .25rem; }
.notif-new-dot { display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }
.notif-empty { padding: 1.5rem; text-align: center; color: var(--gray-400); font-size: .85rem; }
.notif-see-all { padding: .65rem 1rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--gold); cursor: pointer; border-top: 1px solid var(--gray-100); }
.notif-see-all:hover { background: var(--gray-50); }

/* ── Profile ─────────────────────────────────────────────────────── */
.profile-cover { height: 160px; background: linear-gradient(135deg, var(--navy), #A02A00); border-radius: var(--radius) var(--radius) 0 0; position: relative; }
.profile-avatar-wrap { position: absolute; bottom: -40px; left: 1.5rem; }
.profile-avatar-wrap .avatar-lg { border: 4px solid var(--white); box-shadow: var(--shadow); }
.profile-info { padding: 3.5rem 1.5rem 1.25rem; }
.profile-name { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.profile-username { color: var(--gray-500); font-size: .9rem; }
.profile-bio { color: var(--gray-600); margin-top: .5rem; font-size: .9rem; }
.profile-stats { display: flex; gap: 2rem; margin-top: 1rem; }
.stat-item { text-align: center; }
.stat-num { font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.stat-label { font-size: .78rem; color: var(--gray-500); }

/* ── Invite ──────────────────────────────────────────────────────── */
.invite-link-box { background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--radius-sm); padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; font-size: .85rem; font-family: monospace; word-break: break-all; }
.collab-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--gray-100); }
.collab-item:last-child { border-bottom: none; }

/* ── Alerts & Toasts ─────────────────────────────────────────────── */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { background: var(--gray-800); color: var(--white); padding: .75rem 1.25rem; border-radius: var(--radius-sm); font-size: .88rem; box-shadow: var(--shadow-lg); max-width: 340px; animation: toastIn .25s ease; pointer-events: all; }
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
.toast.info { background: var(--navy); }
.toast.toast-action { display: flex; align-items: center; gap: .75rem; max-width: 420px; }
.toast-action-btn { flex-shrink: 0; background: var(--gold); color: var(--navy); border: none; border-radius: var(--radius-sm); padding: .3rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.toast-action-btn:hover { background: var(--gold-light); }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── Global search dropdown ──────────────────────────────────────── */
.header-search { flex: 1; max-width: 420px; }
.gs-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 500; overflow: hidden; }
.gs-dropdown.open { display: block; }
.gs-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; cursor: pointer; transition: background .1s; outline: none; }
.gs-item:hover, .gs-item:focus { background: var(--gray-50); }
.gs-icon { font-size: 1.1rem; flex-shrink: 0; }
.gs-info { min-width: 0; }
.gs-name { font-weight: 600; font-size: .9rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-meta { font-size: .75rem; color: var(--gray-500); }
.gs-empty { padding: .75rem 1rem; font-size: .85rem; color: var(--gray-500); text-align: center; }

/* ── Release Notes timeline ──────────────────────────────────────── */
.rn-timeline { position: relative; padding-left: 1.5rem; }
.rn-timeline::before { content: ''; position: absolute; left: .6rem; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }
.rn-entry { position: relative; margin-bottom: 2rem; }
.rn-dot { position: absolute; left: -1.5rem; top: .9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--gold); }
.rn-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.rn-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; flex-wrap: wrap; }
.rn-version { font-weight: 800; font-size: 1.05rem; color: var(--navy); font-family: monospace; }
.rn-badge { background: var(--gold); color: var(--navy); font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: var(--radius-full); }
.rn-date { font-size: .8rem; color: var(--gray-500); margin-left: auto; }
.rn-section { margin-top: .6rem; }
.rn-section-label { font-size: .75rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.rn-list { margin: 0; padding-left: 1.1rem; }
.rn-list li { font-size: .88rem; color: var(--gray-700); margin-bottom: .2rem; line-height: 1.5; }

/* ── Export button pulse ─────────────────────────────────────────── */
.export-btn-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.export-hint-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; font-weight: 600; color: var(--gold); background: rgba(229,90,0,.12); border: 1px solid rgba(229,90,0,.35); border-radius: var(--radius-full); padding: .15rem .55rem; pointer-events: none; opacity: 0; transition: opacity .4s ease; z-index: 10; }
.export-hint-label.export-hint-visible { opacity: 1; }
@keyframes exportGlow {
  0%   { box-shadow: 0 0 0 0 rgba(229,90,0,0),   0 0  0px rgba(229,90,0,0);   border-color: inherit;       color: inherit; }
  35%  { box-shadow: 0 0 0 8px rgba(229,90,0,.5), 0 0 22px rgba(229,90,0,.3); border-color: var(--gold);   color: var(--gold); }
  65%  { box-shadow: 0 0 0 8px rgba(229,90,0,.5), 0 0 22px rgba(229,90,0,.3); border-color: var(--gold);   color: var(--gold); }
  100% { box-shadow: 0 0 0 0 rgba(229,90,0,0),   0 0  0px rgba(229,90,0,0);   border-color: inherit;       color: inherit; }
}
.export-pulse { animation: exportGlow 2.2s ease-in-out 2; border-width: 2px; }

/* ── Sync button & badge ─────────────────────────────────────────── */
.sync-req-btn { position: relative; }
.sync-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-size: .62rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; margin-left: .15rem; vertical-align: middle; line-height: 1; }
/* ── Sync modal ──────────────────────────────────────────────────── */
.sync-info-box { display: flex; gap: .75rem; align-items: flex-start; background: rgba(107,84,192,.07); border: 1px solid rgba(107,84,192,.2); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .85rem; color: var(--gray-700); }
.sync-info-icon { font-size: 1.4rem; flex-shrink: 0; }
.sync-empty { text-align: center; padding: 2rem 1rem; color: var(--gray-500); font-size: .9rem; }
.sync-list { display: flex; flex-direction: column; gap: .85rem; }
.sync-card { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: .85rem 1rem; background: var(--white); transition: opacity .2s; }
.sync-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; font-size: .78rem; }
.sync-dir-tag { background: rgba(51,96,200,.1); color: #3360c8; padding: .15rem .5rem; border-radius: 999px; font-weight: 600; }
.sync-type-tag { padding: .15rem .5rem; border-radius: 999px; font-weight: 600; }
.sync-tag-add { background: rgba(34,197,94,.12); color: #16683a; }
.sync-tag-edit { background: rgba(229,90,0,.12); color: #B34500; }
.sync-tag-del { background: rgba(239,68,68,.1); color: #b91c1c; }
.sync-from-tree { color: var(--gray-600); }
.sync-by { color: var(--gray-500); }
.sync-time { color: var(--gray-400); margin-left: auto; }
.sync-card-body { font-size: .85rem; margin-bottom: .75rem; }
.sync-member-row { margin-bottom: .4rem; }
.sync-member-name { font-weight: 700; color: var(--navy); }
.sync-member-meta { color: var(--gray-500); font-size: .78rem; }
.sync-diff-table { font-size: .78rem; border-collapse: collapse; margin-top: .3rem; }
.sync-diff-table td { padding: .15rem .35rem; }
.sync-diff-key { color: var(--gray-500); text-transform: capitalize; }
.sync-diff-from { color: #b91c1c; text-decoration: line-through; }
.sync-diff-arrow { color: var(--gray-400); }
.sync-diff-to { color: #16683a; font-weight: 600; }
.sync-del-warn { color: #b91c1c; font-size: .78rem; margin-top: .25rem; }
.sync-collab-note { color: var(--gray-500); font-size: .78rem; margin-top: .25rem; }
.sync-card-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sync-note-input { flex: 1; min-width: 140px; font-size: .8rem; padding: .3rem .6rem; }
/* outgoing proposals section */
.sync-outgoing-section { margin-top: 1rem; }
.sync-outgoing-header { font-size: .82rem; font-weight: 700; color: var(--gray-600); padding: .4rem 0 .3rem; border-top: 1px solid var(--gray-200); margin-bottom: .3rem; }
.sync-outgoing-note { font-size: .78rem; color: var(--gray-500); margin-bottom: .65rem; }
.sync-card-outgoing { background: var(--gray-50); border-color: var(--gray-200); border-style: dashed; }
.sync-card-outgoing .sync-card-head { opacity: .75; }
/* dark overrides */
[data-theme="dark"] .sync-info-box { background: rgba(167,139,250,.07); border-color: rgba(167,139,250,.25); color: #94a3b8; }
[data-theme="dark"] .sync-card { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .sync-card-outgoing { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .sync-outgoing-header { color: #64748b; border-top-color: #0D3D52; }
[data-theme="dark"] .sync-outgoing-note { color: #475569; }
[data-theme="dark"] .sync-dir-tag { background: rgba(96,165,250,.1); color: #60a5fa; }
[data-theme="dark"] .sync-member-name { color: #e2e8f0; }

/* ── Clippy tips widget ──────────────────────────────────────────── */
.clippy-card { background: var(--white); border: 1.5px solid var(--gold); border-radius: var(--radius); padding: .85rem .9rem .7rem; box-shadow: 0 2px 8px rgba(229,90,0,.15); transition: opacity .22s ease; }
.clippy-card.clippy-fade { opacity: 0; }
.clippy-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.clippy-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.clippy-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); }
.clippy-text { font-size: .8rem; color: var(--gray-600); line-height: 1.5; min-height: 3.2rem; }
.clippy-next-btn { display: block; margin-top: .6rem; margin-left: auto; background: none; border: none; font-size: .75rem; color: var(--gray-400); cursor: pointer; padding: 0; transition: color .15s; }
.clippy-next-btn:hover { color: var(--gold); }
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 1rem; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ── Photo Cropper ───────────────────────────────────────────────── */
.cropper-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cropper-stage { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #011018; touch-action: none; cursor: grab; user-select: none; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage canvas { display: block; }
.cropper-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(15,23,42,.55); }
.cropper-grid { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255,255,255,.9); }
.cropper-grid::before, .cropper-grid::after { content: ''; position: absolute; background: rgba(255,255,255,.35); }
.cropper-grid::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); background: transparent; }
.cropper-grid::after  { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); background: transparent; }
.cropper-controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.cropper-zoom-label { font-size: .8rem; color: var(--gray-500); font-weight: 600; }
.cropper-zoom { width: 80%; accent-color: var(--gold); }
.cropper-hint { font-size: .75rem; color: var(--gray-500); }

/* ── Loading ─────────────────────────────────────────────────────── */
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-screen { display: flex; align-items: center; justify-content: center; min-height: 300px; color: var(--gray-400); }
.loading-screen .spinner { width: 36px; height: 36px; border-width: 3px; }
.skeleton { background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Empty States ────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--gray-500); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state h3 { font-size: 1.1rem; font-weight: 700; color: var(--gray-700); margin-bottom: .5rem; }
.empty-state p { font-size: .9rem; margin-bottom: 1.5rem; }

/* ── Misc Utilities ──────────────────────────────────────────────── */
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.text-sm { font-size: .85rem; } .text-xs { font-size: .75rem; } .text-muted { color: var(--gray-500); }
.font-bold { font-weight: 700; } .text-navy { color: var(--navy); } .text-gold { color: var(--gold); }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; }
.mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; }
.hidden { display: none !important; }
.divider { border: none; border-top: 1px solid var(--gray-100); margin: 1rem 0; }
.section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); padding: .75rem 1.1rem .4rem; }
.right-sidebar { width: 280px; flex-shrink: 0; }
.right-sidebar .card { margin-bottom: 1rem; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) { .right-sidebar { display: none; } }
/* ── Mobile bottom nav ───────────────────────────────────────────── */
.mobile-nav { display: none; }
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-layout { padding: .75rem; padding-bottom: 4.5rem; }
  .header-search { display: none; }
  .hidden-mobile { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .trees-grid { grid-template-columns: 1fr 1fr; }

  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  }
  .mobile-nav .nav-item {
    flex: 1;
    flex-direction: column;
    padding: .45rem .2rem .35rem;
    gap: .15rem;
    justify-content: center;
    border-left: none;
    border-top: 3px solid transparent;
    font-size: .68rem;
  }
  .mobile-nav .nav-item.active { background: rgba(123,29,0,.05); border-left: none; border-top-color: var(--gold); }
  .mobile-nav .nav-icon { font-size: 1.2rem; width: auto; }
  .mobile-nav-label { line-height: 1; }
}
@media (max-width: 480px) { .trees-grid { grid-template-columns: 1fr; } }

/* ── Invite Accept Page ──────────────────────────────────────────── */
.invite-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy), var(--navy-light)); padding: 1rem; }
.invite-card { background: var(--white); border-radius: 20px; padding: 2.5rem; max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.invite-card .invite-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ── Member Search Widget ─────────────────────────────────────────── */
.member-search-wrap { position: relative; }
/* position:fixed lets the list escape any modal overflow:hidden — top/left/width set by JS */
.member-search-list { position: fixed; background: var(--white); border: 2px solid var(--gold); border-radius: var(--radius-sm); max-height: 220px; overflow-y: auto; z-index: 99999; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 200px; }
.member-search-list.open { display: block; }
.member-search-option { padding: .5rem .9rem; cursor: pointer; font-size: .88rem; color: var(--gray-700); }
.member-search-option:hover, .member-search-option:focus { background: var(--gray-50); outline: none; }
.member-search-option.selected { background: rgba(229,90,0,.1); font-weight: 600; }
.member-search-option.none-opt { color: var(--gray-400); font-style: italic; }

/* ── Theme Toggle ─────────────────────────────────────────────────── */
.theme-toggle { display: flex; gap: .3rem; background: var(--gray-100); padding: 4px; border-radius: var(--radius); }
.theme-toggle-btn { flex: 1; padding: .4rem .5rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; color: var(--gray-500); transition: all .2s; text-align: center; cursor: pointer; user-select: none; }
.theme-toggle-btn.active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm); }

/* ── App Footer ───────────────────────────────────────────────────── */
.app-footer { text-align: center; padding: .55rem 1rem; font-size: .75rem; color: var(--gray-400); border-top: 1px solid var(--gray-200); background: var(--white); flex-shrink: 0; }
.app-footer a { color: var(--gold); font-weight: 600; text-decoration: none; }
.app-footer a:hover { color: var(--gold-light); }

/* ── Dark Theme — Peacock Night ───────────────────────────────────── */
[data-theme="dark"] {
  --navy:       #006B7A;
  --navy-light: #008A9E;
  --gold:       #00C9B1;
  --gold-light: #00E5CB;
  --cream:      #011018;
}
[data-theme="dark"] body { background: #011018; color: #e2e8f0; }
/* Auth page is theme-independent — always shows the Tiger × Peacock blended design */
[data-theme="dark"] #auth-page { background: linear-gradient(145deg, #4A1000 0%, #2C0900 22%, #051820 58%, #011018 100%); }
[data-theme="dark"] .auth-card { background: #ffffff; box-shadow: -8px 0 60px rgba(0,0,0,.5); border-left: 4px solid #006B7A; }
[data-theme="dark"] .auth-logo h1 { color: #7B1D00; }
[data-theme="dark"] .auth-logo p { color: #5B7280; }
[data-theme="dark"] .auth-tabs { background: #F3F4F6; }
[data-theme="dark"] .auth-tab.active { background: #fff; color: #7B1D00; }
/* Keep form controls light inside the always-white auth card */
[data-theme="dark"] #auth-page .form-control { background: #fff; border-color: #D1D5DB; color: #111827; }
[data-theme="dark"] #auth-page .form-control::placeholder { color: #9CA3AF; }
[data-theme="dark"] #auth-page .form-control:focus { border-color: #006B7A; background: #fff; box-shadow: 0 0 0 3px rgba(0,107,122,.18); }
[data-theme="dark"] #auth-page .form-group label { color: #374151; }
[data-theme="dark"] #auth-page .auth-card a { color: #A02A00; }
[data-theme="dark"] #auth-page .alert-error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
[data-theme="dark"] .app-header { background: #011018; }
[data-theme="dark"] .sidebar-nav { background: #071E2A; }
[data-theme="dark"] .mobile-nav { background: #071E2A; border-top-color: #0D3D52; }
[data-theme="dark"] .nav-item { color: #94a3b8; }
[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }
[data-theme="dark"] .nav-item.active { background: rgba(100,200,255,.04); color: #93c5fd; border-left-color: var(--gold); }
[data-theme="dark"] .card { background: #071E2A; }
[data-theme="dark"] .card-header { border-color: #0D3D52; }
[data-theme="dark"] .card-title { color: #e2e8f0; }
[data-theme="dark"] .card-footer { background: #011018; border-color: #0D3D52; }
[data-theme="dark"] .page-title { color: #e2e8f0; }
[data-theme="dark"] .tree-card { background: #071E2A; }
[data-theme="dark"] .tree-card-name { color: #e2e8f0; }
[data-theme="dark"] .trees-list { border-color: #0D3D52; }
[data-theme="dark"] .tree-row { background: #071E2A; border-bottom-color: #0D3D52; }
[data-theme="dark"] .tree-row:hover { background: #0B2535; }
[data-theme="dark"] .tree-row-selected { background: rgba(229,90,0,.08) !important; }
[data-theme="dark"] .tree-row-name { color: #e2e8f0; }
[data-theme="dark"] .tree-row-meta { color: #64748b; }
[data-theme="dark"] .form-control { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .form-control::placeholder { color: #475569; }
[data-theme="dark"] .form-control:focus { border-color: var(--gold); background: #071E2A; }
[data-theme="dark"] select.form-control option { background: #071E2A; }
[data-theme="dark"] .tree-viewer { background: #071E2A; }
[data-theme="dark"] .tree-tabs { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .tree-tab { color: #64748b; }
[data-theme="dark"] .tree-tab:hover { color: #93c5fd; }
[data-theme="dark"] .tree-tab.active { color: #93c5fd; border-bottom-color: var(--gold); }
[data-theme="dark"] .tree-toolbar { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] #tree-canvas, [data-theme="dark"] .tree-stage { background: #080f1e; }
[data-theme="dark"] .tree-stage:fullscreen, [data-theme="dark"] .tree-stage:-webkit-full-screen { background: #080f1e; }
[data-theme="dark"] #tree-canvas:fullscreen, [data-theme="dark"] #tree-canvas:-webkit-full-screen { background: #080f1e; }
[data-theme="dark"] .tree-add-pill { background: var(--navy); border-color: var(--teal-light); color: #fff; }
[data-theme="dark"] .tree-btn { background: #071E2A; color: #e2e8f0; border-color: #0D3D52; }
[data-theme="dark"] .tree-btn:hover { background: #0D3D52; }
[data-theme="dark"] .tree-filter-btn { background: #071E2A; color: #64748b; border-color: #0D3D52; }
[data-theme="dark"] .tree-filter-btn:hover { border-color: #93c5fd; color: #93c5fd; }
[data-theme="dark"] .tree-filter-btn.active { background: #1d4ed8; color: white; border-color: #1d4ed8; }
[data-theme="dark"] .tree-filter-pill-track { background: #071E2A; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
[data-theme="dark"] .tree-filter-pill-thumb { background: #3b82f6; }
[data-theme="dark"] .tree-filter-pill-opt { color: #94a3b8; }
[data-theme="dark"] .tree-filter-pill-opt:hover { color: #e2e8f0; }
[data-theme="dark"] .tree-filter-pill-opt.active { color: #fff; }
[data-theme="dark"] .tree-select { background: #071E2A; color: #e2e8f0; border-color: #0D3D52; }
[data-theme="dark"] .tree-search-input { background: #011018; color: #e2e8f0; border-color: #0D3D52; }
[data-theme="dark"] .tree-search-input:focus { background: #071E2A; }
[data-theme="dark"] .member-item { background: #071E2A; }
[data-theme="dark"] .member-name { color: #e2e8f0; }
[data-theme="dark"] .feed-compose { background: #071E2A; }
[data-theme="dark"] .compose-input { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .post-type-select { background: #071E2A; border-color: #0D3D52; color: #94a3b8; }
[data-theme="dark"] .members-search-input { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .members-search-bar { border-color: #0D3D52; }
[data-theme="dark"] .tree-toolbar-label { color: #cbd5e1; }
[data-theme="dark"] .compose-input:focus { border-color: var(--gold); }
[data-theme="dark"] .post-card { background: #071E2A; }
[data-theme="dark"] .post-footer { border-color: #0D3D52; }
[data-theme="dark"] .comment-bubble { background: #0D3D52; }
[data-theme="dark"] .comment-author { color: #cbd5e1; }
[data-theme="dark"] .comment-input { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .comment-input:focus { border-color: var(--gold); }
[data-theme="dark"] .modal { background: #071E2A; }
[data-theme="dark"] .modal-header { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .modal-footer { border-color: #0D3D52; }
[data-theme="dark"] .notif-dropdown { background: #071E2A; }
[data-theme="dark"] .notif-header { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .notif-item:hover { background: #0D3D52; }
[data-theme="dark"] .notif-item.unread { background: rgba(229,90,0,.1); border-left-color: #E55A00; }
[data-theme="dark"] .notif-title { color: #e2e8f0; }
[data-theme="dark"] .notif-see-all { color: #00C9B1; }
[data-theme="dark"] .notif-empty { color: #334155; }
[data-theme="dark"] .btn-ghost { color: #94a3b8; }
[data-theme="dark"] .btn-ghost:hover { background: #0D3D52; }
[data-theme="dark"] .btn-outline { color: #93c5fd; border-color: #93c5fd; }
[data-theme="dark"] .btn-outline:hover { background: #93c5fd; color: #011018; }
[data-theme="dark"] .tag { background: #0D3D52; color: #cbd5e1; }
[data-theme="dark"] .relation-item { background: #011018; }
[data-theme="dark"] .relation-label { color: #94a3b8; }
[data-theme="dark"] .relation-name { color: var(--gold); }
[data-theme="dark"] .member-detail-bio { color: #cbd5e1; }
[data-theme="dark"] .collab-item { border-color: #0D3D52; }
[data-theme="dark"] .profile-cover { background: linear-gradient(135deg, #011018, #010E1A); }
[data-theme="dark"] .profile-avatar-wrap .avatar-lg { border-color: #071E2A; }
[data-theme="dark"] .profile-name { color: #e2e8f0; }
[data-theme="dark"] .profile-username { color: #94a3b8; }
[data-theme="dark"] .profile-bio { color: #94a3b8; }
[data-theme="dark"] .stat-num { color: #e2e8f0; }
[data-theme="dark"] .stat-label { color: #94a3b8; }
[data-theme="dark"] .modal-title { color: #e2e8f0; }
[data-theme="dark"] .modal-body { color: #cbd5e1; }
[data-theme="dark"] .member-detail-info h2 { color: #e2e8f0; }
[data-theme="dark"] .form-group label { color: #94a3b8; }
[data-theme="dark"] .notif-body { color: #94a3b8; }
[data-theme="dark"] .text-navy { color: #e2e8f0; }
[data-theme="dark"] .divider { border-color: #0D3D52; }
[data-theme="dark"] .section-title { color: #64748b; }
[data-theme="dark"] .invite-card { background: #071E2A; }
[data-theme="dark"] .invite-link-box { background: #011018; border-color: #0D3D52; }
[data-theme="dark"] .alert-error { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .alert-success { background: #052e16; color: #86efac; border-color: #14532d; }
[data-theme="dark"] .alert-info { background: #0c1f45; color: #93c5fd; border-color: #1e3a8a; }
[data-theme="dark"] .toast { background: #0D3D52; }
[data-theme="dark"] .toast.success { background: #14532d; }
[data-theme="dark"] .toast.error { background: #7f1d1d; }
[data-theme="dark"] .toast.info { background: #0c1f45; }
[data-theme="dark"] .gs-dropdown { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .gs-item:hover, [data-theme="dark"] .gs-item:focus { background: #0B2535; }
[data-theme="dark"] .gs-name { color: #e2e8f0; }
[data-theme="dark"] .rn-card { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .rn-version { color: #e2e8f0; }
[data-theme="dark"] .rn-list li { color: #94a3b8; }
[data-theme="dark"] .clippy-card { background: #071E2A; border-color: rgba(229,90,0,.5); }
[data-theme="dark"] .clippy-text { color: #94a3b8; }
[data-theme="dark"] .clippy-next-btn { color: #475569; }
[data-theme="dark"] .rn-timeline::before { background: #0D3D52; }
[data-theme="dark"] .new-tree-card { border-color: #0D3D52; color: #64748b; }
[data-theme="dark"] .new-tree-card:hover { border-color: var(--gold); color: var(--gold); }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #071E2A 25%, #0D3D52 50%, #071E2A 75%); }
[data-theme="dark"] .member-search-list { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .member-search-option { color: #cbd5e1; }
[data-theme="dark"] .member-search-option:hover, [data-theme="dark"] .member-search-option:focus { background: #0D3D52; }
[data-theme="dark"] .member-search-option.selected { background: rgba(229,90,0,.15); }
[data-theme="dark"] .theme-toggle { background: #011018; }
[data-theme="dark"] .theme-toggle-btn.active { background: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .app-footer { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] a { color: #93c5fd; }
[data-theme="dark"] .auth-card a, [data-theme="dark"] .app-footer a { color: var(--gold); }
[data-theme="dark"] .empty-state h3 { color: #cbd5e1; }

/* ── Pending registration screen ─────────────────────────────────── */
.pending-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin-bottom: .6rem; }
.pending-body { color: var(--gray-700); font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }
.pending-contact { background: var(--gray-100); border-radius: 12px; padding: 1.1rem; font-size: .95rem; color: var(--gray-700); line-height: 1.8; }
[data-theme="dark"] .pending-title { color: #e2e8f0; }
[data-theme="dark"] .pending-body { color: #cbd5e1; }
[data-theme="dark"] .pending-body strong { color: #f1f5f9; }
[data-theme="dark"] .pending-contact { background: rgba(255,255,255,.08); color: #cbd5e1; }
[data-theme="dark"] .pending-contact strong { color: #f1f5f9; }

/* ── Focal person searchable input (tree toolbar) ─────────────────── */
.focal-search-wrap { position: relative; }
.tree-focal-input { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: .28rem .6rem; font-size: .8rem; color: var(--navy); width: 160px; cursor: text; }
.tree-focal-input:focus { outline: none; border-color: var(--gold); }
.tree-focal-input::placeholder { color: var(--gray-400); font-style: italic; }
.focal-options { position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; max-height: 220px; overflow-y: auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 300; display: none; }
.focal-options.open { display: block; }
.focal-option { padding: .45rem .75rem; font-size: .83rem; cursor: pointer; color: var(--navy); }
.focal-option:hover, .focal-option:focus { background: var(--gray-100); outline: none; }
.focal-option.selected { background: rgba(229,90,0,.12); font-weight: 600; }

/* ── Export modal options ─────────────────────────────────────────── */
.export-options { display: flex; flex-direction: column; gap: .5rem; }
.export-opt-btn { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--white); cursor: pointer; text-align: left; width: 100%; transition: border-color .15s, background .15s; }
.export-opt-btn:hover { border-color: var(--gold); background: rgba(229,90,0,.06); }
.export-opt-icon { font-size: 1.6rem; flex-shrink: 0; }
.export-opt-title { font-weight: 700; font-size: .9rem; color: var(--navy); }
.export-opt-desc { font-size: .78rem; color: var(--gray-500); margin-top: .1rem; }

/* ── Comment send button ──────────────────────────────────────────── */
.comment-send-btn { flex-shrink: 0; background: var(--navy); color: var(--white); border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.comment-send-btn:hover { background: var(--gold); }

/* ── User Manual ─────────────────────────────────────────────────── */
.manual-page { padding: 1rem 0 4rem; }
.manual-hero { text-align: center; padding: 2rem 1rem 1.5rem; }
.manual-hero h1 { font-size: 1.9rem; font-weight: 800; color: var(--navy); margin-bottom: .5rem; }
.manual-hero p { color: var(--gray-500); font-size: 1rem; margin-bottom: 1.25rem; }
.manual-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.manual-toc a { font-size: .8rem; font-weight: 600; color: var(--navy); background: var(--gray-100); border-radius: var(--radius-full); padding: .3rem .8rem; transition: background .15s; }
.manual-toc a:hover { background: var(--gold); color: var(--white); }
.manual-section { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; overflow: hidden; }
.manual-section-title { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 800; color: var(--navy); background: var(--gray-50); padding: .85rem 1.25rem; border-bottom: 1px solid var(--gray-200); }
.manual-card { display: flex; gap: 2rem; padding: 1.25rem; border-bottom: 1px solid var(--gray-100); }
.manual-card:last-child { border-bottom: none; }
.manual-img { width: 58%; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); flex-shrink: 0; object-fit: cover; align-self: flex-start; }
.manual-desc { flex: 1; min-width: 220px; }
.manual-desc h3 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.manual-desc p { font-size: .875rem; color: var(--gray-600); line-height: 1.6; margin-bottom: .5rem; }
.manual-list { margin: .4rem 0 0 1.1rem; font-size: .85rem; color: var(--gray-600); line-height: 1.9; }
.manual-callout { margin: 0 1.25rem 1.25rem; background: rgba(229,90,0,.08); border: 1px solid rgba(229,90,0,.3); border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .83rem; color: var(--gray-700); line-height: 1.7; }
.manual-btn-row { display: flex; flex-wrap: wrap; gap: .4rem .2rem; align-items: baseline; margin-top: .4rem; }
.manual-btn { background: var(--navy); color: var(--white); border-radius: 4px; padding: .1rem .5rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .manual-card { flex-wrap: wrap; } .manual-img { width: 100%; } }
[data-theme="dark"] .manual-section { background: #071E2A; }
[data-theme="dark"] .manual-section-title { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .manual-card { border-color: #0D3D52; }
[data-theme="dark"] .manual-desc h3 { color: #e2e8f0; }
[data-theme="dark"] .manual-desc p, [data-theme="dark"] .manual-list { color: #94a3b8; }
[data-theme="dark"] .manual-toc a { background: #0D3D52; color: #cbd5e1; }
[data-theme="dark"] .manual-callout { background: rgba(229,90,0,.06); border-color: rgba(229,90,0,.2); color: #94a3b8; }
[data-theme="dark"] .manual-img { border-color: #0D3D52; }
[data-theme="dark"] .manual-hero h1 { color: #e2e8f0; }

/* ── Buy Me Dosa page ─────────────────────────────────────────────── */
.dosa-page { max-width: 860px; margin: 0 auto; padding: 1rem 0 3rem; }
.dosa-header { text-align: center; padding: 2rem 1rem 1.5rem; }
.dosa-emoji { font-size: 3.5rem; display: block; margin-bottom: .5rem; }
.dosa-title { font-size: 2rem; font-weight: 800; color: var(--navy); margin-bottom: .5rem; }
.dosa-tagline { color: var(--gray-500); font-size: 1rem; }
.dosa-card { display: flex; gap: 2rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2rem; flex-wrap: wrap; }
.dosa-about { flex: 1; min-width: 260px; }
.dosa-about h2 { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin-bottom: .75rem; }
.dosa-about h3 { font-size: .95rem; font-weight: 700; color: var(--navy); }
.dosa-about p { color: var(--gray-600); line-height: 1.65; font-size: .92rem; }
.dosa-list { margin: .5rem 0 0 1.1rem; color: var(--gray-600); font-size: .9rem; line-height: 2; }
.dosa-qr-section { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 200px; }
.dosa-qr-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--navy); text-align: center; }
.dosa-qr-wrap { border: 2px solid var(--gray-200); border-radius: var(--radius); padding: .75rem; background: var(--white); }
.dosa-qr { width: 200px; height: 200px; object-fit: contain; display: block; }
.dosa-qr-placeholder { width: 200px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .8rem; color: var(--gray-400); text-align: center; line-height: 1.6; }
.dosa-qr-hint { font-size: .78rem; color: var(--gray-500); text-align: center; max-width: 200px; }
.dosa-footer-note { margin-top: 1.5rem; text-align: center; color: var(--gray-500); font-size: .85rem; background: var(--white); border-radius: var(--radius); padding: 1rem 1.5rem; border: 1px dashed var(--gray-200); }

/* ── Dark mode for new elements ───────────────────────────────────── */
[data-theme="dark"] .tree-focal-input { background: #011018; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .tree-focal-input:focus { border-color: var(--gold); }
[data-theme="dark"] .focal-options { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .focal-option { color: #cbd5e1; }
[data-theme="dark"] .focal-option:hover, [data-theme="dark"] .focal-option:focus { background: #0D3D52; }
[data-theme="dark"] .focal-option.selected { background: rgba(229,90,0,.15); }
[data-theme="dark"] .export-opt-btn { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .export-opt-btn:hover { border-color: var(--gold); background: rgba(229,90,0,.08); }
[data-theme="dark"] .export-opt-title { color: #e2e8f0; }
[data-theme="dark"] .export-opt-desc { color: #64748b; }
[data-theme="dark"] .comment-send-btn { background: #0D3D52; }
[data-theme="dark"] .comment-send-btn:hover { background: var(--gold); color: #011018; }
[data-theme="dark"] .dosa-card { background: #071E2A; }
[data-theme="dark"] .dosa-title { color: #e2e8f0; }
[data-theme="dark"] .dosa-about h2, [data-theme="dark"] .dosa-about h3, [data-theme="dark"] .dosa-qr-section h2 { color: #e2e8f0; }
[data-theme="dark"] .dosa-about p, [data-theme="dark"] .dosa-list { color: #94a3b8; }
[data-theme="dark"] .dosa-qr-wrap { border-color: #0D3D52; background: #011018; }
[data-theme="dark"] .dosa-footer-note { background: #071E2A; border-color: #0D3D52; color: #64748b; }

/* ── Split Tree preview ───────────────────────────────────────────── */
.split-preview-box { display: flex; align-items: flex-start; gap: 1rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; }
.split-preview-col { flex: 1; }
.split-preview-title { font-weight: 700; font-size: .85rem; color: var(--navy); margin-bottom: .35rem; }
.split-preview-count { font-size: .78rem; color: var(--gray-500); margin-bottom: .5rem; }
.split-preview-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.split-preview-arrow { font-size: 1.5rem; padding-top: .2rem; flex-shrink: 0; }
.split-tag { background: rgba(229,90,0,.15); color: var(--navy); border-radius: 4px; padding: .15rem .45rem; font-size: .72rem; font-weight: 600; }
[data-theme="dark"] .split-preview-box { background: #011018; border-color: #0D3D52; }
[data-theme="dark"] .split-preview-title { color: #e2e8f0; }
[data-theme="dark"] .split-tag { background: rgba(229,90,0,.15); color: #cbd5e1; }

/* ── Feed image attachment ────────────────────────────────────────── */
.compose-attach-preview { padding: .5rem .75rem; border-top: 1px solid var(--gray-100); }
.attach-preview-inner { display: flex; align-items: center; gap: .6rem; }
.attach-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }
.attach-doc-icon { font-size: 1.8rem; }
.attach-name { flex: 1; font-size: .8rem; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-attach-btn { font-size: .85rem; padding: .25rem .5rem; }
[data-theme="dark"] .compose-attach-preview { border-color: #0D3D52; }
[data-theme="dark"] .attach-name { color: #94a3b8; }
[data-theme="dark"] .loading-screen { color: #475569; }

/* ── Stats Tab ─────────────────────────────────────────────────────── */
#tree-tab-stats { overflow-y: auto; flex: 1; }
.stats-tab-inner { padding: 1.25rem; }
.stats-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.stats-left-col { display: flex; flex-direction: column; gap: 1.25rem; }
.stats-right-col { display: flex; flex-direction: column; }
.stats-section-stretch { flex: 1; }
@media (max-width: 800px) { .stats-two-col { grid-template-columns: 1fr; } }
.stats-section { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; overflow: visible; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.stats-section-title { background: var(--gray-50); color: var(--navy); font-weight: 700; font-size: .85rem; padding: .65rem 1rem; border-bottom: 1px solid var(--gray-200); letter-spacing: .02em; border-radius: 10px 10px 0 0; }
.stats-summary-cards { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1rem; }
.stat-chip { display: flex; flex-direction: column; align-items: center; min-width: 90px; padding: .65rem .75rem; background: #FFF3E8; border: 1px solid #FFD0A8; border-radius: 8px; text-align: center; }
.stat-chip-val { font-size: 1.4rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-chip-lbl { font-size: .68rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.geo-toggle { display: flex; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; }
.geo-toggle-btn { padding: .35rem .85rem; border-radius: 999px; border: 1.5px solid var(--gray-300); background: transparent; font-size: .8rem; cursor: pointer; color: var(--gray-600); transition: background .15s, color .15s, border-color .15s; }
.geo-toggle-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.stats-bar-chart { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; }
.stats-bar-col { display: flex; flex-direction: column; gap: .25rem; }
.stats-bar-lbl { display: flex; align-items: center; font-size: .8rem; gap: .5rem; }
.stats-bar-name { flex: 1; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar-count { color: var(--navy); font-weight: 700; }
.stats-bar-pct { color: var(--gray-400); font-size: .75rem; }
.stats-bar-track { height: 20px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.stats-bar-fill { height: 100%; background: linear-gradient(90deg, #E55A00, #FF7A1F); border-radius: 4px; transition: width .35s ease; }
.geo-empty { padding: 1.5rem 1rem; text-align: center; color: var(--gray-400); font-size: .85rem; }
.conn-search-wrap { position: relative; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); }
.conn-search-input { width: 100%; box-sizing: border-box; padding: .55rem .75rem; border: 1.5px solid var(--gray-300); border-radius: 8px; font-size: .9rem; outline: none; transition: border-color .15s; background: var(--white); color: var(--gray-700); }
.conn-search-input:focus { border-color: var(--gold); }
.conn-search-list { position: absolute; left: 1rem; right: 1rem; top: calc(100% - .1rem); background: var(--white); border: 1.5px solid var(--gold); border-radius: 8px; max-height: 220px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.conn-search-option { padding: .55rem .85rem; cursor: pointer; font-size: .88rem; color: var(--gray-700); display: flex; align-items: center; gap: .5rem; }
.conn-search-option:hover { background: #fdf8ef; }
.conn-search-year { font-size: .75rem; color: var(--gray-400); }
.connections-card { padding: 1rem; }
.conn-card-title { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gray-200); }
.conn-row { display: flex; align-items: flex-start; gap: .75rem; padding: .4rem 0; font-size: .88rem; }
.conn-label { min-width: 120px; color: var(--gray-600); font-weight: 600; flex-shrink: 0; }
.conn-count { background: var(--gray-100); color: var(--navy); font-size: .72rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; flex-shrink: 0; margin-top: .1rem; }
.conn-names { flex: 1; display: flex; flex-wrap: wrap; gap: .3rem; }
.conn-name-link { color: var(--navy); font-weight: 600; cursor: pointer; border-bottom: 1.5px dashed var(--gold); padding-bottom: .05rem; }
.conn-name-link:hover { color: var(--gold-dark, #B34500); }

[data-theme="dark"] .stats-section { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .stats-section-title { background: #011018; color: #e2e8f0; border-color: #0D3D52; }
[data-theme="dark"] .stat-chip { background: #1a2740; border-color: #2d4163; }
[data-theme="dark"] .stat-chip-val { color: #e2e8f0; }
[data-theme="dark"] .stat-chip-lbl { color: #64748b; }
[data-theme="dark"] .geo-toggle-btn { border-color: #0D3D52; color: #94a3b8; }
[data-theme="dark"] .geo-toggle-btn.active { background: #00C9B1; color: #011018; border-color: #00C9B1; }
[data-theme="dark"] .stats-bar-name { color: #cbd5e1; }
[data-theme="dark"] .stats-bar-track { background: #071E2A; }
[data-theme="dark"] .geo-empty { color: #475569; }
[data-theme="dark"] .conn-search-input { background: #071E2A; border-color: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .conn-search-list { background: #071E2A; border-color: #00C9B1; }
[data-theme="dark"] .conn-search-option { color: #cbd5e1; }
[data-theme="dark"] .conn-search-option:hover { background: #1a2740; }
[data-theme="dark"] .conn-card-title { color: #e2e8f0; border-color: #0D3D52; }
[data-theme="dark"] .conn-label { color: #94a3b8; }
[data-theme="dark"] .conn-count { background: #0D3D52; color: #00C9B1; }
[data-theme="dark"] .conn-name-link { color: #00C9B1; border-color: #00C9B1; }
[data-theme="dark"] .connections-card { background: #071E2A; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.25); }
}

/* ═══ IN-APP ADMIN PANEL ══════════════════════════════════════════════ */
.adm-page { max-width: 920px; margin: 0 auto; padding: 1.75rem 1.5rem; }
.adm-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap; }
.adm-title { font-size: 1.4rem; font-weight: 900; color: var(--navy); margin: 0; line-height: 1.2; }
.adm-sub { font-size: .78rem; color: var(--gray-500); margin-top: .3rem; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.adm-stat { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem 1.5rem; }
.adm-stat-val { font-size: 2.4rem; font-weight: 900; line-height: 1; }
.adm-stat-lbl { font-size: .75rem; font-weight: 700; color: var(--gray-600); margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.adm-stat-sub { font-size: .73rem; color: var(--gray-400); margin-top: .2rem; }
.adm-sh { display: flex; align-items: center; gap: .6rem; padding: .875rem 1.25rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); }
.adm-sh-title { font-weight: 800; font-size: .9rem; color: var(--navy); flex: 1; }
.adm-sh-count { background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-500); border-radius: 999px; padding: .1rem .65rem; font-size: .72rem; font-weight: 700; }
.adm-row { display: flex; align-items: center; gap: .875rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--gray-100); transition: background .15s; cursor: default; }
.adm-row:hover { background: var(--gray-50); }
.adm-row-info { flex: 1; min-width: 0; overflow: hidden; }
.adm-row-name-line { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; line-height: 1.4; }
.adm-dname { font-weight: 700; color: var(--navy); font-size: .9rem; }
.adm-handle { color: var(--gray-400); font-size: .78rem; }
.adm-meta { font-size: .74rem; color: var(--gray-500); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.adm-empty { text-align: center; padding: 2rem 1rem; color: var(--gray-400); font-size: .875rem; }
.adm-online { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; color: #16a34a; font-weight: 700; }
.adm-online-dot { width: 6px; height: 6px; min-width: 6px; background: #22c55e; border-radius: 50%; animation: pulse-dot 1.4s infinite; }
.adm-tree-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.adm-tree-main-icon { background: rgba(229,90,0,.12); }
.adm-tree-branch-icon { background: rgba(96,165,250,.12); }
.adm-branch-badge { font-size: .68rem; background: rgba(96,165,250,.15); color: #3b82f6; border-radius: 4px; padding: .1rem .4rem; font-weight: 600; }
.adm-del-btn { background: rgba(239,68,68,.08); color: #dc2626; border: 1px solid rgba(239,68,68,.2); flex-shrink: 0; }
.adm-del-btn:hover { background: rgba(239,68,68,.18); }

[data-theme="dark"] .adm-title { color: #e2e8f0; }
[data-theme="dark"] .adm-sub { color: #64748b; }
[data-theme="dark"] .adm-stat { background: #071E2A; }
[data-theme="dark"] .adm-stat-lbl { color: #94a3b8; }
[data-theme="dark"] .adm-stat-sub { color: #64748b; }
[data-theme="dark"] .adm-sh { background: #011018; border-bottom-color: #0D3D52; }
[data-theme="dark"] .adm-sh-title { color: #e2e8f0; }
[data-theme="dark"] .adm-sh-count { background: #071E2A; border-color: #0D3D52; color: #64748b; }
[data-theme="dark"] .adm-row { border-bottom-color: #0D3D52; }
[data-theme="dark"] .adm-row:hover { background: #0B2535; }
[data-theme="dark"] .adm-dname { color: #e2e8f0; }
[data-theme="dark"] .adm-handle { color: #64748b; }
[data-theme="dark"] .adm-meta { color: #64748b; }
[data-theme="dark"] .adm-empty { color: #475569; }
[data-theme="dark"] .adm-tree-main-icon { background: rgba(229,90,0,.08); }
[data-theme="dark"] .adm-tree-branch-icon { background: rgba(96,165,250,.08); }
[data-theme="dark"] .adm-del-btn { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(248,113,113,.25); }
[data-theme="dark"] .adm-del-btn:hover { background: rgba(239,68,68,.22); }

.adm-member-block { border-bottom: 1px solid var(--gray-100); }
.adm-member-block:last-child { border-bottom: none; }

/* Auto-approve slider styling */
#adm-auto-approve-toggle:checked ~ #adm-auto-approve-slider {
  left: 24px;
}

#adm-auto-approve-toggle:checked + label {
  background: #16a34a;
}

/* Admin tabs styling */
.adm-tabs-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: 2px solid var(--gray-200);
}

.adm-user-tab {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s;
  position: relative;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.adm-user-tab:hover {
  color: var(--text);
}

.adm-user-tab.active {
  font-weight: 600;
}

.adm-user-tab.active.pending {
  color: #f59e0b;
  border-bottom-color: #f59e0b;
}

.adm-user-tab.active.approved {
  color: #22c55e;
  border-bottom-color: #22c55e;
}

.adm-user-tab.active.rejected {
  color: #ef4444;
  border-bottom-color: #ef4444;
}

[data-theme="dark"] .adm-tabs-header {
  border-bottom-color: var(--gray-700);
}

[data-theme="dark"] .adm-user-tab {
  color: var(--gray-400);
}

[data-theme="dark"] .adm-user-tab:hover {
  color: var(--gray-200);
}

[data-theme="dark"] .adm-stat { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .adm-stat-val { color: inherit; }
[data-theme="dark"] .adm-stat-lbl { color: #94a3b8; }
.adm-member-block .adm-row { border-bottom: none; }
.adm-tree-nest { margin-left: 3.5rem; border-left: 2px solid var(--gray-200); }
.adm-tree-row { display: flex; align-items: center; gap: .625rem; padding: .45rem .875rem; border-bottom: 1px solid var(--gray-100); transition: background .15s; }
.adm-tree-row:last-child { border-bottom: none; }
.adm-tree-row:hover { background: var(--gray-50); }
.adm-tree-row-info { flex: 1; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; overflow: hidden; }

[data-theme="dark"] .adm-member-block { border-bottom-color: #0D3D52; }
[data-theme="dark"] .adm-tree-nest { border-left-color: #0D3D52; }
[data-theme="dark"] .adm-tree-row { border-bottom-color: #0D3D52; }
[data-theme="dark"] .adm-tree-row:hover { background: #0B2535; }

/* ── Admin tree-toggle button ─────────────────────────────────────── */
.adm-tree-toggle-btn { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--navy); background: var(--gray-50); border: 1px solid var(--gray-200); padding: .25rem .55rem; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.adm-tree-toggle-btn:hover { background: var(--gray-100); }
[data-theme="dark"] .adm-tree-toggle-btn { color: #cbd5e1; background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .adm-tree-toggle-btn:hover { background: #0D2E42; }

/* ── Multi-member session saved banner ────────────────────────────── */
[data-theme="dark"] #multi-session-saved { background: #14532d; border-color: #166534; color: #86efac; }

/* ── Tree-node Add Child hover button ─────────────────────────────── */
.add-child-btn { opacity: 0; transition: opacity .18s; }
.tree-node:hover .add-child-btn { opacity: 1; }
.junction-toggle { transition: opacity .15s; }
.junction-toggle:hover { opacity: 0.85; }

/* ── Multiple invite + share ──────────────────────────────────────── */
.invite-recipient-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.invite-recipient-row .form-control { flex: 1; }
.invite-remove-btn { padding: .25rem .5rem; color: var(--red); flex-shrink: 0; }
.invite-result-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; }
.invite-result-label { font-size: .82rem; color: var(--gray-500); margin-bottom: .4rem; }
.invite-draft-msg { font-size: .83rem; color: var(--gray-600); font-style: italic; margin: .4rem 0 .6rem; }
.invite-share-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.invite-share-wa  { background: #25d366; color: #fff; border-color: #25d366; }
.invite-share-wa:hover  { background: #1ebe5e; border-color: #1ebe5e; }
.invite-share-tg  { background: #2ca5e0; color: #fff; border-color: #2ca5e0; }
.invite-share-tg:hover  { background: #239ed8; border-color: #239ed8; }
.invite-share-email { background: var(--navy); color: #fff; border-color: var(--navy); }
.invite-share-email:hover { background: #162240; }

[data-theme="dark"] .invite-result-card { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .invite-draft-msg { color: #94a3b8; }

/* ── Member detail — trees stat ──────────────────────────────────── */
.member-trees-stat { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .6rem .75rem; background: var(--cream); border: 1px solid var(--gold); border-radius: var(--radius-sm); margin-bottom: .75rem; font-size: .83rem; }
.member-trees-icon { font-size: 1rem; }
.member-trees-label { color: var(--gray-600); }
.member-trees-names { display: flex; flex-wrap: wrap; gap: .3rem; }
.member-tree-chip { background: var(--navy); color: #fff; padding: .15rem .55rem; border-radius: 99px; font-size: .78rem; cursor: pointer; transition: background .15s; }
.member-tree-chip:hover { background: var(--gold); }

[data-theme="dark"] .member-trees-stat { background: #1a2535; border-color: #c0922a; }
[data-theme="dark"] .member-trees-label { color: #94a3b8; }
[data-theme="dark"] .member-tree-chip { background: #0D3D52; }
[data-theme="dark"] .member-tree-chip:hover { background: #c0922a; }

/* ── Open invite + join requests ──────────────────────────────────── */
.open-invite-section { padding: .25rem 0 .5rem; }
.open-invite-header { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: .3rem; }
.open-invite-desc { font-size: .8rem; color: var(--gray-500); margin-bottom: .75rem; }
.open-invite-link-box { background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: var(--radius-sm); padding: .6rem .85rem; font-size: .78rem; font-family: monospace; word-break: break-all; color: var(--navy); }

.join-req-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: .75rem; margin-bottom: .6rem; display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.join-req-user { display: flex; align-items: flex-start; gap: .6rem; flex: 1; min-width: 0; }
.join-req-msg { font-size: .78rem; color: var(--gray-600); font-style: italic; margin-top: .25rem; }
.join-req-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }

[data-theme="dark"] .open-invite-header { color: #e2e8f0; }
[data-theme="dark"] .open-invite-desc { color: #64748b; }
[data-theme="dark"] .open-invite-link-box { background: #011018; border-color: #0D3D52; color: #cbd5e1; }
[data-theme="dark"] .join-req-card { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .join-req-msg { color: #94a3b8; }

/* ── Notifications full page ──────────────────────────────────────── */
.notif-unread-count { background: var(--gold); color: var(--navy); font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: 99px; align-self: center; }
.notif-page-item { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-100); transition: background .15s; }
.notif-page-item:last-child { border-bottom: none; }
.notif-page-item.unread { background: rgba(229,90,0,.06); }
.notif-page-item:hover { background: var(--gray-50); }
.notif-page-icon { font-size: 1.4rem; flex-shrink: 0; width: 2rem; text-align: center; padding-top: .1rem; }
.notif-page-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; flex-wrap: wrap; }
.notif-type-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); }
.notif-new-pill { background: var(--gold); color: var(--navy); font-size: .65rem; font-weight: 800; padding: .1rem .4rem; border-radius: 99px; }
.notif-action-btn { font-size: .78rem; padding: .2rem .55rem; margin-top: .35rem; color: var(--navy); }
.notif-hint { font-size: .75rem; color: var(--gray-400); margin-top: .3rem; display: block; font-style: italic; }
.btn-xs { padding: .2rem .5rem; font-size: .75rem; }

[data-theme="dark"] .notif-page-item.unread { background: rgba(229,90,0,.07); }
[data-theme="dark"] .notif-page-item:hover { background: #071E2A; }
[data-theme="dark"] .notif-type-label { color: #475569; }
[data-theme="dark"] .notif-hint { color: #475569; }
[data-theme="dark"] .notif-action-btn { color: #93c5fd; }

/* ── Zoom label in tree toolbar ───────────────────────────────────── */
.tree-zoom-label { font-size: .78rem; font-weight: 600; color: var(--gray-500); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .tree-zoom-label { color: #94a3b8; }

/* ── Experimental / Indian theme toggle ───────────────────────────── */
.exp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.exp-toggle-label { font-weight: 600; font-size: .9rem; color: var(--navy); }
.exp-toggle-desc { font-size: .78rem; color: var(--gray-500); margin-top: .2rem; }
.exp-toggle-btn { padding: .35rem .85rem; border-radius: 99px; border: 1.5px solid var(--gray-300); background: transparent; cursor: pointer; font-weight: 600; font-size: .82rem; transition: all .2s; white-space: nowrap; }
.exp-toggle-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
[data-theme="dark"] .exp-toggle-label { color: #e2e8f0; }
[data-theme="dark"] .exp-toggle-btn { border-color: #0D3D52; color: #cbd5e1; }
[data-theme="dark"] .exp-toggle-btn.active { background: #c0922a; border-color: #c0922a; color: #fff; }

/* ── Header share button ──────────────────────────────────────────── */
.header-share-btn { color: rgba(255,255,255,.8) !important; font-size: .95rem; }
.header-share-btn:hover { color: #fff !important; }

/* ── Share app modal ──────────────────────────────────────────────── */
.share-modal-msg { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .85rem; color: var(--gray-700); line-height: 1.6; white-space: pre-wrap; margin-bottom: 1rem; }
.share-modal-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.share-wa  { background: #25d366; color: #fff; border-color: #25d366; }
.share-wa:hover  { background: #1ebe5e; border-color: #1ebe5e; }
.share-tg  { background: #2ca5e0; color: #fff; border-color: #2ca5e0; }
.share-tg:hover  { background: #239ed8; border-color: #239ed8; }
.share-email { background: var(--navy); color: #fff; border-color: var(--navy); }
.share-email:hover { background: #162240; }
[data-theme="dark"] .share-modal-msg { background: #071E2A; border-color: #0D3D52; color: #cbd5e1; }

/* ── Demo / Anon mode bars ────────────────────────────────────────── */
.demo-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: linear-gradient(90deg, rgba(123,29,0,.08), rgba(0,107,122,.08));
  border-bottom: 1px solid rgba(0,107,122,.2); font-size: .85rem;
}
.demo-bar-text { flex: 1; min-width: 180px; color: var(--gray-700); font-weight: 500; }
.demo-bar-cta { background: var(--navy) !important; color: #fff !important; }
.demo-bar-signin { color: var(--navy) !important; }
.anon-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: rgba(0,107,122,.07);
  border-bottom: 1px solid rgba(0,107,122,.2); font-size: .85rem;
}
.anon-bar-text { flex: 1; min-width: 180px; color: var(--gray-700); font-weight: 500; }
[data-theme="dark"] .demo-bar { background: linear-gradient(90deg, rgba(229,90,0,.08), rgba(0,201,177,.08)); border-bottom-color: rgba(0,201,177,.2); }
[data-theme="dark"] .demo-bar-text, [data-theme="dark"] .anon-bar-text { color: #cbd5e1; }
[data-theme="dark"] .anon-bar { background: rgba(0,201,177,.07); border-bottom-color: rgba(0,201,177,.2); }

/* ── Header auth CTA (shown in demo/anon mode) ────────────────────── */
.header-auth-cta { display: none; align-items: center; gap: .5rem; }

/* ── Demo mode: slot counter + upsell strip ───────────────────────── */
.demo-slot-badge { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; color: var(--navy); background: rgba(0,107,122,.1); border: 1px solid rgba(0,107,122,.25); border-radius: 99px; padding: .2rem .65rem; }
.demo-slot-full { color: var(--gray-500); background: var(--gray-100); border-color: var(--gray-200); }
.demo-upsell-strip { margin-top: 1rem; padding: .65rem .85rem; background: linear-gradient(90deg, rgba(123,29,0,.06), rgba(0,107,122,.06)); border: 1px solid rgba(0,107,122,.18); border-radius: var(--radius-sm); font-size: .83rem; color: var(--gray-600); display: flex; align-items: center; gap: .6rem; }
[data-theme="dark"] .demo-slot-badge { color: #00C9B1; background: rgba(0,201,177,.1); border-color: rgba(0,201,177,.25); }
[data-theme="dark"] .demo-slot-full { color: #64748b; background: #011018; border-color: #0D3D52; }
[data-theme="dark"] .demo-upsell-strip { background: linear-gradient(90deg, rgba(229,90,0,.07), rgba(0,201,177,.07)); border-color: rgba(0,201,177,.2); color: #94a3b8; }

/* ── Small screen popup ───────────────────────────────────────────── */
.small-screen-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.small-screen-popup {
  background: #fff; border-radius: 1rem; padding: 2rem 1.75rem;
  max-width: 380px; width: 100%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align: center; border-top: 4px solid #006B7A;
}
.small-screen-close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; font-size: 1.25rem;
  color: #6B7280; cursor: pointer; padding: .25rem .5rem; line-height: 1;
  border-radius: 4px; transition: color .15s, background .15s;
}
.small-screen-close:hover { color: #111; background: #f3f4f6; }
.small-screen-popup-icon { font-size: 3rem; margin-bottom: .75rem; }
.small-screen-popup-title { font-size: 1.3rem; font-weight: 800; color: #7B1D00; margin: 0 0 .75rem; }
.small-screen-popup-body { font-size: .9rem; color: #374151; line-height: 1.6; margin: 0 0 1.25rem; }
.small-screen-dims { font-size: .75rem; color: #9CA3AF; margin-bottom: 1rem; letter-spacing: .03em; }
[data-theme="dark"] .small-screen-popup { background: #071E2A; border-top-color: #00C9B1; }
[data-theme="dark"] .small-screen-close { color: #94a3b8; }
[data-theme="dark"] .small-screen-close:hover { color: #e2e8f0; background: #0D3D52; }
[data-theme="dark"] .small-screen-popup-title { color: #E55A00; }
[data-theme="dark"] .small-screen-popup-body { color: #CBD5E1; }
[data-theme="dark"] .small-screen-dims { color: #64748b; }

/* ── Task 5: Collapsed saved member pill ─────────────────────────── */
.member-entry-saved-pill { display: flex; align-items: center; gap: .6rem; padding: .6rem .85rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; color: #15803d; margin-bottom: .5rem; }
.member-entry-saved-label { font-size: .72rem; font-weight: 400; color: #4ade80; }

/* ── Task 7: PIN invite display ──────────────────────────────────── */
.invite-pin-box { display: flex; align-items: center; gap: .5rem; background: #FFF8E1; border: 1px solid #F59E0B; border-radius: 8px; padding: .6rem .85rem; margin-bottom: .75rem; font-size: .85rem; flex-wrap: wrap; }
.invite-pin-digits { font-size: 1.3rem; font-weight: 800; letter-spacing: .25rem; color: #92400E; font-family: monospace; }
.invite-pin-hint { font-size: .78rem; color: #78350F; flex: 1; min-width: 180px; }
.invite-pin-entry { margin-bottom: 1rem; text-align: center; }
[data-theme="dark"] .invite-pin-box { background: #1C1300; border-color: #B45309; }
[data-theme="dark"] .invite-pin-digits { color: #FCD34D; }
[data-theme="dark"] .invite-pin-hint { color: #D97706; }

/* ── Tour Guide ─────────────────────────────────────────────────── */
#tour-overlay { position: fixed; inset: 0; z-index: 99990; pointer-events: all; }

.tour-backdrop {
  position: absolute; inset: 0;
  background: transparent;
  /* No backdrop-filter — would blur the spotlight element itself.
     Darkening is handled entirely by tour-spotlight box-shadow.
     For center-modal steps (no spotlight) JS sets background directly. */
}

.tour-spotlight {
  position: fixed;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72);
  pointer-events: none;
  z-index: 99991;
  transition: left .3s cubic-bezier(.4,0,.2,1),
              top  .3s cubic-bezier(.4,0,.2,1),
              width .3s cubic-bezier(.4,0,.2,1),
              height .3s cubic-bezier(.4,0,.2,1);
  outline: 2.5px solid var(--gold);
  outline-offset: 1px;
}

.tour-tooltip {
  position: fixed;
  z-index: 99992;
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.3rem 1.1rem;
  width: 310px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28), 0 0 0 1.5px rgba(229,90,0,.22);
  pointer-events: all;
}

.tour-tip-header {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .45rem;
  line-height: 1.3;
}

.tour-tip-body {
  font-size: .82rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: .85rem;
}

/* Progress bar replaces dots for long tours */
.tour-progress-bar {
  height: 4px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.tour-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--gold));
  border-radius: 99px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

.tour-step-counter {
  font-size: .73rem;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: .02em;
}

.tour-tip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tour-tip-actions { display: flex; gap: .45rem; align-items: center; }

.tour-skip-btn {
  font-size: .78rem;
  color: var(--gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .45rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.tour-skip-btn:hover { color: var(--gray-600); background: var(--gray-100); }

.tour-next-btn {
  font-size: .82rem;
  font-weight: 700;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: .44rem 1.05rem;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.tour-next-btn:hover { background: var(--gold); transform: translateY(-1px); }
.tour-next-btn:active { transform: translateY(0); }

/* Dark mode */
[data-theme="dark"] .tour-tooltip { background: #0D2233; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1.5px rgba(0,201,177,.22); }
[data-theme="dark"] .tour-tip-header { color: #f0f9ff; }
[data-theme="dark"] .tour-tip-body { color: #94a3b8; }
[data-theme="dark"] .tour-progress-bar { background: #0D3D52; }
[data-theme="dark"] .tour-step-counter { color: #334155; }
[data-theme="dark"] .tour-skip-btn { color: #475569; }
[data-theme="dark"] .tour-skip-btn:hover { color: #94a3b8; background: #071E2A; }
[data-theme="dark"] .tour-next-btn { background: #006B7A; }
[data-theme="dark"] .tour-next-btn:hover { background: #00C9B1; }
[data-theme="dark"] .tour-spotlight { outline-color: #00C9B1; box-shadow: 0 0 0 9999px rgba(0,0,0,.78); }

/* ── Admin Anon Activity Card ─────────────────────────────────────── */
.adm-anon-card { padding: 0; overflow: hidden; }
.adm-anon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0;
  border-top: 1px solid var(--gray-100);
}
.adm-anon-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.1rem .75rem;
  border-right: 1px solid var(--gray-100);
  gap: .25rem;
}
.adm-anon-metric:last-child { border-right: none; }
.adm-anon-val {
  font-size: 1.75rem;
  font-weight: 900;
  color: #06b6d4;
  line-height: 1;
}
.adm-anon-lbl {
  font-size: .72rem;
  color: var(--gray-500);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.adm-anon-note {
  padding: .65rem 1rem;
  font-size: .78rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
[data-theme="dark"] .adm-anon-grid { border-top-color: #0D3D52; }
[data-theme="dark"] .adm-anon-metric { border-right-color: #0D3D52; }
[data-theme="dark"] .adm-anon-note { background: #011018; border-top-color: #0D3D52; color: #475569; }

/* ── Multi-member select widget (partners, children) ──────────────── */
.multi-member-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.mm-search-bar {
  display: flex; gap: .5rem; align-items: center;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.mm-search-input {
  flex: 1; font-size: .83rem !important; padding: .3rem .6rem !important;
  border-color: var(--gray-200) !important; background: var(--white) !important;
}
.mm-clear-btn {
  flex-shrink: 0; font-size: .78rem; color: var(--gray-500);
  padding: .2rem .55rem !important; border: 1px solid var(--gray-200) !important;
  border-radius: 99px !important;
  white-space: nowrap;
}
.mm-clear-btn:hover { color: var(--red); border-color: var(--red) !important; }
.mm-list {
  max-height: 160px;
  overflow-y: auto;
  padding: .35rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.mm-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem .55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .84rem;
  color: var(--gray-700);
  transition: background .12s;
  user-select: none;
}
.mm-item:hover { background: var(--gray-50); }
.mm-item.checked { background: rgba(229,90,0,.08); color: var(--navy); }
.mm-item input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; flex-shrink: 0; }
.mm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-empty { padding: .5rem .6rem; font-size: .82rem; color: var(--gray-400); text-align: center; }

/* Bio textarea — 2 rows, user-resizable vertically */
.bio-expandable { resize: vertical; min-height: 54px; }

/* Dark mode for multi-member widget */
[data-theme="dark"] .multi-member-select { background: #071E2A; border-color: #0D3D52; }
[data-theme="dark"] .mm-search-bar { background: #011018; border-bottom-color: #0D3D52; }
[data-theme="dark"] .mm-search-input { background: #071E2A !important; border-color: #0D3D52 !important; color: #cbd5e1 !important; }
[data-theme="dark"] .mm-clear-btn { color: #475569; border-color: #0D3D52 !important; }
[data-theme="dark"] .mm-item { color: #94a3b8; }
[data-theme="dark"] .mm-item:hover { background: #0D3D52; }
[data-theme="dark"] .mm-item.checked { background: rgba(0,201,177,.1); color: #00C9B1; }

/* ── @Mention autocomplete dropdown ──────────────────────────────── */
.mention-dropdown {
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.mention-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .85rem;
  cursor: pointer;
  transition: background .1s;
}
.mention-item:hover, .mention-item.focused { background: var(--gray-50); }
.mention-name { font-weight: 700; font-size: .88rem; color: var(--navy); }
.mention-handle { font-size: .78rem; color: var(--gray-400); }
[data-theme="dark"] .mention-dropdown { background: #0D2233; border-color: #00C9B1; }
[data-theme="dark"] .mention-item:hover, [data-theme="dark"] .mention-item.focused { background: #071E2A; }
[data-theme="dark"] .mention-name { color: #f0f9ff; }

/* ── Member form — collapsible accordion sections ─────────────────── */
.mfs {
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: .55rem;
  overflow: hidden;
  transition: border-color .15s;
}
.mfs.open { border-color: var(--gold); }

.mfs-hdr {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; text-align: left;
  padding: .7rem .9rem;
  background: var(--gray-50);
  border: none; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 700;
  color: var(--gray-700);
  transition: background .12s, color .12s;
}
.mfs-hdr:hover { background: var(--gray-100); color: var(--navy); }
.mfs.open .mfs-hdr { background: linear-gradient(90deg, rgba(229,90,0,.07), rgba(123,29,0,.04)); color: var(--navy); }

.mfs-label { flex: 1; }
.mfs-ref {
  font-size: .78rem; font-weight: 600;
  color: var(--gold); opacity: .9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.mfs-chevron { font-size: .8rem; color: var(--gray-400); flex-shrink: 0; }
.mfs.open .mfs-chevron { color: var(--gold); }

.mfs-body { padding: .8rem .9rem .9rem; }
.mfs-body .mt-1 { margin-top: 0; }

/* ── Location search widget ───────────────────────────────────────── */
.location-wrap { position: relative; }

.location-dropdown {
  position: fixed; z-index: 99999; /* escapes modal overflow */
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  max-height: 240px; overflow-y: auto;
  display: none;
  min-width: 200px;
}
.location-dropdown.open { display: block; }

.location-option {
  padding: .55rem .8rem;
  font-size: .84rem; color: var(--gray-700);
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--gray-100);
}
.location-option:last-child { border-bottom: none; }
.location-option:hover { background: var(--gray-50); color: var(--navy); }

.location-loading, .location-empty {
  padding: .65rem .85rem;
  font-size: .82rem; color: var(--gray-400);
  text-align: center;
}

/* Dark mode */
[data-theme="dark"] .mfs { border-color: #0D3D52; }
[data-theme="dark"] .mfs.open { border-color: #00C9B1; }
[data-theme="dark"] .mfs-hdr { background: #011018; color: #94a3b8; }
[data-theme="dark"] .mfs-hdr:hover { background: #0D3D52; color: #e2e8f0; }
[data-theme="dark"] .mfs.open .mfs-hdr { background: linear-gradient(90deg, rgba(0,201,177,.08), transparent); color: #e2e8f0; }
[data-theme="dark"] .mfs-ref { color: #00C9B1; }
[data-theme="dark"] .location-dropdown { background: #0D2233; border-color: #00C9B1; }
[data-theme="dark"] .location-option { color: #94a3b8; border-bottom-color: #0D3D52; }
[data-theme="dark"] .location-option:hover { background: #071E2A; color: #f0f9ff; }
[data-theme="dark"] .location-loading, [data-theme="dark"] .location-empty { color: #334155; }

/* ── Guide Me sidebar button (visible in tree view only) ─────────── */
.nav-item-guide {
  margin-top: auto;
  border-top: 1px dashed rgba(229,90,0,.3);
  color: var(--gold) !important;
}
.nav-item-guide:hover { background: rgba(229,90,0,.08) !important; }
.nav-item-guide .nav-icon { filter: none; }
[data-theme="dark"] .nav-item-guide { border-top-color: rgba(0,201,177,.2); color: #00C9B1 !important; }
[data-theme="dark"] .nav-item-guide:hover { background: rgba(0,201,177,.07) !important; }

/* ── Add Member multi-entry separator ────────────────────────────── */
.member-entry-sep {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0;
  border-top: 2px solid var(--gray-100);
  margin-top: .75rem;
  font-size: .82rem; color: var(--gray-500);
  font-weight: 600;
}

/* ── Linked profile auto-fill notice ─────────────────────────────── */
.linked-profile-notice {
  margin-top: .45rem;
  padding: .45rem .7rem;
  background: rgba(229,90,0,.07);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: .79rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.linked-profile-notice strong { color: var(--navy); }
[data-theme="dark"] .linked-profile-notice { background: rgba(229,90,0,.1); color: #94a3b8; }
[data-theme="dark"] .linked-profile-notice strong { color: #e2e8f0; }

/* ── Password toggle button ────────────────────────────────────────── */
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #666);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
  font-size: 0;
  line-height: 1;
}
.password-toggle:hover { opacity: 0.8; color: var(--text-primary, #333); }
[data-theme="dark"] .password-toggle { color: var(--text-secondary, #999); }
[data-theme="dark"] .password-toggle:hover { color: var(--text-primary, #fff); }
.password-toggle svg { display: block; width: 18px; height: 18px; }

.password-input {
  padding-right: 40px !important;
}