body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FAF7F2;
    overflow: hidden;
    user-select: none;
}

@media print {
    @page {
        size: landscape;
        margin: 12mm;
    }

    html, body {
        overflow: visible !important;
        background: #FAF7F2 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    header,
    #memberDrawer,
    #lineageBanner,
    .absolute.bottom-6.left-6,
    .absolute.bottom-6.right-6,
    #searchResults {
        display: none !important;
    }

    main {
        overflow: visible !important;
        height: auto !important;
        background: #FAF7F2 !important;
    }

    #treeViewport {
        overflow: visible !important;
        height: auto !important;
    }

    #treeCanvas {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    #svgConnectors,
    #treeNodes {
        position: static !important;
    }

    .glass-panel,
    .member-card {
        box-shadow: none !important;
    }
}

.tree-container {
    cursor: grab;
    touch-action: none;
}
.tree-container:active {
    cursor: grabbing;
}

.member-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.member-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
}

/* High-Visibility Base SVG Connectors */
.connector-line {
    transition: stroke 0.25s ease, stroke-width 0.25s ease, opacity 0.25s ease;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.junction-dot {
    transition: fill 0.25s ease, r 0.25s ease, opacity 0.25s ease;
}

/* Hover Lineage Glow Animation */
.highlight-ancestor-line {
    stroke: #D4AF37 !important;
    stroke-width: 5px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.7));
    stroke-dasharray: 8;
    animation: dash 1s linear infinite;
}

.highlight-descendant-line {
    stroke: #C8102E !important;
    stroke-width: 5px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 8px rgba(200, 16, 46, 0.7));
    stroke-dasharray: 8;
    animation: dash 1s linear infinite reverse;
}

.highlight-dot-ancestor {
    fill: #D4AF37 !important;
    r: 6 !important;
    opacity: 1 !important;
}

.highlight-dot-descendant {
    fill: #C8102E !important;
    r: 6 !important;
    opacity: 1 !important;
}

@keyframes dash {
    to {
        stroke-dashoffset: -16;
    }
}

.dimmed {
    opacity: 0.15 !important;
    filter: grayscale(90%);
}

.card-focused {
    box-shadow: 0 0 0 4px #059669, 0 16px 32px rgba(5, 150, 105, 0.3) !important;
    transform: scale(1.05) !important;
    z-index: 40 !important;
}

.card-ancestor {
    box-shadow: 0 0 0 3.5px #D4AF37, 0 12px 24px rgba(212, 175, 55, 0.3) !important;
    z-index: 30 !important;
}

.card-descendant {
    box-shadow: 0 0 0 3.5px #C8102E, 0 12px 24px rgba(200, 16, 46, 0.3) !important;
    z-index: 30 !important;
}

.branch-chip {
    border-left-width: 4px;
    border-left-style: solid;
}

.branch-chip-label {
    letter-spacing: 0.02em;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

@media (max-width: 768px) {
    body {
        overflow: hidden;
    }

    header {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem !important;
        align-items: flex-start;
    }

    header > div:first-child {
        width: 100%;
    }

    #siteTitle {
        font-size: 1rem;
        line-height: 1.3;
    }

    .glass-panel {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .tree-container {
        touch-action: none;
    }

    .absolute.bottom-6.right-6 {
        bottom: 0.75rem;
        right: 0.75rem;
    }

    .absolute.bottom-6.left-6 {
        display: none;
    }

    .member-card {
        width: 180px;
    }

    #searchInput {
        font-size: 0.875rem;
    }
}