/* Contact Manager styles. Layout/colours only; JS never selects CSS classes. */

/* 1. DESIGN TOKENS — change global colours here */
:root {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-synthesis: none;
	--bg: #f7f9fc; /* Page background */
	--surface: #fff; /* Card,  dialog,  and input backgrounds */
	--surface-soft: #f9fafd; /* Secondary or subdued backgrounds */
	--text: #1f2a44; /* Primary foreground / body text */
	--muted: #77839a; /* Secondary foreground / captions */
	--faint: #a5afbf; /* Subtle foreground / placeholders */
	--line: #e5eaf2; /* Borders and separators */
	--accent: #465bdb; /* Primary action and focus colour */
	--accent-soft: #edf0ff; /* Background behind selected accent controls */
	--shadow: 0 10px 25px rgba(40, 56, 91, 0.045); /* Depth below cards */
}

/* 2. BASE ELEMENTS / ACCESSIBILITY */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--text);
}

button, input, select {
	font: inherit;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.svg-defs, .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;
}

[hidden] {
	display: none!important;
}

/* 3. PAGE WIDTH,  HEADER,  AND HEADER ACTIONS */
.shell {
	width: min(1624px, calc(100% - 7.2vw));
	margin-inline: auto;
}

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 19px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text);
	text-align: left;
}

.brand-icon {
	display: grid;
	place-items: center;
	width: 47px;
	height: 47px;
	border-radius: 12px;
	background: var(--accent);
	color: #fff; /* Foreground colour */
}

.brand-icon svg {
	width: 29px;
	height: 29px;
}

.brand strong, .brand small {
	display: block;
}

.brand strong {
	font-size: 30px;
	line-height: 1.07;
	letter-spacing: -0.03em;
}

.brand small {
	margin-top: 4px;
	color: var(--muted);
	font-size: 10px;
	font-weight: 750;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 650;
	white-space: nowrap;
}

.button-quiet {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
}

.button-primary {
	border: 1px solid var(--accent);
	background: var(--accent);
	color: #fff; /* Foreground colour */
}

.button:hover, .group-card:hover, .quick-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(40, 56, 91, 0.10);
}

.button, .group-card, .quick-card {
	transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.plus {
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
}

.settings-wrap {
	position: relative;
}

.settings-panel {
	position: absolute;
	z-index: 20;
	right: 0;
	top: 58px;
	width: 285px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--surface);
	box-shadow: 0 18px 45px rgba(21, 32, 62, 0.17);
}

.settings-panel h2 {
	font-size: 18px;
	margin: 0 0 18px;
}

.settings-panel label {
	display: block;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 13px;
}

.settings-panel select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--text);
}

.settings-link {
	display: inline-flex;
	align-items: center;
	margin-bottom: 12px;
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}

.settings-export {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	margin-top: 17px;
	padding: 13px 3px 0;
	border: 0;
	border-top: 1px solid var(--line);
	background: none;
	color: var(--text);
	text-align: left;
}

.settings-export svg {
	width: 18px;
}

/* 4. SEARCH INPUT AND LIVE RESULTS */
.main-shell {
	padding-top: 25px;
}

.search-section h1 {
	margin: 0;
	font-size: 33px;
	letter-spacing: -0.035em;
}

.search-section p {
	margin: 5px 0 14px;
	color: var(--muted);
	font-size: 17px;
}

.search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 84px;
	padding: 0 28px;
	border: 2px solid var(--accent);
	border-radius: 15px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.search-icon {
	width: 34px;
	height: 34px;
	margin-right: 25px;
	color: var(--accent);
}

[data-ui="searchInput"] {
	min-width: 0;
	flex: 1;
	height: 100%;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	color: var(--text);
	font-size: 20px;
}

[data-ui="searchInput"]::placeholder {
	color: var(--faint);
}

.live-hint {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

.live-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #53bca7; /* Background colour */
}

.search-results {
	position: absolute;
	z-index: 12;
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	max-height: min(560px, 70vh);
	overflow: auto;
	padding: 15px;
	border: 1px solid var(--line);
	border-radius: 15px;
	background: var(--surface);
	box-shadow: 0 18px 48px rgba(21, 32, 62, 0.16);
}

.result-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 7px 12px;
	color: var(--muted);
	font-size: 14px;
}

.result-top strong {
	color: var(--text);
}

.result-close {
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 14px;
}

.result-item {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 9px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--text);
	text-align: left;
}

.result-item:hover {
	background: var(--surface-soft);
}

.result-item span:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.result-item strong, .result-item small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.result-item small {
	margin-top: 3px;
	color: var(--muted);
}

.result-empty {
	padding: 22px;
	color: var(--muted);
}

.result-pages {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 13px;
	padding: 12px 8px 2px;
	color: var(--muted);
	font-size: 13px;
}

.result-pages button {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--surface);
	color: var(--text);
}

/* 5. QUICK CONTACTS */
.page-view {
	padding-top: 35px;
}

.section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
}

.section-header h2 {
	margin: 0;
	font-size: 25px;
	letter-spacing: -0.025em;
}

.section-header p {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 15px;
}

.quick-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.segmented {
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 11px;
	background: #edf1f8; /* Background colour */
}

.segmented button {
	min-height: 36px;
	padding: 0 15px;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

.segmented button[aria-pressed="true"] {
	background: var(--surface);
	color: var(--text);
	font-weight: 700;
	box-shadow: 0 1px 5px rgba(40, 56, 91, 0.06);
}

.select-shell select {
	height: 44px;
	min-width: 160px;
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
}

.quick-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	margin-top: 22px;
}

.quick-card {
	min-width: 0;
	height: 148px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
	box-shadow: var(--shadow);
	color: var(--text);
	text-align: left;
}

.quick-top {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}

.avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eee7ff; /* Background colour */
	color: #7d5bd1; /* Foreground colour */
	font-size: 15px;
	font-weight: 750;
}

.avatar.c1 {
	background: #def3ff; /* Background colour */
	color: #397bba; /* Foreground colour */
}

.avatar.c2 {
	background: #ffe9df; /* Background colour */
	color: #c7724b; /* Foreground colour */
}

.avatar.c3 {
	background: #dff5ea; /* Background colour */
	color: #3d9b70; /* Foreground colour */
}

.avatar.c4 {
	background: #fff0c9; /* Background colour */
	color: #bb8a28; /* Foreground colour */
}

.quick-person {
	min-width: 0;
}

.quick-person strong, .quick-person small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quick-person strong {
	font-size: 17px;
}

.quick-person small {
	margin-top: 5px;
	color: var(--muted);
	font-size: 11px;
}

.quick-bottom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 21px;
	padding-top: 13px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
}

.quick-bottom .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #7cc9b0; /* Background colour */
}

.quick-bottom svg {
	width: 18px;
	height: 18px;
	margin-left: auto;
	color: var(--faint);
}

/* 6. GROUP CARDS */
.groups-section {
	margin-top: 48px;
}

.groups-section .section-header h2 {
	font-size: 29px;
}

.group-total {
	padding-top: 12px;
	color: var(--muted);
	font-size: 14px;
}

.groups-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 12px;
}

.group-card {
	display: block;
	min-width: 0;
	height: 169px;
	padding: 19px;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: var(--surface);
	box-shadow: var(--shadow);
	color: var(--text);
	text-align: left;
}

.group-top {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.group-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 70px;
	height: 70px;
	border-radius: 17px;
	background: #f0f2f5; /* Background colour */
	color: #8792a6; /* Foreground colour */
}

.group-icon svg {
	width: 33px;
	height: 33px;
	stroke-width: 2;
}

.group-icon.favourites {
	background: #fff6de; /* Background colour */
	color: #d39a30; /* Foreground colour */
}

.group-icon.favourites svg {
	fill: currentColor;
	stroke-width: 1;
}

.group-icon.clients {
	background: #eeeafe; /* Background colour */
	color: #7760c7; /* Foreground colour */
}

.group-icon.friends {
	background: #e4f3ff; /* Background colour */
	color: #438fc8; /* Foreground colour */
}

.group-icon.family {
	background: #e8f7ef; /* Background colour */
	color: #4dab77; /* Foreground colour */
}

.group-icon.projects {
	background: #e6f6f7; /* Background colour */
	color: #449da4; /* Foreground colour */
}

.group-icon.trash {
	background: #fff0ef; /* Background colour */
	color: #d8726b; /* Foreground colour */
}

.group-icon.new {
	background: #eef2fa; /* Background colour */
	color: var(--accent);
	font-size: 28px;
}

.group-info {
	min-width: 0;
}

.group-info strong, .group-info small {
	display: block;
}

.group-info strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 20px;
}

.group-info small {
	margin-top: 6px;
	color: var(--muted);
	font-size: 15px;
}

.group-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 20px;
	padding-top: 13px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}

.group-bottom span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.group-bottom svg {
	width: 19px;
	height: 19px;
	color: var(--faint);
}

.group-card.trash .group-bottom {
	color: #d8726b; /* Foreground colour */
}

.group-card.new-card {
	border: 2px solid #cad3e2;
	background: var(--surface-soft);
}

/* 7. FOOTER AND THEME PICKER */
.footer {
	padding: 38px 0 50px;
	color: var(--faint);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.theme-picker {
	position: fixed;
	z-index: 10;
	right: max(4.8vw, 22px);
	bottom: 20px;
	display: flex;
	align-items: center;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	box-shadow: 0 8px 22px rgba(40, 56, 91, 0.10);
}

.theme-picker button {
	position: relative;
	display: grid;
	place-items: center;
	width: 69px;
	height: 45px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: none;
	color: var(--muted);
}

.theme-picker button+button {
	border-left: 1px solid var(--line);
	border-radius: 0;
}

.theme-picker button[aria-pressed="true"] {
	background: var(--accent-soft);
	color: var(--accent);
	border-radius: 9px;
}

.theme-picker button svg {
	width: 23px;
	height: 23px;
}

.theme-picker button:first-child {
	color: #ba9660; /* Foreground colour */
}

.theme-picker button:last-child {
	color: #627093; /* Foreground colour */
}

.theme-picker button small {
	position: absolute;
	top: calc(100% + 12px);
	font-size: 10px;
	color: var(--muted);
}

.theme-picker button[aria-pressed="true"] small {
	color: var(--accent);
	font-weight: 700;
}

.theme-ring {
	width: 19px;
	height: 19px;
	border: 3px solid currentColor;
	border-radius: 50%;
}

/* AUTH / LOGIN SCREEN */
.auth-shell {
	padding: 48px 0 80px;
}

.auth-intro {
	max-width: 650px;
	margin-bottom: 28px;
}

.auth-kicker {
	margin: 0 0 8px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.auth-intro h1 {
	margin: 0;
	font-size: clamp(2.6rem, 4vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.05em;
}

.auth-intro p:last-child {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 18px;
}

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

.auth-card {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.auth-header h2 {
	margin: 0;
	font-size: 28px;
	letter-spacing: -0.03em;
}

.auth-copy {
	margin: 8px 0 22px;
	color: var(--muted);
	font-size: 15px;
}

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.auth-form label {
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
}

.auth-form input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-soft);
	color: var(--text);
}

.auth-form input:focus {
	outline: 3px solid rgba(70, 91, 219, 0.12);
	border-color: var(--accent);
}

.form-error {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid rgba(207, 62, 62, 0.2);
	border-radius: 10px;
	background: rgba(207, 62, 62, 0.07);
	color: #b33131;
	font-size: 14px;
}

.auth-button {
	width: fit-content;
	margin-top: 6px;
}

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

	.header-inner {
		height: auto;
		padding: 18px 0;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 8. GROUP / CONTACT DETAILS */
.detail-view {
	min-height: 530px;
	animation: expand-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.detail-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.text-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
}

.back-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--muted);
	font-weight: 650;
}

.back-button svg {
	width: 18px;
	transform: rotate(180deg);
}

.detail-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.detail-hero .group-icon {
	width: 64px;
	height: 64px;
}

.detail-hero h2 {
	margin: 0;
	font-size: 27px;
}

.detail-hero p {
	margin: 5px 0 0;
	color: var(--muted);
}

.detail-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.contact-row {
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 0;
	padding: 19px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: var(--surface);
	color: var(--text);
	text-align: left;
}

.contact-row:hover {
	border-color: var(--accent);
}

.contact-row span:nth-child(2) {
	min-width: 0;
	flex: 1;
}

.contact-row strong, .contact-row small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.contact-row small {
	margin-top: 4px;
	color: var(--muted);
}

.contact-row svg {
	color: var(--faint);
}

.empty-state {
	padding: 40px;
	border: 1px dashed var(--line);
	border-radius: 15px;
	color: var(--muted);
	background: var(--surface);
	grid-column: 1/-1;
}

.contact-info {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 14px;
	margin-top: 20px;
	padding: 24px;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: var(--surface);
}

.contact-info dt {
	color: var(--muted);
}

.contact-info dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.contact-info a {
	color: var(--accent);
}

.contact-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag-pill {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 20px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 13px;
}

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

.danger-button {
	color: #cf5d57; /* Foreground colour */
	border-color: #f0d2d0;
}

.restore-button {
	color: #3e9c78; /* Foreground colour */
}

/* 9. DIALOGS,  FORMS,  AND GROUP SUGGESTIONS */
.contact-dialog {
	width: min(760px, calc(100% - 28px));
	max-height: min(92vh, 900px);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 24px 70px rgba(16, 27, 55, 0.24);
}

.contact-dialog::backdrop {
	background: rgba(20, 31, 58, 0.46);
}

.contact-dialog form {
	padding: 26px;
}

.dialog-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.dialog-heading h2 {
	margin: 0;
	font-size: 26px;
}

.dialog-heading p {
	margin: 4px 0 24px;
	color: var(--muted);
}

.icon-button {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: var(--surface-soft);
	color: var(--muted);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.form-grid label {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
}

.form-grid input, .custom-row input {
	width: 100%;
	height: 43px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--text);
	outline: none;
}

.form-grid input:focus, .custom-row input:focus {
	border-color: var(--accent);
}

.group-field {
	grid-column: 1/-1;
}

.group-status {
	display: none;
	width: max-content;
	max-width: 100%;
	padding: 5px 10px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
}

.group-status[data-status="known"] {
	display: inline-block;
	background: #dff5ea; /* Background colour */
	color: #217e5c; /* Foreground colour */
}

.group-status[data-status="new"] {
	display: inline-block;
	background: #fff0c9; /* Background colour */
	color: #956d12; /* Foreground colour */
}

.group-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.group-suggestions button {
	padding: 5px 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
	color: var(--text);
	font-size: 12px;
}

.custom-heading {
	display: flex;
	justify-content: space-between;
	margin-top: 22px;
	font-size: 14px;
}

.custom-row {
	display: grid;
	grid-template-columns: 1fr 1fr 32px;
	gap: 8px;
	margin-top: 9px;
}

.custom-row button {
	border: 0;
	background: none;
	color: var(--muted);
}

.form-error {
	color: #bd4d48; /* Foreground colour */
	font-size: 13px;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 25px;
}

.tag-editor {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.tag-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface-soft);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tag-section-default {
	background: linear-gradient(180deg, rgba(70, 91, 219, 0.018), rgba(70, 91, 219, 0.004));
}

.tag-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(90, 103, 137, 0.35), transparent);
}

.tag-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 2px 0;
}

.tag-section-title {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tag-section-header h3 {
	margin: 0;
	font-size: 15px;
	letter-spacing: -0.02em;
}

.drag-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 0 9px;
	border: 1px dashed rgba(70, 91, 219, 0.35);
	border-radius: 999px;
	background: rgba(70, 91, 219, 0.04);
	color: var(--accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tag-section.drag-over {
	border-color: var(--accent);
	background: rgba(70, 91, 219, 0.03);
	box-shadow: 0 0 0 1px rgba(70, 91, 219, 0.12), inset 0 0 0 1px rgba(70, 91, 219, 0.08);
}

.tag-section.drag-over .drag-hint {
	background: rgba(70, 91, 219, 0.08);
	border-style: solid;
}

.tag-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 120px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(79, 90, 120, 0.02);
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.tag-list.drag-over {
	border-color: var(--accent);
	background: rgba(70, 91, 219, 0.04);
	box-shadow: inset 0 0 0 1px rgba(70, 91, 219, 0.12);
}

.tag-row {
	display: grid;
	grid-template-columns: minmax(90px, 0.7fr) minmax(220px, 1.8fr) 34px;
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	cursor: move;
}

.tag-row.is-default {
	border-color: rgba(70, 91, 219, 0.2);
	background: rgba(70, 91, 219, 0.02);
}

.tag-name-input,
.tag-value-input,
.tag-group-field {
	min-width: 0;
	width: 100%;
}

.tag-name-hidden {
	display: none;
}

.tag-row input {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.tag-static-label {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: rgba(70, 91, 219, 0.04);
	color: var(--accent);
	font-size: 14px;
	font-weight: 700;
}

.tag-group-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tag-group-wrap:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(70, 91, 219, 0.12);
}

.tag-group-input {
	flex: 1 1 120px;
	min-width: 120px;
	height: 26px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
}

.tag-group-input:focus {
	outline: none;
}

.tag-group-suggestions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: 0 10px 28px rgba(18, 28, 48, 0.08);
}

.tag-group-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	border: 1px solid rgba(70, 91, 219, 0.2);
	border-radius: 999px;
	background: rgba(70, 91, 219, 0.08);
	color: var(--accent);
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

.tag-group-save:hover,
.tag-group-save:focus-visible {
	background: rgba(70, 91, 219, 0.14);
	outline: none;
}

.tag-group-suggestion {
	padding: 7px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.tag-group-suggestion:hover,
.tag-group-suggestion:focus-visible {
	background: rgba(70, 91, 219, 0.06);
	outline: none;
}

.tag-group-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(70, 91, 219, 0.1);
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
}

.tag-group-pill.is-pending {
	background: rgba(244, 158, 11, 0.12);
	color: #9a5d00;
}

.tag-group-pill button {
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.tag-row input[readonly] {
	background: var(--surface-soft);
	color: var(--text);
}

.tag-row input:focus {
	border-color: var(--accent);
	outline: none;
}

.tag-row input[readonly] {
	background: var(--surface-soft);
	color: var(--text);
}

.tag-row input:focus {
	border-color: var(--accent);
	outline: none;
}

.tag-remove,
.tag-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--surface);
	color: var(--muted);
	font-size: 20px;
	line-height: 1;
}

.tag-remove {
	width: 32px;
	height: 32px;
	padding: 0;
}

.tag-remove[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.tag-add {
	width: 36px;
	height: 36px;
	padding: 0;
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 700;
}

button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 3px solid #94a2f1;
	outline-offset: 3px;
}

.search-wrap:focus-within {
	box-shadow: 0 0 0 4px rgba(70, 91, 219, 0.12), var(--shadow);
}

[data-ui="searchInput"]:focus-visible {
	outline: none;
}

/* 10. THEME OVERRIDES — background / foreground colour pairs */
body[data-theme="bright"] {
	--bg: #fff; /* Page background */
	--surface: #fff; /* Card,  dialog,  and input backgrounds */
	--surface-soft: #fcfcff; /* Secondary or subdued backgrounds */
	--text: #18213a; /* Primary foreground / body text */
	--muted: #64718a; /* Secondary foreground / captions */
	--line: #e2e7ef; /* Borders and separators */
}

body[data-theme="dark"] {
	color-scheme: dark;
	--bg: #131a2a; /* Page background */
	--surface: #1c2537; /* Card,  dialog,  and input backgrounds */
	--surface-soft: #222d42; /* Secondary or subdued backgrounds */
	--text: #eef1fa; /* Primary foreground / body text */
	--muted: #a8b3c8; /* Secondary foreground / captions */
	--faint: #8c9ab2; /* Subtle foreground / placeholders */
	--line: #344158; /* Borders and separators */
	--accent: #91a0ff; /* Primary action and focus colour */
	--accent-soft: #2b3965; /* Background behind selected accent controls */
	--shadow: 0 12px 28px rgba(0, 0, 0, 0.12); /* Depth below cards */
}

body[data-theme="dark"] .segmented {
	background: #29354a; /* Background colour */
}

body[data-theme="dark"] .group-card.new-card {
	border-color: #566783;
}

body[data-theme="dark"] .theme-picker button:last-child {
	color: #b7c4ef; /* Foreground colour */
}

body[data-theme="dark"] .theme-picker button[aria-pressed="true"] {
	color: var(--accent);
}

/* 11. MOTION — reduced motion support follows */
@keyframes expand-in {
	from {
		opacity: 0.4;
		transform: scale(0.965) translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}

}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto!important;
		animation-duration: 0.01ms!important;
		transition-duration: 0.01ms!important;
	}

}

::view-transition-old(group-expand) {
	animation: 0.2s ease-out both fade-shrink;
}

::view-transition-new(group-expand) {
	animation: 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both grow-in;
}

@keyframes fade-shrink {
	to {
		opacity: 0.2;
		transform: scale(0.94);
	}

}

@keyframes grow-in {
	from {
		opacity: 0.35;
		transform: scale(0.65);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}

}

/* 12. RESPONSIVE LAYOUT — desktop,  tablet,  then mobile */
@media (max-width: 1250px) {
	.quick-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

}

@media (max-width: 840px) {
	.shell {
		width: calc(100% - 36px);
	}

	.header-inner {
		height: 86px;
	}

	.brand strong {
		font-size: 24px;
	}

	.brand small {
		font-size: 8px;
	}

	.brand-icon {
		width: 42px;
		height: 42px;
	}

	.quick-grid, .groups-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-header {
		flex-wrap: wrap;
	}

	.quick-actions {
		width: 100%;
		justify-content: space-between;
	}

	.groups-section {
		margin-top: 38px;
	}

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

	.theme-picker {
		right: 18px;
	}

}

@media (max-width: 560px) {
	.header-actions {
		gap: 7px;
	}

	.button {
		min-height: 42px;
		padding: 0 11px;
		font-size: 13px;
	}

	.button svg {
		width: 17px;
	}

	.brand {
		gap: 9px;
	}

	.brand strong {
		font-size: 20px;
	}

	.brand small {
		display: none;
	}

	.brand-icon {
		width: 38px;
		height: 38px;
	}

	.header-actions .button-quiet span {
		display: none;
	}

	.header-actions .button-quiet {
		width: 42px;
		padding: 0;
	}

	.main-shell {
		padding-top: 23px;
	}

	.search-section h1 {
		font-size: 28px;
	}

	.search-section p {
		font-size: 14px;
	}

	.search-wrap {
		height: 65px;
		padding: 0 15px;
	}

	.search-icon {
		width: 25px;
		margin-right: 12px;
	}

	[data-ui="searchInput"] {
		font-size: 16px;
	}

	.live-hint {
		display: none;
	}

	.page-view {
		padding-top: 30px;
	}

	.section-header h2 {
		font-size: 23px;
	}

	.quick-grid, .groups-grid {
		grid-template-columns: 1fr;
		gap: 11px;
	}

	.quick-card {
		height: 116px;
		padding: 14px;
	}

	.quick-bottom {
		margin-top: 9px;
		padding-top: 8px;
	}

	.group-card {
		height: 140px;
		padding: 15px;
	}

	.group-icon {
		width: 55px;
		height: 55px;
	}

	.group-icon svg {
		width: 27px;
	}

	.group-top {
		gap: 14px;
	}

	.group-info strong {
		font-size: 18px;
	}

	.group-bottom {
		margin-top: 12px;
		padding-top: 10px;
	}

	.segmented button {
		padding-inline: 10px;
	}

	.select-shell select {
		min-width: 100px;
		padding-inline: 7px;
	}

	.group-total {
		display: none;
	}

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

	.group-field {
		grid-column: auto;
	}

	.contact-info {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.theme-picker {
		bottom: 14px;
	}

	.footer {
		padding-bottom: 80px;
	}

}

/* 13. CUSTOM FIELD SLOT — preserve the parent definition-list grid */
.custom-detail-fields {
	display: contents;
}