:root {
    --bg-color: #f5f5f5; --text-color: #333; --line-color: #999;
    --male-bg: #e3f2fd; --male-border: #64b5f6;
    --female-bg: #fce4ec; --female-border: #f06292;
    --focus-border: #ff9800; --focus-shadow: rgba(255, 152, 0, 0.4);
    --card-shadow: rgba(0, 0, 0, 0.1);
    --highlight-color: #ff9800; --highlight-glow: rgba(255, 152, 0, 0.6);
}
[data-theme="dark"] {
    --bg-color: #121212; --text-color: #e0e0e0; --line-color: #666;
    --male-bg: #1e3a5f; --male-border: #4fc3f7;
    --female-bg: #4a148c; --female-border: #ba68c8;
    --focus-border: #ffb74d; --focus-shadow: rgba(255, 183, 77, 0.6);
    --card-shadow: rgba(0, 0, 0, 0.5);
    --highlight-color: #ffb74d; --highlight-glow: rgba(255, 183, 77, 0.8);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: Tahoma, Arial, sans-serif; overflow: hidden; transition: 0.3s; }

/* منطقه اسکرول تمام صفحه */
.scroll-area {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: auto; -webkit-overflow-scrolling: touch; cursor: grab; direction: ltr;
}
.scroll-area:active { cursor: grabbing; }

/* منوی شناور */
.controls-wrapper { position: sticky; top: 0; left: 0; width: 100vw; display: flex; justify-content: center; pointer-events: none; z-index: 1000; }
.controls { pointer-events: auto; position: relative; margin-top: 15px; max-width: 95vw; background: var(--bg-color); padding: 10px; border-radius: 8px; border: 1px solid var(--line-color); box-shadow: 0 4px 15px var(--card-shadow); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; direction: rtl; }
.btn { padding: 8px 15px; text-decoration: none; color: var(--text-color); border: 1px solid var(--line-color); border-radius: 5px; cursor: pointer; background: transparent; transition: 0.3s; font-size: 14px; font-family: Tahoma;}
.btn:hover { background: var(--line-color); color: var(--bg-color); }
.view-tabs { display: flex; background: var(--bg-color); border: 1px solid var(--line-color); border-radius: 8px; overflow: hidden; direction: rtl; }
.view-tabs a { padding: 8px 12px; text-decoration: none; color: var(--text-color); font-size: 13px; border-left: 1px solid var(--line-color); transition: 0.2s; }
.view-tabs a.active, .view-tabs a:hover { background: var(--line-color); color: var(--bg-color); font-weight: bold; }
.stats-badge { display: flex; gap: 12px; background: rgba(0,0,0,0.04); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; border: 1px dashed var(--line-color); }
[data-theme="dark"] .stats-badge { background: rgba(255,255,255,0.05); }

/* ساختار درخت */
.tree-container { padding: 120px 50px 100px 50px; min-width: fit-content; direction: ltr !important; }
.tree ul { display: flex; justify-content: center; align-items: flex-start; padding-top: 30px; position: relative; margin: 0; }
.tree li { display: flex; flex-direction: column; align-items: center; list-style-type: none; position: relative; padding: 30px 10px 0 10px; }
.tree li::before, .tree li::after { content: ''; position: absolute; top: 0; width: 50%; height: 30px; border-top: 2px solid var(--line-color); box-sizing: border-box; }
.tree li::before { left: 0; border-right: 2px solid var(--line-color); }
.tree li::after { right: 0; }
.tree li:first-child::before { border-top: 0 none; }
.tree li:last-child::after { border-top: 0 none; }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-top: 0; }
.tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 30px; border-left: 2px solid var(--line-color); transform: translateX(-50%); }

/* کارت‌ها */
.couple-wrapper { display: flex; gap: 15px; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 10px; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; }
[data-theme="dark"] .couple-wrapper { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.05); }
.couple-wrapper::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background-color: var(--line-color); opacity: 0.5; z-index: -1; }
.member-card { display: inline-block; direction: rtl; text-align: right; border: 2px solid var(--line-color); border-radius: 10px; padding: 15px; min-width: 140px; cursor: pointer; box-shadow: 0 4px 6px var(--card-shadow); background-color: var(--bg-color); position: relative; transition: 0.3s; }
.empty-card { border: 2px dashed var(--line-color); background: transparent; color: var(--line-color); cursor: default; }
.male { background-color: var(--male-bg); border-color: var(--male-border); }
.female { background-color: var(--female-bg); border-color: var(--female-border); }
.focus-card { border-color: var(--focus-border) !important; box-shadow: 0 0 15px var(--focus-shadow) !important; transform: scale(1.1); z-index: 10; }
.member-name { font-size: 15px; font-weight: bold; margin-bottom: 8px; text-align: center; }
.member-dates { font-size: 12px; opacity: 0.8; margin-bottom: 10px; line-height: 1.4; border-top: 1px dashed var(--text-color); padding-top: 5px; text-align: center;}
.actions { display: flex; justify-content: center; gap: 15px; margin-top: 12px; }
.actions a { text-decoration: none; font-size: 18px; background: var(--bg-color); border: 1px solid var(--line-color); padding: 8px 18px; border-radius: 8px; box-shadow: 0 2px 5px var(--card-shadow); transition: 0.2s; }
.actions a:hover { transform: scale(1.15); background: var(--line-color); }

/* همسر */
.spouse-card { border-style: dashed !important; opacity: 0.85; }
.spouse-label { font-size: 9px; color: var(--text-color); opacity: 0.7; margin-bottom: 2px; text-align: center; }

/* بج فرزند */
.child-badge { background: #607d8b; color: #fff; border-radius: 8px; padding: 1px 5px; font-size: 11px; font-weight: bold; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 5; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
[data-theme="dark"] .child-badge { background: #455a64; }

/* دکمه مسیر */
.highlight-btn { position: absolute; top: -10px; right: -10px; background: var(--bg-color); border: 1px solid var(--line-color); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
.highlight-btn:hover { transform: scale(1.2); }

/* دکمه اکسپند (باز و بسته کردن) */
.collapse-toggle { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); background: var(--bg-color); border: 1px solid var(--line-color); color: var(--text-color); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; z-index: 10; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.tree li.collapsed > ul { display: none !important; }

/* مسیر روشن (رنگ آمیزی) */
.highlight-path > ul::before, .highlight-path > ::before, .highlight-path > ::after, .highlight-path::before, .highlight-path::after { border-color: var(--highlight-color) !important; z-index: 5 !important; }
.member-card.highlight { border-color: var(--highlight-color) !important; box-shadow: 0 0 15px var(--highlight-glow) !important; }

/* چرخش پروانه‌ای */
.tree-up { transform: rotate(180deg); margin-bottom: -32px; }
.inverted-card { transform: rotate(-180deg); }

/* دیالوگ آمار */
.info-dialog { position: fixed; bottom: 25px; left: 25px; background: var(--bg-color); border: 2px solid var(--focus-border); border-radius: 12px; padding: 15px; box-shadow: 0 5px 25px var(--card-shadow); z-index: 1000; min-width: 180px; font-size: 13px; direction: rtl; }
.info-dialog h4 { margin: 0 0 10px 0; border-bottom: 1px dashed var(--line-color); padding-bottom: 8px; color: var(--text-color); font-size: 14px;}
.info-dialog div { margin-bottom: 6px; color: var(--text-color); font-weight: bold;}

/* --- حالت نمایشی (فشرده) --- */
body.compact-mode .actions, body.compact-mode .member-dates, body.compact-mode .spouse-label { display: none !important; }
body.compact-mode .member-card { min-width: 45px; padding: 5px; }
body.compact-mode .member-name span { display: block; line-height: 1.2; }
body.compact-mode .member-name { font-size: 10px; margin-bottom: 0; }
body.compact-mode .couple-wrapper { flex-direction: column; gap: 3px; padding: 3px; border-radius: 8px; }
body.compact-mode .couple-wrapper::before { top: 15%; bottom: 15%; left: 50%; right: auto; width: 2px; height: auto; transform: translateX(-50%); }
body.compact-mode .spouse-card { transform: scale(0.9); }
body.compact-mode .has-children > .couple-wrapper > .spouse-card { transform: scale(0.95); }
body.compact-mode .tree li { padding: 15px 2px 0 2px; }
body.compact-mode .tree li::before, body.compact-mode .tree li::after, body.compact-mode .tree ul ul::before { height: 15px; }
body.compact-mode .highlight-btn { width: 16px; height: 16px; font-size: 8px; top: -5px; right: -5px; }

/* --- استایل آسمانی شده (وفات) --- */
.heavenly-card {
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.25) !important;
    background: linear-gradient(135deg, var(--bg-color) 60%, rgba(255, 215, 0, 0.15) 100%) !important;
}
[data-theme="dark"] .heavenly-card {
    background: linear-gradient(135deg, var(--bg-color) 60%, rgba(255, 215, 0, 0.2) 100%) !important;
}
.heaven-icon {
    position: absolute;
    top: -14px;
    left: -14px;
    font-size: 18px;
    background: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 5;
    animation: heaven-float 3s ease-in-out infinite;
}
[data-theme="dark"] .heaven-icon { background: #333; }

@keyframes heaven-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0px); }
}