@font-face {
	font-family: Manrope;
	src: url('./assets/manrope-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: Manrope;
	src: url('./assets/manrope-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

:root {
	color-scheme: light;
	font-family: Manrope, system-ui, sans-serif;
	color: #243449;
	background: #f6f7fb;
	font-synthesis: none;
	--muted: #5d6c7f;
	--line: #dce3ec;
	--accent: #176d75;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button, .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
button:hover, .button:hover { filter: brightness(.94); text-decoration: none; }
button:disabled { opacity: .55; cursor: wait; }
.secondary { background: #fff; color: #34445a; border-color: var(--line); }
.danger { background: #fff4f2; color: #a33124; border-color: #edd3ce; }
:focus-visible { outline: 3px solid #2d8f9b; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.04em; font-weight: 600; }
h2 { font-size: 22px; letter-spacing: -.025em; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { color: var(--muted); font-size: 13px; line-height: 1.75; }
input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	border: 1px solid #c6d0de;
	border-radius: 9px;
	padding: 10px 12px;
	color: inherit;
	background: #fff;
}
label { display: grid; gap: 8px; min-width: 0; font-size: 12px; font-weight: 600; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10; padding: 12px; }
.skip-link:focus { top: 12px; background: #fff; }
.brand { display: flex; gap: 12px; align-items: center; color: #243449; font-weight: 600; }
.brand span { display: grid; gap: 4px; font-size: 20px; letter-spacing: -.025em; }
.brand small {
	color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.brand img { border-radius: 10px; }
.access-gate {
	width: min(460px, calc(100% - 32px));
	margin: 15vh auto;
	padding: 32px;
	display: grid;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
}
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.management-shell {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: 'nav header' 'nav main';
	min-height: 100vh;
	max-width: 1760px;
	margin: auto;
}
.management-nav {
	grid-area: nav;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 44px;
	padding: 32px 18px;
	border-right: 1px solid var(--line);
	background: #fff;
}
.management-nav .brand { padding: 0 10px; }
.management-nav nav { display: grid; gap: 8px; }
.management-nav nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}
.management-nav nav a:hover { background: #f3f6fa; text-decoration: none; }
.management-nav nav a[aria-current] { background: #e7f2f2; color: #145f68; }
.nav-mark { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
.nav-footer { margin-top: auto; display: grid; gap: 20px; padding: 10px; font-size: 12px; }
.owner-badge {
	color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.management-header {
	grid-area: header;
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 36px 24px;
	border-bottom: 1px solid var(--line);
	background: #f6f7fb;
}
.eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
.management-header h1 { margin-top: 5px; }
.header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-chip {
	max-width: 230px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	font-size: 11px;
	overflow-wrap: anywhere;
}
.mobile-back { display: none; }
#admin-main { grid-area: main; min-width: 0; padding: 20px 36px 56px; }
.updated { margin-bottom: 26px; font-size: 11px; }
.section-heading { margin-bottom: 26px; }
.section-heading h2 { margin: 5px 0 10px; }
.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.stat-grid li, .card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 3px 12px #24344904;
}
.stat-grid li { padding: 22px; display: grid; gap: 14px; }
.stat-grid .stat-label { color: var(--muted); font-size: 12px; line-height: 1.5; }
.stat-grid .stat-value { font-size: 38px; font-weight: 600; letter-spacing: -.05em; }
.stat-grid .stat-detail { color: var(--muted); font-size: 10px; line-height: 1.5; }
.stat-grid li:first-child { border-top: 3px solid var(--accent); }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { padding: 24px; min-width: 0; }
.card h3 { margin-bottom: 12px; }
.card p + p { margin-top: 10px; }
.quick-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.coverage-card { background: #eef4f7; box-shadow: none; }
.coverage-card h3 { margin-top: 6px; }
.table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th { padding: 16px 20px; color: var(--muted); background: #fafbfd; font-size: 11px; }
td { padding: 20px; border-top: 1px solid var(--line); vertical-align: middle; }
td:first-child { min-width: 180px; }
td strong, td small { display: block; }
td small { margin-top: 6px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
td strong { font-weight: 600; overflow-wrap: anywhere; }
.plan-badge { display: inline-block; padding: 5px 9px; border-radius: 8px; background: #edf1f6; }
.plan-badge.production { color: #145f68; background: #e6f2ef; }
.plan-badge.sandbox { color: #78531e; background: #fff2d8; }
.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid var(--line);
}
.pagination div { display: flex; gap: 10px; }
.pagination p { font-size: 12px; }
.access-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: end;
	gap: 16px;
}
.access-lists { display: grid; gap: 20px; margin-top: 20px; }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li { padding: 20px 0; border-top: 1px solid var(--line); }
.member-list li:first-child { border-top: 0; }
.member-heading { display: block; overflow-wrap: anywhere; font-size: 13px; margin-bottom: 14px; }
.member-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.member-actions form { display: flex; align-items: end; gap: 10px; flex: 1; min-width: 200px; }
.member-actions label { flex: 1; }
.member-actions button { flex-shrink: 0; }
.empty-state { padding: 24px !important; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 1150px) {
	.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.overview-grid { grid-template-columns: 1fr; }
	.account-chip { display: none; }
	.access-form { grid-template-columns: 1fr 1fr; }
	.access-form > button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
	.management-shell {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}
	.management-nav {
		position: fixed;
		z-index: 3;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		height: auto;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border: 0;
		border-top: 1px solid var(--line);
	}
	.management-nav .brand, .nav-footer { display: none; }
	.management-nav nav { grid-template-columns: repeat(3, 1fr); gap: 4px; }
	.management-nav nav a { justify-content: center; padding: 10px 6px; font-size: 12px; }
	.nav-mark { display: none; }
	.management-header { padding: calc(18px + env(safe-area-inset-top)) 20px 18px; gap: 8px; }
	.management-header h1 { font-size: 26px; }
	.header-actions { flex-direction: column; gap: 8px; }
	.header-actions button { min-height: 40px; padding: 8px 12px; }
	.mobile-back { display: block; font-size: 11px; }
	#admin-main { padding: 20px 20px calc(110px + env(safe-area-inset-bottom)); }
	.section-heading h2 { font-size: 20px; }
	.stat-grid { gap: 10px; }
	.stat-grid li { padding: 16px; gap: 12px; }
	.stat-grid .stat-value { font-size: 32px; }
	.card { padding: 18px; }
	.table-card { padding: 0; }
	th, td { padding: 14px; }
	.access-form { grid-template-columns: 1fr; }
	.member-actions, .member-actions form { flex-direction: column; align-items: stretch; }
	.member-actions form { min-width: 0; width: 100%; }
	.pagination { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
	button, a, input { transition: background-color .15s, border-color .15s; }
}