/*
Theme Name: Coutts Private Banking
Author: Coutts Digital
Description: A mobile-first private banking experience.
Version: 5.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: coutts-private-banking
*/

:root {
	color-scheme: dark;
	--ink: #080909;
	--ink-deep: #040505;
	--oxblood: #17040d;
	--oxblood-soft: #211018;
	--surface: #121214;
	--surface-raised: #181619;
	--surface-soft: #201d20;
	--surface-pressed: #272327;
	--ivory: #f4f1eb;
	--ivory-soft: #ded9d1;
	--stone: #aaa39b;
	--stone-dark: #77716c;
	--gold: #d5b66f;
	--gold-bright: #e1c681;
	--gold-deep: #92763f;
	--jade: #77b49b;
	--rose: #cf848c;
	--amber: #d2a761;
	--hairline: rgba(244, 241, 235, 0.09);
	--hairline-strong: rgba(244, 241, 235, 0.15);
	--gold-wash: rgba(213, 182, 111, 0.11);
	--jade-wash: rgba(119, 180, 155, 0.12);
	--rose-wash: rgba(207, 132, 140, 0.12);
	--shadow: 0 22px 60px rgba(0, 0, 0, 0.48);
	--radius-card: 24px;
	--radius-panel: 20px;
	--radius-control: 16px;
	--gutter: 24px;
	--nav-height: 82px;
	--safe-top: max(18px, env(safe-area-inset-top));
	--safe-right: max(0px, env(safe-area-inset-right));
	--safe-bottom: max(10px, env(safe-area-inset-bottom));
	--safe-left: max(0px, env(safe-area-inset-left));
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	min-height: 100%;
	margin-top: 0 !important;
	background: #020303;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
body.coutts-prototype-page {
	min-width: 320px;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background:
		radial-gradient(circle at 50% 18%, rgba(71, 57, 43, 0.13), transparent 34rem),
		linear-gradient(145deg, #020303, #070506 54%, #020303);
	color: var(--ivory);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums lining-nums;
	overflow: hidden;
}

#wpadminbar {
	display: none !important;
}

[hidden] {
	display: none !important;
}

/*
 * The presentation site's existing WordPress page settings hide semantic
 * header, nav and footer elements globally. Restore only this prototype's
 * internal application chrome without exposing the site's theme chrome.
 */
#coutts-prototype .lock-header,
#coutts-prototype .screen-header,
#coutts-prototype .sheet-header,
#coutts-prototype .lock-footer {
	display: flex !important;
}

#coutts-prototype .app-navigation {
	display: grid !important;
}

img,
svg {
	display: block;
}

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

button,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

button {
	color: inherit;
}

a {
	color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 3px;
}

::selection {
	background: rgba(213, 182, 111, 0.32);
	color: var(--ivory);
}

.skip-link {
	position: fixed;
	top: 10px;
	left: 50%;
	z-index: 1000;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 12px;
	background: var(--ivory);
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	transform: translate(-50%, -160%);
	transition: transform 180ms var(--ease);
}

.skip-link:focus {
	transform: translate(-50%, 0);
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.svg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.app-icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

.prototype-shell {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 560px;
	margin: 0 auto;
	overflow: hidden;
	background:
		radial-gradient(circle at 90% 4%, rgba(213, 182, 111, 0.065), transparent 19rem),
		radial-gradient(circle at 5% 48%, rgba(90, 18, 45, 0.18), transparent 30rem),
		linear-gradient(180deg, #0b0b0c, var(--ink) 42%, #070708);
	color: var(--ivory);
}

.prototype-shell::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 1px);
	background-size: 48px 48px;
	content: "";
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent 72%);
}

.coutts-logo {
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(82%) sepia(31%) saturate(724%) hue-rotate(359deg) brightness(91%) contrast(89%);
}

/* Splash */

.splash-screen {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: grid;
	grid-template-rows: 1fr auto;
	place-items: center;
	padding: calc(var(--safe-top) + 28px) calc(var(--gutter) + var(--safe-right)) calc(26px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
	background:
		radial-gradient(circle at 50% 46%, rgba(80, 20, 41, 0.3), transparent 18rem),
		linear-gradient(155deg, #0c0c0d, #080708 58%, #11060b);
}

.splash-screen.is-leaving {
	opacity: 0;
	transition: opacity 260ms ease;
}

.splash-brand {
	position: relative;
	z-index: 1;
	align-self: end;
	margin-bottom: 88px;
	text-align: center;
}

.splash-logo {
	width: clamp(124px, 34vw, 154px);
	margin: 0 auto;
}

.splash-brand p {
	margin: 22px 0 0;
	color: var(--stone);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.splash-ornament {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(72vw, 310px);
	aspect-ratio: 1;
	border: 1px solid rgba(213, 182, 111, 0.08);
	border-radius: 50%;
	transform: translate(-50%, -54%);
}

.splash-ornament::before,
.splash-ornament::after,
.splash-ornament span::before,
.splash-ornament span::after {
	position: absolute;
	background: linear-gradient(90deg, transparent, rgba(213, 182, 111, 0.12), transparent);
	content: "";
}

.splash-ornament::before,
.splash-ornament::after {
	top: 50%;
	left: -16%;
	width: 132%;
	height: 1px;
}

.splash-ornament::after {
	transform: rotate(90deg);
}

.splash-ornament span::before,
.splash-ornament span::after {
	top: 50%;
	left: 5%;
	width: 90%;
	height: 1px;
	transform: rotate(45deg);
}

.splash-ornament span::after {
	transform: rotate(-45deg);
}

.splash-status {
	margin: 0;
	color: var(--stone-dark);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* Lock screen */

.lock-screen {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--safe-top) calc(var(--gutter) + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
	overflow-x: hidden;
	overflow-y: auto;
	background:
		radial-gradient(circle at 15% 18%, rgba(85, 20, 43, 0.26), transparent 23rem),
		linear-gradient(180deg, rgba(15, 13, 15, 0.96), rgba(7, 8, 8, 0.99));
	scrollbar-width: none;
}

.lock-screen::-webkit-scrollbar,
.app-content::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar {
	display: none;
}

.lock-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	gap: 16px;
}

.lock-logo {
	width: 92px;
}

.prototype-marker {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border: 1px solid rgba(213, 182, 111, 0.18);
	border-radius: 999px;
	background: rgba(213, 182, 111, 0.06);
	color: var(--gold);
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lock-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 28px 0 18px;
}

.lock-intro {
	margin-bottom: 24px;
	text-align: center;
}

.lock-emblem {
	display: grid;
	width: 52px;
	height: 52px;
	margin: 0 auto 20px;
	place-items: center;
	border: 1px solid rgba(213, 182, 111, 0.2);
	border-radius: 50%;
	background: var(--gold-wash);
	color: var(--gold-bright);
}

.lock-emblem .app-icon {
	width: 21px;
	height: 21px;
}

.lock-intro h1 {
	margin: 5px 0 8px;
	font-size: clamp(27px, 8vw, 34px);
	font-weight: 430;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.lock-intro > p:last-child {
	max-width: 290px;
	margin: 0 auto;
	color: var(--stone);
	font-size: 14px;
}

.device-auth-button {
	width: 100%;
}

#device-auth-button[data-available="false"] {
	border-color: var(--hairline-strong);
	background: rgba(244, 241, 235, 0.045);
	color: var(--stone);
}

#device-auth-button[hidden] {
	display: inline-flex !important;
	visibility: hidden;
	pointer-events: none;
}

#device-auth-button.is-unavailable {
	visibility: hidden;
	pointer-events: none;
}

.lock-divider {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 20px 0 14px;
	color: var(--stone-dark);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lock-divider::before,
.lock-divider::after {
	flex: 1;
	height: 1px;
	background: var(--hairline);
	content: "";
}

.pin-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	gap: 14px;
}

.pin-dot {
	display: block;
	width: 11px;
	height: 11px;
	border: 1.5px solid rgba(244, 241, 235, 0.36);
	border-radius: 50%;
	background: transparent;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.pin-dot.filled,
.pin-dot.is-filled {
	border-color: var(--gold);
	background: var(--gold);
	transform: scale(1.08);
}

.pin-dots.has-error .pin-dot,
.pin-dot.is-error {
	border-color: var(--rose);
	background: var(--rose);
}

.lock-message {
	min-height: 21px;
	margin: 7px 0 10px;
	color: var(--stone);
	font-size: 12px;
	text-align: center;
}

.lock-message.is-error {
	color: var(--rose);
}

.lock-message.is-success {
	color: var(--jade);
}

.pin-keypad {
	display: grid;
	grid-template-columns: repeat(3, minmax(58px, 68px));
	justify-content: center;
	gap: 8px clamp(18px, 7vw, 30px);
}

.pin-key,
.pin-key-spacer {
	width: 68px;
	height: 58px;
}

.pin-key {
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 18px;
	background: transparent;
	color: var(--ivory);
	cursor: pointer;
	font-size: 23px;
	font-weight: 430;
	line-height: 1;
	transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}

.pin-key:hover {
	border-color: var(--hairline);
	background: rgba(244, 241, 235, 0.045);
}

.pin-key:active {
	background: var(--gold-wash);
	transform: scale(0.94);
}

.pin-key-icon {
	color: var(--stone);
}

.lock-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: rgba(170, 163, 155, 0.62);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Application shell and bottom navigation */

.banking-app {
	position: relative;
	display: flex;
	height: 100%;
	min-height: 100%;
	flex-direction: column;
}

.app-content {
	position: relative;
	flex: 1;
	min-height: 0;
	padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-y: contain;
}

.app-screen {
	width: 100%;
	min-height: 100%;
	padding: 0 calc(var(--gutter) + var(--safe-right)) 24px calc(var(--gutter) + var(--safe-left));
}

.app-screen.is-entering {
	animation: screen-enter 220ms var(--ease) both;
}

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

.app-navigation {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	min-height: calc(var(--nav-height) + var(--safe-bottom));
	padding: 7px max(8px, var(--safe-right)) var(--safe-bottom) max(8px, var(--safe-left));
	border-top: 1px solid var(--hairline);
	background: rgba(10, 10, 11, 0.94);
	box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.app-navigation button {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 58px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	padding: 4px 2px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--stone);
	cursor: pointer;
	font-size: 11px;
	font-weight: 620;
	letter-spacing: 0.01em;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--ease);
}

.app-navigation button:hover {
	background: rgba(244, 241, 235, 0.035);
	color: var(--ivory-soft);
}

.app-navigation button:active {
	transform: scale(0.96);
}

.app-navigation button.is-active,
.app-navigation button[aria-current="page"] {
	color: var(--gold-bright);
}

.app-navigation button > .app-icon {
	width: 21px;
	height: 21px;
}

.nav-home-icon {
	display: grid;
	width: 38px;
	height: 38px;
	margin-top: -14px;
	place-items: center;
	border: 1px solid rgba(213, 182, 111, 0.26);
	border-radius: 50%;
	background: linear-gradient(145deg, #292725, #171718);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.44);
}

.app-navigation button.is-active .nav-home-icon,
.app-navigation button[aria-current="page"] .nav-home-icon {
	background: linear-gradient(145deg, rgba(213, 182, 111, 0.2), rgba(213, 182, 111, 0.08));
}

.nav-home-icon .app-icon {
	width: 19px;
	height: 19px;
}

/* Reusable screen composition */

.screen-shell {
	display: flex;
	min-height: 100%;
	flex-direction: column;
	gap: 24px;
	padding-top: calc(var(--safe-top) + 14px);
}

.screen-header {
	display: flex;
	min-height: 54px;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.screen-header-copy {
	min-width: 0;
}

.screen-header-actions,
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.eyebrow {
	margin: 0;
	color: var(--gold);
	font-size: 10px;
	font-weight: 680;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.screen-title {
	margin: 3px 0 0;
	font-size: clamp(28px, 8vw, 36px);
	font-weight: 430;
	letter-spacing: -0.04em;
	line-height: 1.12;
}

.screen-subtitle,
.muted {
	color: var(--stone);
}

.screen-subtitle {
	margin: 6px 0 0;
	font-size: 13px;
}

.icon-button {
	display: inline-grid;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	padding: 0;
	place-items: center;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	background: rgba(244, 241, 235, 0.035);
	color: var(--ivory-soft);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.icon-button:hover {
	border-color: var(--hairline-strong);
	background: rgba(244, 241, 235, 0.07);
	color: var(--ivory);
}

.icon-button:active {
	transform: scale(0.94);
}

.icon-button.has-indicator::after {
	position: absolute;
	top: 6px;
	right: 5px;
	width: 8px;
	height: 8px;
	border: 2px solid var(--surface);
	border-radius: 50%;
	background: var(--gold);
	content: "";
}

.avatar,
.avatar-monogram,
.transaction-avatar {
	display: grid;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	place-items: center;
	border: 1px solid rgba(213, 182, 111, 0.2);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(213, 182, 111, 0.15), rgba(213, 182, 111, 0.045));
	color: var(--gold-bright);
	font-size: 13px;
	font-weight: 720;
	letter-spacing: 0.04em;
}

.avatar-monogram.is-business,
.transaction-avatar.is-business {
	background: rgba(244, 241, 235, 0.055);
	color: var(--ivory-soft);
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.section-heading h2,
.section-heading h3,
h2.section-heading,
h3.section-heading {
	margin: 0;
	font-size: 17px;
	font-weight: 620;
	letter-spacing: -0.015em;
}

.section-heading a,
.section-heading button,
.text-button {
	min-height: 48px;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: var(--gold);
	cursor: pointer;
	font-size: 11px;
	font-weight: 680;
	letter-spacing: 0.09em;
	text-decoration: none;
	text-transform: uppercase;
}

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

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

.spacer {
	flex: 1;
}

.divider {
	height: 1px;
	margin: 4px 0;
	background: var(--hairline);
}

/* Buttons and segmented controls */

.button,
.primary-button,
.secondary-button,
.danger-button {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	cursor: pointer;
	font-size: 14px;
	font-weight: 680;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms var(--ease);
}

.button-primary,
.primary-button {
	border-color: var(--gold);
	background: var(--gold);
	color: #13110d;
}

.button-primary:hover,
.primary-button:hover {
	border-color: var(--gold-bright);
	background: var(--gold-bright);
}

.button-secondary,
.secondary-button {
	border-color: var(--hairline-strong);
	background: rgba(244, 241, 235, 0.055);
	color: var(--ivory);
}

.button-danger,
.danger-button {
	border-color: rgba(207, 132, 140, 0.28);
	background: var(--rose-wash);
	color: #efadb4;
}

.button-ghost {
	border-color: transparent;
	background: transparent;
	color: var(--gold);
}

.button:active,
.primary-button:active,
.secondary-button:active,
.danger-button:active {
	transform: scale(0.98);
}

.button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled,
.icon-button:disabled,
button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.42;
}

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

.segmented-control,
.account-switcher {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: rgba(244, 241, 235, 0.035);
}

.segment-button {
	min-width: 0;
	min-height: 48px;
	padding: 8px 13px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--stone);
	cursor: pointer;
	font-size: 12px;
	font-weight: 640;
	white-space: nowrap;
	transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.segment-button:hover {
	color: var(--ivory-soft);
}

.segment-button.is-active,
.segment-button[aria-pressed="true"],
.segment-button[aria-selected="true"] {
	background: var(--surface-soft);
	box-shadow: inset 0 0 0 1px var(--hairline);
	color: var(--gold-bright);
}

/* Balances and payment cards */

.balance-block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 4px 0 0;
}

.balance-label,
.balance-caption,
.meta-label {
	margin: 0;
	color: var(--stone);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.balance-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.balance-amount,
.balance-value {
	margin: 0;
	font-size: clamp(39px, 12vw, 54px);
	font-weight: 340;
	letter-spacing: -0.055em;
	line-height: 1.05;
}

.balance-value.is-private,
.balance-amount.is-private {
	letter-spacing: 0.05em;
}

.privacy-button {
	display: inline-grid;
	width: 48px;
	height: 48px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--stone);
	cursor: pointer;
}

.card-stack {
	position: relative;
	padding-bottom: 14px;
}

.bank-card {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 1.586 / 1;
	min-height: 186px;
	max-height: 224px;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(19px, 5vw, 24px);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-card);
	box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.1);
	color: var(--ivory);
	cursor: default;
	font: inherit;
	isolation: isolate;
	text-align: left;
}

button.bank-card {
	cursor: pointer;
}

.bank-card::before {
	position: absolute;
	right: -19%;
	bottom: -62%;
	z-index: -1;
	width: 84%;
	aspect-ratio: 1;
	border: 28px solid rgba(255, 255, 255, 0.025);
	border-radius: 50%;
	content: "";
}

.bank-card::after {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(122deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(0, 0, 0, 0.2));
	content: "";
}

.bank-card.card-gold,
.bank-card.bank-card--gold {
	border-color: rgba(255, 244, 210, 0.21);
	background: linear-gradient(145deg, #caae72 0%, #b69455 48%, #9d7d43 100%);
	color: #120f0a;
}

.bank-card.card-black,
.bank-card.bank-card--black {
	background: linear-gradient(145deg, #282829 0%, #111213 51%, #080909 100%);
}

.bank-card.bank-card--frozen,
.bank-card.is-frozen {
	filter: saturate(0.25);
}

.bank-card.bank-card--frozen::after,
.bank-card.is-frozen::after {
	background: linear-gradient(rgba(8, 9, 9, 0.56), rgba(8, 9, 9, 0.56));
}

.card-top,
.card-bottom,
.card-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.card-brand {
	font-size: 11px;
	font-weight: 720;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bank-card .coutts-logo {
	width: 78px;
	max-height: 30px;
}

.bank-card--gold .coutts-logo,
.bank-card.card-gold .coutts-logo {
	opacity: 0.76;
	filter: brightness(0) saturate(100%);
}

.bank-card--black .coutts-logo,
.bank-card.card-black .coutts-logo {
	opacity: 0.92;
	filter: brightness(0) saturate(100%) invert(82%) sepia(31%) saturate(724%) hue-rotate(359deg) brightness(91%) contrast(89%);
}

.card-chip {
	width: 35px;
	height: 27px;
	border: 1px solid rgba(255, 244, 210, 0.34);
	border-radius: 7px;
	background:
		linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.22) 31% 33%, transparent 34% 66%, rgba(255, 255, 255, 0.16) 67% 69%, transparent 70%),
		linear-gradient(rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.13));
}

.card-number {
	margin-top: auto;
	font-size: clamp(15px, 4.7vw, 19px);
	font-weight: 520;
	letter-spacing: 0.13em;
	white-space: nowrap;
}

.card-label {
	display: block;
	color: currentColor;
	font-size: 10px;
	font-weight: 720;
	letter-spacing: 0.12em;
	opacity: 0.62;
	text-transform: uppercase;
}

.bank-card--gold .card-label,
.bank-card.card-gold .card-label {
	opacity: 1;
}

.card-holder,
.card-expiry {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.card-frozen-badge {
	position: absolute;
	top: 19px;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	border: 1px solid rgba(244, 241, 235, 0.15);
	border-radius: 999px;
	background: rgba(8, 9, 9, 0.56);
	color: var(--ivory);
	font-size: 10px;
	font-weight: 680;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: translateX(-50%);
}

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

.card-selector button {
	min-height: 48px;
	padding: 9px 12px;
	border: 1px solid var(--hairline);
	border-radius: 14px;
	background: rgba(244, 241, 235, 0.03);
	color: var(--stone);
	cursor: pointer;
	font-size: 12px;
	font-weight: 620;
}

.card-selector button.is-active,
.card-selector button[aria-pressed="true"] {
	border-color: rgba(213, 182, 111, 0.34);
	background: var(--gold-wash);
	color: var(--gold-bright);
}

/* Quick actions, panels and lists */

.quick-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.quick-action {
	display: flex;
	min-width: 0;
	min-height: 84px;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 8px;
	padding: 6px 2px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--ivory-soft);
	cursor: pointer;
	font-size: 11px;
	font-weight: 620;
	text-align: center;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.quick-action:hover {
	background: rgba(244, 241, 235, 0.035);
	color: var(--ivory);
}

.quick-action:active {
	transform: scale(0.96);
}

.action-icon,
.quick-action-icon {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	background: rgba(244, 241, 235, 0.035);
	color: var(--gold-bright);
}

.action-icon .app-icon,
.quick-action-icon .app-icon {
	width: 20px;
	height: 20px;
}

.panel,
.chart-panel,
.auth-panel,
.receipt {
	position: relative;
	padding: 18px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-panel);
	background: linear-gradient(150deg, rgba(27, 24, 27, 0.94), rgba(17, 17, 19, 0.96));
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.panel-quiet {
	box-shadow: none;
}

.panel h2,
.panel h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 620;
	letter-spacing: -0.015em;
}

.panel p {
	margin: 4px 0 0;
}

.transaction-list,
.menu-list,
.settings-list,
.info-rows,
.card-controls {
	display: flex;
	flex-direction: column;
}

.transaction-row,
.list-row,
.asset-row,
.menu-row,
.list-button,
.info-row,
.review-row {
	position: relative;
	display: grid;
	min-height: 68px;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--hairline);
}

.transaction-row,
.list-row,
.asset-row {
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: 11px 0;
}

.transaction-row:last-child,
.list-row:last-child,
.asset-row:last-child,
.menu-row:last-child,
.list-button:last-child,
.info-row:last-child,
.review-row:last-child {
	border-bottom: 0;
}

button.transaction-row,
button.list-row,
button.asset-row,
.list-button,
button.menu-row {
	width: 100%;
	border-top: 0;
	border-right: 0;
	border-left: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

.transaction-copy,
.row-copy,
.asset-copy,
.menu-copy {
	min-width: 0;
}

.transaction-title,
.row-title,
.asset-title,
.menu-title {
	display: block;
	overflow: hidden;
	color: var(--ivory);
	font-size: 14px;
	font-weight: 620;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.transaction-meta,
.row-meta,
.asset-meta,
.menu-meta {
	display: block;
	margin-top: 3px;
	overflow: hidden;
	color: var(--stone);
	font-size: 11px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.amount,
.transaction-amount,
.asset-value {
	justify-self: end;
	font-size: 13px;
	font-weight: 690;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.amount.positive,
.amount--credit,
.transaction-amount.positive,
.positive {
	color: var(--jade);
}

.amount.negative,
.amount--debit,
.transaction-amount.negative,
.negative {
	color: var(--ivory-soft);
}

.status,
.status-pill {
	display: inline-flex;
	min-height: 26px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 9px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	background: rgba(244, 241, 235, 0.045);
	color: var(--stone);
	font-size: 9px;
	font-weight: 720;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.status.success,
.status--success,
.status-pill.success,
.status-pill--success {
	border-color: rgba(119, 180, 155, 0.22);
	background: var(--jade-wash);
	color: #98cbb6;
}

.status.pending,
.status--pending,
.status-pill.pending,
.status-pill--pending {
	border-color: rgba(210, 167, 97, 0.22);
	background: rgba(210, 167, 97, 0.1);
	color: #dfbc82;
}

.status.warning,
.status.declined,
.status--warning,
.status--declined,
.status-pill.warning,
.status-pill.declined {
	border-color: rgba(207, 132, 140, 0.24);
	background: var(--rose-wash);
	color: #e7a2a9;
}

.menu-list,
.settings-list {
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-panel);
	background: rgba(24, 22, 25, 0.82);
}

.menu-row,
.list-button {
	grid-template-columns: 44px minmax(0, 1fr) auto;
	min-height: 66px;
	padding: 8px 14px;
}

.menu-icon,
.row-icon {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid var(--hairline);
	border-radius: 13px;
	background: rgba(244, 241, 235, 0.035);
	color: var(--gold);
}

.menu-icon .app-icon,
.row-icon .app-icon {
	width: 19px;
	height: 19px;
}

.menu-chevron,
.row-chevron {
	color: var(--stone-dark);
}

.menu-row:hover,
.list-button:hover,
button.transaction-row:hover,
button.list-row:hover {
	background: rgba(244, 241, 235, 0.028);
}

.toggle {
	position: relative;
	width: 50px;
	height: 30px;
	flex: 0 0 50px;
	padding: 0;
	border: 1px solid var(--hairline-strong);
	border-radius: 999px;
	background: rgba(244, 241, 235, 0.09);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.toggle::after {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ivory-soft);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	content: "";
	transition: background-color 180ms ease, transform 220ms var(--ease);
}

.toggle.is-on,
.toggle[aria-checked="true"],
.toggle[aria-pressed="true"] {
	border-color: rgba(213, 182, 111, 0.42);
	background: rgba(213, 182, 111, 0.3);
}

.toggle.is-on::after,
.toggle[aria-checked="true"]::after,
.toggle[aria-pressed="true"]::after {
	background: var(--gold-bright);
	transform: translateX(20px);
}

/* Forms, payment reviews and authentication */

.form-stack {
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.form-field,
.field {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 7px;
}

.form-field > label,
.field > label,
.field-label {
	color: var(--ivory-soft);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.02em;
}

.form-field input,
.form-field select,
.form-field textarea,
.field input,
.field select,
.field textarea,
.input {
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-control);
	background: rgba(244, 241, 235, 0.045);
	box-shadow: none;
	color: var(--ivory);
	caret-color: var(--gold);
	font-size: 16px;
	line-height: 1.35;
	transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.form-field textarea,
.field textarea {
	min-height: 92px;
	resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.field input::placeholder,
.field textarea::placeholder,
.input::placeholder {
	color: #726d68;
	opacity: 1;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
	border-color: rgba(213, 182, 111, 0.62);
	background: rgba(244, 241, 235, 0.065);
	box-shadow: 0 0 0 3px rgba(213, 182, 111, 0.09);
}

.form-field input[aria-invalid="true"],
.field input[aria-invalid="true"],
.form-field.has-error input,
.field.has-error input {
	border-color: rgba(207, 132, 140, 0.7);
}

.field-hint,
.field-error {
	margin: 0;
	color: var(--stone);
	font-size: 11px;
}

.field-error {
	color: var(--rose);
}

.currency-input {
	position: relative;
}

.currency-input::before {
	position: absolute;
	top: 50%;
	left: 15px;
	z-index: 1;
	color: var(--stone);
	content: "£";
	transform: translateY(-50%);
}

.currency-input input {
	padding-left: 34px;
	font-size: 22px;
	font-weight: 560;
}

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

.choice-grid > button,
.choice-button {
	min-height: 72px;
	padding: 13px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	background: rgba(244, 241, 235, 0.035);
	color: var(--ivory-soft);
	cursor: pointer;
	font-size: 13px;
	font-weight: 620;
	text-align: left;
}

.choice-grid > button.is-selected,
.choice-grid > button[aria-pressed="true"],
.choice-button.is-selected {
	border-color: rgba(213, 182, 111, 0.46);
	background: var(--gold-wash);
	color: var(--gold-bright);
}

.info-row,
.review-row {
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 52px;
	padding: 9px 0;
}

.info-row dt,
.review-row dt,
.info-row .label,
.review-row .label {
	color: var(--stone);
	font-size: 12px;
}

.info-row dd,
.review-row dd,
.info-row .value,
.review-row .value {
	margin: 0;
	color: var(--ivory);
	font-size: 13px;
	font-weight: 640;
	text-align: right;
}

.review-total {
	padding-top: 15px;
	border-top: 1px solid var(--hairline-strong);
}

.review-total .value,
.review-total dd {
	color: var(--gold-bright);
	font-size: 22px;
	font-weight: 560;
}

.auth-panel {
	text-align: center;
}

.auth-panel .pin-dots {
	margin: 18px 0 10px;
}

.auth-panel .pin-keypad {
	margin-top: 12px;
}

.receipt {
	padding: 24px 20px;
	background:
		radial-gradient(circle at 50% 0, rgba(119, 180, 155, 0.09), transparent 15rem),
		linear-gradient(150deg, rgba(27, 24, 27, 0.98), rgba(17, 17, 19, 0.98));
}

.receipt-header {
	margin-bottom: 20px;
	text-align: center;
}

.success-mark {
	display: grid;
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	place-items: center;
	border: 1px solid rgba(119, 180, 155, 0.3);
	border-radius: 50%;
	background: var(--jade-wash);
	color: #9acdb8;
}

.success-mark .app-icon {
	width: 27px;
	height: 27px;
}

.receipt-reference {
	color: var(--stone);
	font-size: 11px;
	letter-spacing: 0.05em;
}

/* Wealth charts and distributions */

.chart-panel {
	overflow: hidden;
}

.chart-panel .section-heading {
	align-items: flex-start;
	flex-wrap: wrap;
}

.chart-panel .balance-value {
	font-size: clamp(31px, 10vw, 44px);
}

.chart-panel .segmented-control {
	flex: 0 0 auto;
	min-width: 112px;
}

.chart {
	position: relative;
	width: 100%;
	min-height: 184px;
	margin-top: 14px;
	overflow: hidden;
	border-radius: 14px;
	background:
		linear-gradient(to bottom, transparent 24%, var(--hairline) 25%, transparent 26%, transparent 49%, var(--hairline) 50%, transparent 51%, transparent 74%, var(--hairline) 75%, transparent 76%);
}

.chart svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.chart-line {
	fill: none;
	stroke: var(--gold);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.chart-area {
	fill: url(#chart-gradient);
	opacity: 0.45;
}

.chart-axis,
.chart-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 9px;
	color: var(--stone-dark);
	font-size: 10px;
}

.spend-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.spend-bar {
	display: grid;
	grid-template-columns: minmax(88px, 0.85fr) minmax(90px, 1.45fr) auto;
	align-items: center;
	gap: 10px;
}

.spend-bar-label,
.spend-bar-value {
	font-size: 11px;
}

.spend-bar-track {
	height: 5px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(244, 241, 235, 0.08);
}

.spend-bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}

/* Empty, loading and inline feedback states */

.empty-state {
	display: flex;
	min-height: 210px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 30px 20px;
	border: 1px dashed rgba(244, 241, 235, 0.13);
	border-radius: var(--radius-panel);
	background: rgba(244, 241, 235, 0.018);
	text-align: center;
}

.empty-state-icon {
	display: grid;
	width: 52px;
	height: 52px;
	margin-bottom: 15px;
	place-items: center;
	border-radius: 50%;
	background: var(--gold-wash);
	color: var(--gold);
}

.empty-state h2,
.empty-state h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 620;
}

.empty-state p {
	max-width: 270px;
	margin: 7px auto 0;
	color: var(--stone);
	font-size: 13px;
}

.empty-state .button,
.empty-state .primary-button,
.empty-state .secondary-button {
	margin-top: 18px;
}

.skeleton {
	position: relative;
	overflow: hidden;
	border-radius: 9px;
	background: rgba(244, 241, 235, 0.065);
	color: transparent !important;
	user-select: none;
}

.skeleton::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(244, 241, 235, 0.07), transparent);
	content: "";
	transform: translateX(-100%);
	animation: skeleton-shimmer 1.45s infinite;
}

@keyframes skeleton-shimmer {
	to { transform: translateX(100%); }
}

.toast-region {
	position: absolute;
	right: calc(16px + var(--safe-right));
	bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
	left: calc(16px + var(--safe-left));
	z-index: 80;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}

.toast-region:empty {
	display: none;
}

.toast-region.is-visible {
	width: calc(100% - 32px - var(--safe-left) - var(--safe-right));
	max-width: 360px;
	min-height: 50px;
	margin: 0 auto;
	padding: 12px 16px;
	border: 1px solid var(--hairline-strong);
	border-radius: 15px;
	background: rgba(31, 28, 31, 0.98);
	box-shadow: var(--shadow);
	color: var(--ivory-soft);
	font-size: 12px;
	font-weight: 580;
	text-align: center;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	animation: toast-enter 220ms var(--ease) both;
}

.screen-shell > .prototype-marker {
	align-self: flex-start;
}

.toast {
	display: flex;
	width: 100%;
	max-width: 360px;
	min-height: 50px;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--hairline-strong);
	border-radius: 15px;
	background: rgba(31, 28, 31, 0.98);
	box-shadow: var(--shadow);
	color: var(--ivory-soft);
	font-size: 12px;
	font-weight: 580;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	animation: toast-enter 220ms var(--ease) both;
}

.toast::before {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--gold);
	content: "";
}

.toast.success::before,
.toast--success::before {
	background: var(--jade);
}

.toast.error::before,
.toast--error::before {
	background: var(--rose);
}

.toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes toast-enter {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Native bottom sheet */

.app-sheet {
	inset: auto 0 0;
	width: min(430px, 100%);
	max-width: none;
	height: auto;
	max-height: min(88vh, 760px);
	max-height: min(88dvh, 760px);
	margin: 0 auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--ivory);
}

.app-sheet::backdrop {
	background: rgba(0, 0, 0, 0.72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.app-sheet[open] {
	display: block;
}

.sheet-panel {
	display: flex;
	max-height: min(88vh, 760px);
	max-height: min(88dvh, 760px);
	flex-direction: column;
	padding: 9px calc(var(--gutter) + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
	overflow: hidden;
	border: 1px solid var(--hairline-strong);
	border-bottom: 0;
	border-radius: 28px 28px 0 0;
	background:
		radial-gradient(circle at 88% 0, rgba(213, 182, 111, 0.075), transparent 18rem),
		linear-gradient(180deg, #191718, #0e0f10);
	box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.56);
	animation: sheet-enter 300ms var(--ease) both;
}

@keyframes sheet-enter {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

.sheet-handle {
	width: 42px;
	height: 4px;
	margin: 0 auto 7px;
	border-radius: 999px;
	background: rgba(244, 241, 235, 0.2);
}

.sheet-header {
	display: flex;
	min-height: 62px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--hairline);
}

.sheet-header h2 {
	margin: 0;
	font-size: 23px;
	font-weight: 480;
	letter-spacing: -0.025em;
}

.sheet-header form {
	margin: 0;
}

.sheet-header .icon-button {
	width: 48px;
	height: 48px;
}

.sheet-body {
	min-height: 0;
	padding: 20px 0 2px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

.sheet-body > :first-child {
	margin-top: 0;
}

.sheet-actions {
	position: sticky;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 22px 0 0;
	padding: 12px 0 0;
	background: linear-gradient(180deg, transparent, #0e0f10 22%);
}

.sheet-actions > :only-child {
	grid-column: 1 / -1;
}

/* Responsive device presentation */

@media (min-width: 600px) {
	.app-sheet {
		bottom: max(16px, calc((100dvh - 900px) / 2));
	}

	.sheet-panel {
		border-bottom: 1px solid var(--hairline-strong);
		border-radius: 28px;
	}
}

@media (max-width: 374px) {
	:root {
		--gutter: 18px;
		--nav-height: 78px;
	}

	.lock-content {
		padding-top: 16px;
	}

	.lock-intro {
		margin-bottom: 18px;
	}

	.lock-emblem {
		width: 46px;
		height: 46px;
		margin-bottom: 14px;
	}

	.pin-keypad {
		grid-template-columns: repeat(3, 58px);
		gap: 6px 22px;
	}

	.pin-key,
	.pin-key-spacer {
		width: 58px;
		height: 52px;
	}

	.quick-actions {
		gap: 2px;
	}

	.action-icon,
	.quick-action-icon {
		width: 48px;
		height: 48px;
	}

	.app-navigation {
		padding-right: max(4px, var(--safe-right));
		padding-left: max(4px, var(--safe-left));
	}

	.app-navigation button {
		font-size: 9px;
	}

	.bank-card {
		min-height: 178px;
	}
}

@media (max-height: 720px) {
	.lock-content {
		justify-content: flex-start;
		padding-top: 16px;
	}

	.lock-emblem {
		display: none;
	}

	.lock-intro {
		margin-bottom: 15px;
	}

	.lock-intro h1 {
		font-size: 27px;
	}

	.lock-divider {
		margin: 13px 0 9px;
	}

	.pin-key,
	.pin-key-spacer {
		height: 50px;
	}

	.lock-footer {
		padding-top: 12px;
	}
}

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

@media (forced-colors: active) {
	.bank-card,
	.panel,
	.menu-list,
	.settings-list,
	.app-navigation,
	.sheet-panel {
		border: 1px solid CanvasText;
	}

	.pin-dot.filled,
	.pin-dot.is-filled,
	.toggle::after {
		forced-color-adjust: none;
		background: Highlight;
	}
}