/* ===== Account page (account-view.js) =====
   Identity header with a blue glow, four stat tiles, then a sticky section
   nav beside one card per section: Profile, Security, Trading tier, Danger
   zone. Scoped to #view-account; account-settings.css still styles the tier
   panel's internals and is tuned here to match the cards. ===== */
#view-account.view {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 16px 24px 56px;
	--acv-r: 22px;
}
#view-account [hidden],
#view-account .hidden {
	display: none !important;
}
#view-account .acv-ic {
	width: 16px;
	height: 16px;
	flex: none;
	fill: currentColor;
}

/* ----- Identity header ----- */
#view-account .acv-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 28px;
	border-radius: var(--acv-r);
	border: 1px solid var(--border);
	background:
		radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 55%),
		var(--card);
}
#view-account .acv-id {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
#view-account .acv-av {
	display: grid;
	place-items: center;
	flex: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--card-2);
	box-shadow:
		0 0 0 3px var(--card),
		0 0 0 5px color-mix(in srgb, var(--blue) 75%, transparent);
	color: var(--txt);
	font-size: 32px;
	font-weight: 800;
}
#view-account .acv-av:empty {
	animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#view-account .acv-av > *,
#view-account .acv-av img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50%;
	object-fit: cover;
}
#view-account .acv-who {
	min-width: 0;
}
#view-account .acv-who h1 {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--txt);
}
#view-account .acv-who p {
	margin: 2px 0 12px;
	overflow: hidden;
	color: var(--txt-2);
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#view-account .acv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#view-account .acv-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--card-2) 85%, transparent);
	color: var(--txt-2);
	font-size: 12.5px;
}
#view-account .acv-chip b {
	color: var(--txt);
	font-weight: 700;
}
#view-account .acv-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--card-2);
	color: var(--txt);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color 0.12s;
}
#view-account .acv-pill:hover {
	border-color: var(--muted);
}
#view-account .acv-pill.sm {
	height: 36px;
	padding: 0 14px;
	font-size: 13px;
}

/* ----- Stat tiles ----- */
#view-account .acv-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 12px 0 20px;
}
#view-account .acv-kpi {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid var(--border);
	background: var(--card);
}
#view-account .acv-kpi-ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: color-mix(in srgb, var(--blue) 14%, var(--card-2));
	color: var(--blue);
}
#view-account .acv-kpi-ic .acv-ic {
	width: 20px;
	height: 20px;
}
#view-account .acv-kpi div {
	min-width: 0;
}
#view-account .acv-kpi div > span {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
}
#view-account .acv-kpi b {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- Nav + section cards ----- */
#view-account .acv-layout {
	display: grid;
	grid-template-columns: 228px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
#view-account .acv-nav {
	position: sticky;
	top: calc(var(--topbar-h, 80px) + 12px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border-radius: 18px;
	border: 1px solid var(--border);
	background: var(--card);
}
#view-account .acv-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	color: var(--txt-2);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
#view-account .acv-nav a:hover,
#view-account .acv-nav a.on {
	background: var(--card-2);
	color: var(--txt);
}
#view-account .acv-nav a.on .acv-ic {
	color: var(--blue);
}
#view-account .acv-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
#view-account .acv-card {
	scroll-margin-top: calc(var(--topbar-h, 80px) + 16px);
	padding: 22px 24px 24px;
	border-radius: var(--acv-r);
	border: 1px solid var(--border);
	background: var(--card);
}
#view-account .acv-card-hd {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
#view-account .acv-card h2 {
	margin: 0;
	color: var(--txt);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
}
#view-account .acv-card-hd p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 13px;
}

/* Profile fields */
#view-account .acv-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
#view-account .acv-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--card-2);
}
#view-account .acv-field > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--muted);
	font-size: 12.5px;
}
#view-account .acv-field b {
	overflow: hidden;
	padding-right: 40px;
	color: var(--txt);
	font-size: 15px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
}
#view-account .acv-field b.addr {
	font-size: 13px;
}
#view-account .acv-copy {
	position: absolute;
	top: 50%;
	right: 10px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--txt-2);
	cursor: pointer;
	transform: translateY(-50%);
}
#view-account .acv-copy:hover {
	border-color: var(--muted);
	color: var(--txt);
}

/* Security */
#view-account #pw-note {
	margin: -6px 0 16px;
}
#view-account .acv-pw {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 920px;
}
#view-account .acv-pw-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
#view-account .acv-in {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	color: var(--txt-2);
	font-size: 13px;
	font-weight: 600;
}
#view-account .acv-strength {
	display: flex;
	align-items: center;
	gap: 12px;
}
#view-account .acv-meter {
	display: grid;
	grid-template-columns: repeat(4, 44px);
	gap: 4px;
}
#view-account .acv-meter i {
	height: 5px;
	border-radius: 999px;
	background: var(--border);
	transition: background 0.15s;
}
#view-account .acv-meter[data-level="1"] i:nth-child(1) {
	background: var(--down);
}
#view-account .acv-meter[data-level="2"] i:nth-child(-n + 2),
#view-account .acv-meter[data-level="3"] i:nth-child(-n + 3),
#view-account .acv-meter[data-level="4"] i {
	background: var(--blue);
}
#view-account .acv-strength small {
	color: var(--muted);
	font-size: 12.5px;
}
#view-account .acv-pw-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
#view-account #pw-form .btn {
	margin-top: 0;
}

/* Trading tier: account-settings.js panel, matched to the cards */
#view-account .account-tier-settings {
	margin: 0;
}
#view-account .account-tier-heading {
	align-items: flex-start;
	margin-bottom: 18px;
}
#view-account .account-tier-heading h2 {
	margin: 0 0 4px;
}
#view-account .account-tier-heading p {
	color: var(--muted);
}
#view-account .account-tier-heading > .btn {
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}
#view-account .account-tier-current {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	background: none;
}
#view-account .account-tier-current > div {
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--card-2);
}
#view-account .account-tier-current > p {
	grid-column: 1 / -1;
	padding: 16px;
	border-radius: 16px;
	border: 1px dashed var(--border);
	color: var(--muted);
}
#view-account .account-tier-form legend {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
}
#view-account .account-tier-choice {
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--card-2);
}
#view-account .account-tier-choice.is-selected {
	border-color: var(--blue);
	box-shadow: inset 0 0 0 1px var(--blue);
}
#view-account .account-tier-choice-name input,
#view-account .account-tier-consent input {
	accent-color: var(--blue);
}
#view-account .account-tier-note {
	margin: 16px 0 12px;
}
#view-account .account-tier-rules {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--card-2);
}
#view-account .account-tier-rules p {
	margin: 4px 0;
}

/* Danger zone */
#view-account .acv-danger {
	display: flex;
	align-items: center;
	gap: 18px;
	border-color: color-mix(in srgb, var(--down) 38%, var(--border));
	background: linear-gradient(90deg, color-mix(in srgb, var(--down) 8%, var(--card)), var(--card) 60%);
}
#view-account .acv-danger-ic {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--down) 16%, var(--card-2));
	color: var(--down);
}
#view-account .acv-danger-ic .acv-ic {
	width: 22px;
	height: 22px;
}
#view-account .acv-danger-main {
	flex: 1;
	min-width: 0;
}
#view-account .acv-danger-main h2 {
	margin-bottom: 4px;
	font-size: 16px;
}
#view-account .acv-danger-main p {
	max-width: 92ch;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.55;
}
#view-account #del-acct-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-weight: 700;
}

@media (max-width: 1100px) {
	#view-account .acv-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#view-account .acv-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	#view-account .acv-nav {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}
}
@media (max-width: 720px) {
	#view-account.view {
		padding: 14px 14px 40px;
	}
	#view-account .acv-hero {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
	#view-account .acv-av {
		width: 64px;
		height: 64px;
		font-size: 26px;
	}
	#view-account .acv-fields,
	#view-account .acv-pw-row,
	#view-account .account-tier-current {
		grid-template-columns: minmax(0, 1fr);
	}
	#view-account .acv-danger {
		flex-wrap: wrap;
	}
}

/* Skeletons in the first paint (skeleton.css) keep each value's footprint. */
#view-account .acv-kpi > .sk {
	border-radius: 13px;
}
#view-account .acv-who h1 .sk,
#view-account .acv-field b .sk {
	max-width: 100%;
}