@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/dm-sans-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
}

:root {
	color-scheme: light;
	--ink: #142633;
	--muted: #71808a;
	--paper: #f5f7f5;
	--white: #fff;
	--line: #dfe6e3;
	--coral: #ef6c57;
	--coral-dark: #d95745;
	--mint: #dceee8;
	--navy: #102d3b;
	--shadow: 0 18px 55px rgba(20, 38, 51, 0.08);
	--input-bg: #fbfcfb;
	--input-border: #d8e1de;
	--success-bg: #edf8f3;
	--success-border: #9ed0be;
	--success-text: #245f4e;
	--error-bg: #fff3f0;
	--error-border: #efb8aa;
	--error-text: #913b2c;
	--status-text: #3e806d;
	--status-warn-bg: #f4ecd6;
	--status-warn-text: #7c6d49;
	--status-danger-bg: #fbe5e1;
	--status-danger-text: #9c6258;
	--security-border: #d4e5df;
	--security-bg: #eef7f3;
	--security-accent: #4f9c80;
	--side-note-text: #53736c;
	--accent-green: #69a992;
	--warn-border: #f0d2c9;
	--warn-bg: #fff7f4;
	--label-text: #46565c;
	--icon-soft-bg: #fff0ec;
	--sidebar-bg: var(--navy);
	--brand-secure: #000;
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--ink: #e9f0ee;
	--muted: #9fb0af;
	--paper: #0d1b21;
	--white: #16262c;
	--line: #2a3b40;
	--coral: #ef6c57;
	--coral-dark: #ff8a73;
	--mint: #163b31;
	--shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
	--input-bg: #101f25;
	--input-border: #2c3f45;
	--success-bg: #123328;
	--success-border: #2f6650;
	--success-text: #8fd8bb;
	--error-bg: #3a1f1a;
	--error-border: #7a4238;
	--error-text: #f3a99a;
	--status-text: #7fd3ae;
	--status-warn-bg: #3a3220;
	--status-warn-text: #ddc07f;
	--status-danger-bg: #3a2320;
	--status-danger-text: #e59d90;
	--security-border: #2c4a42;
	--security-bg: #123128;
	--security-accent: #6fc1a0;
	--side-note-text: #a9c4bc;
	--accent-green: #4f9c80;
	--warn-border: #5c3a30;
	--warn-bg: #2c1c17;
	--label-text: #c3d4d2;
	--icon-soft-bg: #3a2620;
	--sidebar-bg: #070f13;
	--brand-secure: #fff;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: "DM Sans", sans-serif;
	transition:
		background-color 0.2s,
		color 0.2s;
}
button,
input,
textarea,
select {
	font: inherit;
}
button {
	cursor: pointer;
}
.shell {
	display: block;
	min-height: 100vh;
}
.shell.signed-out {
	display: block;
}
.shell.signed-out .sidebar {
	display: none;
}
.shell.signed-out .main {
	width: min(100%, 1040px);
	max-width: 1040px;
	min-height: 100vh;
	padding-top: 8px;
	margin: 0 auto;
}
.shell.signed-out:not(:has(.profile-heading)) .main {
	padding-top: 8px;
}
.shell.signed-out .topbar {
	margin-bottom: 42px;
}
.shell.signed-out .account-actions {
	visibility: hidden;
}
.shell.signed-out #profileTopActions {
	visibility: visible;
}
.sidebar {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 248px;
	height: 100vh;
	padding: 34px 22px 26px;
	color: #e8f2ef;
	background: var(--sidebar-bg);
}
.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 34px;
}
.page-wordmark {
	display: inline-flex;
	color: var(--ink);
	text-decoration: none;
	font-family: "Space Grotesk", sans-serif;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.brand-secure {
	color: #000;
}
.dark .brand-secure,
:root[data-theme="dark"] .brand-secure {
	color: #fff;
}
.brand-send {
	color: #22b8b1;
}
.brand-logo {
	display: block;
	width: 90px;
	height: 90px;
	border-radius: 9px;
	object-fit: cover;
}
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;
	font-family: "Space Grotesk", sans-serif;
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
.site-brand .brand-logo {
	flex: 0 0 auto;
}
.site-brand .brand-secure {
	color: var(--brand-secure);
}
.site-brand .brand-send {
	color: #22b8b1;
}
.brand-wordmark {
	display: inline-flex;
}
.workspace-brand {
	display: flex;
	justify-content: center;
	margin: 0 auto 28px;
}
.recipient-brand {
	display: flex;
	justify-content: center;
	margin: 0 auto 18px;
}
.nav {
	margin-top: 0;
	display: grid;
	gap: 9px;
}
.nav-toggle {
	display: none;
}
.nav-link {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 12px 13px;
	border-radius: 8px;
	color: #9bb1b3;
	text-decoration: none;
	font-size: 14px;
}
.nav-link.active,
.nav-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}
.nav-icon {
	width: 18px;
	color: var(--coral);
	font-size: 22px;
	line-height: 14px;
	text-align: center;
}
.sidebar-foot {
	margin-top: auto;
}
.plan-label,
.eyebrow {
	margin: 0 0 9px;
	color: #8fa2a5;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.plan-card {
	display: grid;
	gap: 5px;
	margin: 0 0 24px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	font-size: 11px;
	color: #9db1b1;
}
.plan-card strong {
	color: #fff;
	font-size: 13px;
}
.plan-upgrade {
	width: fit-content;
	margin-top: 4px;
	color: var(--coral);
	font-size: 12px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.plan-upgrade:hover {
	color: #fff;
}
.plan-selector {
	display: grid;
	gap: 5px;
	margin: 8px 0 0;
	color: #9db1b1;
	font-size: 10px;
	font-weight: 700;
}
.plan-selector select {
	padding: 7px 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	color: #e8f2ef;
	background: #173b4b;
	font-size: 11px;
}
.plan-save {
	margin-top: 10px;
	color: var(--coral);
	font-weight: 700;
}

.plan-description {
	margin-top: 14px;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.plan-description strong {
	color: var(--ink);
}
.top-up-form {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) auto;
	align-items: end;
	gap: 12px;
	max-width: 520px;
	margin: 18px 0 24px;
}
.top-up-form label {
	margin: 0;
}
.top-up-form .button {
	min-height: 45px;
}
@media (max-width: 560px) {
	.top-up-form {
		grid-template-columns: 1fr;
	}
}

.admin-panel {
	margin-bottom: 24px;
	container-type: inline-size;
.analytics-range {
	min-width: 150px;
	margin: 0;
}
.analytics-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 22px 0;
}
.analytics-stat {
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
}
.analytics-stat span {
	display: block;
	color: var(--muted);
	font-size: 11px;
}
.analytics-stat strong {
	display: block;
	margin-top: 6px;
	color: var(--ink);
	font: 600 25px "Space Grotesk", sans-serif;
}
.analytics-tables {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: 18px;
}
.analytics-tables .admin-table-wrap {
	margin-top: 0;
}
@media (max-width: 900px) {
	.analytics-tables {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.analytics-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
	container-name: admin-panel;
}

.admin-plan-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.admin-plan-card {
	display: grid;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--input-bg);
}

.admin-plan-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

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

.admin-plan-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, 1fr));
	gap: 12px;
	align-items: end;
}

.admin-plan-form label {
	display: grid;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--muted);
}

.admin-plan-form .full-width {
	grid-column: 1 / -1;
}

.admin-plan-form input,
.admin-plan-form textarea,
.admin-filters input,
.admin-filters select,
.admin-table select {
	padding: 8px 10px;
	border: 1px solid var(--input-border);
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
}

.admin-plan-form textarea {
	min-height: 76px;
	resize: vertical;
	font: inherit;
	line-height: 1.4;
}

.plan-description-field {
	position: relative;
}

.description-count {
	justify-self: end;
	margin-top: -2px;
	font-size: 0.72rem;
	color: var(--muted);
}

.admin-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	align-items: end;
	margin-bottom: 18px;
}

.admin-filters label {
	display: grid;
	gap: 7px;
	font-size: 0.82rem;
	color: var(--muted);
}

.checkbox-row {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
}

.admin-table-wrap {
	overflow-x: auto;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

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

.admin-table th {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

@container admin-panel (max-width: 1000px) {
	.admin-table-wrap {
		overflow-x: visible;
	}

	.admin-table,
	.admin-table tbody,
	.admin-table tr,
	.admin-table td {
		display: block;
		width: 100%;
	}

	.admin-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.admin-table tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 10px 16px;
		padding: 14px 0;
		border-bottom: 1px solid var(--line);
	}

	.admin-table td {
		padding: 0;
		border: 0;
		min-width: 0;
		 overflow-wrap: anywhere;
	}

	.admin-table td::before {
		display: block;
		margin-bottom: 4px;
		content: attr(data-label);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.admin-table td:first-child {
		grid-column: 1 / -1;
	}

	.admin-table td:last-child {
		grid-column: 1 / -1;
	}

	.admin-table .button {
		width: 100%;
	}
}

.muted-text {
	color: var(--muted);
	font-size: 0.8rem;
}

.sidebar-account-actions {
	display: grid;
	gap: 6px;
}
.sidebar-account-actions .account-button {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #e8f2ef;
	font-size: 12px;
	text-align: left;
}
.sidebar-account-actions .account-button:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
}
.sidebar-account-actions .signout-button {
	color: #ffb8aa;
}
.text-button {
	padding: 0;
	border: 0;
	background: none;
	color: #9bb1b3;
	font-size: 13px;
}
.text-button:hover {
	color: #fff;
}
.account-dialog {
	width: min(calc(100% - 32px), 440px);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink);
	background: var(--white);
	box-shadow: 0 22px 60px rgba(20, 38, 51, 0.24);
}
.account-dialog::backdrop {
	background: rgba(16, 45, 59, 0.48);
}
.account-dialog form {
	padding: 28px;
}
.dialog-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 25px;
}
.dialog-heading h2 {
	margin: 0;
	font-family: "Space Grotesk", sans-serif;
	font-size: 23px;
}
.dialog-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}
.dialog-cancel {
	color: var(--muted);
}
.dialog-actions .button {
	min-height: 45px;
}
.session-idle-dialog {
	padding: 28px;
}
.session-idle-dialog h2 {
	margin: 0 0 12px;
}
.session-idle-dialog p:not(.eyebrow) {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}
.session-idle-dialog #sessionIdleCountdown {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.session-idle-dialog .dialog-actions {
	justify-content: space-between;
	flex-wrap: wrap;
}
.main {
	width: calc(100% - 248px);
	max-width: 1320px;
	padding: 48px clamp(24px, 5vw, 78px) 28px;
	margin: 0 0 0 248px;
}
.main:has(.workspace-brand) {
	padding-top: 8px;
}
.shell.signed-out:not(:has(.profile-heading)) .main {
	padding-top: 8px;
}
.workspace-brand {
	display: flex;
	justify-content: center;
	margin-bottom: 28px;
}
.profile-heading {
	position: static;
	text-align: left;
}
.profile-heading .eyebrow {
	margin-bottom: 9px;
}
.topbar {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 42px;
}
.topbar h1,
h2,
h3 {
	margin: 0;
	font-family: "Space Grotesk", sans-serif;
}
.topbar h1 {
	font-size: clamp(28px, 3vw, 43px);
	letter-spacing: -0.02em;
}
.user-pill {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 30px;
	background: var(--white);
	color: var(--muted);
	font-size: 12px;
}
.account-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.logout-button {
	display: inline-block;
	padding: 10px 13px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink);
	background: var(--white);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
.logout-button:hover {
	border-color: var(--coral);
	color: var(--coral-dark);
}
.logout-button:disabled {
	opacity: 0.6;
	cursor: wait;
}
.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4caf87;
}
.panel {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: var(--shadow);
}
.workspace-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 285px;
	gap: 22px;
}
.composer {
	padding: 31px clamp(22px, 4vw, 43px) 36px;
}
.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
}
.section-heading h2 {
	font-size: 23px;
}
.secure-badge {
	padding: 7px 10px;
	border-radius: 5px;
	color: var(--status-text);
	background: var(--mint);
	font-size: 11px;
	font-weight: 700;
}
.secure-badge span {
	font-size: 8px;
	margin-right: 4px;
}
.mode-tabs {
	display: flex;
	gap: 22px;
	margin: 31px 0 26px;
	border-bottom: 1px solid var(--line);
}
.mode-tab {
	padding: 0 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}
.mode-tab.active {
	border-color: var(--coral);
	color: var(--ink);
}
label {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
	color: var(--label-text);
	font-size: 12px;
	font-weight: 700;
}
input,
textarea,
select {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--input-border);
	border-radius: 6px;
	outline: 0;
	color: var(--ink);
	background: var(--input-bg);
	font-size: 14px;
	font-weight: 400;
	transition:
		border 0.2s,
		box-shadow 0.2s;
}
.amount-stepper {
	position: relative;
	display: block;
}
.amount-stepper input {
	padding-right: 42px;
	appearance: textfield;
}
.amount-stepper input::-webkit-inner-spin-button,
.amount-stepper input::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}
.amount-stepper-controls {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: grid;
	width: 34px;
	grid-template-rows: 1fr 1fr;
	border-left: 1px solid var(--input-border);
}
.amount-stepper-controls button {
	padding: 0;
	border: 0;
	color: var(--muted);
	background: transparent;
	font-size: 9px;
	line-height: 1;
}
.amount-stepper-controls button:hover,
.amount-stepper-controls button:focus-visible {
	color: var(--coral);
	background: var(--mint);
}
.amount-stepper-controls button:first-child {
	border-bottom: 1px solid var(--input-border);
}
textarea {
	resize: vertical;
	min-height: 135px;
	line-height: 1.5;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--coral);
	box-shadow: 0 0 0 3px rgba(239, 108, 87, 0.12);
}
.field-note {
	margin-top: -3px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 400;
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 23px;
	align-items: start;
}
.delivery-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 27px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}
.delivery-note strong {
	color: var(--ink);
	font-weight: 600;
}
.mail-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: var(--coral);
	background: var(--icon-soft-bg);
	border-radius: 50%;
}
.button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 13px;
	padding: 14px 18px;
	border: 0;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
}
.button.primary {
	color: #fff;
	background: var(--coral);
}
.button.primary:hover {
	background: var(--coral-dark);
}
.button span {
	font-size: 18px;
	font-weight: 400;
}
.full {
	width: 100%;
}
.form-message {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.reconciliation-result {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink);
	background: var(--white);
	font-size: 13px;
	line-height: 1.5;
}
.reconciliation-result.is-pending {
	border-color: var(--input-border);
	color: var(--muted);
}
.reconciliation-result.is-success {
	border-color: var(--success-border);
	color: var(--success-text);
	background: var(--success-bg);
}
.reconciliation-result.is-error {
	border-color: var(--error-border);
	color: var(--error-text);
	background: var(--error-bg);
}
.toast {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 50;
	width: min(390px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	transform: translate(-50%, -50%);
	padding: 14px 16px;
	border: 1px solid var(--input-border);
	border-radius: 6px;
	box-shadow: 0 16px 35px rgba(20, 38, 51, 0.18);
	color: var(--ink);
	background: var(--white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}
.toast.success {
	border-color: var(--success-border);
	color: var(--success-text);
	background: var(--success-bg);
}
.toast.error {
	border-color: var(--error-border);
	color: var(--error-text);
	background: var(--error-bg);
}
.side-note {
	padding: 31px 27px;
	border-radius: 10px;
	background: var(--mint);
}
.note-mark {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 50px;
	color: #fff;
	border-radius: 50%;
	background: var(--accent-green);
}
.side-note h3 {
	max-width: 210px;
	font-size: 21px;
	line-height: 1.14;
}
.side-note p {
	color: var(--side-note-text);
	font-size: 13px;
	line-height: 1.6;
}
.note-line {
	width: 45px;
	height: 2px;
	margin: 34px 0 18px;
	background: var(--accent-green);
}
.side-note .small {
	font-size: 11px;
	line-height: 1.7;
}
.activity {
	margin-top: 23px;
	padding: 28px 30px 12px;
}
.icon-button {
	width: 31px;
	height: 31px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--muted);
	background: var(--white);
	font-size: 19px;
}
.table-wrap {
	overflow-x: auto;
	margin-top: 23px;
}
table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 12px;
}
th {
	padding: 0 14px 13px;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
td {
	padding: 17px 14px;
	border-top: 1px solid var(--line);
	white-space: nowrap;
}
.timestamp {
	min-width: 112px;
}
.date-line,
.time-line {
	display: block;
}
.time-line {
	margin-top: 3px;
	color: var(--muted);
	font-size: 11px;
}
.recipient {
	color: var(--ink);
	font-weight: 600;
}
.muted {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}
.status {
	display: inline-block;
	padding: 5px 8px;
	border-radius: 4px;
	color: var(--status-text);
	background: var(--mint);
	font-size: 10px;
	font-weight: 700;
	text-transform: capitalize;
}
.status.consumed {
	color: var(--status-warn-text);
	background: var(--status-warn-bg);
}
.status.revoked,
.status.expired {
	color: var(--status-danger-text);
	background: var(--status-danger-bg);
}
.revoke {
	padding: 0;
	border: 0;
	color: var(--coral-dark);
	background: none;
	font-size: 11px;
}
.empty {
	padding: 28px 14px;
	color: var(--muted);
	text-align: center;
}
.security-strip {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 23px;
	padding: 18px 22px;
	border: 1px solid var(--security-border);
	border-radius: 8px;
	background: var(--security-bg);
}
.shield {
	color: var(--security-accent);
	font-size: 25px;
}
.security-strip div {
	display: grid;
	gap: 3px;
	flex: 1;
}
.security-strip strong {
	font-size: 12px;
}
.security-strip div span {
	color: var(--muted);
	font-size: 11px;
}
.posture {
	color: var(--security-accent);
	font-size: 11px;
	font-weight: 700;
}
footer {
	margin-top: 31px;
	color: var(--muted);
	font-size: 11px;
	text-align: center;
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	padding: 24px 0 8px;
	border-top: 1px solid var(--line);
	line-height: 1.5;
}

.site-footer strong {
	color: var(--ink);
}

.site-footer a {
	color: var(--coral-dark);
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}
footer span {
	padding: 0 4px;
}
.auth-panel {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 40px;
	padding: 42px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: var(--shadow);
}
.shell.login-focused .main {
	position: relative;
	display: flex;
	flex-direction: column;
}
.shell.login-focused .workspace-brand {
	margin-bottom: 18px;
}
.shell.login-focused .topbar {
	display: none;
}
.shell.login-focused .auth-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: min(100%, 560px);
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: clamp(24px, 5vw, 42px);
	transform: translate(-50%, -50%);
}
.shell.login-focused .auth-panel > div:first-child {
	text-align: center;
}
.shell.login-focused .auth-form {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}
.shell.login-focused .site-footer {
	display: none;
}
@media (max-width: 760px), (max-height: 799px) {
	.shell.login-focused .auth-panel {
		position: static;
		z-index: auto;
		margin: 0 auto;
		transform: none;
	}
	.shell.login-focused .topbar {
		display: none;
	}
}
.auth-panel h2 {
	margin-bottom: 10px;
	font-size: 27px;
}
.auth-form {
	max-width: 350px;
}
.password-control {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
}
.password-visibility {
	min-width: 42px;
	padding: 8px 0;
	border: 0;
	color: var(--coral-dark);
	background: transparent;
	font-size: 12px;
	font-weight: 700;
}
.password-visibility:hover {
	color: var(--ink);
}
.auth-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 17px;
	color: var(--muted);
	font-size: 12px;
}
.auth-links .link-button {
	margin-top: 0;
}
.forgot-password {
	display: block;
	margin: 13px auto 0;
}
.verification-help {
	display: grid;
	gap: 6px;
	margin-top: 18px;
	padding: 13px 14px;
	border: 1px solid var(--warn-border);
	border-radius: 6px;
	background: var(--warn-bg);
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}
.verification-help strong {
	color: var(--ink);
	font-size: 12px;
}
.verification-help .link-button {
	justify-self: start;
}
.link-button {
	padding: 0;
	margin-top: 13px;
	border: 0;
	color: var(--coral-dark);
	background: none;
	font-size: 12px;
}
[hidden] {
	display: none !important;
}
@media (max-width: 1000px) {
	.shell {
		display: block;
	}
	.sidebar {
		position: sticky;
		top: 0;
		left: auto;
		z-index: 20;
		display: flex;
		align-items: center;
		flex-direction: row;
		width: auto;
		height: auto;
		min-height: 0;
		padding: 18px 20px;
	}
	.sidebar .brand {
		display: none;
	}
	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		display: none;
		margin: 0;
		padding: 10px 20px 18px;
		background: var(--sidebar-bg);
		box-shadow: 0 12px 18px rgba(20, 38, 51, 0.18);
	}
	.sidebar.nav-open .nav {
		display: grid;
	}
	.sidebar-foot {
		display: none;
	}
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 8px 10px;
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 6px;
		color: #e8f2ef;
		background: transparent;
		font-size: 12px;
		font-weight: 700;
	}
	.nav-toggle:hover,
	.nav-toggle[aria-expanded="true"] {
		background: rgba(255, 255, 255, 0.1);
	}
	.nav-toggle span:first-child {
		font-size: 17px;
		line-height: 12px;
	}
	.main {
		width: 100%;
		margin-left: auto;
		padding: 30px 18px 22px;
	}
	.main:has(.workspace-brand) {
		padding-top: 8px;
	}
	.topbar {
		align-items: flex-start;
		gap: 20px;
		flex-direction: column;
		margin-bottom: 28px;
	}
	.user-pill {
		align-self: flex-start;
	}
	.account-actions {
		width: 100%;
		justify-content: space-between;
	}
	.workspace-grid,
	.auth-panel {
		grid-template-columns: 1fr;
	}
	.side-note {
		display: none;
	}
	.auth-panel {
		padding: 26px;
	}
	.auth-form {
		max-width: none;
	}
}
@media (max-width: 560px) {
	.site-brand {
		gap: 8px;
		font-size: 37px;
	}
	.site-brand .brand-logo {
		width: 58px;
		height: 58px;
	}
	.page-wordmark {
		font-size: clamp(22px, 8vw, 38px);
		white-space: nowrap;
	}
	.workspace-brand {
		margin-bottom: 20px;
	}
	.profile-heading > .brand-logo {
		display: none;
	}
}

@media (max-width: 280px) {
	.site-brand {
		font-size: 22px;
	}
	.site-brand .brand-logo {
		display: none;
	}
}
@media (max-width: 480px) {
	.composer {
		padding: 23px 18px 26px;
	}
	.activity {
		padding: 22px 12px 8px;
	}
	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.delivery-note {
		margin: 0 0 16px;
	}
	.section-heading {
		flex-direction: column;
	}
	.secure-badge {
		align-self: flex-start;
	}
	th,
	td {
		padding-left: 8px;
		padding-right: 8px;
	}
}