:root{
    --bg:#f5f7fb;
    --panel:#ffffff;
    --ink:#172033;
    --muted:#657089;
    --line:#9aa7bd;
    --blue:#2563eb;
    --rose:#be4778;
    --green:#0f766e;
    --border:#d9e0ea;
    --amber:#b7791f;
}

*{
    box-sizing:border-box;
}

[hidden]{
    display:none !important;
}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--ink);
}

.topbar{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    padding:28px 32px 22px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
}

.eyebrow{
    margin:0 0 6px;
    color:var(--green);
    font-weight:700;
    text-transform:uppercase;
    font-size:12px;
}

h1{
    margin:0;
    font-size:32px;
}

.subtitle{
    margin:8px 0 0;
    color:var(--muted);
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.actions a,
.controls button{
    border:1px solid var(--border);
    border-radius:6px;
    background:#fff;
    color:var(--ink);
    padding:10px 12px;
    text-decoration:none;
    cursor:pointer;
    font-size:14px;
}

.actions a:first-child,
.controls button.active{
    background:var(--blue);
    border-color:var(--blue);
    color:white;
}

#showAll:not([hidden]){
    background:var(--amber);
    border-color:var(--amber);
    color:white;
}

main{
    padding:18px 24px 32px;
}

.controls{
    display:flex;
    gap:8px;
    align-items:center;
    margin:0 0 14px;
}

.controls input{
    width:min(420px, 100%);
    padding:11px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:15px;
}

.view-toggle{
    min-width:118px;
}

.workspace{
    display:grid;
    grid-template-columns:280px minmax(0, 1fr);
    gap:14px;
    align-items:stretch;
}

.workspace.nav-collapsed{
    grid-template-columns:38px minmax(0, 1fr);
}

.person-nav{
    height:calc(100vh - 170px);
    min-height:520px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.workspace.nav-collapsed .person-nav{
    overflow:visible;
}

.nav-head{
    padding:14px 14px 12px;
    border-bottom:1px solid var(--border);
    background:#f8fafc;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.nav-head strong,
.nav-head span{
    display:block;
}

.nav-head span{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.nav-head button{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border:1px solid var(--border);
    border-radius:6px;
    background:white;
    color:var(--ink);
    cursor:pointer;
    font-size:22px;
    line-height:1;
    padding:0;
}

.nav-head button:hover{
    background:#eaf1ff;
}

.workspace.nav-collapsed .nav-head{
    height:100%;
    padding:8px 4px;
    align-items:flex-start;
    justify-content:center;
    border-bottom:0;
    border-radius:8px;
}

.workspace.nav-collapsed .nav-head div,
.workspace.nav-collapsed .nav-list{
    display:none;
}

.nav-list{
    overflow:auto;
    padding:8px;
}

.nav-list button{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    padding:9px 10px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
}

.nav-list button:hover,
.nav-list button.active{
    background:#eaf1ff;
}

.nav-list span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.nav-list small{
    flex:0 0 auto;
    color:var(--muted);
    font-size:11px;
}

.viewer{
    min-width:0;
}

.photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px;
}

.photo-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}

.photo-card a{
    display:block;
    aspect-ratio:1;
    background:#eef2f7;
}

.photo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.photo-card div{
    padding:11px 12px 12px;
}

.photo-card h2{
    margin:0;
    font-size:14px;
    line-height:1.25;
}

.photo-card p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:12px;
}

.photo-card small{
    display:block;
    margin-top:6px;
    color:var(--green);
    font-size:11px;
}

.photo-people{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:8px 0 0 !important;
}

.photo-people a{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    aspect-ratio:auto;
    padding:3px 8px;
    border:1px solid #d6e1f2;
    border-radius:999px;
    background:#f7faff;
    color:var(--blue);
    text-decoration:none;
    font-size:11px;
    font-weight:800;
}

.notice{
    margin:0 0 14px;
    padding:11px 13px;
    border:1px solid #b9dccf;
    border-radius:8px;
    background:#ecfdf5;
    color:#11624f;
    font-size:14px;
    font-weight:700;
}

.notice.error{
    border-color:#f1b9b9;
    background:#fff1f2;
    color:#9f1239;
}

.table-shell,
.repo-panel{
    margin-bottom:16px;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 12px 30px rgba(20, 32, 54, .07);
}

.data-table{
    width:100%;
    min-width:860px;
    border-collapse:collapse;
    font-size:14px;
}

.data-table th,
.data-table td{
    padding:11px 12px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
}

.data-table th{
    background:#f8fafc;
    color:#526070;
    font-size:12px;
    text-transform:uppercase;
}

.data-table small{
    display:block;
    margin-top:4px;
    color:var(--muted);
}

.duplicate-row{
    background:#fff8eb;
}

.duplicate-summary{
    display:grid;
    gap:8px;
    margin-bottom:14px;
    padding:14px;
    border:1px solid #efd19a;
    border-radius:10px;
    background:#fff8eb;
    box-shadow:0 12px 30px rgba(20, 32, 54, .06);
}

.duplicate-summary h2{
    margin:0 0 4px;
    font-size:18px;
}

.duplicate-summary div{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
    align-items:center;
}

.duplicate-summary span{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.duplicate-summary a{
    min-height:28px;
    display:inline-flex;
    align-items:center;
    padding:0 8px;
    border-radius:8px;
    background:#fff;
    color:#835313;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.merge-panel{
    display:grid;
    grid-template-columns:minmax(220px, 360px) minmax(0, 1fr);
    gap:18px;
    align-items:start;
    margin-bottom:16px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 12px 30px rgba(20, 32, 54, .07);
}

.merge-panel h2{
    margin:0 0 8px;
    font-size:20px;
}

.merge-panel p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
}

.merge-panel form{
    display:grid;
    grid-template-columns:repeat(2, minmax(220px, 1fr));
    gap:12px;
}

.merge-panel label{
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.merge-panel select{
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 11px;
    background:#fbfcfe;
    color:var(--ink);
    font:14px/1.35 Arial, Helvetica, sans-serif;
}

.merge-panel button{
    min-height:38px;
    grid-column:1 / -1;
    justify-self:start;
    padding:0 13px;
    border:1px solid var(--blue);
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
}

.pill{
    display:inline-flex;
    min-height:24px;
    align-items:center;
    padding:0 8px;
    border-radius:999px;
    background:#eef7f5;
    color:var(--green);
    font-size:12px;
    font-weight:800;
}

.pill.warn{
    background:#fff0d8;
    color:#9a5c12;
}

.row-actions,
.photo-card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.row-actions a,
.row-actions button,
.photo-card-actions a,
.photo-card-actions button,
.form-actions a,
.form-actions button{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    text-decoration:none;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
}

.row-actions a:nth-child(2),
.form-actions button,
.photo-card-actions a{
    border-color:var(--blue);
    background:var(--blue);
    color:#fff;
}

.row-actions form,
.photo-card-actions form,
.profile-actions form{
    margin:0;
}

.row-actions button,
.photo-card-actions button,
#profileDelete{
    border-color:#e4b5bd;
    background:#fff1f2;
    color:#a0183a;
}

.review-table .row-actions button{
    border-color:var(--border);
    background:#fff;
    color:var(--ink);
}

.ticket-pick{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    font-size:13px;
    font-weight:800;
}

.ticket-pick input{
    margin:0;
}

.edit-form,
.upload-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(240px, 1fr));
    gap:14px;
    padding:16px;
}

.edit-form{
    max-width:920px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 12px 30px rgba(20, 32, 54, .07);
}

.edit-form label,
.upload-form label{
    display:grid;
    gap:6px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.edit-form input,
.edit-form select,
.edit-form textarea,
.upload-form input,
.upload-form select,
.upload-form textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 11px;
    background:#fbfcfe;
    color:var(--ink);
    font:14px/1.35 Arial, Helvetica, sans-serif;
}

.edit-form textarea,
.upload-form textarea{
    resize:vertical;
}

.edit-form label:has(textarea),
.wide{
    grid-column:1 / -1;
}

.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.form-actions form{
    margin:0;
}

.form-actions form button{
    border-color:#e4b5bd;
    background:#fff1f2;
    color:#a0183a;
}

.section-title{
    margin:22px 0 10px;
}

.section-title h2{
    margin:0;
    font-size:20px;
}

.empty-state{
    margin:0;
    padding:16px;
    border:1px dashed var(--border);
    border-radius:10px;
    background:#fff;
    color:var(--muted);
}

.mini-tree-shell{
    margin-bottom:18px;
    padding:18px;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 30px rgba(20, 32, 54, .07);
}

.mini-generation{
    min-width:620px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    align-items:stretch;
}

.couple-row{
    gap:18px;
}

.mini-link.vertical{
    width:2px;
    height:26px;
    margin:8px auto;
    background:var(--line);
}

.mini-person{
    width:220px;
    min-height:78px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fbfcfe;
    color:var(--ink);
    text-decoration:none;
    box-shadow:0 6px 16px rgba(20, 32, 54, .06);
}

.mini-person.selected{
    border-color:var(--blue);
    background:#eef5ff;
}

.mini-person.empty{
    justify-content:center;
    color:var(--muted);
    font-weight:700;
    text-align:center;
    box-shadow:none;
}

.mini-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:50%;
    background:#dce8f8;
    color:#294a7a;
    font-weight:800;
}

.mini-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mini-person strong,
.mini-person small{
    display:block;
    min-width:0;
}

.mini-person strong{
    font-size:14px;
    line-height:1.2;
}

.mini-person small{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    line-height:1.25;
}

.person-detail{
    display:grid;
    grid-template-columns:260px minmax(0, 1fr);
    gap:18px;
    align-items:start;
    margin-bottom:18px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel);
    box-shadow:0 12px 30px rgba(20, 32, 54, .07);
}

.detail-photo{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:#e9f0fb;
    color:#294a7a;
    font-size:64px;
    font-weight:800;
}

.detail-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.detail-body h2{
    margin:18px 0 8px;
    font-size:18px;
}

.detail-body p{
    margin:0;
    color:#334155;
    line-height:1.5;
}

.detail-facts{
    margin:0;
}

.relation-columns{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
}

.relation-columns article{
    padding:14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    box-shadow:0 10px 24px rgba(20, 32, 54, .06);
}

.relation-columns h2{
    margin:0 0 10px;
    font-size:17px;
}

.relation-columns a{
    display:block;
    margin:8px 0;
    color:var(--blue);
    text-decoration:none;
    font-weight:700;
}

.relation-columns p{
    margin:0;
    color:var(--muted);
}

.photo-story-form{
    display:grid;
    gap:10px;
    padding:0 12px 12px;
}

.photo-story-form label{
    display:grid;
    gap:5px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.photo-story-form textarea{
    width:100%;
    resize:vertical;
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 10px;
    background:#fbfcfe;
    color:var(--ink);
    font:13px/1.35 Arial, Helvetica, sans-serif;
}

.photo-story-form textarea:focus{
    outline:2px solid rgba(47, 111, 237, .18);
    border-color:#8eb1f2;
}

.photo-story-form button{
    min-height:36px;
    border:1px solid var(--blue);
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    cursor:pointer;
    font-size:13px;
    font-weight:800;
}

.photo-card-actions{
    padding:0 12px 12px;
}

.tree-shell{
    position:relative;
    overflow:auto;
    height:calc(100vh - 170px);
    min-height:520px;
    background:
        linear-gradient(#edf1f7 1px, transparent 1px),
        linear-gradient(90deg, #edf1f7 1px, transparent 1px),
        #fbfcfe;
    background-size:32px 32px;
    border:1px solid var(--border);
    border-radius:8px;
}

.tree-shell.family-focus{
    background:
        linear-gradient(#eef4f2 1px, transparent 1px),
        linear-gradient(90deg, #eef4f2 1px, transparent 1px),
        #fbfdfa;
}

.tree-shell[hidden],
.source-shell[hidden]{
    display:none;
}

#links{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:visible;
}

.tree-canvas{
    position:relative;
    z-index:2;
    min-width:1680px;
    padding:34px 52px 80px;
    transform-origin:top left;
}

.generation{
    position:relative;
    margin:0 auto 84px;
}

.generation-label{
    width:max-content;
    margin:0 auto 18px;
    padding:7px 12px;
    border-radius:8px;
    background:#e7edf8;
    color:#41516f;
    font-size:13px;
    font-weight:700;
    text-align:center;
}

.generation-label span,
.generation-label small{
    display:block;
}

.generation-label small{
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
}

.people-row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:18px;
    min-height:112px;
}

.person{
    width:218px;
    min-height:102px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;
    align-items:start;
    padding:12px;
    background:white;
    border:1px solid var(--border);
    border-top:4px solid #8792a8;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(20, 32, 54, .08);
    transition:opacity .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor:pointer;
}

.person:hover,
.person.match,
.person.selected{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(20, 32, 54, .14);
}

.person.selected{
    border-color:var(--amber);
    border-top-color:var(--amber);
    box-shadow:0 14px 34px rgba(183, 121, 31, .24);
}

.person.related{
    border-color:#9fc3b9;
    box-shadow:0 10px 24px rgba(15, 118, 110, .12);
}

.family-focus .person.related{
    opacity:1;
}

.person.unrelated{
    opacity:.38;
}

.person.dim{
    opacity:.25;
}

.person.male{
    border-top-color:var(--blue);
}

.person.female{
    border-top-color:var(--rose);
}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8eef8;
    color:#26446f;
    font-weight:700;
    font-size:20px;
    overflow:hidden;
}

.female .avatar{
    background:#f8e8f0;
    color:#8f305a;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.person h2{
    margin:0;
    font-size:14px;
    line-height:1.25;
}

.dates,
.parents{
    margin:6px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.35;
}

.source-shell{
    height:calc(100vh - 170px);
    min-height:520px;
    background:#fbfcfe;
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}

.source-toolbar{
    height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    background:#fff;
    border-bottom:1px solid var(--border);
}

.source-toolbar span{
    color:var(--muted);
    font-size:13px;
}

.source-scroll{
    height:calc(100% - 48px);
    overflow:auto;
    background:#fff;
}

.source-scroll img{
    display:block;
    width:2400px;
    max-width:none;
    height:auto;
}

.parent-line{
    fill:none;
    stroke:var(--line);
    stroke-width:2.5;
}

.parent-line.padre{
    stroke:#5b7cbd;
}

.parent-line.madre{
    stroke:#b5658c;
}

.spouse-line{
    fill:none;
    stroke:var(--green);
    stroke-width:3;
    stroke-linecap:round;
}

.node {
    padding:10px;
    border:1px solid #333;
    border-radius:6px;
    background:#f0f0f0;
    text-align:center;
    font-family:Arial;
}

/* Modern tree workspace */
:root{
    --bg:#eef2f5;
    --panel:#ffffff;
    --ink:#18202d;
    --muted:#667085;
    --line:#a5b0bd;
    --blue:#2f6fed;
    --rose:#c05782;
    --green:#16836f;
    --border:#d6dde6;
    --amber:#b98124;
}

body{
    background:
        radial-gradient(circle at 18% 0%, rgba(47, 111, 237, .08), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, var(--bg) 38%, #e9eef3 100%);
}

.topbar{
    position:sticky;
    top:0;
    z-index:20;
    align-items:center;
    padding:18px 24px;
    box-shadow:0 12px 34px rgba(28, 39, 57, .08);
}

.topbar h1{
    font-size:26px;
    letter-spacing:0;
}

.subtitle{
    font-size:14px;
}

.actions a,
.controls button{
    min-height:38px;
    border-radius:8px;
    font-weight:700;
    box-shadow:0 1px 0 rgba(20, 32, 54, .04);
}

.actions a:hover,
.controls button:hover{
    border-color:#b9c4d2;
    background:#f8fafc;
}

.actions a:first-child:hover,
.controls button.active:hover{
    background:#245dd0;
    border-color:#245dd0;
}

main{
    padding:16px;
}

.controls{
    position:sticky;
    top:83px;
    z-index:15;
    padding:10px;
    background:rgba(255, 255, 255, .86);
    border:1px solid rgba(214, 221, 230, .9);
    border-radius:10px;
    backdrop-filter:blur(12px);
    box-shadow:0 14px 30px rgba(20, 32, 54, .07);
}

.controls input{
    min-height:40px;
    border-radius:8px;
    background:#fbfcfe;
}

#zoomOut,
#zoomIn{
    width:40px;
    padding:0;
    font-size:20px;
}

.workspace{
    grid-template-columns:300px minmax(0, 1fr);
}

.person-nav,
.tree-shell,
.source-shell{
    border-radius:10px;
    border-color:#cfd8e3;
    box-shadow:0 16px 40px rgba(20, 32, 54, .09);
}

.person-nav{
    height:calc(100vh - 185px);
}

.nav-head{
    background:linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
}

.nav-list button{
    min-height:42px;
    border-radius:8px;
}

.tree-shell{
    height:calc(100vh - 185px);
    cursor:grab;
    background:
        linear-gradient(rgba(33, 45, 65, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(33, 45, 65, .045) 1px, transparent 1px),
        #f9fbfd;
    background-size:28px 28px;
}

.tree-shell.dragging{
    cursor:grabbing;
    user-select:none;
}

.canvas-hint{
    position:sticky;
    top:12px;
    left:14px;
    z-index:6;
    width:max-content;
    max-width:calc(100% - 28px);
    padding:7px 10px;
    border:1px solid rgba(214, 221, 230, .92);
    border-radius:8px;
    background:rgba(255, 255, 255, .9);
    color:#596476;
    font-size:12px;
    box-shadow:0 8px 22px rgba(20, 32, 54, .08);
    pointer-events:none;
}

.tree-canvas{
    min-width:1900px;
    padding:40px 64px 110px;
}

.tree-canvas.generational-layout{
    min-width:0;
    padding:0;
}

.layout-band{
    position:absolute;
    left:90px;
    right:90px;
    top:28px;
    z-index:0;
    height:34px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px solid #d5deea;
    border-radius:8px;
    background:rgba(255, 255, 255, .78);
    color:#5c6878;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    pointer-events:none;
}

.layout-band[hidden]{
    display:none;
}

.layout-person{
    position:absolute;
    z-index:2;
}

.generation{
    margin-bottom:96px;
}

.generation-label{
    border:1px solid #d5deea;
    background:#fff;
    box-shadow:0 8px 20px rgba(20, 32, 54, .08);
}

.people-row{
    gap:20px;
}

.person{
    width:230px;
    min-height:112px;
    grid-template-columns:54px 1fr;
    gap:12px;
    padding:12px 13px;
    border-radius:10px;
    border-top-width:0;
    border-left:5px solid #8792a8;
    box-shadow:0 12px 26px rgba(20, 32, 54, .12);
}

.person.male{
    border-left-color:var(--blue);
}

.person.female{
    border-left-color:var(--rose);
}

.person.selected{
    border-color:var(--amber);
    border-left-color:var(--amber);
    box-shadow:0 18px 44px rgba(185, 129, 36, .28);
}

.avatar{
    width:54px;
    height:54px;
    border:3px solid #fff;
    box-shadow:0 4px 12px rgba(20, 32, 54, .16);
}

.person h2{
    font-size:14px;
    line-height:1.2;
}

.dates,
.parents{
    font-size:11px;
}

.parents{
    max-height:34px;
    overflow:hidden;
}

.parent-line{
    stroke-width:2.2;
    opacity:.8;
}

.spouse-line{
    stroke-width:2.6;
    stroke-dasharray:7 7;
}

.imported-line{
    fill:none;
    stroke:#6d89c7;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.72;
}

.profile-panel{
    position:sticky;
    right:18px;
    bottom:18px;
    z-index:8;
    float:right;
    width:340px;
    max-width:calc(100% - 28px);
    margin:-380px 18px 18px auto;
    padding:16px;
    border:1px solid #d3dce7;
    border-radius:10px;
    background:rgba(255, 255, 255, .96);
    box-shadow:0 20px 60px rgba(20, 32, 54, .22);
    transform:translateY(16px);
    opacity:0;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
}

.profile-panel.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}

#closeProfile{
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    color:var(--muted);
    cursor:pointer;
    font-size:22px;
    line-height:1;
}

.profile-hero{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:12px;
    align-items:center;
    padding-right:26px;
}

.profile-avatar{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:10px;
    background:#e9f0fb;
    color:#294a7a;
    font-size:30px;
    font-weight:800;
}

.profile-panel.female .profile-avatar{
    background:#faeaf1;
    color:#96355d;
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-kicker{
    margin:0 0 4px;
    color:var(--green);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.profile-hero h2{
    margin:0;
    font-size:20px;
    line-height:1.15;
}

#profileDates{
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px;
}

.profile-facts{
    display:grid;
    grid-template-columns:96px 1fr;
    gap:9px 12px;
    margin:16px 0 0;
    padding-top:14px;
    border-top:1px solid var(--border);
    font-size:13px;
}

.profile-facts dt{
    color:var(--muted);
    font-weight:700;
}

.profile-facts dd{
    margin:0;
    min-width:0;
}

.profile-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.profile-actions a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 12px;
    border-radius:8px;
    background:var(--blue);
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.profile-actions a:nth-child(n+2){
    background:#fff;
    border:1px solid var(--border);
    color:var(--ink);
}

@media(max-width:760px){
    .topbar{
        display:block;
        padding:22px 16px;
    }

    h1{
        font-size:26px;
    }

    .actions{
        justify-content:flex-start;
        margin-top:16px;
    }

    main{
        padding:14px 12px 24px;
    }

    .controls{
        flex-wrap:wrap;
    }

    .edit-form,
    .upload-form,
    .merge-panel,
    .merge-panel form,
    .person-detail,
    .relation-columns{
        grid-template-columns:1fr;
    }

    .detail-photo{
        max-width:260px;
    }

    .workspace{
        grid-template-columns:1fr;
    }

    .workspace.nav-collapsed{
        grid-template-columns:1fr;
    }

    .person-nav{
        height:220px;
        min-height:220px;
    }

    .workspace.nav-collapsed .person-nav{
        height:40px;
        min-height:40px;
    }

    .tree-shell,
    .source-shell{
        height:calc(100vh - 230px);
    }

    .source-toolbar{
        height:auto;
        min-height:52px;
        align-items:flex-start;
        flex-direction:column;
        gap:2px;
        padding:10px 12px;
    }

    .source-scroll{
        height:calc(100% - 64px);
    }

    .controls{
        top:0;
    }

    .tree-canvas{
        min-width:1280px;
        padding:34px 28px 90px;
    }

    .person{
        width:210px;
    }

    .profile-panel{
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;
        width:auto;
        max-width:none;
        margin:0;
    }

    .canvas-hint{
        display:none;
    }
}