:root {
    --bg: #f2efe8;
    --bg-deep: #e4ddd2;
    --panel: rgba(255, 252, 247, 0.86);
    --panel-strong: rgba(255, 253, 250, 0.95);
    --line: rgba(47, 59, 74, 0.12);
    --line-strong: rgba(47, 59, 74, 0.22);
    --text: #20303d;
    --muted: #60717e;
    --accent: #c46433;
    --accent-deep: #9a4620;
    --accent-soft: rgba(196, 100, 51, 0.12);
    --forest: #245f52;
    --forest-soft: rgba(36, 95, 82, 0.12);
    --danger: #b63c49;
    --danger-soft: rgba(182, 60, 73, 0.12);
    --glow: 0 24px 70px rgba(43, 52, 63, 0.12);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --node-width: 236px;
    --node-height: 142px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Manrope", sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(196, 100, 51, 0.22), transparent 26%),
        radial-gradient(circle at 90% 0, rgba(36, 95, 82, 0.2), transparent 18%),
        linear-gradient(180deg, #f8f5ee 0%, var(--bg) 40%, var(--bg-deep) 100%);
}

body.modal-open {
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 85%);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.app-shell {
    width: min(2520px, calc(100% - 20px));
    margin: 0 auto;
    padding: 18px 0 30px;
}

.hero,
.panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-xl);
    background: var(--panel);
    box-shadow: var(--glow);
    backdrop-filter: blur(18px);
}

.hero::after,
.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 55%);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(720px, 1fr);
    gap: 18px;
    align-items: start;
    padding: 24px 28px;
    margin-bottom: 16px;
}

.hero-copy {
    display: grid;
    gap: 12px;
    align-content: start;
}

.eyebrow,
.section-kicker {
    margin: 0 0 10px;
    color: var(--accent-deep);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero h1,
.panel h2,
.form-heading h3 {
    margin: 0;
    font-family: "Fraunces", serif;
    line-height: 1;
}

.hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    letter-spacing: -0.04em;
}

.hero-subtitle {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.58;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--forest);
    background: var(--forest-soft);
    font-size: 0.92rem;
    font-weight: 700;
}

.status-pill.is-error {
    color: var(--danger);
    background: var(--danger-soft);
}

.status-pill.is-success {
    color: #1f694f;
    background: rgba(36, 95, 82, 0.18);
    box-shadow: inset 0 0 0 1px rgba(36, 95, 82, 0.08);
}

.status-pill.is-warning {
    color: #8e651d;
    background: rgba(201, 154, 46, 0.14);
}

.center-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 80;
    min-width: min(420px, calc(100vw - 32px));
    max-width: min(520px, calc(100vw - 32px));
    padding: 18px 22px;
    border: 1px solid rgba(36, 95, 82, 0.14);
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--forest), #173f37);
    box-shadow: 0 28px 60px rgba(23, 63, 55, 0.32);
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.center-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.center-toast.is-error {
    background: linear-gradient(135deg, #d35b67, var(--danger));
    box-shadow: 0 28px 60px rgba(182, 60, 73, 0.3);
}

.hero-meta {
    display: grid;
    gap: 12px;
    align-content: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card {
    display: grid;
    gap: 8px;
    min-height: 96px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 232, 224, 0.92));
    border: 1px solid rgba(47, 59, 74, 0.08);
}

.stat-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-card strong {
    align-self: end;
    font-size: clamp(1.3rem, 3.4vw, 2rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    grid-column: 1 / -1;
}

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

.session-summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(36, 95, 82, 0.14);
    border-radius: 999px;
    color: var(--forest);
    background: rgba(36, 95, 82, 0.08);
    font-size: 0.92rem;
    font-weight: 800;
}

.view-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
}

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

.view-toggle.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--forest), #173f37);
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(36, 95, 82, 0.18);
}

.layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.layout.is-browse {
    grid-template-columns: 1fr;
    gap: 14px;
}

.layout.is-browse .left-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: end;
    padding: 16px 18px;
}

.layout.is-browse .left-column > .panel-head,
.layout.is-browse .manageHint,
.layout.is-browse .people-list {
    display: none !important;
}

.layout.is-browse .filters-stack {
    grid-template-columns: minmax(280px, 1.8fr) repeat(3, minmax(150px, 0.9fr));
    gap: 12px;
    margin-bottom: 0;
}

.layout.is-browse .advanced-filters,
.layout.is-browse .advanced-filters .field-grid {
    display: contents;
}

.layout.is-browse .list-summary {
    margin-bottom: 0;
    align-self: end;
    white-space: nowrap;
}

.layout.is-browse .last-added-card {
    grid-column: 1 / -1;
}

.layout.is-browse .content-column,
.layout.is-browse .view-stage {
    gap: 14px;
}

.layout.is-browse .canvas-panel {
    padding: 16px 18px 14px;
}

.layout.is-browse .canvas-panel .panel-head {
    margin-bottom: 10px;
}

.layout.is-browse .tree-viewport {
    min-height: clamp(720px, calc(100vh - 280px), 1320px);
}

.layout.is-browse .legend-row {
    margin-top: 10px;
    justify-content: flex-end;
}

.panel {
    padding: 22px;
}

.left-column,
.content-column,
.canvas-panel,
.editor-panel {
    min-width: 0;
}

.panel-head,
.form-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.panel h2 {
    font-size: 2rem;
}

.field,
.stacked-form {
    display: grid;
    gap: 8px;
}

.filters-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.advanced-filters {
    display: grid;
    gap: 12px;
}

.list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.last-added-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    padding: 12px;
    color: var(--text);
    text-align: left;
    border: 1px solid rgba(196, 100, 51, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 237, 230, 0.84));
}

.last-added-card:hover {
    border-color: rgba(196, 100, 51, 0.38);
    box-shadow: 0 14px 24px rgba(52, 59, 69, 0.08);
}

.last-added-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.last-added-eyebrow {
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.field-label,
small {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mini-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.mini-toggle input {
    width: 16px;
    height: 16px;
}

.helper-copy {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(36, 95, 82, 0.12);
    border-radius: var(--radius-md);
    color: var(--muted);
    background: rgba(36, 95, 82, 0.06);
    line-height: 1.6;
}

.field-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    color: var(--text);
    border: 1px solid rgba(47, 59, 74, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(196, 100, 51, 0.7);
    box-shadow: 0 0 0 4px rgba(196, 100, 51, 0.12);
}

textarea {
    resize: vertical;
}

select[multiple] {
    min-height: 126px;
}

.primary-button,
.ghost-button,
.chip-button,
.danger-button {
    border: none;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.primary-button:hover,
.ghost-button:hover,
.chip-button:hover,
.danger-button:hover {
    transform: translateY(-1px);
}

.primary-button {
    padding: 13px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 16px 28px rgba(196, 100, 51, 0.22);
}

.ghost-button,
.chip-button {
    padding: 11px 14px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(47, 59, 74, 0.1);
}

.danger-button {
    padding: 13px 18px;
    color: #fff;
    background: linear-gradient(135deg, #d35b67, var(--danger));
}

.danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.primary-button:disabled,
.ghost-button:disabled,
.chip-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.people-list {
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 280px);
    overflow: auto;
    padding-right: 4px;
}

.people-group {
    display: grid;
    gap: 10px;
}

.people-group-head {
    display: grid;
    gap: 4px;
    padding: 2px 2px 0;
}

.people-group-head strong {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.people-group-head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.people-group-body {
    display: grid;
    gap: 10px;
}

.person-list-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px;
    color: var(--text);
    text-align: left;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
}

.person-list-item:hover,
.person-list-item.is-active {
    border-color: rgba(196, 100, 51, 0.45);
    box-shadow: 0 14px 24px rgba(52, 59, 69, 0.1);
}

.person-list-media,
.tree-node-photo,
.detail-photo,
.photo-preview-shell {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(196, 100, 51, 0.16), rgba(36, 95, 82, 0.18));
    color: var(--accent-deep);
    font-weight: 800;
}

.person-list-media {
    width: 54px;
    height: 54px;
    font-size: 1rem;
}

.person-list-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.person-list-name {
    font-size: 0.96rem;
}

.person-list-subline {
    color: var(--muted);
    font-size: 0.8rem;
}

.content-column,
.view-stage,
.manage-stack {
    display: grid;
    gap: 20px;
}

.editor-panel {
    overflow: hidden;
}

.identity-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 176px;
    align-items: end;
}

.identity-name-field {
    gap: 6px;
    align-self: end;
}

.settings-accordion {
    margin-bottom: 18px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.66);
}

.settings-accordion summary {
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 800;
    list-style: none;
}

.settings-accordion summary::-webkit-details-marker {
    display: none;
}

.settings-accordion[open] summary {
    border-bottom: 1px solid rgba(47, 59, 74, 0.08);
}

.settings-accordion .settings-form {
    padding: 0 18px 18px;
    margin-bottom: 0;
    border-bottom: none;
}

.canvas-panel {
    padding-bottom: 16px;
}

.canvas-actions {
    display: flex;
    gap: 8px;
}

.tree-viewport {
    position: relative;
    min-height: 820px;
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    background:
        radial-gradient(circle at top left, rgba(36, 95, 82, 0.05), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 232, 0.96));
}

.tree-viewport.is-grabbing {
    cursor: grabbing;
}

.tree-world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
}

.tree-svg,
.tree-nodes {
    position: absolute;
    top: 0;
    left: 0;
}

.tree-svg {
    overflow: visible;
}

.tree-generation-band {
    fill: rgba(255, 255, 255, 0.42);
    stroke: rgba(36, 95, 82, 0.05);
    stroke-width: 1.2;
}

.tree-generation-band.is-even {
    fill: rgba(255, 252, 247, 0.54);
}

.tree-generation-band.is-odd {
    fill: rgba(244, 238, 230, 0.72);
}

.tree-generation-pill {
    fill: rgba(255, 255, 255, 0.96);
    stroke: rgba(36, 95, 82, 0.12);
    stroke-width: 1.2;
}

.tree-generation-label {
    fill: var(--forest);
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.tree-nodes {
    pointer-events: none;
    user-select: none;
}

.tree-node {
    position: absolute;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        "photo name"
        "photo subline"
        "badges badges";
    gap: 5px 14px;
    align-content: start;
    width: var(--node-width);
    min-height: var(--node-height);
    padding: 16px 18px 13px;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    border: 1px solid rgba(47, 59, 74, 0.1);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 244, 238, 0.98));
    box-shadow:
        0 16px 28px rgba(40, 51, 63, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    isolation: isolate;
}

.tree-node::before,
.tree-node::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.tree-node::before {
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, rgba(36, 95, 82, 0.78), rgba(36, 95, 82, 0.36));
}

.tree-node.is-deceased {
    border-color: rgba(182, 60, 73, 0.2);
    background: linear-gradient(180deg, rgba(255, 251, 251, 0.995), rgba(249, 238, 239, 0.98));
}

.tree-node.is-deceased::before {
    background: linear-gradient(90deg, rgba(182, 60, 73, 0.88), rgba(182, 60, 73, 0.42));
}

.tree-node.is-deceased::after {
    background: radial-gradient(circle, rgba(182, 60, 73, 0.08), transparent 72%);
}

.tree-node::after {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(36, 95, 82, 0.06), transparent 72%);
}

.tree-node > * {
    position: relative;
    z-index: 1;
}

.tree-node:hover,
.tree-node.is-active {
    border-color: rgba(196, 100, 51, 0.6);
    box-shadow:
        0 22px 34px rgba(40, 51, 63, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.tree-node.is-deceased:hover,
.tree-node.is-deceased.is-active {
    border-color: rgba(182, 60, 73, 0.48);
}

.tree-node.is-active {
    outline: 3px solid rgba(196, 100, 51, 0.2);
}

.tree-node-photo {
    grid-area: photo;
    width: 52px;
    height: 52px;
    font-size: 0.9rem;
    border-radius: 16px;
    align-self: start;
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 16px rgba(44, 54, 65, 0.1);
}

.tree-node-photo img,
.person-list-media img,
.detail-photo img,
.photo-preview-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tree-node-name {
    grid-area: name;
    align-self: end;
    min-width: 0;
    padding-top: 2px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

.tree-node-subline {
    grid-area: subline;
    color: var(--muted);
    min-width: 0;
    min-height: 1.35em;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.tree-node-badges,
.detail-chip-list,
.relation-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tree-node-badges {
    grid-area: badges;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(47, 59, 74, 0.08);
}

.tree-node-badges:empty {
    display: none;
}

.node-badge,
.detail-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(36, 95, 82, 0.08);
    font-size: 0.76rem;
    font-weight: 700;
}

.tree-node .node-badge {
    padding: 5px 9px;
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tree-node .node-badge:first-child {
    color: var(--forest);
    background: rgba(36, 95, 82, 0.1);
}

.tree-node .node-badge.is-danger {
    color: var(--danger);
    background: rgba(182, 60, 73, 0.12);
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 20px;
    color: var(--muted);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.5);
}

.detail-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
}

.detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 48, 61, 0.42);
    backdrop-filter: blur(8px);
}

.detail-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding-top: 70px;
}

.detail-close-button {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.tree-drag-tip {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 30px rgba(40, 51, 63, 0.08);
    backdrop-filter: blur(16px);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.tree-drag-tip::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--forest));
    box-shadow: 0 0 0 5px rgba(196, 100, 51, 0.12);
}

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.legend-dot.is-parent {
    background: var(--forest);
}

.legend-dot.is-spouse {
    background: var(--accent);
}

.legend-dot.is-selected {
    background: #4d6fe3;
}

.auth-panel,
.editor-panel {
    padding-bottom: 22px;
}

.auth-card,
.session-card {
    display: grid;
    gap: 14px;
}

.auth-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.auth-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.auth-copy code {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(36, 95, 82, 0.08);
}

.auth-grid {
    display: grid;
    gap: 12px;
}

.person-details {
    display: grid;
    gap: 18px;
}

.detail-header {
    display: grid;
    gap: 14px;
}

.detail-hero {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.detail-photo {
    width: 92px;
    height: 92px;
    font-size: 1.6rem;
}

.detail-title {
    display: grid;
    gap: 6px;
}

.detail-title h3 {
    margin: 0;
    font-size: 2rem;
    font-family: "Fraunces", serif;
}

.detail-title p,
.detail-summary {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.detail-groups {
    display: grid;
    gap: 14px;
}

.detail-group {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(47, 59, 74, 0.08);
}

.detail-group strong {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.settings-form,
.person-form {
    gap: 14px;
}

.person-form {
    gap: 18px;
}

.settings-form {
    padding-bottom: 14px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(47, 59, 74, 0.08);
}

.form-heading {
    align-items: center;
    margin-bottom: 0;
}

.person-form-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(400px, 0.96fr) minmax(760px, 1.48fr);
    align-items: start;
}

.person-core-stack {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.photo-uploader {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.66);
}

.compact-photo-uploader {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 10px;
    min-height: 74px;
}

.photo-preview-shell {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(196, 100, 51, 0.1), rgba(36, 95, 82, 0.16));
}

.compact-photo-uploader .photo-preview-shell {
    width: 56px;
    height: 56px;
    border-radius: 18px;
}

.compact-photo-uploader .toggle-row {
    font-size: 0.78rem;
    gap: 8px;
    justify-self: end;
}

.photo-action-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.photo-action-stack .chip-button,
.photo-action-stack .ghost-button {
    width: 100%;
    justify-content: center;
}

.file-trigger {
    cursor: pointer;
}

.compact-toggle-row {
    margin-top: 0;
}

.compact-photo-uploader .photo-placeholder {
    font-size: 0.72rem;
    line-height: 1.25;
    padding: 0 8px;
}

.photo-placeholder {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    padding: 0 10px;
}

.toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.toggle-row input {
    width: 18px;
    height: 18px;
}

.identity-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.95fr);
    align-items: end;
}

.identity-name-field {
    gap: 6px;
    align-self: stretch;
}

.person-identity-fields,
.life-grid {
    gap: 10px;
}

.life-status-row {
    display: flex;
    align-items: center;
    min-height: 40px;
}

.death-toggle-row {
    padding-left: 2px;
}

.relation-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.88fr);
    align-items: start;
    min-width: 0;
}

.relation-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    height: 100%;
    padding: 16px 16px 14px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.62);
}

.relation-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.relation-card-head > div {
    display: grid;
    gap: 4px;
}

.relation-search-row {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.relation-search-field {
    min-width: 0;
}

.quick-pick-stack {
    display: grid;
    gap: 8px;
    align-self: end;
}

.quick-pick-button {
    min-width: 210px;
    max-width: 290px;
    min-height: 52px;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-pick-button.is-selected {
    border-color: rgba(36, 95, 82, 0.28);
    color: var(--forest);
    background: rgba(36, 95, 82, 0.08);
}

.selection-count {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--forest);
    background: rgba(36, 95, 82, 0.1);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.selection-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
}

.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(36, 95, 82, 0.12);
    border-radius: 999px;
    color: var(--forest);
    background: rgba(36, 95, 82, 0.08);
    font-size: 0.82rem;
    font-weight: 800;
}

.selection-chip-remove {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.option-pick-list {
    display: grid;
    gap: 8px;
    max-height: 342px;
    overflow: auto;
    padding-right: 4px;
}

.option-pick-list-compact {
    max-height: 268px;
}

.relation-option,
.relation-option-empty {
    border-radius: 16px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    background: rgba(255, 255, 255, 0.88);
}

.relation-option {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px 14px;
    color: var(--text);
    text-align: left;
}

.relation-option strong {
    font-size: 0.9rem;
}

.relation-option span,
.relation-option-empty {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.relation-option:hover,
.relation-option.is-selected {
    border-color: rgba(196, 100, 51, 0.36);
    box-shadow: 0 14px 24px rgba(52, 59, 69, 0.08);
}

.relation-option.is-selected {
    background: rgba(36, 95, 82, 0.08);
}

.relation-option-empty {
    padding: 14px;
}

.relation-preview-list {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 100%;
}

.relation-preview-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.92fr);
    min-height: 100%;
}

.relation-preview-column {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.relation-preview-panel {
    display: grid;
    gap: 10px;
    min-height: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(47, 59, 74, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.relation-preview-panel-head {
    display: grid;
    gap: 4px;
}

.relation-preview-panel-head strong {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.relation-preview-panel-head span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.relation-card-preview {
    grid-column: 1 / -1;
}

.relation-preview-group {
    display: grid;
    gap: 8px;
}

.relation-preview-group strong {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.relation-preview-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.relation-preview-empty {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.compact-empty {
    min-height: 184px;
    padding: 18px;
}

.person-notes-field textarea {
    min-height: 116px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 2px;
}

.settings-accordion {
    margin-bottom: 8px;
}

.settings-accordion summary {
    padding: 14px 16px;
}

.editor-panel {
    padding-top: 20px;
    padding-bottom: 24px;
}

.tree-link-parent,
.tree-link-spouse {
    fill: none;
    stroke-linecap: round;
}

.tree-link-parent {
    stroke: rgba(36, 95, 82, 0.42);
    stroke-width: 2.4;
}

.tree-link-spouse {
    stroke: rgba(196, 100, 51, 0.48);
    stroke-width: 2.6;
    stroke-dasharray: 7 8;
}

.tree-link-highlight {
    stroke: rgba(77, 111, 227, 0.42);
    stroke-width: 4;
}

@media (max-width: 1720px) {
    .person-form-layout {
        grid-template-columns: 1fr;
    }

    .relation-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    }
}

@media (max-width: 1450px) {
    .layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 1220px) {
    .hero,
    .layout {
        grid-template-columns: 1fr;
    }

    .hero-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .people-list {
        max-height: 420px;
    }

    .layout.is-browse .left-column {
        grid-template-columns: 1fr;
    }

    .layout.is-browse .filters-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layout.is-browse .filters-stack > .field:first-child {
        grid-column: 1 / -1;
    }

    .layout.is-browse .list-summary {
        justify-content: space-between;
        white-space: normal;
    }

    .detail-modal {
        padding: 18px;
    }

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

    .relation-preview-layout {
        grid-template-columns: 1fr;
    }

    .relation-search-row {
        grid-template-columns: 1fr;
    }

    .quick-pick-button {
        min-width: 0;
        max-width: none;
    }

    .quick-pick-stack {
        width: 100%;
    }

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

    .compact-photo-uploader {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .compact-toggle-row {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .app-shell {
        width: min(100% - 16px, 100%);
        padding-top: 14px;
    }

    .hero,
    .panel {
        padding: 18px;
    }

    .hero-meta,
    .field-grid {
        grid-template-columns: 1fr;
    }

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

    .tree-viewport {
        min-height: 560px;
    }

    .tree-drag-tip {
        right: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
        white-space: normal;
    }

    .detail-hero {
        grid-template-columns: 1fr;
    }

    .view-switch {
        width: 100%;
    }

    .view-toggle {
        flex: 1;
    }

    .layout.is-browse .left-column {
        padding: 14px 16px;
    }

    .layout.is-browse .filters-stack {
        grid-template-columns: 1fr;
    }

    .layout.is-browse .advanced-filters {
        display: grid;
        gap: 12px;
    }

    .layout.is-browse .advanced-filters .field-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .layout.is-browse .list-summary {
        justify-content: space-between;
    }

    .detail-dialog {
        max-height: calc(100vh - 32px);
        padding-top: 76px;
    }

    .detail-close-button {
        top: 14px;
        right: 14px;
    }
}

/* 2026 harita yenilemesi */
:root {
    --bg: #eef3f0;
    --bg-deep: #dfe9e4;
    --panel: rgba(255, 255, 255, 0.9);
    --panel-strong: #ffffff;
    --line: rgba(23, 58, 49, 0.11);
    --line-strong: rgba(23, 58, 49, 0.2);
    --text: #18352f;
    --muted: #667972;
    --accent: #c46a3a;
    --accent-deep: #98441f;
    --forest: #176452;
    --forest-soft: rgba(23, 100, 82, 0.11);
    --glow: 0 24px 64px rgba(25, 62, 51, 0.1);
}

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(196, 106, 58, 0.14), transparent 27rem),
        radial-gradient(circle at 92% 4%, rgba(23, 100, 82, 0.15), transparent 28rem),
        linear-gradient(180deg, #f8faf8 0%, var(--bg) 48%, var(--bg-deep) 100%);
}

.app-shell {
    width: calc(100% - 12px);
    max-width: none;
    padding-top: 12px;
}

.hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(520px, 0.8fr);
    padding: 22px 24px;
    border-radius: 26px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 246, 0.92)),
        var(--panel);
}

.hero-copy {
    gap: 9px;
}

.hero h1 {
    font-size: clamp(2.35rem, 4.4vw, 4rem);
}

.eyebrow {
    margin-bottom: 3px;
}

.hero-subtitle {
    font-size: 0.94rem;
}

.status-pill {
    width: fit-content;
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.82rem;
}

.stat-card {
    min-height: 78px;
    padding: 13px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
}

.stat-card span {
    font-size: 0.7rem;
}

.stat-card strong {
    font-size: clamp(1.15rem, 2.7vw, 1.65rem);
}

.hero-actions {
    gap: 8px;
}

.panel {
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 54px rgba(25, 62, 51, 0.09);
}

.layout.is-browse .left-column {
    position: sticky;
    top: 8px;
    z-index: 12;
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(25, 62, 51, 0.08);
}

.canvas-panel {
    overflow: visible;
}

.canvas-actions {
    align-items: center;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
}

.canvas-actions .chip-button {
    min-width: 46px;
    border: 0;
    background: transparent;
}

.zoom-button {
    font-size: 1.24rem;
    line-height: 1;
}

.selection-panel {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 0 0 12px;
    padding: 13px 14px;
    border: 1px solid rgba(23, 100, 82, 0.16);
    border-radius: 20px;
    background:
        linear-gradient(110deg, rgba(228, 243, 237, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 12px 30px rgba(23, 100, 82, 0.08);
}

.selection-panel.has-warning {
    border-color: rgba(185, 117, 32, 0.34);
    background: linear-gradient(110deg, rgba(255, 244, 221, 0.98), rgba(255, 255, 255, 0.96));
}

.selection-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    color: var(--forest);
    background: linear-gradient(135deg, rgba(196, 106, 58, 0.18), rgba(23, 100, 82, 0.18));
    box-shadow: 0 8px 20px rgba(25, 62, 51, 0.12);
    font-weight: 800;
}

.selection-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selection-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.selection-copy strong {
    overflow: hidden;
    font-size: 1.08rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-copy > span:last-child {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.selection-eyebrow {
    color: var(--forest);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.has-warning .selection-eyebrow {
    color: #9a651c;
}

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

.tree-viewport {
    border-color: rgba(23, 100, 82, 0.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0%, rgba(23, 100, 82, 0.055), transparent 35%),
        linear-gradient(180deg, #fbfdfc, #f2f7f4);
    box-shadow: inset 0 1px 0 #fff;
}

.tree-node {
    border-radius: 20px;
    box-shadow:
        0 12px 28px rgba(25, 62, 51, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.tree-node.is-branch-member {
    border-color: rgba(23, 100, 82, 0.28);
    box-shadow:
        0 16px 34px rgba(23, 100, 82, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tree-node.is-active {
    border-color: rgba(196, 106, 58, 0.85);
    outline: 4px solid rgba(196, 106, 58, 0.16);
    box-shadow: 0 20px 42px rgba(152, 68, 31, 0.2);
}

.tree-node.has-warning {
    border-color: rgba(185, 117, 32, 0.62);
    background: linear-gradient(180deg, #fffdf8, #fff4dc);
}

.tree-node .node-badge.is-warning {
    color: #8b5b17;
    background: rgba(214, 151, 50, 0.17);
}

.tree-link-branch {
    stroke: rgba(23, 100, 82, 0.72);
    stroke-width: 3.2;
}

.tree-link-highlight {
    stroke: rgba(196, 106, 58, 0.92);
    stroke-width: 4.6;
}

.tree-drag-tip {
    color: #506860;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(25, 62, 51, 0.08);
}

.detail-dialog {
    width: min(880px, 100%);
}

.detail-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.detail-descendants {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid rgba(23, 100, 82, 0.12);
    border-radius: 18px;
    background: rgba(23, 100, 82, 0.045);
}

.descendant-level {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.descendant-level + .descendant-level {
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.descendant-level-label {
    padding-top: 6px;
    color: var(--forest);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detail-person-button {
    border: 1px solid rgba(23, 100, 82, 0.12);
    cursor: pointer;
}

.detail-person-button:hover {
    color: #fff;
    background: var(--forest);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(196, 106, 58, 0.34);
    outline-offset: 2px;
}

@media (max-width: 1220px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .layout.is-browse .left-column {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .app-shell {
        width: calc(100% - 12px);
        padding-top: 6px;
    }

    .hero {
        padding: 17px;
        border-radius: 20px;
    }

    .hero h1 {
        font-size: clamp(2.1rem, 12vw, 3rem);
    }

    .hero-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-card {
        min-height: 70px;
        padding: 10px;
    }

    .stat-card span {
        letter-spacing: 0.03em;
    }

    .hero-actions .ghost-button {
        flex: 1 1 auto;
    }

    .layout.is-browse .canvas-panel {
        padding: 13px;
    }

    .canvas-panel > .panel-head {
        align-items: center;
    }

    .canvas-panel > .panel-head h2 {
        font-size: 1.55rem;
    }

    .selection-panel {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 11px;
    }

    .selection-media {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .selection-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .selection-actions button {
        padding: 10px 11px;
        font-size: 0.8rem;
    }

    .layout.is-browse .tree-viewport {
        min-height: 610px;
    }

    .tree-drag-tip {
        right: 10px;
        bottom: 10px;
        padding: 8px 10px;
        font-size: 0.72rem;
    }

    .detail-groups {
        grid-template-columns: 1fr;
    }

    .detail-descendants {
        grid-column: auto;
    }

    .descendant-level {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

/* Sabit ilk yükleme görünümü: veri gelmeden boş şablonun görünmesini engeller. */
.app-shell {
    opacity: 1;
    transition: opacity 0.18s ease;
}

body.app-loading {
    overflow: hidden;
}

body.app-loading .app-shell {
    visibility: hidden;
    opacity: 0;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    color: var(--text);
    text-align: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(23, 100, 82, 0.13), transparent 18rem),
        linear-gradient(180deg, #f8faf8, #e7efeb);
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

body.app-ready .page-loader {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.page-loader strong {
    margin-top: 8px;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
}

.page-loader > span:last-child {
    color: var(--muted);
    font-size: 0.86rem;
}

.page-loader-mark {
    position: relative;
    display: flex;
    gap: 9px;
    align-items: end;
    justify-content: center;
    width: 76px;
    height: 52px;
}

.page-loader-mark::before {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 14px;
    left: 9px;
    height: 2px;
    border-radius: 999px;
    background: rgba(23, 100, 82, 0.25);
}

.page-loader-mark i {
    position: relative;
    z-index: 1;
    display: block;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--forest);
    box-shadow: 0 5px 14px rgba(23, 100, 82, 0.2);
    animation: loaderPulse 0.9s ease-in-out infinite alternate;
}

.page-loader-mark i:nth-child(2) {
    align-self: start;
    width: 19px;
    height: 19px;
    animation-delay: 0.15s;
}

.page-loader-mark i:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loaderPulse {
    from {
        opacity: 0.48;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .page-loader {
        transition: none;
    }

    .page-loader-mark i {
        animation: none;
    }
}

/* Hızlı ve toplu aile veri girişi */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.entry-panel-head {
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.entry-panel-head h2,
.batch-intro h3,
.batch-card h4 {
    margin: 0;
}

.entry-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
}

.entry-mode-button {
    min-height: 42px;
    padding-inline: 18px;
    border-color: transparent;
}

.entry-mode-button.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--forest), #12483d);
    box-shadow: 0 10px 24px rgba(23, 100, 82, 0.2);
}

.family-batch-panel {
    display: grid;
    gap: 18px;
}

.batch-intro {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border: 1px solid rgba(23, 100, 82, 0.13);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 20%, rgba(196, 106, 58, 0.12), transparent 14rem),
        rgba(23, 100, 82, 0.055);
}

.batch-intro > div:first-child {
    display: grid;
    gap: 6px;
}

.batch-step-label {
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.batch-intro h3 {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.batch-intro p,
.batch-card-head p,
.batch-submit-bar span {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.batch-recent-summary {
    display: grid;
    flex: 0 0 auto;
    gap: 3px;
    min-width: 190px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.74);
}

.batch-recent-summary span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.batch-recent-summary strong {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-batch-form {
    display: grid;
    gap: 16px;
}

.family-batch-layout {
    display: grid;
    grid-template-columns: minmax(330px, 0.76fr) minmax(620px, 1.34fr);
    gap: 16px;
    align-items: start;
}

.batch-card,
.batch-recent-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.67);
}

.batch-card {
    display: grid;
    gap: 14px;
}

.batch-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
}

.batch-card-head > div {
    display: grid;
    gap: 3px;
}

.batch-card h4 {
    font-size: 1rem;
}

.batch-step-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: #fff;
    background: var(--forest);
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(23, 100, 82, 0.18);
}

.batch-step-number.is-done {
    background: var(--accent);
}

.batch-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.batch-quick-actions .ghost-button {
    min-height: 38px;
    padding: 8px 11px;
    color: var(--forest);
    background: rgba(23, 100, 82, 0.06);
}

.batch-parent-options {
    max-height: 354px;
}

.relation-option.is-recommended {
    border-color: rgba(196, 106, 58, 0.28);
    background: rgba(196, 106, 58, 0.055);
}

.relation-option:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.batch-spouse-toggle {
    padding: 12px 13px;
    border: 1px dashed rgba(23, 100, 82, 0.22);
    border-radius: 14px;
    background: rgba(23, 100, 82, 0.04);
    font-size: 0.8rem;
}

.batch-spouse-toggle:has(input:disabled) {
    opacity: 0.55;
}

.batch-parent-preview {
    display: grid;
    gap: 10px;
    padding: 13px;
    border-radius: 15px;
    color: var(--muted);
    background: rgba(23, 100, 82, 0.055);
    font-size: 0.78rem;
    line-height: 1.5;
}

.batch-parent-preview.is-empty {
    border: 1px dashed rgba(23, 100, 82, 0.18);
    background: transparent;
}

.batch-parent-preview-group {
    display: grid;
    gap: 3px;
}

.batch-parent-preview-group + .batch-parent-preview-group {
    padding-top: 9px;
    border-top: 1px solid var(--line);
}

.batch-parent-preview-group strong {
    color: var(--text);
}

.batch-paste-box {
    border: 1px dashed rgba(196, 106, 58, 0.28);
    border-radius: 15px;
    background: rgba(196, 106, 58, 0.045);
}

.batch-paste-box summary {
    cursor: pointer;
    padding: 12px 14px;
    color: var(--accent-deep);
    font-size: 0.8rem;
    font-weight: 800;
}

.batch-paste-content {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.batch-paste-content textarea {
    resize: vertical;
}

.batch-common-fields {
    display: grid;
    grid-template-columns: minmax(0, 320px);
}

.field-label small {
    color: var(--muted);
    font-weight: 600;
}

.batch-child-table-head,
.batch-child-row {
    display: grid;
    grid-template-columns: 38px minmax(210px, 1.5fr) minmax(120px, 0.7fr) minmax(145px, 0.82fr) minmax(125px, 0.72fr) 38px;
    gap: 8px;
    align-items: center;
}

.batch-child-table-head {
    padding: 0 10px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.batch-children-rows {
    display: grid;
    gap: 8px;
}

.batch-child-row {
    padding: 9px 10px;
    border: 1px solid rgba(23, 58, 49, 0.085);
    border-radius: 15px;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.batch-child-row:focus-within {
    border-color: rgba(23, 100, 82, 0.28);
    box-shadow: 0 9px 22px rgba(23, 58, 49, 0.07);
}

.batch-child-row .field {
    min-width: 0;
    gap: 0;
}

.batch-child-row input,
.batch-child-row select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 11px;
}

.batch-child-number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--forest);
    background: var(--forest-soft);
    font-size: 0.76rem;
    font-weight: 900;
}

.batch-remove-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(182, 60, 73, 0.16);
    border-radius: 10px;
    color: var(--danger);
    background: var(--danger-soft);
    font-size: 1.15rem;
}

.batch-remove-child:disabled {
    opacity: 0.32;
}

.batch-add-child-button {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px dashed rgba(23, 100, 82, 0.32);
    border-radius: 14px;
    color: var(--forest);
    background: rgba(23, 100, 82, 0.045);
    font-weight: 800;
}

.batch-add-child-button span {
    font-size: 1.25rem;
    line-height: 1;
}

.batch-submit-bar {
    position: sticky;
    bottom: 10px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(23, 100, 82, 0.16);
    border-radius: 18px;
    background: rgba(250, 253, 251, 0.95);
    box-shadow: 0 18px 40px rgba(23, 58, 49, 0.14);
    backdrop-filter: blur(12px);
}

.batch-submit-bar > div {
    display: grid;
    gap: 2px;
}

.batch-submit-bar .primary-button {
    min-width: 180px;
}

.batch-submit-bar .primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
    box-shadow: none;
}

.batch-recent-panel {
    display: grid;
    gap: 14px;
}

.batch-recent-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.batch-recent-person {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    text-align: left;
    background: rgba(255, 255, 255, 0.84);
}

.batch-recent-person:hover,
.batch-recent-person.is-new-batch {
    border-color: rgba(196, 106, 58, 0.3);
    background: rgba(196, 106, 58, 0.055);
}

.batch-recent-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--accent-deep);
    background: linear-gradient(135deg, rgba(196, 106, 58, 0.14), rgba(23, 100, 82, 0.14));
    font-size: 0.72rem;
    font-weight: 900;
}

.batch-recent-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-recent-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.batch-recent-copy strong,
.batch-recent-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.batch-recent-copy strong {
    font-size: 0.79rem;
}

.batch-recent-copy span {
    color: var(--muted);
    font-size: 0.68rem;
}

@media (max-width: 1280px) {
    .family-batch-layout {
        grid-template-columns: 1fr;
    }

    .batch-parent-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 290px;
    }

    .batch-recent-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .entry-panel-head,
    .batch-intro {
        display: grid;
        align-items: stretch;
    }

    .entry-mode-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 16px;
    }

    .entry-mode-button {
        min-width: 0;
        padding-inline: 10px;
    }

    .batch-intro,
    .batch-card,
    .batch-recent-panel {
        padding: 14px;
        border-radius: 17px;
    }

    .batch-recent-summary {
        min-width: 0;
    }

    .batch-parent-options,
    .batch-recent-list {
        grid-template-columns: 1fr;
    }

    .batch-child-table-head {
        display: none;
    }

    .batch-common-fields {
        grid-template-columns: 1fr;
    }

    .batch-child-row {
        grid-template-columns: 32px minmax(0, 1fr) 34px;
        padding: 10px;
    }

    .batch-child-number {
        grid-column: 1;
        grid-row: 1;
    }

    .batch-child-name {
        grid-column: 2;
        grid-row: 1;
    }

    .batch-remove-child {
        grid-column: 3;
        grid-row: 1;
    }

    .batch-child-row > .field:not(.batch-child-name) {
        display: grid;
        grid-column: 2 / -1;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .batch-child-row > .field:not(.batch-child-name)::before {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 800;
    }

    .batch-child-row > .field:nth-of-type(2)::before {
        content: "Cinsiyet";
    }

    .batch-child-row > .field:nth-of-type(3)::before {
        content: "Doğum tarihi";
    }

    .batch-child-row > .field:nth-of-type(4)::before {
        content: "Durum";
    }

    .batch-submit-bar {
        grid-template-columns: 1fr;
        bottom: 6px;
    }

    .batch-submit-bar .primary-button {
        width: 100%;
        min-width: 0;
    }
}

/* Harita, klasik ağaç ve liste görünümleri */
.canvas-panel > .panel-head {
    align-items: center;
}

.canvas-actions,
.map-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: flex-end;
}

.browse-mode-switch {
    display: inline-flex;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.78);
}

.browse-mode-button {
    min-height: 40px;
    padding: 9px 14px;
    border-color: transparent;
}

.browse-mode-button.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--forest), #12483d);
    box-shadow: 0 9px 20px rgba(23, 100, 82, 0.18);
}

.map-controls {
    padding-left: 8px;
    border-left: 1px solid var(--line);
}

.fullscreen-tree-button {
    min-height: 40px;
    padding: 9px 13px;
}

.browse-mode-stage {
    min-width: 0;
}

.alternate-browse-stage {
    min-height: clamp(680px, calc(100vh - 300px), 1100px);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(23, 100, 82, 0.055), transparent 28rem),
        rgba(255, 255, 255, 0.58);
}

.alternate-view-intro,
.family-list-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.alternate-view-intro > div,
.family-list-toolbar > div {
    display: grid;
    gap: 4px;
}

.alternate-view-intro span,
.family-list-toolbar > div span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.classic-tree {
    min-height: 590px;
    overflow: auto;
    padding: 30px 22px 60px;
    border-radius: 18px;
    background:
        linear-gradient(rgba(23, 100, 82, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 100, 82, 0.035) 1px, transparent 1px),
        rgba(249, 252, 250, 0.92);
    background-size: 32px 32px;
}

.classic-tree ul {
    position: relative;
    display: flex;
    justify-content: center;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 34px 0 0;
}

.classic-tree li {
    position: relative;
    flex: 0 0 auto;
    padding: 34px 8px 0;
    list-style: none;
    text-align: center;
}

.classic-tree li::before,
.classic-tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 34px;
    border-top: 2px solid rgba(23, 100, 82, 0.3);
}

.classic-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid rgba(23, 100, 82, 0.3);
}

.classic-tree li:only-child::before,
.classic-tree li:only-child::after {
    display: none;
}

.classic-tree li:first-child::before,
.classic-tree li:last-child::after {
    border-top: 0;
}

.classic-tree li:last-child::before {
    border-right: 2px solid rgba(23, 100, 82, 0.3);
    border-radius: 0 12px 0 0;
}

.classic-tree li:first-child::after {
    border-radius: 12px 0 0 0;
}

.classic-tree li > ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 34px;
    border-left: 2px solid rgba(23, 100, 82, 0.3);
}

.classic-tree > .classic-tree-roots {
    align-items: flex-start;
    padding-top: 0;
}

.classic-tree > .classic-tree-roots > li {
    padding-top: 0;
}

.classic-tree > .classic-tree-roots > li::before,
.classic-tree > .classic-tree-roots > li::after {
    display: none;
}

.classic-person-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px 10px;
    width: 206px;
    min-height: 116px;
    padding: 11px;
    border: 1px solid rgba(23, 58, 49, 0.13);
    border-top: 4px solid var(--forest);
    border-radius: 15px;
    color: var(--text);
    text-align: left;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 22px rgba(23, 58, 49, 0.08);
}

.classic-person-card:hover,
.classic-person-card.is-active {
    border-color: rgba(196, 106, 58, 0.42);
    border-top-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(23, 58, 49, 0.13);
}

.classic-person-card.is-deceased {
    border-top-color: #8c7779;
}

.classic-person-media,
.family-list-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: var(--accent-deep);
    background: linear-gradient(135deg, rgba(196, 106, 58, 0.14), rgba(23, 100, 82, 0.14));
    font-size: 0.74rem;
    font-weight: 900;
}

.classic-person-media img,
.family-list-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classic-person-copy,
.family-list-person-copy,
.family-list-facts,
.family-list-relations {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.classic-person-copy strong,
.classic-person-copy span,
.classic-person-relation,
.family-list-person-copy strong,
.family-list-person-copy span,
.family-list-facts span,
.family-list-relations span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classic-person-copy strong {
    font-size: 0.76rem;
    line-height: 1.35;
}

.classic-person-copy span,
.classic-person-relation {
    color: var(--muted);
    font-size: 0.64rem;
}

.classic-person-relation {
    grid-column: 1 / -1;
    padding-top: 7px;
    border-top: 1px solid var(--line);
}

.family-list-sort-field {
    width: min(240px, 100%);
}

.family-list-sort-field select {
    min-height: 42px;
}

.family-list-head,
.family-list-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.95fr) minmax(210px, 0.8fr) minmax(280px, 1.25fr) auto;
    gap: 14px;
    align-items: center;
}

.family-list-head {
    padding: 0 14px 8px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.family-browse-list {
    display: grid;
    gap: 8px;
}

.family-list-row {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.family-list-row:hover,
.family-list-row.is-active {
    border-color: rgba(23, 100, 82, 0.28);
    box-shadow: 0 10px 24px rgba(23, 58, 49, 0.07);
}

.family-list-person {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.family-list-person-copy strong,
.family-list-facts strong {
    font-size: 0.82rem;
}

.family-list-person-copy span,
.family-list-facts span,
.family-list-relations span {
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.family-list-actions {
    display: flex;
    gap: 7px;
    justify-content: flex-end;
}

.family-list-actions button {
    min-height: 38px;
    padding: 8px 10px;
    white-space: nowrap;
}

.canvas-panel:fullscreen,
.canvas-panel.is-expanded {
    width: auto;
    height: auto;
    padding: 16px;
    border-radius: 0;
    background: #eef4f1;
}

.canvas-panel:fullscreen {
    overflow: auto;
}

.canvas-panel.is-expanded {
    position: fixed;
    inset: 5px;
    z-index: 1000;
    overflow: auto;
    box-shadow: 0 30px 80px rgba(15, 38, 32, 0.28);
}

.canvas-panel:fullscreen .tree-viewport,
.canvas-panel.is-expanded .tree-viewport {
    min-height: calc(100vh - 190px);
}

body.canvas-expanded {
    overflow: hidden;
}

/* Toplu eklemede alt nesil ve tekrar kontrolü */
.batch-parent-preview {
    max-height: 440px;
    overflow: auto;
}

.batch-descendant-summary {
    display: grid;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.batch-descendant-summary strong {
    color: var(--text);
}

.batch-descendant-level {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.batch-descendant-level > strong {
    padding-top: 7px;
    color: var(--forest);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.batch-descendant-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.batch-descendant-person {
    padding: 6px 8px;
    border: 1px solid rgba(23, 100, 82, 0.12);
    border-radius: 9px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.68rem;
    font-weight: 700;
}

.batch-duplicate-warning {
    padding: 12px 13px;
    border: 1px solid rgba(196, 106, 58, 0.3);
    border-radius: 13px;
    color: #873b1f;
    background: rgba(196, 106, 58, 0.1);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.55;
}

.batch-child-row.has-possible-duplicate {
    border-color: rgba(196, 106, 58, 0.58);
    background: rgba(255, 247, 242, 0.96);
    box-shadow: 0 0 0 2px rgba(196, 106, 58, 0.08);
}

@media (max-width: 1180px) {
    .canvas-panel > .panel-head {
        align-items: flex-start;
    }

    .canvas-actions {
        display: grid;
        justify-items: end;
    }

    .family-list-head,
    .family-list-row {
        grid-template-columns: minmax(210px, 0.9fr) minmax(190px, 0.8fr) minmax(240px, 1.1fr);
    }

    .family-list-head span:last-child {
        display: none;
    }

    .family-list-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .canvas-panel > .panel-head,
    .family-list-toolbar,
    .alternate-view-intro {
        display: grid;
        align-items: stretch;
    }

    .canvas-actions {
        justify-items: stretch;
    }

    .browse-mode-switch {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .browse-mode-button {
        min-width: 0;
        padding-inline: 7px;
        font-size: 0.72rem;
    }

    .map-controls {
        justify-content: stretch;
        padding-top: 7px;
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .map-controls button {
        flex: 1 1 auto;
    }

    .alternate-browse-stage {
        min-height: 580px;
        padding: 10px;
        border-radius: 17px;
    }

    .classic-tree {
        min-height: 500px;
        padding-inline: 12px;
    }

    .classic-person-card {
        width: 176px;
    }

    .family-list-sort-field {
        width: 100%;
    }

    .family-list-head {
        display: none;
    }

    .family-list-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .family-list-facts,
    .family-list-relations {
        padding-top: 9px;
        border-top: 1px solid var(--line);
    }

    .family-list-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .batch-descendant-level {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .batch-descendant-level > strong {
        padding-top: 0;
    }
}