:root{
	--ink:#1f2937;
	--muted:#64748b;
	--accent:#0f766e;
	--accent-strong:#115e59;
	--accent-warm:#f59e0b;
	--surface:#ffffff;
	--surface-2:#f8fafc;
	--line:#e2e8f0;
	--shadow:0 12px 30px rgba(15, 23, 42, 0.08);
}

*{
	font-family:"Fira Sans", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, .navbar-brand, .fw-semibold{
	font-family:"DM Serif Display", "Fira Sans", serif;
	letter-spacing:0.2px;
}

body.app-body{
	color:var(--ink);
	background:
		radial-gradient(900px 380px at 10% -10%, #e0f2f1 0%, transparent 60%),
		radial-gradient(700px 320px at 100% 0%, #fff3e0 0%, transparent 55%),
		linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
	min-height:100vh;
}

.page-in{
	animation:pageIn 420ms ease-out;
}

@keyframes pageIn{
	from{opacity:0; transform:translateY(6px);}
	to{opacity:1; transform:translateY(0);}
}

.navbar{
	background:rgba(255,255,255,0.9) !important;
	backdrop-filter:blur(8px);
	border-bottom:1px solid var(--line) !important;
}

.card{
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:var(--shadow);
}

.list-group-item{
	border-color:var(--line);
}

.list-group-item i{
	font-size:1.1rem;
}

.list-group-item a.text-secondary:hover{
	color:var(--accent) !important;
}

.btn-primary{
	background:var(--accent);
	border-color:var(--accent);
}
.btn-primary:hover{
	background:var(--accent-strong);
	border-color:var(--accent-strong);
}
.btn-outline-primary{
	color:var(--accent);
	border-color:var(--accent);
}
.btn-outline-primary:hover{
	background:var(--accent);
	border-color:var(--accent);
}

.badge.text-bg-secondary{
	background:#e2e8f0 !important;
	color:var(--ink) !important;
}

.form-control, .form-select{
	border-color:var(--line);
}
.form-control:focus, .form-select:focus{
	border-color:var(--accent);
	box-shadow:0 0 0 0.2rem rgba(15, 118, 110, 0.2);
}

.bootstrap-select .dropdown-toggle.form-select{
	background-image:none;
}
.bootstrap-select .dropdown-toggle.form-select,
.bootstrap-select .dropdown-toggle.form-select-sm,
.bootstrap-select .dropdown-toggle.form-select-lg,
.bootstrap-select > .dropdown-toggle{
	background-image:none !important;
}
.bootstrap-select .bs-caret,
.bootstrap-select .caret{
	display:none;
}

table.table{
	border-color:var(--line);
}
table.table thead th{
	color:var(--muted);
	font-weight:600;
}

.tree-chart-wrap{
	min-height:320px;
}

.tree-person-panel{
	position:absolute;
	top:12px;
	left:12px;
	width:320px;
	max-width:calc(100% - 24px);
	background:#ffffff;
	border:1px solid var(--line);
	border-radius:16px;
	box-shadow:0 18px 45px rgba(15, 23, 42, 0.16);
	padding:16px 16px 14px;
	z-index:4;
	display:none;
}

.tree-person-panel.is-open{
	display:block;
}

.tree-person-panel .btn-close{
	position:absolute;
	top:10px;
	right:12px;
}

.tree-person-header{
	display:flex;
	gap:12px;
	align-items:center;
}

.tree-person-avatar{
	width:58px;
	height:58px;
	border-radius:50%;
	object-fit:cover;
	flex-shrink:0;
}

.tree-person-avatar.placeholder{
	background:#e2e8f0;
}

.tree-person-avatar.is-deceased,
.f3 img.is-deceased{
	filter:grayscale(100%);
}

.f3 .link{
	stroke:#94a3b8;
	stroke-width:2;
}

.f3 .card{
	overflow:visible;
}

.f3 .tree-card-add{
	position:absolute;
	left:50%;
	top:100%;
	transform:translate(-50%, 10px);
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid var(--line);
	background:#ffffff;
	color:var(--accent);
	font-size:18px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 8px 18px rgba(15, 23, 42, 0.14);
}

.f3 .tree-card-add:hover{
	background:var(--accent);
	color:#ffffff;
	border-color:var(--accent);
}

.tree-person-row{
	margin-top:6px;
	font-size:14px;
	line-height:1.4;
}

.tree-person-link{
	color:var(--accent);
	text-decoration:none;
}

.tree-person-link:hover{
	text-decoration:underline;
}

.tree-person-relatives{
	margin-top:10px;
	padding-top:8px;
	border-top:1px solid var(--line);
}

.person-photo-item{
	position:relative;
	width:96px;
	height:96px;
	border-radius:10px;
	overflow:hidden;
	cursor:pointer;
}

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

.person-photo-actions{
	position:absolute;
	right:6px;
	top:6px;
	display:flex;
	gap:6px;
}

.person-photo-actions .btn{
	padding:2px 6px;
	line-height:1;
}

.photo-tag-wrap{
	position:relative;
	width:100%;
	max-height:70vh;
	overflow:hidden;
	border-radius:12px;
	background:#0f172a;
	display:flex;
	justify-content:center;
	align-items:center;
}

.photo-tag-wrap img{
	max-width:100%;
	max-height:70vh;
	display:block;
}

.photo-tag-markers{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.photo-tag-marker{
	position:absolute;
	transform:translate(-50%, -50%);
	background:rgba(15, 23, 42, 0.75);
	color:#ffffff;
	font-size:12px;
	padding:4px 6px;
	border-radius:999px;
	display:flex;
	align-items:center;
	gap:6px;
	pointer-events:auto;
	cursor:grab;
}

.photo-tag-marker.pending{
	background:rgba(15, 23, 42, 0.5);
}

.photo-tag-marker.is-dragging{
	cursor:grabbing;
}

.photo-tag-marker span{
	white-space:nowrap;
}

.photo-tag-edit{
	background:transparent;
	border:none;
	color:#ffffff;
	font-size:12px;
	line-height:1;
	padding:0 2px;
	cursor:pointer;
}

.photo-tag-remove{
	background:transparent;
	border:none;
	color:#ffffff;
	font-size:14px;
	line-height:1;
	padding:0;
	cursor:pointer;
}

.photo-tag-popover{
	position:absolute;
	min-width:220px;
	background:#ffffff;
	border:1px solid var(--line);
	border-radius:10px;
	padding:10px;
	box-shadow:0 12px 30px rgba(15, 23, 42, 0.2);
	display:none;
	transform:translate(-50%, 10px);
	z-index:2;
}

.photo-tag-popover.is-open{
	display:block;
}