/* ============================================================================
   Veyra Markets — institutional trading terminal.
   A dense, precise, low-latency-feeling dark UI in the spirit of the best
   on-chain perp venues. Typeface: Inter (variable, vendored, SIL OFL).
   ========================================================================== */
/* Satoshi — self-hosted, bundled via go:embed, served from /fonts (font-src 'self'). */
@font-face {
	font-family: "Satoshi";
	src: url("/fonts/Satoshi-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("/fonts/Satoshi-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("/fonts/Satoshi-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("/fonts/Satoshi-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("/fonts/Satoshi-Black.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ===== Dark theme (default) — the signup's calm near-black + mint ===== */
	--bg: #26292b;
	--panel: #26292b;
	--card: #161819;
	--card-2: #2f3336;
	--raise: #3b3f42;
	--hover: #34383b;
	--btn-2: #505152; /* secondary button fill */
	--cardcolor: #161819; /* dark card / sidebar surface */
	--tab-bg: #313133; /* segmented tab track */
	--tab-active: #4e4d52; /* active tab fill */
	--tab-txt: #8e8d92; /* inactive tab text */
	--tab-txt-on: #ffffff; /* active tab text */

	--border: rgba(255, 255, 255, 0.07);
	--border-2: rgba(255, 255, 255, 0.11);
	--border-3: rgba(255, 255, 255, 0.17);

	/* Brand accent — MINT (the signup's "deepest book" green). One green identity. */
	--accent: #2fd3a0;
	--accent-2: #29c294;
	--accent-dim: rgba(47, 211, 160, 0.14);
	--on-accent: #06281d; /* deep-green text on mint fills */
	--blue: var(--accent);
	--blue-dim: var(--accent-dim);
	--purple: #b9a8ff;
	--cyan: #6fd9c0;

	/* Market direction — mint long, coral short (the signup's softer red). */
	--up: #7ebd7d;
	--up-bg: rgba(126, 189, 125, 0.14);
	--up-strong: #6ba96a;
	--down: #f03f44;
	--down-bg: rgba(240, 63, 68, 0.14);
	--warn: #f0a429;

	--txt: #f1f1ef;
	--txt-2: #b7b7b2;
	--muted: #7e7e79;
	--faint: #545450;

	/* Coinbase-style soft corners — generously rounded, consistent across the kit. */
	--radius-xs: 8px;
	--radius: 24px;
	--radius-sm: 12px;
	--radius-lg: 22px;
	--radius-xl: 26px;
	/* Type, standardised on the signup screen: Hanken Grotesk for UI/prose,
     IBM Plex Mono for every number (the trading-terminal signature). Both are
     already loaded in the document head; --num was Poppins. */
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--ui:
		"Satoshi", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
	--num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	/* Shadow + accent-glow tokens so depth flips with the theme. */
	--shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
	--glow: rgba(47, 211, 160, 0.35);
	--ring: rgba(47, 211, 160, 0.45);
	--nav-bg: rgba(38, 41, 43, 0.85); /* translucent top bar */
	--inset: #1f2224; /* inset surface (inputs, segmented wells) */
	color-scheme: dark;
}

/* ===== Light theme — same identity, paper canvas, deeper mint for contrast ===== */
html[data-theme="light"] {
	color-scheme: light;
	--bg: #eef3f2;
	--panel: #ffffff;
	--card: #f7f7f7;
	--card-2: #f0f1ef;
	--raise: #e6e8e4;
	--btn-2: #e6e8e4;
	--hover: #eceee9;
	--border: rgba(16, 22, 20, 0.1);
	--border-2: rgba(16, 22, 20, 0.15);
	--border-3: rgba(16, 22, 20, 0.24);
	--accent: #0fb488;
	--accent-2: #0aa87e;
	--accent-dim: rgba(15, 180, 136, 0.13);
	--on-accent: #ffffff;
	--purple: #6d5ae0;
	--cyan: #129a82;
	--up: #0e9f70;
	--up-bg: rgba(14, 159, 112, 0.12);
	--up-strong: #0a8a60;
	--down: #de5751;
	--down-bg: rgba(222, 87, 81, 0.12);
	--warn: #b87410;
	--txt: #14181b;
	--txt-2: #444a50;
	--muted: #6b7178;
	--faint: #a4a9af;
	--shadow: 0 8px 26px rgba(20, 30, 28, 0.1);
	--shadow-sm: 0 2px 10px rgba(20, 30, 28, 0.08);
	--glow: rgba(15, 180, 136, 0.25);
	--ring: rgba(15, 180, 136, 0.4);
	--nav-bg: rgba(255, 255, 255, 0.85);
	--inset: #eef0ec;
	--cardcolor: #ffffff;
	--tab-bg: #ececec;
	--tab-active: #ffffff;
	--tab-txt: #6b7178;
	--tab-txt-on: #14181b;
	color-scheme: light;
}

* {
	box-sizing: border-box;
	margin: 0;
}
::selection {
	background: rgba(47, 211, 160, 0.3);
	color: #fff;
}

html {
	height: 100%;
}
body {
	background: var(--bg);
	color: var(--txt);
	font: 450 13px / 1.5 var(--ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	letter-spacing: -0.005em;
}

/* Global horizontal-overflow guard: a single too-wide child must never make the
   whole page scroll sideways (the "everything breaks on mobile" symptom).
   overflow-x: clip contains it WITHOUT creating a scroll container, so the
   sticky navbar still works. Media + replaced elements cap to their container. */
html,
body {
	max-width: 100%;
	overflow-x: clip;
}
img {
	max-width: 100%;
}
.card,
.view,
.main,
section {
	min-width: 0;
}

/* All numbers tabular so columns never jitter as values stream (Poppins ships
   tabular figures; force them on every numeric surface). */
.tbl,
.coinstats,
.book-side,
.tape,
.ticker,
.num,
.ohlc,
.stat-block b,
.kv b,
#ms-mark,
.px,
input {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--raise);
	border-radius: 7px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--hover);
	background-clip: padding-box;
}

.hidden {
	display: none !important;
}

/* Info "i" with a hover/focus tooltip — sprinkle on any label/card to explain it. */
.info-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--border-2);
	color: var(--muted);
	font-size: 9px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	cursor: help;
	position: relative;
	vertical-align: middle;
	margin-left: 5px;
	flex: none;
	transition: 0.12s;
}
.info-i:hover,
.info-i:focus-visible {
	color: var(--txt);
	border-color: var(--txt-2);
	outline: none;
}
.info-i:hover::after,
.info-i:focus-visible::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 240px;
	background: var(--raise);
	color: var(--txt);
	border: 1px solid var(--border-2);
	border-radius: 9px;
	padding: 8px 11px;
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	white-space: normal;
	box-shadow: var(--shadow);
	z-index: 200;
	pointer-events: none;
}
.info-i:hover::before,
.info-i:focus-visible::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--border-2);
	z-index: 200;
}

/* ---- Motion: smooth view/pane transitions so nothing "snaps" ----
   A view going display:none → block re-triggers its CSS animation, so every tab
   change fades + lifts in instead of hard-cutting. Panes that toggle .hidden get
   a lighter fade-up. All disabled under prefers-reduced-motion. */
@keyframes viewIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.view {
	animation: viewIn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.btpane,
.feed,
.admin-sec,
.rs-dash,
.pf-pos-charts,
#aff-fee-viz {
	animation: fadeUp 0.22s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.view,
	.btpane,
	.feed,
	.admin-sec,
	.rs-dash,
	.pf-pos-charts,
	#aff-fee-viz,
	.tk-track,
	.profile-menu {
		animation: none !important;
	}
}
.muted {
	color: var(--muted);
}
.tiny {
	font-size: 11px;
	margin-top: 6px;
	line-height: 1.5;
	color: var(--muted);
}
.small {
	font-size: 12px;
}
.up {
	color: var(--up);
}
.down {
	color: var(--down);
}

h1 {
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.02em;
	margin: 4px 0 16px;
}
h2 {
	font-size: 11px;
	font-weight: 650;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	margin: 26px 0 10px;
}
h3 {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
a {
	color: var(--blue);
	text-decoration: none;
}
hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 14px 0;
}
code,
.addr {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--txt-2);
	word-break: break-all;
}

/* ----- Generic card ----- */
.card {
	background: var(--cardcolor);
	border-radius: var(--radius);
}
.card {
	padding: 16px;
}
.book-card,
.chart-card,
.ticket,
.bottom-card,
.coinbar,
.tstrip {
	padding: 0;
}

/* ============================== AUTH ============================== */
.auth-wrap {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}
.auth-card {
	width: 380px;
	max-width: 100%;
	padding: 34px 30px 30px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 160px),
		var(--card);
	border: 1px solid var(--border-2);
	border-radius: 16px;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.brand {
	font-weight: 750;
	font-size: 19px;
	letter-spacing: 0.18em;
	display: flex;
	align-items: center;
	gap: 11px;
}
.brand em {
	font-style: normal;
	color: var(--muted);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.32em;
}
.brand-mark {
	width: 22px;
	height: 22px;
	border-radius: 9px;
	background: conic-gradient(
		from 200deg,
		var(--accent-2),
		var(--accent),
		#e8ff8a,
		var(--accent-2)
	);
	box-shadow: 0 0 18px rgba(47, 211, 160, 0.4);
}
.auth-sub {
	color: var(--muted);
	font-size: 12.5px;
	margin: 10px 0 22px;
}
.tabs {
	display: flex;
	gap: 3px;
	background: var(--bg);
	padding: 4px;
	border-radius: 10px;
	margin-bottom: 18px;
	border: 1px solid var(--border);
}
.tab {
	flex: 1;
	padding: 9px;
	border: none;
	background: none;
	color: var(--muted);
	font: inherit;
	font-weight: 550;
	font-size: 12.5px;
	border-radius: 9px;
	cursor: pointer;
	transition: 0.15s;
}
.tab.active {
	background: var(--raise);
	color: var(--txt);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tab:hover:not(.active) {
	color: var(--txt-2);
}

label {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	margin-bottom: 12px;
	font-weight: 500;
}
input,
select {
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	background: var(--bg);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	color: var(--txt);
	font: inherit;
	font-size: 13px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
input::placeholder {
	color: var(--faint);
}

/* password show/hide toggle (enhancePasswordInputs) */
.pw-wrap {
	position: relative;
	display: block;
}
.pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--muted);
	border-radius: 7px;
	transition:
		color 0.13s,
		background 0.13s;
}
.pw-toggle:hover {
	color: var(--txt);
	background: var(--hover);
}
.pw-toggle .pw-eye-off {
	display: none;
}
.pw-toggle.on .pw-eye {
	display: none;
}
.pw-toggle.on .pw-eye-off {
	display: block;
}
.pw-toggle.on {
	color: var(--accent);
}
input:focus,
select:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-dim);
}
select {
	appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7585' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 30px;
}

/* ============================== CUSTOM SELECT ==============================
   Progressive enhancement of native <select>: the native element is kept (hidden)
   for value/change semantics; .vsel is the styled trigger + floating menu. */
.vsel {
	position: relative;
	width: 100%;
	margin-top: 6px;
}
.vsel-native {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.vsel-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	background: var(--bg);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	color: var(--txt);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	transition:
		border-color 0.14s,
		box-shadow 0.14s,
		background 0.14s;
}
.vsel-btn:hover {
	border-color: var(--border-3);
	background: var(--card-2);
}
.vsel.open .vsel-btn {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-dim);
}
.vsel-btn .vsel-val {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vsel-btn .vsel-caret {
	flex: none;
	color: var(--muted);
	transition: transform 0.16s ease;
}
.vsel.open .vsel-btn .vsel-caret {
	transform: rotate(180deg);
}

.vsel-menu {
	position: fixed;
	z-index: 9500;
	min-width: 200px;
	max-height: 320px;
	overflow: auto;
	background: var(--card);
	border: 1px solid var(--border-2);
	border-radius: var(--radius);
	padding: 5px;
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset;
	transform-origin: top;
	animation: vsel-in 0.12s ease;
}
@keyframes vsel-in {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.vsel-search {
	position: sticky;
	top: -5px;
	margin: -5px -5px 5px;
	padding: 8px;
	background: var(--card);
	border-bottom: 1px solid var(--border);
}
.vsel-search input {
	margin: 0;
	padding: 7px 10px;
	font-size: 12.5px;
}
.vsel-opt {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	color: var(--txt-2);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.vsel-opt:hover,
.vsel-opt.active {
	background: var(--hover);
	color: var(--txt);
}
.vsel-opt.selected {
	color: var(--txt);
}
.vsel-opt.selected::after {
	content: "✓";
	color: var(--blue);
	font-size: 12px;
	margin-left: auto;
}
.vsel-empty {
	padding: 10px;
	color: var(--muted);
	font-size: 12.5px;
	text-align: center;
}

/* ----- Buttons ----- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 15px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-2);
	background: var(--btn-2);
	color: var(--txt);
	font: inherit;
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
	transition: 0.14s;
	white-space: nowrap;
}
.btn:hover {
	background: color-mix(in srgb, var(--btn-2) 84%, #fff);
	border-color: var(--border-3);
}
.btn:active {
	transform: translateY(0.5px);
}
.btn.primary {
	background: var(--accent);
	border-color: transparent;
	color: var(--on-accent);
	font-weight: 700;
	box-shadow: none;
}
.btn.primary:hover {
	filter: brightness(1.06);
}
.btn.wide {
	width: 100%;
	padding: 12px;
	font-size: 13.5px;
}
.btn.ghost {
	background: transparent;
	color: var(--txt-2);
}
.btn.ghost:hover {
	background: var(--card-2);
	color: var(--txt);
}
.btn.danger {
	background: var(--down-bg);
	border-color: rgba(240, 63, 68, 0.3);
	color: var(--down);
}
.btn.danger:hover {
	background: rgba(246, 70, 93, 0.18);
}
.btn.armed {
	background: rgba(246, 70, 93, 0.16);
	color: var(--down);
	border-color: rgba(246, 70, 93, 0.35);
}
.btn.google {
	background: #fff;
	color: #1f1f1f;
	border: none;
	font-weight: 600;
}
.btn.google:hover {
	background: #f0f0f0;
}
.err {
	color: var(--down);
	font-size: 12px;
	margin-top: 10px;
	min-height: 1em;
	line-height: 1.45;
}
.ok-msg {
	color: var(--up);
}
.warn {
	color: var(--warn);
}
.row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
}
.auth-or {
	text-align: center;
	margin: 16px 0;
	position: relative;
	color: var(--faint);
	font-size: 11px;
}
.auth-or span {
	background: var(--card);
	padding: 0 10px;
	position: relative;
	z-index: 1;
}
.auth-or::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border);
}

/* ============================== APP SHELL ============================== */
.app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.navbar {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 0 16px;
	height: 54px;
	border-bottom: 1px solid var(--border);
	background: var(--nav-bg);
	backdrop-filter: blur(16px) saturate(140%);
	position: sticky;
	top: 0;
	z-index: 50;
}
.navbar .brand {
	font-size: 16px;
	letter-spacing: 0.14em;
	font-weight: 700;
}
#nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-grow: 1;
}
.nav-btn {
	padding: 7px 14px;
	border: none;
	background: none;
	color: var(--muted);
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	border-radius: 9px;
	cursor: pointer;
	transition: 0.14s;
}
.nav-btn:hover {
	color: var(--txt-2);
}
.nav-btn.active {
	color: var(--accent);
	background: var(--accent-dim);
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 11px;
}

/* ----- Top-bar profile (avatar + dropdown) ----- */
.nav-profile {
	position: relative;
}
.profile-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 4px 9px 4px 4px;
	cursor: pointer;
	transition: 0.14s;
	max-width: 210px;
}
.profile-btn:hover {
	background: var(--raise);
	border-color: var(--border-2);
}
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--accent), var(--accent-2));
	color: var(--on-accent);
	font-family: var(--ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	flex: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.profile-id {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	line-height: 1.18;
}
.profile-email {
	font-size: 12px;
	font-weight: 600;
	color: var(--txt);
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.profile-role {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--accent);
	font-weight: 700;
}
.profile-role:empty {
	display: none;
}
.profile-chev {
	color: var(--muted);
	flex: none;
	transition: transform 0.16s;
}
.profile-btn[aria-expanded="true"] .profile-chev {
	transform: rotate(180deg);
}
.profile-menu {
	position: absolute;
	top: calc(100% + 9px);
	right: 0;
	min-width: 236px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 15px;
	box-shadow: var(--shadow);
	padding: 6px;
	z-index: 60;
	animation: pm-in 0.13s ease;
}
.profile-menu[hidden] {
	display: none;
}
@keyframes pm-in {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.pm-head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px 11px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 6px;
}
.avatar-lg {
	width: 38px;
	height: 38px;
	font-size: 14px;
}
.pm-id {
	min-width: 0;
}
.pm-id b {
	display: block;
	font-size: 13px;
	color: var(--txt);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 165px;
}
.pm-role-badge {
	font-size: 10.5px;
	color: var(--muted);
	text-transform: capitalize;
}
.pm-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	background: none;
	border: none;
	color: var(--txt-2);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	padding: 9px 10px;
	border-radius: 9px;
	cursor: pointer;
	transition: 0.12s;
}
.pm-item:hover {
	background: var(--card-2);
	color: var(--txt);
}
.pm-item svg {
	width: 17px;
	height: 17px;
	color: var(--muted);
	flex: none;
}
.pm-item:hover svg {
	color: var(--txt);
}
.pm-sep {
	height: 1px;
	background: var(--border);
	margin: 6px 4px;
}
.pm-danger {
	color: var(--down);
}
.pm-danger svg {
	color: var(--down);
}
.pm-danger:hover {
	background: var(--down-bg);
	color: var(--down);
}
.pm-danger:hover svg {
	color: var(--down);
}
@media (max-width: 600px) {
	.profile-id {
		display: none;
	}
	.profile-btn {
		padding: 4px;
	}
}
.who {
	color: var(--muted);
	font-size: 12px;
}

.main {
	padding: 8px 10px 24px 0px;
	min-width: 0;
	max-width: 100%;
}
.view:not(.trade-view) {
	max-width: 1180px;
	margin: 18px auto 0;
}

/* ----- Ticker strip ----- */
.tstrip {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	height: 32px;
	flex: none;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: var(--cardcolor);
}
/* Infinite marquee: the track holds two identical copies of the markets and slides
   to -50%, looping seamlessly. Edges fade via a mask; hover pauses for clicking. */
.ticker {
	display: flex;
	align-items: stretch;
	white-space: nowrap;
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 2.5%,
		#000 97.5%,
		transparent
	);
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 2.5%,
		#000 97.5%,
		transparent
	);
}
.tk-track {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: stretch;
	flex: none;
	will-change: transform;
	animation: tk-marquee 60s linear infinite;
}
.tstrip:hover .tk-track {
	animation-play-state: paused;
}
@keyframes tk-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.tk-track {
		animation: none;
	}
	.ticker {
		overflow-x: auto;
	}
}
/* Each market is a discrete, full-height cell — hover + accent-underlined active
   state — instead of one undifferentiated run of text. */
.tk-item {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 0 15px;
	white-space: nowrap;
	cursor: pointer;
	border-right: 1px solid var(--border);
	transition: background 0.12s;
}
.tk-item:hover {
	background: var(--card-2);
}
.tk-item.active {
	background: var(--accent-dim);
	box-shadow: inset 0 -2px 0 var(--accent);
}
.tk-sym {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--txt-2);
	letter-spacing: 0.01em;
}
.tk-item:hover .tk-sym {
	color: var(--txt);
}
.tk-item.active .tk-sym {
	color: var(--accent);
}
.tk-px {
	font-family: var(--num);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--txt);
	font-variant-numeric: tabular-nums;
}
.tk-chg {
	font-family: var(--num);
	font-size: 10.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.tk-chg.up {
	color: var(--up);
}
.tk-chg.down {
	color: var(--down);
}

/* ============================== TRADE VIEW ============================== */
.trade-view {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.trade-grid {
	display: grid;
	grid-template-columns: minmax(380px, 1fr) var(--book-w, 268px) var(
			--ticket-w,
			308px
		);
	gap: 11px;
	align-items: stretch;
}
/* Drag handles sit in the gutters; the chart column flexes to absorb the change. */
.trade-grid .book-card,
.trade-grid .ticket {
	position: relative;
}
.col-resizer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -7px;
	width: 14px;
	cursor: col-resize;
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}
.col-resizer::before {
	content: "";
	width: 3px;
	height: 44px;
	border-radius: 3px;
	background: var(--border-2);
	transition:
		background 0.14s ease,
		height 0.14s ease;
}
.col-resizer:hover::before,
.col-resizer.dragging::before {
	background: var(--accent);
	height: 84px;
	box-shadow: 0 0 12px rgba(47, 211, 160, 0.4);
}
.account-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 308px;
	gap: 11px;
	align-items: stretch;
}
@media (max-width: 1280px) {
	.account-row {
		grid-template-columns: 1fr;
	}
}
/* NOTE: trade-grid + book responsive rules live at END-OF-FILE so they beat the
   base .trade-grid/.book-card/.book-side rules in source order (media queries
   don't add specificity). Editing them here would be silently overridden. */

/* ----- Coinbar ----- */
.coinbar {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 13px 8px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--cardcolor);
}
.coinbar::-webkit-scrollbar {
	display: none;
}
.mkt-sel {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 0 18px 0 12px;
	position: relative;
}
.mkt-btn {
	background: none;
	border: none;
	color: var(--txt);
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 6px;
	border-radius: 9px;
	transition: 0.14s;
}
.mkt-btn:hover {
	background: var(--card-2);
}
.mkt-btn .muted {
	font-size: 11px;
}
.perp-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--blue);
	background: var(--blue-dim);
	padding: 3px 6px;
	border-radius: 7px;
}
.lev-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--txt-2);
	background: var(--card-2);
	border: 1px solid var(--border-2);
	padding: 2px 6px;
	border-radius: 7px;
}
.coinstats {
	display: flex;
	align-items: center;
	gap: 0;
}
.stat-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	white-space: nowrap;
	padding: 0 17px;
	border-left: 1px solid var(--border);
}
.stat-block:first-child {
	padding-left: 14px;
}
.stat-block .lab {
	font-size: 9.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.stat-block b {
	font-family: var(--num);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--txt);
}
/* The mark price is the hero number of the header — large, bold, flashes live. */
#ms-mark {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	border-radius: 7px;
	padding: 0 2px;
}
/* 24h change reads as a directional, colour-tinted pill. */
#ms-change {
	align-self: flex-start;
	display: inline-block;
	padding: 2px 8px;
	border-radius: 7px;
	font-size: 12px;
}
#ms-change.up {
	color: var(--up);
	background: var(--up-bg);
}
#ms-change.down {
	color: var(--down);
	background: var(--down-bg);
}
.flash-up {
	animation: flash-up 0.5s ease-out;
}
.flash-down {
	animation: flash-down 0.5s ease-out;
}
@keyframes flash-up {
	0% {
		color: var(--up);
		background: var(--up-bg);
	}
	100% {
		background: transparent;
	}
}
@keyframes flash-down {
	0% {
		color: var(--down);
		background: var(--down-bg);
	}
	100% {
		background: transparent;
	}
}
/* Feed status reads as a live pill: a glowing dot in the status colour
   (green when fresh, amber otherwise) beside the label. */
.health {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 650;
	color: var(--warn);
}
.health::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 7px currentColor;
}
.health.FRESH,
.health.fresh {
	color: var(--up);
}
.pill {
	font-size: 10.5px;
	font-weight: 650;
	padding: 4px 10px;
	border-radius: 8px;
}
.pill.ok {
	color: var(--up);
	background: var(--up-bg);
}
.pill.warn {
	color: var(--warn);
	background: rgba(240, 164, 41, 0.12);
}
.pill.halt {
	color: var(--down);
	background: var(--down-bg);
}
.pill.down {
	color: var(--down);
	background: var(--down-bg);
}

/* ----- Market picker ----- */
/* Fixed (viewport-relative) so no overflow:hidden ancestor can clip it — the
   panel is positioned at the button via JS on open. */
.mkt-panel {
	position: fixed;
	z-index: 9000;
	width: min(1000px, 80vw);
	max-width: 80vw;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--cardcolor);
	border: 1px solid var(--border-2);
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.mkt-cats {
	display: flex;
	gap: 6px;
	margin: 0 0 8px;
	flex-wrap: wrap;
}
.mkt-cats button {
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	padding: 4px 11px;
	border-radius: 999px;
	cursor: pointer;
}
.mkt-cats button.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #001;
	font-weight: 600;
}
.tag-perp,
.tag-spot {
	font-size: 9px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 4px;
	letter-spacing: 0.04em;
}
.tag-perp {
	background: rgba(80, 170, 255, 0.16);
	color: #6cb6ff;
}
.tag-spot {
	background: rgba(120, 220, 160, 0.16);
	color: #6fd99a;
}
.mkt-panel input {
	margin: 0 0 10px;
}
.mkt-panel .tbl th {
	position: sticky;
	top: 0;
	background: var(--card);
}
.mkt-panel tbody tr {
	cursor: pointer;
	transition: background 0.1s;
}
.mkt-panel tbody tr:hover {
	background: var(--hover);
}

/* ----- Chart ----- */
.chart-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px 10px;
	min-height: 520px;
}
.chart-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: none;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--border);
}
.ivals {
	display: flex;
	gap: 2px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 3px;
}
.ival {
	padding: 5px 11px;
	border: none;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: 0.14s;
}
.ival.active {
	background: var(--accent-dim);
	color: var(--accent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.ival:hover:not(.active) {
	color: var(--txt-2);
	background: var(--card-2);
}
.ind-btn,
.ptab {
	padding: 5px 11px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: 0.14s;
}
.ind-btn:hover {
	color: var(--txt-2);
	border-color: var(--border-2);
}
.ohlc-legend,
.ohlc {
	font-family: var(--num);
	font-size: 11px;
	color: var(--muted);
	display: flex;
	gap: 12px;
}
.ohlc b {
	color: var(--txt-2);
	font-weight: 600;
}
#chart-host {
	flex: 1 1 0;
	min-height: 440px;
	position: relative;
}
#chart-host > div,
#chart-host table {
	width: 100%;
	height: 100%;
}
.chart-mode {
	font-size: 10.5px;
	color: var(--faint);
}
.tv-attr {
	font-size: 10px;
	color: var(--faint);
}

/* ----- Order book + tape ----- */
.book-card {
	padding: 12px 12px 10px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.panel-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 8px;
	padding: 0 4px;
}
.ptab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 7px 12px;
	color: var(--muted);
	font-weight: 550;
	font-size: 12px;
	cursor: pointer;
	transition: 0.12s;
}
.ptab.active {
	color: var(--txt);
	border-bottom-color: var(--blue);
}
.ptab:hover:not(.active) {
	color: var(--txt-2);
}
.btab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 9px 14px;
	color: var(--muted);
	font: inherit;
	font-weight: 550;
	font-size: 12.5px;
	cursor: pointer;
	transition: 0.12s;
}
.btab.active {
	color: var(--txt);
	border-bottom-color: var(--blue);
}
.btab:hover:not(.active) {
	color: var(--txt-2);
}

.book-cols {
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	padding: 2px 8px 7px;
}
.book-cols span:nth-child(2),
.book-cols span:nth-child(3) {
	text-align: right;
}
/* The active panel grows to fill the card; the two depth sides split the free
   height so the ladder fills its column instead of leaving dead space below. */
#book-panel,
#tape-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.book-side {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}
/* Asks use normal column order: renderBook already lays the rows out highest-ask
   first (top) → lowest/best ask last (bottom, nearest the mid). Do NOT add
   column-reverse here — combined with that JS ordering it double-flips the sell
   side (best ask ends up at the top, away from the mid). */
/* Rows grow to evenly fill their side (capped, so a thin book never balloons),
   packing toward the mid price; the depth bar scales with the taller row. */
.book-side .px {
	flex: 1 1 0;
	min-height: 0;
	max-height: 40px;
}
.px {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	align-items: center;
	padding: 2.5px 9px;
	font-family: var(--num);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.08s;
	z-index: 0;
}
.px > span:nth-child(2),
.px > span:nth-child(3) {
	text-align: right;
	color: var(--txt-2);
}
.px > span:nth-child(3) {
	color: var(--muted);
}
.px:hover {
	background: var(--hover);
}
/* cumulative-depth bar (::after, behind the text) — a gradient that deepens
   toward the price column for a stronger, more readable book ladder. */
.px::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--depth, 0%);
	z-index: -1;
	transition: width 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.bids .px > span:first-child {
	color: var(--up);
	font-weight: 600;
}
.bids .px::after {
	background: linear-gradient(90deg, transparent 35%, rgba(43, 212, 155, 0.13));
}
.asks .px > span:first-child {
	color: var(--down);
	font-weight: 600;
}
.asks .px::after {
	background: linear-gradient(90deg, transparent 35%, rgba(246, 70, 93, 0.13));
}
.book-mid {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 8px;
	margin: 3px 0;
	border-top: 1px solid var(--border-2);
	border-bottom: 1px solid var(--border-2);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}
.book-mid .small {
	font-size: 11px;
	color: var(--muted);
	font-weight: 500;
}

.tape {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
}
.tape .px {
	grid-template-columns: 1fr 1fr 0.8fr;
}
.tape .px > span:last-child {
	color: var(--muted);
}

/* ----- Ticket ----- */
.ticket {
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
}
/* ---- Order ticket: a uniform vertical rhythm so it reads cleanly instead of
   cluttered. Each section is gap-separated (no ad-hoc margins), and every
   labelled field is a clean header (name left, value/hint right) with its control
   full-width beneath. ---- */
#perp-ticket,
#spot-ticket {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
#perp-ticket > label,
#spot-ticket > label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin: 0;
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 600;
}
/* The value / hint / inline action sits flush right on the header line; the
   control (input/select/slider) wraps to its own full-width line below. */
#perp-ticket > label > b,
#spot-ticket > label > b {
	color: var(--txt);
	font-weight: 700;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
#perp-ticket > label > b,
#perp-ticket > label > .muted,
#perp-ticket > label > .chip,
#spot-ticket > label > b,
#spot-ticket > label > .muted {
	margin-left: auto;
}
#perp-ticket > label > input,
#perp-ticket > label > select,
#perp-ticket > label > .pct-slider,
#spot-ticket > label > input,
#spot-ticket > label > select {
	flex-basis: 100%;
	margin-top: 3px;
}
/* The flex gap owns the spacing — drop the legacy per-element margins. */
#perp-ticket > .seg,
#spot-ticket > .seg,
#perp-ticket > .tk-acct,
#perp-ticket > .preview,
#perp-ticket > .tk-flags,
#perp-ticket > .err,
#perp-ticket > .twap-active:empty {
	margin: 0;
}
/* Snug the slider controls up to the label they belong to. */
#perp-ticket > .size-slider,
#perp-ticket > .lev-line {
	display: block;
	width: auto;
	flex: 0 0 auto;
	margin: -2px 9px 14px;
	padding: 0;
	align-self: stretch;
	box-sizing: border-box;
}
/* When the top-bar search drives the picker, drop the panel's own redundant search box. */
.mkt-panel.nav-driven #mkt-search {
	display: none;
}
/* centered market picker — search bar at top */
.mkt-panel #mkt-search {
	width: 100%;
	padding: 12px 16px;
	background: var(--inset);
	border: 1px solid var(--border-2);
	border-radius: 10px;
	color: var(--txt);
	font-size: 14px;
	margin: 0 0 12px;
}
.mkt-panel #mkt-search:focus {
	outline: none;
	border-color: var(--accent);
}
.mkt-panel.nav-driven {
	padding-top: 12px;
}
.tk-acct {
	margin: 0 !important;
}
.seg {
	display: grid;
	grid-auto-flow: column;
	gap: 3px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 100vmax;
	padding: 3px;
	margin-bottom: 12px;
}
.seg-btn {
	padding: 8px;
	border: none;
	background: none;
	color: var(--muted);
	font: inherit;
	font-weight: 600;
	font-size: 12.5px;
	border-radius: 100vmax;
	cursor: pointer;
	transition: 0.14s;
}
.seg-btn:hover:not(.active) {
	color: var(--txt-2);
}
.seg-btn.active {
	background: var(--raise);
	color: var(--txt);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
/* Order-type picker has 7 entries — wrap into a 4-column grid (2 rows) so each
   label ("Stop Mkt", "Take Mkt") stays readable instead of being squeezed into a
   single row of 7 columns. */
/* Order-type picker: 6 types in a clean 3×2 grid — readable labels, clear active
   state (accent-tinted, not just a grey raise), comfortable tap targets. */
.seg-types {
	grid-auto-flow: row;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	padding: 4px;
}
.seg-types .seg-btn {
	padding: 9px 4px;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.1px;
}
.seg-types .seg-btn.active {
	background: var(--accent-dim);
	color: var(--accent);
	box-shadow: none;
}
/* Bolder buy/sell: filled gradient when active, not just a tint. */
.side-seg .seg-btn {
	font-size: 13px;
	font-weight: 650;
}
#scale-rows label {
	display: block;
}
.side-seg .seg-btn.active[data-side="long"],
.side-seg #side-long.active,
.side-seg #sx-buy.active {
	background: var(--up);
	color: var(--on-accent);
	box-shadow: none;
}
.side-seg .seg-btn.active[data-side="short"],
.side-seg #side-short.active,
.side-seg #sx-sell.active {
	background: var(--down);
	color: #fff;
	box-shadow: none;
}
.tk-rows > div,
.preview > div,
.kv {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
}

/* Account info strip — two compact stats in a subtle panel. */
.tk-acct {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 12px 0;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.tk-acct-item {
	background: var(--bg);
	padding: 9px 12px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tk-acct-item .lab {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.tk-acct-item b {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.tk-size-lab {
	margin-bottom: 8px;
}

/* Design-system inputs: no native number spinners (chips/sliders drive values). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Quick-select chip rows (size + leverage). */
.size-chips,
.lev-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.size-chips {
	margin: -2px 0 14px;
}
.lev-chips {
	margin: 8px 0 4px;
}
.chip,
.size-chips button,
.lev-chips button {
	padding: 7px 0;
	border: 1px solid var(--border-2);
	background: var(--bg);
	color: var(--txt-2);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: 0.14s;
}
.chip:hover,
.size-chips button:hover,
.lev-chips button:hover {
	border-color: var(--border-3);
	color: var(--txt);
}
.chip.active,
.size-chips button.active,
.lev-chips button.active {
	background: var(--accent-dim);
	border-color: transparent;
	color: var(--accent);
}

/* Leverage number line — the control itself (the native range input is hidden).
   A track with a green progress fill, small checkpoint ticks (the labelled
   numbers), and a draggable "magnifying" handle whose bubble shows the live,
   zoomed leverage value. Press/drag anywhere on the line to set leverage. */
/* Leverage line — same compact, subtle look as the size/slippage slider. */
.lev-line {
	position: relative;
	height: 36px;
	margin: 2px 4px 0;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}
.lev-line .lev-baseline {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--border-2);
	border-radius: 5px;
}
.lev-line .lev-progress {
	position: absolute;
	top: 12px;
	left: 0;
	height: 3px;
	background: var(--accent);
	border-radius: 5px;
	transition: width 0.08s linear;
}
.lev-tick {
	position: absolute;
	top: 13px;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}
.lev-tick .tick-mark {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--raise);
	border: 1.5px solid var(--border-3);
	transition: 0.12s;
}
.lev-tick .tick-lab {
	position: absolute;
	top: 8px;
	font: inherit;
	font-size: 9px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
	transition: 0.12s;
}
.lev-tick.passed .tick-mark {
	border-color: var(--accent);
}
.lev-tick.active .tick-mark {
	background: var(--accent);
	border-color: var(--accent);
}
.lev-tick.active .tick-lab {
	color: var(--accent);
}
.lev-handle {
	position: absolute;
	top: 13px;
	left: 0;
	width: 13px;
	height: 13px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 3;
	transition: left 0.08s linear;
}
.lev-knob {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	transition: transform 0.1s;
}
.lev-line:hover .lev-knob,
.lev-line.dragging .lev-knob {
	transform: scale(1.18);
}
.lev-bubble {
	position: absolute;
	bottom: 13px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10.5px;
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.12s;
	pointer-events: none;
}
.lev-line:hover .lev-bubble,
.lev-line.dragging .lev-bubble {
	opacity: 1;
}
/* No transition while actively dragging so the handle tracks the pointer 1:1. */
.lev-line.dragging .lev-handle,
.lev-line.dragging .lev-progress {
	transition: none;
}
/* Inline price quick-fill (e.g. "Mark") inside a label. */
.px-fill {
	float: right;
	padding: 2px 9px;
	font-size: 10.5px;
}

/* Order summary — highlighted liquidation row + tidy rows. */
.preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0;
	padding: 14px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 12px;
}
.preview span {
	color: var(--muted);
}
.preview b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.preview .pv-liq-row {
	padding-bottom: 10px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--border);
}
.preview .pv-liq-row span {
	color: var(--warn);
	font-weight: 600;
}
.preview .pv-liq-row b {
	color: var(--warn);
	font-size: 14px;
}
.tk-flags {
	display: flex;
	gap: 16px;
	margin: 12px 0 8px;
}
.chk {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--txt-2);
	font-size: 12px;
	margin: 0;
}
/* Reduce-only guidance: a disabled flag (no position to reduce) and the locked
   side toggle (side forced to the closing direction while reduce-only is on). */
.chk.disabled {
	opacity: 0.45;
	pointer-events: none;
}
.seg-btn.locked {
	opacity: 0.4;
	pointer-events: none;
}

/* Active TWAP orders — compact progress cards under the ticket. */
.twap-active {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.twap-active:empty {
	display: none;
}
.twap-hd {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.twap-row {
	background: var(--raise);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
}
.twap-row-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
	font-weight: 650;
}
.twap-bar {
	height: 5px;
	background: var(--bg);
	border-radius: 4px;
	overflow: hidden;
	margin: 6px 0 4px;
}
.twap-bar i {
	display: block;
	height: 100%;
	background: var(--accent);
	border-radius: 4px;
	transition: width 0.3s;
}
.btn.tiny {
	padding: 3px 8px;
	font-size: 11px;
}

/* ---- TP / SL: chart buttons, drag tooltip, manager modal ---- */
.chart-card {
	position: relative;
} /* anchor the floating +TP/+SL overlay */
.tpsl-chart-btns {
	position: absolute;
	top: 52px;
	right: 18px;
	z-index: 6;
	display: flex;
	gap: 6px;
}
.tpsl-chart-btns.hidden {
	display: none;
}
/* Portfolio Activity/Trades sub-tabs (compact toggle in the activity header). */
.pf-activity-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.pf-feed-tabs {
	display: inline-flex;
	width: auto;
	gap: 4px;
	background: var(--raise);
	padding: 3px;
}
.pf-feed-tabs .seg-btn {
	padding: 5px 14px;
	font-size: 12px;
}
/* Flex column capped at the viewport: header (✕) pinned at top, body scrolls,
   Cancel/Done pinned at bottom — so adding many triggers never pushes the
   controls off-screen. */
.modal.tpsl-modal {
	width: 740px;
	max-height: 88vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.tpsl-head {
	flex: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 22px 22px 14px;
}
.tpsl-head-txt {
	min-width: 0;
}
.tpsl-head .modal-title {
	margin-bottom: 5px;
}
.tpsl-head .tpsl-sub {
	margin: 0;
}
.tpsl-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 2px 22px 20px;
}
.modal.tpsl-modal .modal-actions {
	flex: none;
	padding: 14px 22px;
	border-top: 1px solid var(--border);
	margin: 0;
}
.modal-x {
	flex: none;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	color: var(--muted);
	font-size: 13px;
	cursor: pointer;
	transition: 0.14s;
}
.modal-x:hover {
	background: var(--raise);
	color: var(--txt);
	border-color: var(--border-2);
}
.tpsl-sub {
	margin: -8px 0 16px;
	font-size: 12px;
	line-height: 1.5;
}
/* Position summary strip — the trade you're protecting, at a glance. */
.tpsl-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 11px 4px;
	margin-bottom: 16px;
}
.tps-stat {
	flex: 1 1 0;
	min-width: 72px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 0 14px;
	border-right: 1px solid var(--border);
}
.tps-stat:last-child {
	border-right: none;
}
.tps-stat span {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	font-weight: 600;
}
.tps-stat b {
	font-family: var(--num);
	font-size: 13px;
	font-weight: 600;
	color: var(--txt);
}
.tps-stat b.up {
	color: var(--up);
}
.tps-stat b.down {
	color: var(--down);
}
/* Active triggers list */
.tpsl-legs-wrap {
	margin-top: 20px;
}
.tpsl-legs-h {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 8px;
}
.tpsl-legs {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.tpsl-leg {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	font-size: 12px;
}
.tpsl-leg .tpsl-price {
	font-family: var(--num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.tpsl-leg .btn {
	margin-left: auto;
}
.tpsl-badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: 7px;
}
.tpsl-badge.tp {
	background: var(--up-bg);
	color: var(--up);
}
.tpsl-badge.sl {
	background: var(--down-bg);
	color: var(--down);
}
/* Two self-contained vertical cards — clean, consistent rhythm, full-width Add. */
.tpsl-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.tpsl-card {
	display: flex;
	flex-direction: column;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px;
}
.tpsl-card.tp {
	border-top: 2px solid var(--up);
}
.tpsl-card.sl {
	border-top: 2px solid var(--down);
}
.tpsl-card.full {
	opacity: 0.6;
}
.tpsl-card-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
}
.tpsl-card-head b {
	font-size: 14px;
	font-weight: 650;
	color: var(--txt);
}
.tpsl-left {
	margin-left: auto;
	font-size: 10.5px;
	color: var(--muted);
	font-weight: 500;
}
.tpsl-fld-lab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 9px;
}
.tpsl-fld-lab b {
	font-family: var(--num);
	font-size: 11px;
	color: var(--txt-2);
	letter-spacing: 0;
}
.tpsl-size-lab {
	margin-top: 20px;
}
.tpsl-px-input {
	width: 100%;
	font-family: var(--num);
	font-size: 16px;
	font-weight: 600;
	padding: 11px 13px;
}
.tpsl-hint {
	font-size: 10.5px;
	color: var(--muted);
	margin-top: 8px;
}
.tpsl-card .pct-slider {
	margin-top: 4px;
}
.tpsl-prev-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 11px;
	padding: 12px 14px;
	margin: 22px 0 16px;
}
.tpsl-prev-box span {
	font-size: 11px;
	color: var(--muted);
}
.tpsl-prev-b {
	font-family: var(--num);
	font-size: 15px;
	font-weight: 700;
}
.tpsl-prev-b.muted {
	color: var(--muted);
}
.tpsl-prev-b.up {
	color: var(--up);
}
.tpsl-prev-b.down {
	color: var(--down);
}
.tpsl-card .btn.wide {
	width: 100%;
	padding: 11px;
	font-size: 13px;
	margin-top: auto;
}
.tpsl-fullmsg {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
	padding: 8px 0;
}
@media (max-width: 700px) {
	.modal.tpsl-modal {
		width: 100%;
	}
	.tpsl-cards {
		grid-template-columns: 1fr;
	}
}
/* Leverage badge on position rows */
.pos-side {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pos-lev {
	font-family: var(--num);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--txt-2);
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 1px 5px;
	text-transform: uppercase;
	white-space: nowrap;
}
/* The leverage-style % slider used in the TP/SL cards. */
/* Compact, subtle slider (shared look for size / slippage / leverage). Thin track,
   small knob, tiny checkpoint labels, and a value bubble that only appears on
   hover/drag — the resting value already shows in the field header above. */
.pct-slider {
	position: relative;
	height: 36px;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}
.size-slider,
#slip-slider {
	margin: 2px 4px 0;
}
.pct-slider .ps-baseline {
	position: absolute;
	top: 12px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--border-2);
	border-radius: 5px;
}
.pct-slider .ps-progress {
	position: absolute;
	top: 12px;
	left: 0;
	height: 3px;
	background: var(--accent);
	border-radius: 5px;
}
.ps-tick {
	position: absolute;
	top: 13px;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}
.ps-tick .ps-mark {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--raise);
	border: 1.5px solid var(--border-3);
}
.ps-tick .ps-lab {
	position: absolute;
	top: 8px;
	font-size: 9px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.ps-tick.passed .ps-mark {
	border-color: var(--accent);
}
.ps-tick.active .ps-lab {
	color: var(--accent);
}
.ps-handle {
	position: absolute;
	top: 13px;
	left: 0;
	width: 13px;
	height: 13px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 3;
}
.ps-knob {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	transition: transform 0.1s;
}
.pct-slider:hover .ps-knob,
.pct-slider.dragging .ps-knob {
	transform: scale(1.18);
}
.ps-bubble {
	position: absolute;
	bottom: 13px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10.5px;
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.12s;
	pointer-events: none;
}
.pct-slider:hover .ps-bubble,
.pct-slider.dragging .ps-bubble {
	opacity: 1;
}
/* Hover-to-cancel ✕ beside a TP/SL line on the chart. */
.tpsl-line-x {
	position: absolute;
	right: 58px;
	z-index: 7;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--down);
	background: var(--card);
	color: var(--down);
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	padding: 0;
}
.tpsl-line-x.hidden {
	display: none;
}

/* ---- Custom checkbox & radio (no browser defaults) ---- */
/* inline-flex centers the check/dot perfectly regardless of border/box-sizing. */
input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--border-3);
	background: var(--bg);
	cursor: pointer;
	transition: border-color 0.14s;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
input[type="checkbox"] {
	border-radius: 7px;
}
input[type="radio"] {
	border-radius: 50%;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
	border-color: var(--accent);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
	content: "";
	width: 4px;
	height: 8px;
	margin-top: -1px;
	border: solid var(--on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type="radio"]:checked::after {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--on-accent);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--accent-dim);
}
.tpsl-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-bottom: 6px;
}
/* ---- Custom range slider: gray track, lime fill (--pct set by JS), lime thumb ---- */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	padding: 0;
	margin: 13px 0 5px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	background: var(--raise);
	background-image: linear-gradient(var(--accent), var(--accent));
	background-repeat: no-repeat;
	background-size: var(--pct, 0%) 100%;
	transition: background-size 0.05s linear;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	/* Center the 16px thumb on the 6px track: (6-16)/2 = -5px. Without this webkit
     top-aligns an appearance:none thumb so it visually hangs below the groove. */
	margin-top: -5px;
	background: #fff;
	border: 3px solid var(--accent);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
	cursor: grab;
	transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:active {
	transform: scale(1.15);
	cursor: grabbing;
}
input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--accent);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
	cursor: grab;
}
input[type="range"]::-moz-range-progress {
	background: var(--accent);
	height: 6px;
	border-radius: 999px;
}
input[type="range"]:focus {
	outline: none;
}
input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 5px var(--accent-dim);
}

/* The native range slider is hidden — the leverage number line below it (with its
   draggable handle) is the actual control. #lev is kept in the DOM only as the
   value store that the rest of the app reads/writes. */
#lev {
	display: none;
}

/* ----- Buy / Sell place button gets the side color ----- */
#place.long,
.btn.place-long {
	background: var(--up);
	color: var(--on-accent);
	box-shadow: none;
	border: none;
}
#place.long:hover {
	background: var(--up-strong);
}
#place.short,
.btn.place-short {
	background: var(--down);
	color: #fff;
	box-shadow: none;
	border: none;
}

/* ============================== TABLES ============================== */
.tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.tbl thead {
	position: relative;
	z-index: 10;
}
.tbl th {
	text-align: left;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	padding: 9px 11px;
	border-bottom: 1px solid var(--border-2);
	white-space: nowrap;
}
.tbl td {
	padding: 10px 11px;
	border-bottom: 1px solid var(--border);
	color: var(--txt-2);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.tbl tbody tr {
	transition: background 0.08s;
}
.tbl tbody tr:hover {
	background: var(--card-2);
}
.tbl tbody tr:last-child td {
	border-bottom: none;
}
.tbl td b {
	color: var(--txt);
	font-weight: 600;
}
.tbl td b {
	color: var(--txt);
	font-weight: 600;
}
.state {
	font-size: 10.5px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 7px;
	background: var(--card-2);
	color: var(--txt-2);
}
.state.FILLED,
.state.filled {
	color: var(--up);
	background: var(--up-bg);
}
.state.OPEN,
.state.open {
	color: var(--blue);
	background: var(--blue-dim);
}
.state.CANCELLED,
.state.canceled,
.state.REJECTED,
.state.rejected,
.state.scheduledCancel,
.state.iocCancelRejected,
.state.marginCanceled {
	color: var(--down);
	background: var(--down-bg);
}

/* ----- Bottom panel (orders/positions) ----- */
.bottom-card {
	padding: 0;
}
.bottom-card .panel-tabs {
	display: flex;
	width: 100%;
	gap: 4px;
	align-items: center;
	padding: 4px;
	margin-bottom: 8px;
}
.btpane {
	padding: 4px 4px 8px;
	max-height: 340px;
	overflow-y: auto;
}
.pane-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 8px 8px 4px;
	flex-wrap: wrap;
}
.pane-actions .muted {
	font-size: 11px;
}

/* ----- Account panel (trade sidebar) ----- */
.acct-info {
	padding: 14px;
}
.acct-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
}

/* ============================== GENERIC LAYOUT ============================== */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}
.wide-cards {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.plan-cards,
.stat {
	display: grid;
	gap: 12px;
}
@media (max-width: 900px) {
	.cols {
		grid-template-columns: 1fr;
	}
}
.stat-block.big b,
.stat b {
	font-size: 22px;
	font-weight: 680;
	letter-spacing: -0.02em;
}
.card.stat.hero {
	background: var(--up-bg);
	border-color: color-mix(in srgb, var(--up) 30%, var(--border));
}
.card.stat.hero b {
	font-size: 30px;
}

/* ============================== PORTFOLIO ============================== */
.pf-hero {
	padding: 22px 24px;
	margin-bottom: 14px;
	background:
		radial-gradient(
			900px 300px at 100% 0%,
			rgba(47, 211, 160, 0.06),
			transparent 60%
		),
		linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 120px),
		var(--card);
}
.pf-hero-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.pf-hero-lab {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.pf-hero-val {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 6px 0 8px;
	line-height: 1;
}
.pf-hero-chg {
	font-size: 12.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.chg-badge {
	font-weight: 700;
	font-size: 12.5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--card-2);
	color: var(--txt-2);
}
.chg-badge.up {
	color: var(--up);
	background: var(--up-bg);
}
.chg-badge.down {
	color: var(--down);
	background: var(--down-bg);
}
.pf-hero-actions {
	display: flex;
	gap: 8px;
}
.pf-eq-chart {
	height: 200px;
	margin-top: 8px;
}
.pf-charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 8px;
}
@media (max-width: 900px) {
	.pf-charts {
		grid-template-columns: 1fr;
	}
}
.pf-chart-card {
	padding: 16px 18px;
}
.pf-chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.pf-chart-head h3 {
	margin: 0;
}
.pf-chart-head b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pf-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 8px;
}
@media (max-width: 900px) {
	.pf-metrics {
		grid-template-columns: repeat(2, 1fr);
	}
}
.pf-metric {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
}
.pf-metric .lab {
	font-size: 10.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.pf-metric b {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.pf-metric .sub {
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.alloc-bar {
	display: flex;
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--raise);
	margin: 4px 0 2px;
}
.alloc-free {
	background: var(--accent);
}
.alloc-used {
	background: var(--warn);
}
.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.dot-free {
	background: var(--accent);
}
.dot-used {
	background: var(--warn);
}

.pf-sec-head {
	margin: 22px 0 10px;
}
.pf-sec-head h2 {
	margin: 0;
}
.pf-table {
	padding: 4px 6px;
}
.pf-empty {
	padding: 28px 14px;
	text-align: center;
	color: var(--muted);
}
.pf-empty a {
	color: var(--accent);
	font-weight: 600;
}

/* Activity feed */
.pf-feed-card {
	padding: 6px 8px;
	overflow: hidden;
}
.feed {
	display: flex;
	flex-direction: column;
}
.feed-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 12px;
	border-radius: var(--radius-sm);
	transition: background 0.12s;
}
.feed-row:hover {
	background: var(--card-2);
}
.feed-row + .feed-row {
	border-top: 1px solid var(--border);
}
.feed-row:hover + .feed-row,
.feed-row:hover {
	border-top-color: transparent;
}
.feed-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
}
.i-in {
	background: var(--accent-dim);
	color: var(--accent);
}
.i-out {
	background: var(--down-bg);
	color: var(--down);
}
.i-pending {
	background: var(--card-2);
	color: var(--muted);
	border: 1px solid var(--border-2);
}
.i-trade {
	background: rgba(43, 212, 155, 0.12);
	color: var(--up);
}
.i-order {
	background: var(--card-2);
	color: var(--txt-2);
	border: 1px solid var(--border-2);
}
.feed-body {
	flex: 1;
	min-width: 0;
}
.feed-title {
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}
.feed-ref {
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	background: var(--card-2);
	padding: 1px 7px;
	border-radius: 7px;
}
.feed-sub {
	font-size: 11.5px;
	margin-top: 2px;
}
.feed-meta {
	text-align: right;
	flex: none;
}
.feed-amt {
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-height: 1em;
}
.feed-time {
	font-size: 11px;
	margin-top: 2px;
}

/* ============================== COIN ICONS ============================== */
/* A logo sits over a coloured monogram; if the logo 404s/decode-fails the
   <img> removes itself (app.js onerror) and the monogram shows through, so a
   coin is never iconless. --ic-bg/--ic-fg are set inline per symbol. */
.coin-ico {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ic-bg, var(--card-2));
	vertical-align: middle;
}
.coin-ico .coin-mono {
	font-size: 8.5px;
	font-weight: 700;
	line-height: 1;
	color: var(--ic-fg, var(--txt-2));
	text-transform: uppercase;
}
.coin-ico img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.coin-ico.sm {
	width: 16px;
	height: 16px;
}
.coin-ico.sm .coin-mono {
	font-size: 7.5px;
}
.coin-ico.lg {
	width: 26px;
	height: 26px;
}
.coin-ico.lg .coin-mono {
	font-size: 11px;
}
.coin-cell {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.vsel-val .coin-ico {
	margin-right: 8px;
}

/* ============================== FUNDS ============================== */
/* Wallet hero — total equity beside a breakdown of where the money sits. */
.funds-wallet {
	padding: 20px 24px;
	margin-bottom: 14px;
	display: grid;
	grid-template-columns: minmax(200px, 260px) 1fr;
	gap: 24px;
	align-items: center;
	background: var(--cardcolor);
}
.fw-equity {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-right: 24px;
	border-right: 1px solid var(--border);
}
.fw-lab {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.fw-hero {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 5px 0 3px;
}
.fw-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 30px;
}
.fw-metric {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 96px;
}
.fw-metric .lab {
	font-size: 10.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.fw-metric b {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.fw-metric .sub {
	font-size: 10.5px;
}
/* inline text-button (e.g. Funds "+ convert balance" under AI credits) */
.linklike {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--accent);
	font: inherit;
	font-size: 10.5px;
}
.linklike:hover {
	text-decoration: underline;
}
.fw-spot {
	grid-column: 1 / -1;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
	.funds-wallet {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.fw-equity {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding: 0 0 14px;
	}
}

/* Deposit + Withdraw are the headline operations (large, weighted, lifted
   cards); Spot↔Perp + Fees/limits are the lighter secondary row below. */
.funds-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}
.fa-primary,
.fa-secondary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.fa-primary,
	.fa-secondary {
		grid-template-columns: 1fr;
	}
}
.fund-card {
	display: flex;
	flex-direction: column;
}

/* Fees & limits reference list */
.fee-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fee-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
	font-size: 12.5px;
}
.fee-list li:last-child {
	border-bottom: none;
}
.fee-list li span {
	color: var(--txt-2);
}
.fee-list li b {
	color: var(--txt);
	font-weight: 600;
}
.fee-list li b.up {
	color: var(--up);
}
.fc-icon.info {
	color: var(--txt-2);
	background: var(--card-2);
}
.fc-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.fc-head h3 {
	margin: 0;
}
.fc-icon {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fc-icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Headline weight: bigger padding, larger icon + title, a lifted surface, and
   trailing helper text anchored to the bottom so equal-height cards fill. */
.fund-card.primary {
	padding: 22px 22px 20px;
	background: var(--card-2);
	border-color: var(--border-2);
	border-radius: var(--radius);
}
.fund-card.primary .fc-head {
	margin-bottom: 18px;
	gap: 12px;
}
.fund-card.primary .fc-head h3 {
	font-size: 15.5px;
	letter-spacing: -0.01em;
}
.fund-card.primary .fc-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
}
.fund-card.primary .fc-icon svg {
	width: 20px;
	height: 20px;
}
.fund-card .fc-foot {
	margin-top: auto;
}
.fund-card.primary .fc-foot hr {
	margin-top: 18px;
}
.fc-icon.dep {
	color: var(--up);
	background: var(--up-bg);
}
.fc-icon.wd {
	color: var(--accent);
	background: var(--accent-dim);
}
.fc-icon.send {
	color: var(--accent);
	background: var(--accent-dim);
}
.fc-icon.xfer {
	color: var(--txt-2);
	background: var(--card-2);
}
.fc-icon.alloc {
	color: var(--accent);
	background: var(--accent-dim);
}
.fb-alloc {
	display: flex;
	justify-content: center;
	padding: 6px 0 2px;
}
.fb-alloc .rs-donut {
	gap: 18px;
}
/* markets list: relative-volume bar behind each 24h volume number */
.volc {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 18px;
}
.volb {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 15px;
	max-width: 100%;
	background: var(--accent-dim);
	border-radius: 4px;
	pointer-events: none;
}
.voln {
	position: relative;
	z-index: 1;
}
.fc-note {
	margin-top: 8px;
}
.fund-card .err:empty,
.fund-card .err {
	margin-top: 8px;
}

/* Helper copy under the fund forms — muted body, brighter highlighted terms */
.fund-note {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0 0 12px;
}
.fund-note b {
	color: var(--txt);
	font-weight: 600;
}

/* Only-USDC / correct-network warning — wrong token or chain = lost funds */
.dep-warn {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: rgba(240, 164, 41, 0.1);
	border: 1px solid rgba(240, 164, 41, 0.34);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin-bottom: 14px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--txt-2);
}
.wd-avail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 12px;
	margin-bottom: 10px;
}
.wd-avail-row span {
	font-size: 11px;
	color: var(--muted);
}
.wd-avail-row b {
	font-family: var(--num);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--txt);
}
/* Multi-chain network picker — icon chips */
.chain-field {
	display: block;
	margin-bottom: 14px;
}
.chain-field-lab {
	display: block;
	font-size: 11px;
	color: var(--muted);
	margin-bottom: 8px;
}
.chain-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 7px;
}
.chain-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 7px 9px;
	cursor: pointer;
	transition: 0.13s;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--txt-2);
	text-align: left;
	min-width: 0;
}
.chain-chip:hover {
	border-color: var(--border-2);
	color: var(--txt);
}
.chain-chip.active {
	border-color: var(--accent);
	background: var(--accent-dim);
	color: var(--txt);
}
.chain-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chain-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	flex: none;
	overflow: hidden;
}
.chain-ico svg {
	width: 22px;
	height: 22px;
	display: block;
}
/* copyable tx hash in the withdrawals list */
.tx-copy {
	cursor: pointer;
	color: var(--txt-2);
	font-family: var(--mono);
	font-size: 11.5px;
}
.tx-copy:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* withdrawals list: coin + chain logos inline in the Asset cell */
.wd-asset {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.wd-asset .chain-ico {
	width: 16px;
	height: 16px;
	border-radius: 5px;
}
.wd-asset .chain-ico svg {
	width: 16px;
	height: 16px;
}
/* Admin: per-user custodial deposit addresses */
.ud-addr {
	margin: 12px 0 16px;
}
.ud-addr-h {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 9px;
	display: flex;
	align-items: center;
}
.ud-addr-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 12px;
	margin-bottom: 7px;
}
.ud-addr-row .chain-ico {
	width: 24px;
	height: 24px;
}
.ud-addr-spacer {
	width: 24px;
	flex: none;
}
.ud-addr-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 0 160px;
	min-width: 0;
}
.ud-addr-lab {
	font-size: 12px;
	font-weight: 600;
	color: var(--txt);
	white-space: nowrap;
}
.ud-addr-sub {
	font-size: 10px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ud-addr-code {
	flex: 1 1 auto;
	font-family: var(--num);
	font-size: 11.5px;
	color: var(--txt-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.ud-addr-row .btn.tiny {
	flex: none;
}
.ud-addr-grp {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 700;
	margin: 13px 0 6px;
}
.ud-addr-grp:first-of-type {
	margin-top: 2px;
}
.dep-warn svg {
	flex: none;
	width: 16px;
	height: 16px;
	stroke: var(--warn);
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 1px;
}
.dep-warn b {
	color: var(--txt);
	font-weight: 650;
}

/* Scannable QR of the deposit address (Trust-Wallet style) */
.dep-qr-wrap {
	display: flex;
	justify-content: center;
	margin: 6px 0 16px;
}
.dep-qr {
	width: 156px;
	height: 156px;
	padding: 11px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dep-qr:empty {
	display: none;
}
.dep-qr svg {
	width: 100%;
	height: 100%;
	display: block;
	shape-rendering: crispEdges;
}

/* Copy-able deposit address */
.addr-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 8px 8px 11px;
}
.addr-box .addr {
	flex: 1;
	min-width: 0;
}
.addr-copy {
	flex: none;
	padding: 6px 13px;
	font-size: 11.5px;
}
.addr-copy.ok {
	color: var(--up);
	border-color: rgba(43, 212, 155, 0.4);
}

/* misc */
.seg.tif-row,
.ivals {
	flex-wrap: wrap;
}
.lab {
	color: var(--muted);
}
.borderless {
	border: none;
	background: none;
}
.admin-only[hidden] {
	display: none;
}
#ag-token-box {
	margin-top: 10px;
	padding: 10px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 9px;
}
.solvency-pill,
#solvency-pill {
	font-size: 11px;
}

/* ============================ HIP-4 OUTCOME MARKETS ======================== */
#outcome-panel {
	margin-top: 8px;
}
/* Outcome trade view — its own layout matching the perp grid: coinbar on top,
   then chart | order book | ticket. */
#outcome-panel {
	margin-top: 8px;
}
.oc-coinbar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px 20px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.oc-q {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	flex: 1 1 320px;
	min-width: 0;
}
.oc-coinstats {
	display: flex;
	gap: 22px;
	flex: none;
}
.oc-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.oc-stat .lab {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 600;
}
.oc-stat b {
	font-size: 15px;
	font-weight: 700;
}
.oc-state {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--up);
}
.oc-state.settled {
	color: var(--muted);
}

.oc-trade-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px 300px;
	gap: 8px;
	align-items: stretch;
}
@media (max-width: 1100px) {
	.oc-trade-grid {
		grid-template-columns: 1fr;
	}
}
.oc-chart-card {
	padding: 12px;
	display: flex;
	flex-direction: column;
	min-height: 460px;
}
#oc-chart-host {
	flex: 1;
	min-height: 0;
}
.oc-ticket {
	padding: 16px;
}

.oc-prob {
	margin-bottom: 10px;
}
.oc-prob-bar {
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--down-bg);
}
.oc-prob-bar i {
	display: block;
	height: 100%;
	width: 50%;
	background: linear-gradient(90deg, var(--up-strong), var(--up));
	border-radius: 999px;
	transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.oc-book-card {
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
}
.oc-book-h {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--txt);
	margin-bottom: 8px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.oc-book-cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
	padding: 0 8px 5px;
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
	border-bottom: 1px solid var(--border);
	margin-bottom: 3px;
}
.oc-book-cols span:nth-child(2),
.oc-book-cols span:nth-child(3) {
	text-align: right;
}
.oc-levels {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.oc-mid {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 8px;
	margin: 3px 0;
	border-top: 1px solid var(--border-2);
	border-bottom: 1px solid var(--border-2);
	font-size: 15px;
	font-weight: 700;
}
.oc-lvl {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
	padding: 3.5px 8px;
	font-size: 11.5px;
	cursor: pointer;
	border-radius: 7px;
	z-index: 0;
}
.oc-lvl:hover {
	background: var(--hover);
}
.oc-lvl::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: var(--d, 0%);
	z-index: -1;
	border-radius: 7px;
	transition: width 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.oc-lvl .op {
	font-weight: 600;
}
.oc-asks .oc-lvl .op {
	color: var(--down);
}
.oc-bids .oc-lvl .op {
	color: var(--up);
}
.oc-asks .oc-lvl::after {
	background: rgba(246, 70, 93, 0.15);
}
.oc-bids .oc-lvl::after {
	background: rgba(43, 212, 155, 0.15);
}
.oc-lvl .pq,
.oc-lvl .pt {
	text-align: right;
	color: var(--txt-2);
	font-variant-numeric: tabular-nums;
}
.oc-lvl .pt {
	color: var(--muted);
}
.oc-empty {
	color: var(--muted);
	font-size: 11.5px;
	padding: 6px 8px;
}

.oc-pos {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}
.oc-pos .lab {
	margin-bottom: 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 600;
}
.oc-pos-vals {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}
.oc-pos-actions {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.oc-pos-actions .btn {
	flex: 1;
	padding: 6px 4px;
	font-size: 11px;
}

.oc-side-seg {
	margin-bottom: 14px;
}
.oc-chips {
	display: flex;
	gap: 6px;
	margin: -4px 0 12px;
}
.oc-chips button {
	flex: 1;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
	border-radius: 9px;
	padding: 6px 0;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: 0.12s;
}
.oc-chips button:hover {
	border-color: var(--border-3);
	color: var(--txt);
}
.oc-cost {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--muted);
	margin: 12px 0;
	padding: 10px 12px;
	background: var(--card-2);
	border-radius: var(--radius-sm);
}
.oc-cost b {
	color: var(--txt);
	font-weight: 650;
}
#oc-submit {
	width: 100%;
}
.card-2 {
	background: var(--card-2);
}

/* ============================ TOASTS + MODAL =============================== */
/* Above .modal-back (12500) so alert toasts stay visible (and un-blurred) while a
   modal is open — otherwise the modal backdrop blurs them out of sight. */
#toast-host {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 13000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 240px;
	max-width: 380px;
	padding: 12px 15px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--txt);
	cursor: pointer;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
		var(--card-2);
	border: 1px solid var(--border-2);
	box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
	transform: translateX(120%);
	opacity: 0;
	transition:
		transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1),
		opacity 0.26s;
}
.toast.in {
	transform: translateX(0);
	opacity: 1;
}
.toast-ico {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 800;
}
.toast.error .toast-ico {
	background: var(--down-bg);
	color: var(--down);
}
.toast.ok .toast-ico {
	background: var(--up-bg);
	color: var(--up);
}
.toast.info .toast-ico {
	background: var(--accent-dim);
	color: var(--accent);
}
.toast.error {
	border-color: rgba(246, 70, 93, 0.4);
}
.toast-msg {
	line-height: 1.4;
}

.modal-back {
	position: fixed;
	inset: 0;
	z-index: 12500;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(8, 8, 8, 0.6);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.18s;
}
.modal-back.in {
	opacity: 1;
}
.modal {
	width: 360px;
	max-width: 100%;
	padding: 22px;
	border-radius: 16px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 120px),
		var(--card);
	border: 1px solid var(--border-2);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	transform: translateY(8px) scale(0.98);
	transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal-back.in .modal {
	transform: none;
}
.modal-title {
	font-size: 14px;
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
}
/* optional explanation line under a uiConfirm title */
.modal-body {
	font-size: 12.5px;
	line-height: 1.5;
	margin: -6px 0 16px;
}
.modal-input {
	width: 100%;
	margin: 0 0 16px;
}
.modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.modal-actions .btn {
	flex: 0 0 auto;
	padding: 9px 18px;
}

/* View-only trade gate (markets we cannot yet hedge, e.g. equities) */
.trade-gate {
	background: rgba(240, 164, 41, 0.1);
	border: 1px solid rgba(240, 164, 41, 0.34);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--txt-2);
}
.trade-gate b {
	color: var(--warn);
	font-weight: 650;
}
.btn.disabled,
.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Sub-category chips (second-level taxonomy under the active picker category) */
.mkt-subcats {
	display: flex;
	gap: 6px;
	margin: -2px 0 10px;
	flex-wrap: wrap;
}
.mkt-subcats button {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--muted);
	font: inherit;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	cursor: pointer;
	text-transform: capitalize;
	transition: 0.12s;
}
.mkt-subcats button:hover {
	color: var(--txt-2);
	border-color: var(--border-3);
}
.mkt-subcats button.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}

/* Builder-dex label tag (distinguishes xyz:TSLA from flx:TSLA, etc.) */
.dex-tag {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	background: var(--card-2);
	border: 1px solid var(--border);
	padding: 1px 5px;
	border-radius: 4px;
	vertical-align: middle;
}

/* Outcome multi-outcome option selector (pick a leg, e.g. a World Cup country) */
.oc-options {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.oc-opt-lbl {
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 600;
	margin-right: 4px;
}
.oc-opt {
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
	font: inherit;
	font-size: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	cursor: pointer;
	transition: 0.12s;
}
.oc-opt:hover {
	border-color: var(--border-3);
	color: var(--txt);
}
.oc-opt.active {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}
.oc-opt b {
	font-weight: 700;
	margin-left: 3px;
}

/* Outcome ticket Yes/No + Buy/Sell toggles */
.oc-side-seg .seg-btn.yes.active {
	background: var(--up-bg);
	color: var(--up);
	box-shadow: inset 0 -2px 0 var(--up);
}
.oc-side-seg .seg-btn.no.active {
	background: var(--down-bg);
	color: var(--down);
	box-shadow: inset 0 -2px 0 var(--down);
}
.oc-side-px {
	font-size: 11px;
	opacity: 0.8;
	margin-left: 3px;
}
.oc-dir-seg {
	margin-top: 8px;
}

/* Multi-outcome combined chart legend (each option a colored line) */
.oc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 8px;
	max-height: 64px;
	overflow-y: auto;
}
.oc-leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
	font: inherit;
	font-size: 11px;
	padding: 3px 9px;
	border-radius: 999px;
	cursor: pointer;
	transition: 0.12s;
}
.oc-leg:hover {
	border-color: var(--border-3);
	color: var(--txt);
}
.oc-leg.active {
	border-color: var(--accent);
	color: var(--txt);
}
.oc-leg i {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	flex: none;
}
.oc-leg b {
	color: var(--txt);
	font-weight: 700;
}

/* VIP / affiliate tier cards */
.vip-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}
@media (max-width: 760px) {
	.vip-cards {
		grid-template-columns: 1fr;
	}
}
.vip-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vip-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.vip-head .lab {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 500;
}
.vip-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--accent);
}
.vip-fees {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.vip-fees > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.vip-fees .lab {
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.vip-fees b {
	font-size: 15px;
	font-weight: 650;
	color: var(--txt);
}
.vip-prog {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.vip-prog-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--card-2);
	overflow: hidden;
}
.vip-prog-bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.3s ease;
}
.tbl tr.tier-active {
	background: rgba(47, 211, 160, 0.08);
}
.tbl tr.tier-active td:first-child b {
	color: var(--accent);
}
.addr-copy.ok {
	color: var(--up);
	border-color: var(--up);
}

/* Referral share: code + link + scannable QR */
.ref-share {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.ref-share-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ref-qr {
	flex: none;
	width: 108px;
	height: 108px;
	background: #fff;
	border-radius: 10px;
	padding: 8px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ref-qr svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ref-link {
	font-size: 11px;
}
@media (max-width: 640px) {
	.ref-share {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.ref-qr {
		align-self: center;
	}
}

/* Referred-by tag / add-a-code-later form */
.ref-by {
	margin-top: 14px;
	border-top: 1px solid var(--border);
	padding-top: 12px;
}
.ref-tag {
	font-size: 12px;
	color: var(--txt-2);
}
.ref-tag b {
	color: var(--accent);
}
.ref-add label {
	display: block;
	font-size: 10px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 7px;
}
.ref-add-row {
	display: flex;
	gap: 8px;
}
.ref-add-row input {
	flex: 1;
	min-width: 0;
	margin: 0;
}
.ref-add-msg {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	min-height: 14px;
}
.ref-add-msg.ok {
	color: var(--up);
}
.ref-add-msg.err {
	color: var(--down);
}
.ref-add-perm {
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* Account view */
#view-account .kv {
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
}
#view-account .kv:last-of-type {
	border-bottom: 0;
}
#view-account .card > h3 {
	margin: 0 0 6px;
}
#acct-signout {
	margin-top: 14px;
}
#pw-form label {
	margin-bottom: 10px;
}
#pw-form .btn {
	margin-top: 4px;
}

/* Danger zone: account deletion */
.danger-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-color: rgba(246, 70, 93, 0.35);
}
.danger-main {
	flex: 1;
	min-width: 0;
}
.danger-main h3 {
	color: var(--down);
	margin: 0 0 4px;
}
.danger-card .btn.danger {
	flex: none;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.danger-card {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ===== Veyra Copilot sidebar ============================================ */
.cp-launch {
	/* Bright + glowing on dark; deep + contrasty on light (overridden below). */
	--cp-fab-base: #6b46e5;
	--cp-fab-grad: conic-gradient(
		from 0deg,
		#8b5cf6,
		#4f8bff,
		#e458ff,
		#6366f1,
		#a855f7,
		#8b5cf6
	);
	--cp-fab-gloss: rgba(255, 255, 255, 0.4);
	--cp-fab-txt: #ffffff;
	--cp-fab-glow:
		0 4px 18px rgba(0, 0, 0, 0.35), 0 0 20px rgba(124, 92, 246, 0.5),
		0 0 34px rgba(79, 139, 255, 0.35);
	--cp-fab-glow-hi:
		0 6px 22px rgba(0, 0, 0, 0.4), 0 0 26px rgba(168, 85, 247, 0.7),
		0 0 48px rgba(88, 120, 255, 0.55), 0 0 70px rgba(228, 88, 255, 0.32);
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	height: 46px;
	width: 46px;
	padding: 0;
	border: none;
	border-radius: 100vmax;
	overflow: hidden;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--cp-fab-txt);
	background: var(--cp-fab-base);
	box-shadow: var(--cp-fab-glow);
	transition:
		width 0.32s cubic-bezier(0.22, 0.7, 0.24, 1),
		box-shadow 0.25s ease,
		transform 0.18s ease,
		opacity 0.18s ease;
}
html[data-theme="light"] .cp-launch {
	--cp-fab-base: #6b46e5;
	--cp-fab-grad: conic-gradient(
		from 0deg,
		#8b5cf6,
		#4f8bff,
		#e458ff,
		#6366f1,
		#a855f7,
		#8b5cf6
	);
	--cp-fab-gloss: rgba(255, 255, 255, 0.26);
	--cp-fab-txt: #ffffff;
	--cp-fab-glow:
		0 6px 18px rgba(80, 50, 180, 0.28), 0 0 16px rgba(124, 92, 246, 0.3);
	--cp-fab-glow-hi:
		0 8px 24px rgba(80, 50, 180, 0.35), 0 0 26px rgba(168, 85, 247, 0.5),
		0 0 46px rgba(88, 120, 255, 0.42);
}
/* animated "liquid" wash — a big conic gradient slowly rotating behind the icon,
   clipped to the pill via overflow:hidden. Pure CSS, no motion lib. */
.cp-launch::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 260px;
	height: 260px;
	background: var(--cp-fab-grad);
	animation: cp-liquid 7s linear infinite;
	z-index: 0;
}
/* glossy top-left highlight so it reads as a bead */
.cp-launch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		115% 88% at 28% 16%,
		var(--cp-fab-gloss),
		transparent 62%
	);
	z-index: 1;
	pointer-events: none;
}
.cp-launch-ic {
	position: relative;
	z-index: 2;
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
}
.cp-launch-ic svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
	animation: cp-tick 8s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.cp-launch-lbl {
	position: relative;
	z-index: 2;
	white-space: nowrap;
	font-weight: 650;
	font-size: 13.5px;
	letter-spacing: -0.01em;
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 0.2s ease 0.04s,
		transform 0.22s ease 0.04s;
}
.cp-launch:hover {
	width: 168px;
	transform: translateY(-2px);
	box-shadow: var(--cp-fab-glow-hi);
}
.cp-launch:hover .cp-launch-lbl {
	opacity: 1;
	transform: none;
	padding-right: 14px;
}
@keyframes cp-liquid {
	from {
		transform: translate(-50%, -50%) rotate(0);
	}
	to {
		transform: translate(-50%, -50%) rotate(1turn);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cp-launch::before {
		animation: none;
	}
}
/* The bottom-right launcher steps aside once the sidebar is open — the
   top-right nav toggle and the sidebar's own ✕ take over from there. */
body.cp-open .cp-launch {
	opacity: 0;
	transform: translateY(12px) scale(0.7);
	pointer-events: none;
}

/* Top-right AI toggle, mounted into the navbar's .nav-right */
.cp-navtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	flex: 0 0 auto;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
	cursor: pointer;
	transition: 0.14s;
}
.cp-navtoggle:hover {
	color: var(--accent);
	border-color: var(--border-2);
	background: var(--raise);
}
.cp-navtoggle.on {
	color: var(--on-accent);
	background: var(--accent);
	border-color: var(--accent);
}
.cp-navtoggle svg {
	display: block;
}

/* AI-credit chip (sidebar header) + buy modal + out-of-credits card */
.cp-credits {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 11px;
	border-radius: 100vmax;
	background: var(--cardcolor);
	border: 1px solid var(--border-2);
	color: var(--txt);
	font: 600 12px var(--mono, monospace);
	cursor: pointer;
	transition: 0.14s;
}
.cp-credits::before {
	content: "◆";
	color: var(--accent);
	font-size: 10px;
	margin-right: 1px;
}
.cp-credits.cp-credits-low::before {
	color: var(--down);
}
.cp-credits:hover {
	color: var(--txt);
	border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2));
}
.cp-credits.cp-credits-low {
	color: var(--down);
	border-color: var(--down);
}
.cp-credits.hidden {
	display: none;
}

/* Topbar credits chip — always-visible balance + the convert entry point */
.cp-navcredits {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 11px;
	border-radius: 10px;
	flex: 0 0 auto;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
	font: 600 12px var(--mono, monospace);
	cursor: pointer;
	transition: 0.14s;
}
.cp-navcredits:hover {
	color: var(--accent);
	border-color: var(--border-2);
	background: var(--raise);
}
.cp-navcredits.cp-credits-low {
	color: var(--down);
	border-color: var(--down);
}
.cp-navcredits.hidden {
	display: none;
}

/* One-way disclaimer inside the convert modal */
.cp-modal-oneway {
	font-size: 11px;
	color: var(--muted);
	margin-top: 10px;
	line-height: 1.45;
}

.cp-modal-back {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
}
.cp-modal {
	width: min(360px, 92vw);
	background: var(--panel, var(--card));
	border: 1px solid var(--border-2);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cp-modal-h {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
}
.cp-modal-note {
	font-size: 12px;
	color: var(--down);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 10px;
	background: color-mix(in srgb, var(--down) 12%, transparent);
}
.cp-modal-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted);
	padding: 3px 0;
}
.cp-modal-row b {
	color: var(--txt);
}
.cp-modal-l {
	display: block;
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 12px 0 5px;
}
.cp-modal-in {
	width: 100%;
	padding: 9px 11px;
	border-radius: 8px;
	box-sizing: border-box;
	background: var(--inset, var(--card-2));
	border: 1px solid var(--border);
	color: var(--txt);
	font: 600 15px var(--mono, monospace);
}
.cp-modal-quick {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}
.cp-modal-quick button {
	flex: 1;
	padding: 6px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 12px;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
}
.cp-modal-quick button:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.cp-modal-btns {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.cp-btn-ghost,
.cp-btn-go {
	flex: 1;
	padding: 9px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--border);
}
.cp-btn-ghost {
	background: transparent;
	color: var(--txt-2);
}
.cp-btn-go {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}
.cp-btn-go:hover {
	filter: brightness(1.05);
}

.cp-ooc {
	border: 1px solid var(--down);
	border-radius: 10px;
	padding: 12px;
	margin: 8px 0;
	background: color-mix(in srgb, var(--down) 8%, transparent);
}
.cp-ooc-t {
	font-weight: 700;
	font-size: 13px;
	color: var(--down);
	margin-bottom: 4px;
}
.cp-ooc-b {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 10px;
}
.cp-ooc .cp-btn-go {
	width: auto;
	flex: 0 0 auto;
	display: inline-block;
	padding: 7px 14px;
}

.cp-side {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 59;
	width: 400px;
	max-width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--panel) 96%, var(--accent) 4%) 0%,
		var(--panel) 90px
	);
	border-left: 1px solid var(--border-2);
	box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
	transform: translateX(102%);
	transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
	font-family: var(--ui);
}
.cp-side.cp-open {
	transform: translateX(0);
}
/* Sidebar is a pure overlay (position:fixed above the terminal). It never
   pushes or shrinks the page — no body padding shift at any width. */

.cp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 12px 11px;
	border-bottom: 1px solid var(--border);
	background: var(--panel);
}
.cp-title {
	font-weight: 650;
	font-size: 14px;
	color: var(--txt);
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.cp-title::before {
	content: "✦";
	color: var(--accent);
	font-size: 13px;
}
.cp-coin {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--txt-2);
	font-size: 10.5px;
	font-family: var(--mono);
	background: var(--tab-bg);
	border: 1px solid transparent;
	padding: 2px 9px;
	border-radius: 100vmax;
	letter-spacing: 0.05em;
}
.cp-coin::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
.cp-coin:empty {
	display: none;
}
.cp-head-actions {
	display: flex;
	gap: 4px;
	align-items: center;
}
.cp-ic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--muted);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	transition:
		background 0.13s,
		color 0.13s;
}
.cp-ic-btn:hover {
	background: var(--tab-bg);
	color: var(--txt);
}
/* Delete gets a red affordance on hover so it reads as destructive. */
.cp-ic-btn.cp-ic-danger:hover {
	background: color-mix(in srgb, var(--down) 16%, transparent);
	color: var(--down);
}
.cp-ic-btn svg {
	display: block;
}

.cp-sessions,
.cp-settings {
	border-bottom: 1px solid var(--border);
	padding: 10px 12px;
	max-height: 46vh;
	overflow: auto;
}
.cp-panel-h {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin: 0 0 8px;
}
.cp-empty {
	color: var(--muted);
	font-size: 12px;
	padding: 6px 2px;
}
.cp-srow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 8px;
	border-radius: 9px;
	cursor: pointer;
}
.cp-srow:hover {
	background: var(--card);
}
.cp-srow.active {
	background: var(--card-2);
}
.cp-stitle {
	flex: 1;
	font-size: 13px;
	color: var(--txt-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cp-srow.active .cp-stitle {
	color: var(--txt);
}
.cp-srow-actions {
	display: none;
	gap: 2px;
}
.cp-srow:hover .cp-srow-actions {
	display: flex;
}

.cp-toggle {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}
.cp-toggle span {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 13px;
	color: var(--txt);
}
.cp-toggle small {
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
}
.cp-toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--down);
	margin-top: 2px;
}
.cp-mon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	color: var(--txt-2);
	padding: 5px 0;
	border-bottom: 1px solid var(--border);
}
.cp-mon-state {
	color: var(--muted);
	font-style: normal;
	font-size: 10px;
	margin-left: 6px;
}
.cp-model {
	color: var(--faint);
	font-size: 10px;
	margin-top: 12px;
}

.cp-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 15px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--border-2) transparent;
}
.cp-list::-webkit-scrollbar {
	width: 8px;
}
.cp-list::-webkit-scrollbar-thumb {
	background: var(--border-2);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.cp-list::-webkit-scrollbar-track {
	background: transparent;
}
.cp-msg {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	max-width: 100%;
	animation: cp-rise 0.18s ease both;
}
@keyframes cp-rise {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.cp-user {
	align-items: flex-end;
}
.cp-bubble {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--txt);
}
.cp-user .cp-bubble {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--accent) 13%, var(--card)),
		color-mix(in srgb, var(--accent) 8%, var(--card))
	);
	border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
	color: var(--txt);
	padding: 8px 14px;
	border-radius: 15px 15px 5px 15px;
	max-width: 88%;
	box-shadow: 0 3px 12px -7px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* ---- Vera reply prose polish (additive; light/dark safe via tokens) ---- */
.cp-asst .cp-text a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
	transition: border-color 0.12s;
}
.cp-asst .cp-text a:hover {
	border-bottom-color: var(--accent);
}
.cp-asst .cp-text strong {
	font-weight: 660;
	color: var(--txt);
}
.cp-asst .cp-ul li::marker,
.cp-asst .cp-ol li::marker {
	color: color-mix(in srgb, var(--accent) 68%, var(--muted));
}
.cp-asst {
	align-items: stretch;
}
/* Assistant prose is borderless — the copilot speaks on the panel itself, and
   only structured artifacts (cards, code, drawers) get chrome. */
.cp-text {
	padding: 1px 2px;
}
.cp-text a {
	color: var(--accent);
}
.cp-h {
	font-weight: 600;
	color: var(--txt);
	margin: 6px 0 3px;
}
.cp-ic {
	background: var(--bg);
	padding: 1px 5px;
	border-radius: 7px;
	font-family: var(--mono);
	font-size: 12px;
}
.cp-pre {
	position: relative;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 9px 11px;
	overflow-x: auto;
	margin: 6px 0;
}
.cp-pre code {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--txt-2);
}
.cp-copy {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 8px;
	border: 1px solid var(--border-2);
	background: var(--card-2);
	color: var(--txt-2);
	cursor: pointer;
}
.cp-copy:hover {
	color: var(--txt);
	border-color: var(--accent);
}
.cp-ul {
	margin: 4px 0 4px 2px;
	padding-left: 16px;
}
.cp-ul li {
	margin: 2px 0;
}

/* markdown blocks the copilot emits (renderer in copilot.js md()) */
.cp-p {
	margin: 5px 0;
}
.cp-p:first-child {
	margin-top: 0;
}
.cp-h {
	font-weight: 650;
	color: var(--txt);
	margin: 10px 0 4px;
}
.cp-h1 {
	font-size: 15px;
}
.cp-h2 {
	font-size: 14px;
}
.cp-h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--txt-2);
}
.cp-hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 10px 0;
}
.cp-quote {
	margin: 6px 0;
	padding: 4px 12px;
	border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	color: var(--muted);
	font-size: 12.5px;
}
/* tables scroll inside their own wrapper — the sidebar never scrolls sideways */
.cp-tblwrap {
	overflow-x: auto;
	margin: 8px 0;
	border: 1px solid var(--border);
	border-radius: 9px;
}
.cp-md-tbl {
	border-collapse: collapse;
	width: 100%;
	font-size: 12px;
}
.cp-md-tbl th {
	text-align: left;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	font-weight: 650;
	padding: 7px 10px;
	background: color-mix(in srgb, var(--bg) 55%, var(--card));
	border-bottom: 1px solid var(--border-2);
	white-space: nowrap;
}
.cp-md-tbl td {
	padding: 6px 10px;
	color: var(--txt);
	border-bottom: 1px solid var(--border);
	font-variant-numeric: tabular-nums;
	vertical-align: top;
}
.cp-md-tbl tbody tr:last-child td {
	border-bottom: none;
}
.cp-md-tbl tbody tr:hover td {
	background: color-mix(in srgb, var(--accent) 3%, transparent);
}

/* Reasoning drawer — the model's chain of thought as a quiet, collapsible
   terminal tail. Live: pulsing orb + streaming body. Done: folds to its header. */
.cp-think {
	background: color-mix(in srgb, var(--bg) 60%, var(--card));
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
}
.cp-think-head {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 7px 10px;
	color: var(--faint);
	text-align: left;
}
.cp-think-head:hover {
	color: var(--txt-2);
}
.cp-think-t {
	font-size: 10px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}
.cp-think-live .cp-think-t::after {
	content: "…";
}
.cp-think-orb {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--faint);
	flex: none;
}
.cp-think-live .cp-think-orb {
	background: var(--accent);
	animation: cpPulse 1.1s ease-in-out infinite;
}
.cp-think-chev {
	margin-left: auto;
	font-size: 9px;
	transition: transform 0.16s;
}
.cp-think-collapsed .cp-think-chev {
	transform: rotate(-90deg);
}
.cp-think-b {
	white-space: pre-wrap;
	font-family: var(--mono);
	font-size: 10.5px;
	line-height: 1.55;
	color: var(--muted);
	padding: 0 10px 9px;
	max-height: 130px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border-2) transparent;
}
.cp-think-collapsed .cp-think-b {
	display: none;
}
/* legacy header style kept for stored/simple renders */
.cp-think-h {
	font-weight: 600;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--faint);
}

/* Working strip — instant feedback between send and first token: a market-pulse
   equalizer, a rotating desk verb, and the live elapsed clock. */
.cp-working {
	display: flex;
	align-items: center;
	gap: 10px;
	background: color-mix(in srgb, var(--bg) 60%, var(--card));
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
}
.cp-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2.5px;
	height: 14px;
	flex: none;
}
.cp-eq i {
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
	animation: cp-eq 1.05s ease-in-out infinite;
	height: 30%;
}
.cp-eq i:nth-child(1) {
	animation-delay: 0s;
}
.cp-eq i:nth-child(2) {
	animation-delay: 0.15s;
}
.cp-eq i:nth-child(3) {
	animation-delay: 0.3s;
}
.cp-eq i:nth-child(4) {
	animation-delay: 0.45s;
}
.cp-eq i:nth-child(5) {
	animation-delay: 0.6s;
}
@keyframes cp-eq {
	0%,
	100% {
		height: 25%;
		opacity: 0.5;
	}
	50% {
		height: 100%;
		opacity: 1;
	}
}
.cp-verb {
	font-size: 12px;
	color: var(--txt-2);
	transition: opacity 0.18s ease;
}
.cp-verb::after {
	content: "…";
}
.cp-verb-out {
	opacity: 0;
}
.cp-eltime {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

/* Tool chips — running gets an accent ring + conic spinner; done settles dim. */
.cp-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.cp-tchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--txt-2);
	background: color-mix(in srgb, var(--bg) 50%, var(--card));
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 3.5px 9px;
	font-family: var(--mono);
	letter-spacing: 0.01em;
	transition:
		border-color 0.2s,
		color 0.2s;
}
.cp-tchip.run {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	color: var(--txt);
}
.cp-tchip.server {
	border-style: dashed;
}
.cp-tchip.done {
	color: var(--muted);
}
.cp-tchip.done .cp-glyph {
	color: var(--up);
}
.cp-tchip.err {
	color: var(--down);
	border-color: color-mix(in srgb, var(--down) 40%, transparent);
}
.cp-glyph {
	font-size: 11px;
}
.cp-spin {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex: none;
	background: conic-gradient(var(--accent) 0 25%, transparent 25% 100%);
	-webkit-mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 2px),
		#000 calc(100% - 2px)
	);
	mask: radial-gradient(
		farthest-side,
		transparent calc(100% - 2px),
		#000 calc(100% - 2px)
	);
	animation: cp-spin 0.6s linear infinite;
}
@keyframes cp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Calm everything for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	.cp-eq i,
	.cp-think-orb,
	.cp-spin,
	.cp-msg {
		animation: none;
	}
	.cp-eq i {
		height: 60%;
	}
}

.cp-plan {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 11px;
}
.cp-plan-h {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-bottom: 5px;
}
.cp-step {
	font-size: 12.5px;
	color: var(--txt-2);
	padding: 2px 0;
}
.cp-step.done {
	color: var(--muted);
	text-decoration: line-through;
}
.cp-step.active {
	color: var(--accent);
}
.cp-step span {
	display: inline-block;
	width: 14px;
}

.cp-sources {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 11px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cp-src-h {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}
.cp-src {
	font-size: 12px;
	color: var(--cyan);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* synthesized trade signal panel */
.cp-signal {
	background: var(--card-2);
	border: 1px solid var(--border-2);
	border-left: 4px solid var(--accent);
	border-radius: 11px;
	padding: 11px 13px;
}
.cp-signal.good {
	border-left-color: var(--up);
}
.cp-signal.bad {
	border-left-color: var(--down);
}
.cp-sig-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.cp-sig-bias {
	font-weight: 700;
	font-size: 13px;
	padding: 2px 9px;
	border-radius: 9px;
	background: var(--raise);
	color: var(--txt);
}
.cp-sig-bias.good {
	background: var(--up-bg);
	color: var(--up);
}
.cp-sig-bias.bad {
	background: var(--down-bg);
	color: var(--down);
}
.cp-sig-coin {
	font-weight: 600;
	color: var(--txt);
}
.cp-sig-conv {
	margin-left: auto;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}
.cp-sig-thesis {
	font-size: 13px;
	color: var(--txt);
	margin: 7px 0;
	line-height: 1.45;
}
.cp-sig-levels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
}
.cp-sig-levels span {
	font-size: 12px;
	color: var(--txt);
	font-family: var(--num);
}
.cp-sig-levels i {
	color: var(--muted);
	font-style: normal;
	margin-right: 3px;
	font-size: 10.5px;
	text-transform: uppercase;
}
.cp-sig-drivers {
	margin-top: 7px;
	border-top: 1px solid var(--border);
	padding-top: 7px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cp-sig-driver {
	font-size: 12px;
	color: var(--txt-2);
	display: flex;
	align-items: baseline;
	gap: 7px;
}
.cp-sig-driver b {
	color: var(--txt);
	font-weight: 600;
}
.cp-sig-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--muted);
	flex: none;
	position: relative;
	top: 4px;
}
.cp-sig-driver.good .cp-sig-dot {
	background: var(--up);
}
.cp-sig-driver.bad .cp-sig-dot {
	background: var(--down);
}

.cp-card {
	background: var(--card-2);
	border: 1px solid var(--border-2);
	border-left: 3px solid var(--accent);
	border-radius: 10px;
	padding: 9px 12px;
}
.cp-card.good {
	border-left-color: var(--up);
}
.cp-card.bad {
	border-left-color: var(--down);
}
.cp-card-h {
	font-size: 12px;
	font-weight: 600;
	color: var(--txt);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
.cp-card-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 2.5px 0;
	font-size: 12.5px;
}
.cp-card-l {
	color: var(--muted);
}
.cp-card-v {
	color: var(--txt);
	font-family: var(--num);
	font-weight: 500;
	text-align: right;
}
.cp-card-v.good {
	color: var(--up);
}
.cp-card-v.bad {
	color: var(--down);
}
.cp-card-note {
	font-size: 11px;
	color: var(--faint);
	margin-top: 6px;
	line-height: 1.4;
}

.cp-extras {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cp-info {
	font-size: 12px;
	color: var(--txt-2);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 7px 10px;
}
.cp-info.fire {
	border-color: rgba(240, 164, 41, 0.4);
	color: var(--warn);
}
.cp-err {
	font-size: 12.5px;
	color: var(--down);
	background: var(--down-bg);
	border: 1px solid rgba(240, 63, 68, 0.3);
	border-radius: 9px;
	padding: 8px 11px;
}
.cp-err-detail {
	margin-top: 5px;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--txt-2);
	opacity: 0.85;
	word-break: break-word;
}

.cp-prop {
	background: var(--card-2);
	border: 1px solid var(--border-2);
	border-radius: 12px;
	padding: 11px 13px;
}
.cp-prop.cp-dismissed {
	display: none;
}
.cp-prop-h {
	font-weight: 600;
	font-size: 13px;
	color: var(--txt);
	margin-bottom: 4px;
}
.cp-prop-why {
	font-size: 12px;
	color: var(--txt-2);
	margin-bottom: 8px;
	line-height: 1.45;
}
.cp-prop-row {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	padding: 2px 0;
	color: var(--txt-2);
}
.cp-prop-row b {
	color: var(--txt);
}
.cp-prop-row.warn b {
	color: var(--warn);
}
.cp-prop-preview {
	margin-top: 6px;
	border-top: 1px dashed var(--border);
	padding-top: 6px;
}
.cp-prop-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.cp-btn {
	flex: 1;
	border: none;
	border-radius: 9px;
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.cp-btn.primary {
	background: var(--accent);
	color: var(--on-accent);
}
.cp-btn.ghost {
	background: var(--raise);
	color: var(--txt-2);
}
.cp-btn:disabled {
	opacity: 0.6;
	cursor: default;
}
.cp-prop-done {
	margin-top: 9px;
	font-size: 12.5px;
	color: var(--up);
	font-weight: 600;
}

.cp-compose {
	border-top: 1px solid var(--border);
	padding: 12px 12px 10px;
	background: var(--panel);
}
.cp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.cp-chip {
	font-size: 11.5px;
	color: var(--txt-2);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 4px 11px;
	cursor: pointer;
	transition: 0.13s;
}
.cp-chip:hover {
	border-color: var(--accent);
	color: var(--txt);
	transform: translateY(-1px);
}
.cp-input-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--cardcolor);
	border: 1px solid var(--border-2);
	border-radius: 20px;
	padding: 10px 12px 8px;
	transition: border-color 0.14s;
}
.cp-input-row:focus-within {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border-2));
}
.cp-input {
	width: 100%;
	resize: none;
	background: transparent;
	border: none;
	padding: 2px;
	color: var(--txt);
	font-family: var(--ui);
	font-size: 14px;
	line-height: 1.45;
	max-height: 140px;
}
.cp-input:focus {
	outline: none;
	box-shadow: none;
}
.cp-input::placeholder {
	color: var(--muted);
}
.cp-send {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--accent);
	color: var(--on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
	flex: none;
	transition:
		transform 0.12s,
		filter 0.12s;
}
.cp-send:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}
/* Streaming: the button becomes Stop — quiet chrome with a breathing ring so
   it reads "live, tap to interrupt" rather than "error". */
.cp-side .cp-send.cp-stopping {
	background: var(--card-2);
	color: var(--txt);
	border: 1px solid var(--border-2);
	animation: cp-stopring 1.6s ease-in-out infinite;
}
@keyframes cp-stopring {
	0%,
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 25%, transparent);
	}
	50% {
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent);
	}
}
.cp-disc {
	font-size: 10px;
	color: var(--faint);
	margin-top: 7px;
	text-align: center;
}

/* ===== Responsive / mobile ============================================== */

/* Tablet & down: collapse the multi-column dashboards early so nothing is
   cramped, and let any data table scroll horizontally inside its card instead
   of pushing the page wide. */
@media (max-width: 900px) {
	/* Let a wide table scroll inside its card. display:block keeps ONE anonymous
     table box (so header & body columns stay aligned — overriding thead/tbody to
     separate tables would desync them); nowrap stops ragged cell wrapping. */
	.tbl {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	.cards {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
	.pf-hero-val {
		font-size: 32px;
	}
}

/* Phone: the navbar becomes two rows (brand + actions on top, a full-width
   scrollable tab strip below) so it can NEVER overflow the viewport; every
   multi-column grid collapses to one column; cards/controls go full width. */
@media (max-width: 640px) {
	.cp-side {
		width: 100vw;
	}

	.navbar {
		flex-wrap: wrap;
		height: auto;
		gap: 8px 10px;
		padding: 8px 10px;
		row-gap: 6px;
	}
	.navbar .brand {
		font-size: 14px;
		letter-spacing: 0.1em;
		order: 1;
	}
	.nav-right {
		order: 2;
		margin-left: auto;
		gap: 7px;
	}
	.nav-right .btn {
		padding: 7px 11px;
		font-size: 12px;
	}
	.who {
		display: none;
	}
	/* Tabs wrap to their own full-width row and scroll sideways if needed. */
	#nav {
		order: 3;
		flex-basis: 100%;
		flex-grow: 0;
		gap: 0;
		overflow-x: auto;
		scrollbar-width: none;
		border-top: 1px solid var(--border);
		padding-top: 4px;
	}
	#nav::-webkit-scrollbar {
		display: none;
	}
	.nav-btn {
		padding: 7px 11px;
		font-size: 12.5px;
		white-space: nowrap;
		flex: none;
	}

	.main {
		padding: 6px 8px 76px;
	}
	.view:not(.trade-view) {
		margin-top: 10px;
	}

	/* Every dashboard grid → single column. */
	.cards,
	.cols,
	.pf-charts,
	.pf-metrics,
	.account-row,
	.trade-grid,
	.fa-primary,
	.fa-secondary,
	.oc-trade-grid,
	.vip-cards {
		grid-template-columns: 1fr !important;
	}

	/* Chart is shorter on a phone so the ticket/book aren't a scroll away. */
	.chart-card {
		min-height: 340px;
		padding: 10px 10px 6px;
	}
	#chart-host {
		min-height: 280px;
	}
	.ticket {
		padding: 12px;
	}
	.pf-hero {
		padding: 16px;
	}
	.pf-hero-val {
		font-size: 28px;
	}
	.pf-hero-head,
	.pf-hero-actions {
		width: 100%;
	}
	.pf-hero-actions {
		flex-wrap: wrap;
	}

	/* Order-type / interval / TIF button rows wrap instead of overflowing. The
     order-type picker keeps a clean 3-column grid (its 6 types → 2 tidy rows)
     rather than auto-fitting into one cramped row. */
	.seg {
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
	}
	.seg-types {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
	}
	.ivals {
		flex-wrap: wrap;
	}

	/* Overlays fit the screen. */
	.modal,
	.uiprompt {
		width: 94vw;
		max-width: 94vw;
	}
	.toast-wrap {
		left: 8px;
		right: 8px;
	}
	.toast {
		min-width: 0;
		max-width: 100%;
	}

	/* Sensible default for any 2-up card row we didn't name explicitly. */
	.row-2,
	.grid-2,
	.stat-row {
		grid-template-columns: 1fr !important;
	}
}

/* Small phones: tighten type + spacing so dense screens still fit. */
@media (max-width: 420px) {
	.navbar .brand em {
		display: none;
	}
	.nav-btn {
		padding: 6px 9px;
		font-size: 12px;
	}
	.pf-hero-val {
		font-size: 24px;
	}
	.tbl th,
	.tbl td {
		padding: 7px 7px;
		font-size: 11px;
	}
	.btn {
		font-size: 12px;
	}
	.card {
		padding: 12px;
	}
}

/* ===== Code workspace (multi-tab IDE below the chart) =================== */
.code-card {
	padding: 0;
	overflow: hidden;
	transition: box-shadow 0.25s ease;
}
.code-card.code-flash {
	box-shadow: 0 0 0 2px var(--accent) inset;
}
.code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.code-card.collapsed .code-head {
	border-bottom: none;
}
.code-tabbar {
	display: flex;
	gap: 4px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
}
.code-tab {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--txt-2);
	font-size: 12px;
	padding: 4px 9px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
}
.code-tab:hover {
	background: var(--hover);
}
.code-tab.active {
	background: var(--card-2);
	color: var(--accent);
}
.code-tab-x {
	color: var(--muted);
	font-size: 13px;
}
.code-tab-x:hover {
	color: var(--down);
}
.code-actions {
	display: flex;
	gap: 5px;
	align-items: center;
	flex: none;
}
.code-lang {
	background: var(--raise);
	border: 1px solid var(--border-2);
	color: var(--txt-2);
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 8px;
	font-family: var(--ui);
}
.code-btn {
	background: var(--raise);
	border: 1px solid var(--border-2);
	color: var(--txt-2);
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--ui);
	white-space: nowrap;
}
.code-btn:hover {
	color: var(--txt);
	border-color: var(--accent);
}
.code-btn.primary {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
	font-weight: 600;
}
.code-btn.ghost {
	background: transparent;
}
.code-btn.tiny {
	font-size: 10.5px;
	padding: 3px 7px;
}
#code-toggle {
	transition: transform 0.2s ease;
}
.code-card.collapsed #code-toggle {
	transform: rotate(-90deg);
}
.code-card.collapsed .code-body {
	display: none;
}
.code-body {
	display: flex;
	flex-direction: column;
}
.code-editor {
	width: 100%;
	box-sizing: border-box;
	min-height: 240px;
	resize: vertical;
	border: none;
	background: var(--cardcolor);
	color: var(--txt);
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.55;
	padding: 12px 14px;
	tab-size: 2;
}
.code-editor-1 {
	background: var(--cardcolor) !important;
}
.code-editor:focus {
	outline: none;
}
.code-selbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 12px;
	background: var(--card-2);
	border-top: 1px solid var(--border);
}
/* terminal */
.code-term {
	border-top: 1px solid var(--border-2);
	background: var(--bg);
}
.code-term-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 12px;
	font-size: 11px;
	color: var(--txt-2);
}
.code-term-title {
	font-family: var(--mono);
	letter-spacing: 0.02em;
}
.code-term-actions {
	display: flex;
	gap: 5px;
}
.code-term-body {
	max-height: 220px;
	overflow-y: auto;
	padding: 4px 12px 10px;
	font-family: var(--mono);
	font-size: 11.5px;
}
.code-term.collapsed .code-term-body {
	display: none;
}
.code-term-empty {
	color: var(--faint);
	padding: 8px 0;
}
.code-term-run {
	border-top: 1px dashed var(--border);
	padding: 7px 0;
}
.code-term-run:first-child {
	border-top: none;
}
.code-term-cmd {
	color: var(--accent);
	white-space: pre-wrap;
	word-break: break-word;
}
.code-term-toggle {
	color: var(--muted);
	cursor: pointer;
	text-decoration: underline;
	font-size: 10px;
	margin-left: 6px;
}
.code-term-code {
	color: var(--txt-2);
	background: var(--card-2);
	border-radius: 8px;
	padding: 6px 8px;
	margin: 4px 0;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 320px;
	overflow: auto;
}
.code-term-code.collapsed {
	max-height: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
.code-term-out {
	color: var(--txt-2);
	white-space: pre-wrap;
	word-break: break-word;
	margin: 3px 0;
}
.code-term-err {
	color: var(--down);
	white-space: pre-wrap;
	word-break: break-word;
	margin: 3px 0;
}
.code-term-exit {
	font-size: 10px;
}
.code-term-exit.ok {
	color: var(--up);
}
.code-term-exit.bad {
	color: var(--down);
}
/* context chips in the composer */
.cp-context {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 7px;
}
.cp-ctxchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--txt);
	background: var(--card-2);
	border: 1px solid var(--border-2);
	border-radius: 9px;
	padding: 3px 7px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cp-ctx-ic {
	color: var(--accent);
	font-size: 10px;
}
.cp-ctx-x {
	color: var(--muted);
	cursor: pointer;
	padding-left: 2px;
}
.cp-ctx-x:hover {
	color: var(--down);
}
.cp-ctx-clear {
	background: none;
	border: none;
	color: var(--faint);
	font-size: 10.5px;
	cursor: pointer;
	text-decoration: underline;
}

/* Order-book level where YOU have a resting order (chart/book order overlay). */
.px.my-order {
	box-shadow: inset 2px 0 0 var(--accent);
	background: rgba(47, 211, 160, 0.07);
}

/* Admin category tabs + section filtering */
.admin-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 8px 0 14px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 8px;
}
.admin-tabs button {
	background: transparent;
	border: 1px solid transparent;
	color: var(--muted);
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	transition:
		background 0.14s,
		color 0.14s;
}
.admin-tabs button:hover {
	color: var(--txt);
	background: var(--card-2);
}
.admin-tabs button.active {
	color: var(--on-accent);
	background: var(--accent);
}

/* ===== Trade layout + order-book responsive (MUST be last) ================
   These beat the base .trade-grid / .book-card / .book-side rules by SOURCE
   ORDER — media queries don't add specificity, so the earlier base rules (e.g.
   `.book-card { display:flex }`, `.book-side { flex:1 1 0 }`) would otherwise
   override an equally-specific rule placed before them. End-of-file = wins.

   Below 1280px the 3-column desktop grid (chart | book | ticket) no longer has
   room: the book got squeezed into a chart-height cell and its 14×2 rows spilled
   ~137px up and down (over the chart header). So at ≤1280 we STACK to one column
   — full-width chart, then the book as a NATURAL-height list (the card grows to
   fit its rows instead of collapsing/overflowing), then the ticket. */
@media (max-width: 1280px) {
	.trade-grid {
		grid-template-columns: 1fr;
		height: auto;
	} /* stacked → natural heights */
	.trade-grid .ticket {
		overflow: visible;
	}
	.book-card {
		display: flex;
	} /* keep the book visible when stacked */
	#book-panel,
	#tape-panel {
		flex: 0 0 auto;
		min-height: 0;
	}
	.book-side {
		flex: 0 0 auto;
		overflow: visible;
	}
	.book-side .px {
		flex: 0 0 auto;
		min-height: 0;
		max-height: none;
		height: 26px;
	}
	.tape {
		flex: 0 0 auto;
		max-height: 380px;
		overflow-y: auto;
	}
}

/* ============================================================================
   AUTH SCREEN — "your seat in the spread". A split layout: the living order
   book is the hero (coral asks above, mint bids below, the headline in the
   spread); a calm form panel beside it. ALL selectors scoped under #auth and
   prefixed .va- so nothing leaks into the trading app (which reuses generic
   names like .brand/.tabs/.tab/.field/.row/.book). Fonts: IBM Plex Mono for the
   wordmark + numerics, Hanken Grotesk for prose/labels/buttons.
   ============================================================================ */
/* Palette + fonts (redesign pass, auth). NEUTRAL chrome — no sage/green in the UI
   (that pale green is reserved for candles). The ONLY colour on the page is the
   order book's real trading green/red. Warm charcoal surfaces + real liquid glass
   (translucent, saturated backdrop, specular highlights) with WHITE glass light,
   not a coloured glow. Fonts: Tomato Grotesk (→ Bricolage) for display, the
   Coinbase UI stack for everything else, IBM Plex Mono for the tabular numerics.
   Left "living book" preserved. Scoped under #auth so nothing leaks into the app. */
#auth {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	background: var(--bg);
	color: var(--text);
	font-family: var(--ui);
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
#auth {
	--bg: #16181a;
	--surface: #242424;
	--surface-2: #26292b;
	--line: rgba(255, 255, 255, 0.1);
	--line-2: #2b2e30;
	--line-strong: #505152;
	/* Chrome accent is a clean NEUTRAL near-white (the pale sage green was removed —
     it's reserved for candles, not the UI). Colour on this page comes only from the
     order book's real trading green/red. */
	--accent: #eceeed;
	--text: #e9ebe9;
	--dim: #8b8f8b;
	--faint: #5c5f5c;
	/* STANDING TRADING COLORS — the order book + up/down use the app's real vivid
     green/red. These are the only colours on the page. */
	--bid: #2bd49b;
	--ask: #f2696b;
	--line2: #2b2e30;
	--mono: "IBM Plex Mono", ui-monospace, monospace;
	/* Tomato Grotesk is commercial (not on Google Fonts); Bricolage Grotesque is the
     loaded free stand-in that shares its warm modern-grotesk character. Drop a real
     Tomato Grotesk @font-face in and it wins automatically — the stack is ready. */
	--display: "Tomato Grotesk", "Bricolage Grotesque", Arial, sans-serif;
	--ui:
		"CoinbaseText", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
		"Helvetica", "Arial", sans-serif;
}

/* LEFT panel — the living book. A soft sage bloom sits behind where the spread
   node lands (88%,62%), so the glow reads as emanating from the mid-price. */
#auth .va-market {
	position: relative;
	overflow: hidden;
	padding: 40px 48px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--line-2);
	background: var(--bg);
}
/* Left-anchored scrim ABOVE the bars but below the text (z1): the whole text
   column sits on the clean ground, the depth bleeds in from the right. */
#auth .va-market::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		95deg,
		var(--bg) 0,
		var(--bg) 46%,
		color-mix(in srgb, var(--bg) 88%, transparent) 62%,
		rgba(0, 0, 0, 0) 80%
	);
}
#auth .va-brand {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--mono);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.22em;
	color: var(--text);
}
#auth .va-brand .va-tick {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bid);
	box-shadow: 0 0 12px color-mix(in srgb, var(--bid) 70%, transparent);
	margin-top: 3px;
}
#auth .va-brand small {
	font-size: 9px;
	letter-spacing: 0.3em;
	color: var(--dim);
	margin-top: 4px;
}

/* Full-height book (asks top → bids bottom, meeting at the spread), faded toward
   the form divider. Readability is handled by the left scrim above, so the text
   column stays clean regardless of how tall the copy is. */
#auth .va-book {
	position: absolute;
	inset: 0;
	z-index: 0;
	-webkit-mask: linear-gradient(90deg, #000 90%, transparent);
	mask: linear-gradient(90deg, #000 90%, transparent);
}
#auth .va-side {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	display: flex;
	flex-direction: column;
}
#auth .va-asks {
	top: 0;
	justify-content: flex-end;
}
#auth .va-bids {
	bottom: 0;
	justify-content: flex-start;
}
#auth .va-row {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-height: 0;
	padding-left: 48px;
	opacity: 0;
	animation: vain 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	animation-delay: var(--d, 0s);
}
/* Clean solid depth bars (no gradient "flow") — held at a low opacity so the book
   sits back as quiet texture behind the headline, not a loud chart. */
#auth .va-bar {
	height: 5px;
	border-radius: 3px;
	width: var(--w);
	transition: width 1.1s cubic-bezier(0.4, 1, 0.4, 1);
}
#auth .va-asks .va-bar {
	background: color-mix(in srgb, var(--ask) 34%, transparent);
}
#auth .va-bids .va-bar {
	background: color-mix(in srgb, var(--bid) 34%, transparent);
}
@keyframes vain {
	to {
		opacity: 0.62;
	}
}

/* The spread, made the spine of the page: a glowing mint mid-price line at the
   vertical centre. It brightens to the RIGHT (where the coral ask-mass meets the
   mint bid-mass — the real spread) and fades out before the text on the left, so
   the headline reads as sitting AT the mid. A node marks the spread itself. */
#auth .va-mid {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	z-index: 1;
	transform: translateY(-50%);
	background: linear-gradient(
		90deg,
		transparent 46%,
		color-mix(in srgb, var(--bid) 30%, transparent) 62%,
		color-mix(in srgb, var(--bid) 85%, transparent) 88%,
		color-mix(in srgb, var(--bid) 30%, transparent) 94%,
		transparent
	);
	opacity: 0;
	animation: vamid 1.1s ease 1s forwards;
}
#auth .va-mid::after {
	content: "";
	position: absolute;
	left: 88%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--bid);
	box-shadow: 0 0 18px 3px var(--bid);
}
@keyframes vamid {
	to {
		opacity: 1;
	}
}

#auth .va-thesis {
	position: relative;
	z-index: 2;
	margin: auto 0;
	max-width: 440px;
}
#auth .va-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--dim);
}
#auth .va-eyebrow .va-node {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bid);
	box-shadow: 0 0 14px 1px var(--bid);
	flex: none;
}
#auth .va-eyebrow .va-rule {
	height: 1px;
	flex: 0 0 56px;
	background: linear-gradient(90deg, var(--bid), transparent);
}
#auth .va-thesis h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(42px, 5vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--text);
	text-wrap: balance;
}
#auth .va-thesis h1 em {
	font-style: normal;
	color: var(--bid);
}
#auth .va-thesis p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--dim);
	margin: 18px 0 0;
	max-width: 420px;
}

/* Bottom stat bar — anchored with a hairline divider so it reads as a deliberate
   footer of the hero, not floating numbers. */
#auth .va-readout {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 30px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
}
#auth .va-stat .k {
	display: block;
	font-size: 9.5px;
	letter-spacing: 0.16em;
	color: var(--faint);
	margin-bottom: 5px;
}
#auth .va-stat .v {
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 6px;
}
#auth .va-stat .v.up {
	color: var(--bid);
}
#auth .va-stat .v.dn {
	color: var(--ask);
}
#auth .va-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bid);
	box-shadow: 0 0 8px var(--bid);
	animation: valive 2s ease-in-out infinite;
}
@keyframes valive {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

/* The live MID price tag floating just above the spread node — makes the node
   purposeful (it's the real mid price) and ties the visual to live data. */
#auth .va-mid-tag {
	position: absolute;
	left: 88%;
	top: 50%;
	transform: translate(-50%, -150%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-family: var(--mono);
	white-space: nowrap;
	opacity: 0;
	animation: vamid 1.1s ease 1.25s forwards;
}
#auth .va-mid-tag i {
	font-style: normal;
	font-size: 8px;
	letter-spacing: 0.22em;
	color: var(--faint);
}
#auth .va-mid-tag b {
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* RIGHT panel = the sign-in surface. A soft sage bloom rises from the lower-right,
   so the glass form card sits in a faint halo of the accent (the "one glowing
   thing" per the reference set). */
#auth .va-auth {
	position: relative;
	background: var(--bg);
	display: grid;
	grid-template-rows: 1fr auto;
	padding: 28px 24px;
}
#auth .va-panel-wrap {
	display: grid;
	place-items: center;
	min-height: 0;
}
/* REAL liquid glass: a translucent light-tinted pane (NOT an opaque card) whose
   backdrop is blurred AND saturation/brightness boosted, so the sage bloom behind
   it bleeds through luminously. Layered inset highlights give the wet top edge and
   the inner depth; a diagonal specular sheen and a bright glowing rim complete the
   Vision-Pro material. */
#auth .va-panel {
	position: relative;
	width: 100%;
	max-width: 364px;
	padding: 32px 30px;
	border-radius: 26px;
	background: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.13),
		rgba(255, 255, 255, 0.03) 44%,
		rgba(255, 255, 255, 0.07)
	);
	-webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.08);
	backdrop-filter: blur(24px) saturate(1.9) brightness(1.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow:
		inset 0 1px 1.5px rgba(255, 255, 255, 0.5),
		inset 0 -14px 30px -12px rgba(0, 0, 0, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		0 26px 64px -24px rgba(0, 0, 0, 0.78),
		0 0 60px -18px rgba(255, 255, 255, 0.1);
	opacity: 0;
	transform: translateY(8px);
	animation: vacard 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards;
}
/* Diagonal specular sheen — the wet light sweeping across the pane (screen-blended,
   strong only at the corners so it never washes the form text in the middle). */
#auth .va-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.2),
		transparent 32%,
		transparent 68%,
		rgba(255, 255, 255, 0.07)
	);
	mix-blend-mode: screen;
	opacity: 0.8;
}
/* Bright glowing top rim where the pane catches the light. */
#auth .va-panel::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	top: 0;
	height: 1.5px;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.7),
		transparent
	);
	filter: blur(0.3px);
}
#auth .va-crown {
	display: flex;
	margin-bottom: 18px;
}
#auth .va-crown .va-tick {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--bid);
	box-shadow: 0 0 12px color-mix(in srgb, var(--bid) 70%, transparent);
}
#auth .va-legal {
	text-align: center;
	padding: 14px 8px 2px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--faint);
}
#auth .va-legal a {
	color: var(--dim);
	text-decoration: none;
	transition: color 0.15s;
}
#auth .va-legal a:hover {
	color: var(--text);
}
@keyframes vacard {
	to {
		opacity: 1;
		transform: none;
	}
}
#auth .va-panel h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 23px;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	color: var(--text);
	text-transform: none;
}
#auth .va-subt {
	font-size: 12.5px;
	color: var(--dim);
	margin: 0 0 26px;
}

#auth .va-tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 11px;
	padding: 4px;
	margin-bottom: 24px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
#auth .va-tab {
	appearance: none;
	border: 0;
	background: none;
	font-family: var(--ui);
	font-weight: 600;
	font-size: 13px;
	color: var(--dim);
	padding: 9px 0;
	border-radius: 8px;
	cursor: pointer;
	z-index: 1;
	transition: color 0.2s;
}
#auth .va-tab.active {
	color: #16181a;
}
#auth .va-tab-ind {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	background: linear-gradient(180deg, #fff, #e6e8e7);
	border-radius: 8px;
	transition: transform 0.26s cubic-bezier(0.4, 1.2, 0.4, 1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		0 3px 12px -4px rgba(0, 0, 0, 0.5);
}
#auth .va-tabs:has(#tab-signup.active) .va-tab-ind {
	transform: translateX(100%);
}

#auth .va-field {
	display: block;
	margin-bottom: 15px;
}
#auth .va-field .va-lab {
	display: flex;
	justify-content: space-between;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 600;
	margin-bottom: 7px;
}
#auth .va-field .va-lab .opt {
	text-transform: none;
	letter-spacing: 0;
	color: var(--faint);
	font-weight: 500;
}
#auth .va-field input {
	width: 100%;
	background: rgba(0, 0, 0, 0.26);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	color: var(--text);
	font-family: var(--mono);
	font-size: 13.5px;
	padding: 12px 13px;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
	transition:
		border-color 0.18s,
		box-shadow 0.18s;
}
#auth .va-field input::placeholder {
	color: var(--faint);
}
#auth .va-field input:focus {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.28),
		0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* Glossy, glowing sage pill — a top light highlight + soft halo so it reads
   luminous, not flat. */
#auth .va-cta {
	width: 100%;
	appearance: none;
	border: 0;
	cursor: pointer;
	color: #16181a;
	background: linear-gradient(180deg, #fff, #e4e6e5);
	font-family: var(--ui);
	font-weight: 700;
	font-size: 14px;
	padding: 13px;
	border-radius: 12px;
	margin-top: 6px;
	transition:
		filter 0.15s,
		transform 0.05s,
		box-shadow 0.15s;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 10px 30px -12px rgba(0, 0, 0, 0.5);
}
#auth .va-cta:hover {
	filter: brightness(1.02);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 12px 36px -12px rgba(0, 0, 0, 0.55);
}
#auth .va-cta:active {
	transform: translateY(1px);
}
#auth .va-err {
	color: var(--ask);
	font-size: 12px;
	min-height: 1.1em;
	margin-top: 11px;
	line-height: 1.45;
	font-family: var(--mono);
}

#auth .va-or {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--faint);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	margin: 19px 0;
}
#auth .va-or::before,
#auth .va-or::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--line-2);
}
#auth .va-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: transparent;
	border: 1px solid var(--line-2);
	border-radius: 11px;
	color: var(--text);
	font-family: var(--ui);
	font-weight: 600;
	font-size: 13px;
	padding: 12px;
	text-decoration: none;
	transition:
		border-color 0.18s,
		background 0.18s;
}
#auth .va-google:hover {
	border-color: var(--line-strong);
	background: rgba(255, 255, 255, 0.03);
}
#auth .va-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--faint);
}
#auth .va-foot .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bid);
	box-shadow: 0 0 8px color-mix(in srgb, var(--bid) 70%, transparent);
	flex: none;
}

@media (max-width: 860px) {
	#auth {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	#auth .va-market {
		padding: 26px 24px;
		min-height: 220px;
		border-right: 0;
		border-bottom: 1px solid var(--line-2);
	}
	#auth .va-readout {
		display: none;
	}
	#auth .va-thesis {
		max-width: none;
	}
	#auth .va-thesis h1 {
		font-size: 26px;
	}
	#auth .va-thesis p {
		display: none;
	}
	/* Mobile: bars sit in the upper band, fading out before the headline; the scrim
     flips to a bottom-up ground so the headline (lower in the band) stays clean. */
	#auth .va-book {
		-webkit-mask: linear-gradient(180deg, #000 0, #000 30%, transparent 70%);
		mask: linear-gradient(180deg, #000 0, #000 30%, transparent 70%);
	}
	#auth .va-market::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, var(--bg) 78%);
	}
}
@media (prefers-reduced-motion: reduce) {
	#auth .va-row,
	#auth .va-panel {
		animation: none;
		opacity: 1;
		transform: none;
	}
	#auth .va-row {
		opacity: 0.5;
	}
	#auth .va-bar {
		transition: none;
	}
}

/* ---- Revenue-share node graph ---- */
.rs-graph-wrap {
	position: relative;
	overflow: hidden;
	height: 560px;
	border: 1px solid var(--border-2);
	border-radius: var(--radius);
	cursor: grab;
	background-color: #101013;
	background-image: radial-gradient(
		rgba(255, 255, 255, 0.045) 1px,
		transparent 1px
	);
	background-size: 22px 22px;
}
.rs-graph-wrap.rs-grabbing {
	cursor: grabbing;
}
.rs-world {
	position: absolute;
	transform-origin: 0 0;
}
.rs-edges {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
.rs-nodes {
	position: absolute;
	left: 0;
	top: 0;
}
.rs-node {
	position: absolute;
	width: 176px;
	padding: 11px 13px;
	background: linear-gradient(180deg, var(--card-2), var(--card));
	border: 1px solid var(--border-2);
	border-left: 3px solid var(--role, #3a3f48);
	border-radius: 11px;
	cursor: grab;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	transition:
		transform 0.1s ease,
		box-shadow 0.1s ease,
		border-color 0.1s;
	user-select: none;
}
.rs-node:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
	border-color: var(--role, #3a3f48);
}
.rs-node.rs-dragging {
	cursor: grabbing;
	transform: scale(1.03);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.7);
	z-index: 5;
}
.rs-node-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.rs-node-role {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--role, #fff);
}
.rs-node-earn {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--accent);
}
.rs-node-email {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--txt);
	margin: 5px 0 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rs-node-sub {
	font-size: 10.5px;
	color: var(--muted);
}
.rs-hint {
	position: absolute;
	left: 14px;
	bottom: 10px;
	pointer-events: none;
	font-size: 10.5px;
	color: var(--muted);
	opacity: 0.85;
}
.rs-graph-empty {
	padding: 40px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
}
.rs-legend {
	position: absolute;
	top: 12px;
	left: 14px;
	display: flex;
	gap: 12px;
	pointer-events: none;
}
.rs-leg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	color: var(--txt-2);
	text-transform: capitalize;
}
.rs-leg-chip i {
	width: 9px;
	height: 9px;
	border-radius: 5px;
	display: inline-block;
}
.rs-controls {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rs-ctl {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid var(--border-2);
	background: rgba(28, 29, 34, 0.9);
	color: var(--txt);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition:
		background 0.1s,
		border-color 0.1s;
}
.rs-ctl:hover {
	background: var(--hover);
	border-color: var(--border-3);
}
.rs-actions {
	white-space: nowrap;
}
.rs-actions .btn.tiny {
	margin-left: 4px;
}
.rs-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 9000;
	overflow: auto;
	padding: 40px 16px;
}
.rs-modal {
	width: 460px;
	max-width: 94vw;
	padding: 18px 20px;
}
.rs-modal h4 {
	margin: 16px 0 6px;
	font-size: 13px;
}
.rs-modal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.rs-modal-head b {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rs-x {
	cursor: pointer;
	opacity: 0.6;
	font-size: 16px;
}
.rs-x:hover {
	opacity: 1;
}
.rs-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 6px 0;
}
.rs-row label {
	font-size: 11px;
	color: #9aa0aa;
}
.rs-row input,
.rs-row select,
.rs-modal select {
	background: var(--inset);
	border: 1px solid var(--border-2);
	color: var(--txt);
	border-radius: 8px;
	padding: 5px 7px;
}
.rs-row input[type="number"] {
	width: 70px;
}
.rs-fees-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 8px;
}
.rs-fees-grid label {
	font-size: 11px;
	color: #9aa0aa;
}
.rs-fees-grid input {
	width: 100%;
	box-sizing: border-box;
	background: var(--inset);
	border: 1px solid var(--border-2);
	color: var(--txt);
	border-radius: 8px;
	padding: 4px 6px;
}

/* revshare graph/table toolbar + action buttons */
.rs-toolbar {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}
.btn.tiny {
	padding: 3px 9px;
	font-size: 11px;
}
.btn.danger {
	background: #3a1518;
	border-color: #6b2630;
	color: #ff9aa2;
}
.btn.danger:hover {
	background: #4a1a1f;
}
table.rs-table td {
	vertical-align: middle;
}

/* revshare modal — cleaner, sectioned, intuitive */
.rs-modal {
	width: 480px;
	max-width: 94vw;
	max-height: 86vh;
	overflow-y: auto;
	padding: 18px 20px 20px;
}
.rs-modal h4 {
	margin: 18px 0 8px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--txt-2);
}
.rs-modal .kv {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
}
.rs-sec {
	margin-top: 4px;
}
.rs-sec-h {
	margin: 18px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--txt-2);
}
.rs-field {
	margin: 12px 0;
}
.rs-lbl {
	font-size: 12px;
	color: var(--txt-2);
	margin-bottom: 6px;
}
.rs-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}
.rs-inline input[type="number"] {
	width: 72px;
}
.rs-suf {
	font-size: 12px;
	color: #9aa0aa;
}
.rs-warn {
	color: #ff9aa2;
	font-size: 11px;
	margin-left: 6px;
}
.rs-seg {
	display: inline-flex;
	background: var(--inset);
	border: 1px solid var(--border-2);
	border-radius: 8px;
	overflow: hidden;
}
.rs-seg button {
	background: transparent;
	border: none;
	color: #9aa0aa;
	padding: 7px 18px;
	font-size: 13px;
	cursor: pointer;
}
.rs-seg button.on {
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}
.rs-seg button:not(.on):hover {
	color: var(--txt);
}

/* === Revshare modal v2: wider, clear sections, visible buttons, cost table === */
.rs-modal {
	width: 720px;
	max-width: 95vw;
	max-height: 88vh;
	overflow-y: auto;
	padding: 20px 26px 26px;
}
.rs-modal-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border);
}
.rs-modal-head b {
	font-size: 15px;
	flex: 1;
}
.rs-modal h4,
.rs-sec-h {
	margin: 20px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--accent);
	font-weight: 700;
}
.rs-sec {
	margin: 0;
}
.rs-fees-grid {
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.rs-cost-tbl {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 2px;
}
.rs-cost-tbl td {
	padding: 8px 10px 8px 0;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
.rs-cost-tbl input {
	width: 58px;
}
/* visible buttons inside the modal */
.rs-modal .btn {
	padding: 9px 18px;
	font-size: 13px;
	border-radius: 9px;
}
.rs-modal .btn.tiny {
	padding: 5px 12px;
	font-size: 11px;
}
.rs-modal .btn:not(.primary):not(.danger) {
	background: var(--card-2);
	border: 1px solid var(--border-2);
	color: var(--txt);
}
.rs-modal .btn:not(.primary):not(.danger):hover {
	background: var(--raise);
	border-color: var(--border-3);
}
.rs-modal .btn.primary {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Revshare danger zone (admin lock/delete) + banned node indicator */
.rs-danger {
	margin-top: 16px;
	border-top: 1px solid #3a2326;
	padding-top: 10px;
}
.rs-danger h4 {
	color: #e0564f;
}
.rs-modal .btn.danger {
	background: #3a2024;
	border: 1px solid #e0564f;
	color: #ff8a82;
}
.rs-modal .btn.danger:hover {
	background: #e0564f;
	color: #fff;
}
.rs-node.rs-banned {
	opacity: 0.82;
	box-shadow:
		0 0 0 1px #e0564f55,
		0 6px 18px #0007;
}
.rs-node.rs-banned .rs-node-email {
	text-decoration: line-through;
	color: #b98;
}

/* ===== Revenue-share dashboards: shadcn-flavoured KPI cards + charts ===== */
.rs-dash {
	margin-bottom: 12px;
}
.rs-dash-skel {
	padding: 22px;
	color: var(--muted);
	font-size: 13px;
}
.rs-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.rs-kpi {
	background: var(--cardcolor);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rs-kpi-lab {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
}
.rs-kpi-val {
	font-family: var(--num);
	font-size: 23px;
	font-weight: 700;
	color: var(--txt);
	line-height: 1.1;
}
.rs-kpi-sub {
	font-size: 11px;
	color: var(--muted);
}
.rs-chart-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 12px;
}
@media (max-width: 920px) {
	.rs-chart-grid {
		grid-template-columns: 1fr;
	}
}
.rs-panel {
	background: var(--cardcolor);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
}
.rs-panel-h {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--txt-2);
	font-weight: 700;
	margin-bottom: 14px;
}
.rs-chart-empty {
	color: var(--muted);
	font-size: 12px;
	padding: 18px 0;
	text-align: center;
}
/* horizontal bars */
.rs-bars {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.rs-bar-row {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	align-items: center;
	gap: 12px;
}
.rs-bar-lab {
	font-size: 12px;
	color: var(--txt-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rs-bar-track {
	height: 9px;
	border-radius: 8px;
	background: var(--card-2);
	overflow: hidden;
}
.rs-bar-fill {
	display: block;
	height: 100%;
	border-radius: 8px;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.rs-bar-val {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--txt);
	font-weight: 600;
	min-width: 56px;
	text-align: right;
}
.acct-kpis {
	margin: 0 0 16px;
}
.acct-kpis:empty {
	display: none;
}
/* portfolio position-analytics dashboard */
.pf-pos-charts {
	margin: 0 0 10px;
}
.pf-pos-charts .rs-kpis {
	margin-bottom: 12px;
}
.pf-pos-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.pf-pos-head .tiny {
	font-weight: 500;
}
.pf-pos-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
	padding: 30px 20px;
}
.pf-pos-empty-ic {
	font-size: 24px;
	color: var(--muted);
	opacity: 0.65;
}
.pf-pos-empty b {
	font-size: 14px;
	color: var(--txt);
}
.pf-pos-empty span {
	font-size: 12px;
	color: var(--muted);
	max-width: 400px;
	line-height: 1.5;
}
/* trade-view account summary: slim single-line readout above the data tabs */
.tr-acct-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 9px 2px 11px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--border);
}
.tr-acct-strip:empty {
	display: none;
}
.tas {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 16px;
	border-right: 1px solid var(--border);
}
.tas:first-child {
	padding-left: 4px;
}
.tas:last-child {
	border-right: none;
}
.tas i {
	font-style: normal;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}
.tas b {
	font-family: var(--num);
	font-size: 13px;
	font-weight: 650;
	color: var(--txt);
}
.tas b.up {
	color: var(--up);
}
.tas b.down {
	color: var(--down);
}
.rs-bar-row-active .rs-bar-lab {
	color: var(--accent);
	font-weight: 700;
}
.rs-bar-row-active .rs-bar-val {
	color: var(--accent);
}
/* donut */
.rs-donut {
	display: flex;
	align-items: center;
	gap: 18px;
}
.rs-donut svg {
	flex: 0 0 auto;
}
.rs-donut-v {
	fill: var(--txt);
	font-family: var(--num);
	font-size: 16px;
	font-weight: 700;
}
.rs-donut-k {
	fill: var(--muted);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.rs-leg {
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
	min-width: 0;
}
.rs-leg-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--txt-2);
}
.rs-leg-row b {
	margin-left: auto;
	font-family: var(--mono);
	color: var(--txt);
}
.rs-leg-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rs-dot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	flex: 0 0 auto;
}
/* graph: earnings labels on the connection edges */
.rs-edge-lab {
	fill: var(--txt-2);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 600;
	paint-order: stroke;
	stroke: var(--bg);
	stroke-width: 3px;
	stroke-linejoin: round;
	pointer-events: none;
}
.rs-edge-lab-zero {
	fill: var(--muted);
	opacity: 0.55;
}
/* graph: node hover detail card (full per-account financials) */
.rs-tip {
	position: absolute;
	z-index: 30;
	width: 220px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 13px;
	padding: 11px 13px;
	box-shadow: var(--shadow);
	pointer-events: none;
}
.rs-tip.hidden {
	display: none;
}
.rs-tip-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--border);
}
.rs-tip-h b {
	font-size: 12.5px;
	color: var(--txt);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rs-tip-role {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	flex: none;
}
.rs-tip-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	font-size: 11.5px;
}
.rs-tip-row span {
	color: var(--muted);
}
.rs-tip-row b {
	font-family: var(--num);
	color: var(--txt);
	font-weight: 600;
}
.rs-up {
	color: var(--up);
}
.rs-down {
	color: var(--down);
}
/* detail tables (partner network) */
.rs-tbl-scroll {
	overflow-x: auto;
	margin: -2px;
	padding: 2px;
}
.rs-detail-tbl {
	width: 100%;
	white-space: nowrap;
}
.rs-detail-tbl td:not(:first-child),
.rs-detail-tbl th:not(:first-child) {
	font-family: var(--num);
	text-align: right;
}
.rs-detail-tbl th:not(:first-child) {
	font-family: var(--ui);
}
.rs-cell-name {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ===== Admin gauge (tables now use the unified global .tbl standard) ===== */
.rs-gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 0 2px;
}
.rs-gauge-v {
	font-family: var(--num);
	font-size: 19px;
	font-weight: 700;
}
.rs-gauge-sub {
	font-size: 10.5px;
	color: var(--muted);
	text-align: center;
	max-width: 220px;
}

/* ===== Foundation: standardised interaction polish (applies app-wide) ===== */
/* Visible keyboard focus everywhere (quality floor) — mouse clicks unaffected. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 7px;
}
.btn:focus-visible,
.nav-btn:focus-visible,
.tab:focus-visible {
	outline-offset: 3px;
}
/* Inputs/selects keep their own accent ring; don't double up. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.vsel-btn:focus-visible {
	outline: none;
}
/* Themed, unobtrusive scrollbars. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--raise) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--raise);
	border-radius: 8px;
	border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--hover);
}
/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== Standardised page rhythm + brand signature (applies to every view) ===== */
/* Each page title wears the Veyra tick — the lime order-book accent, one per screen. */
.view > h1 {
	display: flex;
	align-items: center;
	gap: 11px;
}
.view > h1::before {
	content: "";
	flex: none;
	width: 4px;
	height: 19px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 14px rgba(47, 211, 160, 0.35);
}
/* Badges: quiet, with a hairline border so they sit cleanly on any surface. */
.pill {
	border: 1px solid transparent;
	font-variant-numeric: tabular-nums;
	line-height: 1.45;
}
.pill.ok {
	border-color: rgba(43, 212, 155, 0.22);
}
.pill.warn {
	border-color: rgba(240, 164, 41, 0.22);
}
.pill.halt,
.pill.down {
	border-color: rgba(246, 70, 93, 0.22);
}

/* ===== Order ticket — shadcn controls (size/leverage sliders left untouched) ===== */
/* Reduce-only / TP-SL become toggle switches: label left, switch right. */
.tk-flags {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0;
}
.tk-flags .chk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
	color: var(--txt-2);
	font-size: 12.5px;
	font-weight: 500;
	margin: 0;
}
.tk-flags .chk:hover {
	color: var(--txt);
}
.tk-flags .chk input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	margin: 0;
	border-radius: 999px;
	background: var(--card-2);
	border: 1px solid var(--border-2);
	cursor: pointer;
	transition:
		background 0.16s ease,
		border-color 0.16s ease;
}
.tk-flags .chk input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--muted);
	transition:
		transform 0.18s cubic-bezier(0.4, 1.3, 0.5, 1),
		background 0.16s;
}
.tk-flags .chk input[type="checkbox"]:checked {
	background: var(--accent-dim);
	border-color: var(--accent);
}
.tk-flags .chk input[type="checkbox"]:checked::after {
	transform: translateX(16px);
	background: var(--accent);
}
.tk-flags .chk.disabled {
	opacity: 0.42;
	pointer-events: none;
}
/* Labeled field row (margin mode): label left, segmented control right. */
.tk-field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.tk-field-row .tk-field-lab {
	font-size: 12.5px;
	color: var(--txt-2);
	font-weight: 500;
	flex: none;
}
.tk-field-row .seg {
	margin: 0;
	flex: 1;
	max-width: 190px;
}
.mm-seg .seg-btn {
	font-size: 12px;
	padding: 7px;
}
/* Order-type grid: cleaner active fill + the soft corners. */
.seg-types {
	gap: 5px;
}
.seg-types .seg-btn {
	padding: 10px 4px;
}
.seg-types .seg-btn.active {
	background: var(--accent-dim);
	color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ===== Order ticket — compact config pills + popovers (the cockpit) ===== */
.tk-config {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.tk-pop-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}
.tk-pill {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 13px;
	background: var(--bg);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	color: var(--txt);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		border-color 0.14s,
		background 0.14s;
}
.tk-pill:hover {
	border-color: var(--border-3);
	background: var(--card-2);
}
.tk-pill span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.tk-caret {
	color: var(--muted);
	flex: none;
}
.tk-pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 60;
	min-width: 250px;
	max-width: 300px;
	background: var(--card);
	border: 1px solid var(--border-2);
	border-radius: var(--radius);
	padding: 13px;
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset;
	animation: vsel-in 0.12s ease;
}
.tk-config .tk-pop-wrap:last-child .tk-pop {
	left: auto;
	right: 0;
}
.tk-pop.hidden {
	display: none;
}
.tk-pop-h {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
	font-weight: 600;
	margin: 12px 0 8px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.tk-pop-h:first-child {
	margin-top: 0;
}
.tk-pop-h b {
	color: var(--txt);
	font-family: var(--num);
	font-size: 13px;
}
.tk-pop .seg-types {
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	margin: 0;
}
.tk-pop .mm-seg {
	margin: 0;
}
.tk-pop input[type="range"] {
	margin: 2px 0 0;
}
.tk-pop .lev-line {
	margin-top: 8px;
}

/* ===== Leverage upfront (visible); margin mode inline beside the order-type pill ===== */
.tk-config .tk-mm {
	flex: none;
	margin: 0;
}
.tk-config .tk-mm .seg-btn {
	padding: 9px 13px;
	font-size: 12.5px;
}
.tk-lev-lab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	margin: 2px 0 6px;
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 500;
}
.tk-lev-lab b {
	margin-left: auto;
	color: var(--txt);
	font-family: var(--num);
	font-size: 13px;
	font-weight: 700;
}
.tk-lev-lab input[type="range"] {
	flex: 0 0 100%;
	margin-top: 8px;
}

/* ===== Top-bar market search ===== */
.nav-search {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	width: 380px;
	max-width: 40vw;
	padding: 0 12px;
	height: 34px;
	background: var(--cardcolor);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-sm);
	transition:
		border-color 0.14s,
		background 0.14s;
}
.nav-search:focus-within {
	border-color: var(--accent);
	background: var(--card-2);
}
.nav-search-ic {
	color: var(--muted);
	flex: none;
}
.nav-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	color: var(--txt);
	font: inherit;
	font-size: 13px;
	outline: none;
	padding: 0;
}
.nav-search input::placeholder {
	color: var(--muted);
}
.nav-search-kbd {
	flex: none;
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1;
	color: var(--muted);
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 3px 6px;
}
.nav-search:focus-within .nav-search-kbd {
	display: none;
}
@media (max-width: 1120px) {
	.nav-search {
		display: none;
	}
}

/* Kill the inner focus ring on the nav search (the box already shows focus-within). */
.nav-search input:focus,
.nav-search input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ===== Theme toggle (sun in dark → click for light; moon in light → click for dark) ===== */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-2);
	background: var(--bg);
	color: var(--txt-2);
	cursor: pointer;
	transition:
		border-color 0.14s,
		background 0.14s,
		color 0.14s,
		transform 0.14s;
	flex: none;
}
.theme-toggle:hover {
	border-color: var(--border-3);
	color: var(--accent);
}
.theme-toggle:active {
	transform: scale(0.92);
}
.theme-toggle .ic-moon {
	display: none;
}
html[data-theme="light"] .theme-toggle .ic-sun {
	display: none;
}
html[data-theme="light"] .theme-toggle .ic-moon {
	display: inline;
}

/* Withdrawals tab: a small count badge on the admin tab button. */
.tab-badge:empty {
	display: none;
}
.tab-badge {
	display: inline-block;
	min-width: 16px;
	padding: 0 5px;
	margin-left: 4px;
	font: 600 10px / 16px var(--num, monospace);
	text-align: center;
	color: #04140f;
	background: var(--accent, #2fd3a0);
	border-radius: 999px;
	vertical-align: middle;
}

/* ── Position action buttons (positions table) + Margin/Partial/Close modals ── */
.pos-acts {
	display: inline-flex;
	gap: 5px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.pos-act {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font: 600 11px / 1 var(--num);
	letter-spacing: 0.01em;
	color: var(--txt);
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	transition: 0.14s;
	white-space: nowrap;
}
.pos-act:hover {
	border-color: var(--border-2);
	transform: translateY(-1px);
}
.pos-act .pa-ic {
	font-size: 12px;
	opacity: 0.85;
}
.pos-act.tpsl {
	color: var(--accent);
	border-color: var(--accent-dim);
	background: var(--accent-dim);
}
.pos-act.tpsl:hover {
	background: rgba(47, 211, 160, 0.22);
}
.pos-act.danger {
	color: var(--down);
	border-color: rgba(242, 105, 107, 0.28);
	background: var(--down-bg);
}
.pos-act.danger:hover {
	background: rgba(242, 105, 107, 0.2);
}

.modal.pos-modal {
	width: 520px;
	max-width: calc(100vw - 32px);
}

/* Position summary: a clean grid so prices never collide — wraps to fit the width. */
.pos-sum {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 2px;
}
.pos-sum .cell {
	background: var(--card-2);
	padding: 9px 13px;
	min-width: 0;
}
.pos-sum .cell span {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 3px;
	white-space: nowrap;
}
.pos-sum .cell b {
	display: block;
	font-family: var(--num);
	font-size: 12px;
	font-weight: 600;
	color: var(--txt);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pos-sum .cell b.up {
	color: var(--up);
}
.pos-sum .cell b.down {
	color: var(--down);
}
.pos-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.pos-modal-sub {
	font-size: 11px;
	margin-top: 3px;
}
.pos-modal-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.pos-fld-lab {
	font-size: 11px;
	color: var(--muted);
	font-weight: 600;
}
.pos-fld-lab b {
	color: var(--accent);
	font-family: var(--num);
}

.seg {
	display: flex;
	gap: 4px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 100vmax;
	padding: 3px;
}
.seg-btn {
	flex: 1;
	padding: 8px 0;
	font: 600 12px var(--num);
	color: var(--muted);
	background: transparent;
	border: none;
	border-radius: 100vmax;
	cursor: pointer;
	transition: 0.14s;
}
.seg-btn.active {
	background: var(--accent-dim);
	color: var(--accent);
}
.seg-btn:not(.active):hover {
	color: var(--txt);
}

.chip-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.mini-chip {
	padding: 6px 12px;
	font: 600 11px var(--num);
	color: var(--txt);
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	cursor: pointer;
	transition: 0.14s;
}
.mini-chip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.pos-prev {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
}
.pos-prev > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pos-prev span {
	font-size: 11px;
	color: var(--muted);
}
.pos-prev b {
	font-family: var(--num);
	font-size: 13px;
	font-weight: 600;
	color: var(--txt);
}
.pos-prev b.up {
	color: var(--up);
}
.pos-prev b.down {
	color: var(--down);
}

.pos-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 4px;
	background: var(--card-2);
	border: 1px solid var(--border);
	outline: none;
	margin: 2px 0;
}
.pos-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--bg);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.pos-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--bg);
	cursor: pointer;
}

.pos-confirm-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
}
.pos-confirm-note b {
	color: var(--txt);
}

/* Forgot/reset password panes (auth screen). */
#auth .va-sub {
	font-size: 12.5px;
	color: var(--dim);
	margin: 0 0 20px;
	line-height: 1.55;
}
#auth .va-forgot {
	text-align: right;
	margin: -4px 0 6px;
}
#auth .va-forgot a,
#auth .va-foot a {
	color: var(--dim);
	text-decoration: none;
	font-size: 11px;
	font-family: var(--mono);
}
#auth .va-forgot a:hover,
#auth .va-foot a:hover {
	color: var(--bid);
}
#auth .va-err.ok {
	color: var(--bid);
}

/* ── Admin withdrawals — card layout (easy-to-scan approval queue) ── */
.wd-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}
.wd-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 13px;
	padding: 14px 16px;
	transition: border-color 0.14s;
}
.wd-card:hover {
	border-color: var(--border-2);
}
.wd-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.wd-user {
	font-size: 13.5px;
	color: var(--txt);
}
.wd-roletag {
	font-size: 9px;
	vertical-align: middle;
}
.wd-req {
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}
.wd-req b {
	color: var(--txt);
}
.wd-req b.num {
	font-family: var(--num);
	color: var(--accent);
}
.wd-dest {
	font-family: var(--num);
	font-size: 11px;
	color: var(--muted);
	margin-top: 4px;
}
.wd-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	white-space: nowrap;
}
.wd-state {
	font-size: 9px;
}
.pill.wd-warn {
	background: rgba(227, 169, 60, 0.15);
	color: #e3a93c;
}
.wd-sla {
	font-family: var(--num);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
}
.wd-sla.wd-crit {
	color: var(--down);
}
.wd-sla.wd-warn {
	color: #e3a93c;
}
.wd-ago {
	font-size: 10px;
}
.wd-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
	gap: 1px;
	margin: 12px 0;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
}
.wd-m {
	background: var(--card-2);
	padding: 8px 12px;
	min-width: 0;
}
.wd-m span {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wd-m b {
	display: block;
	font-family: var(--num);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--txt);
	white-space: nowrap;
}
.wd-m b.up {
	color: var(--up);
}
.wd-m b.down {
	color: var(--down);
}
.wd-act {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	align-items: center;
}
/* Held-payout banner + locked-requester emphasis on the admin queue card. */
/* Stale-feed marker on a position's unrealized PnL (display-only warning). */
.stale-dot {
	color: var(--warn, #e0a800);
	cursor: help;
	font-size: 11px;
	opacity: 0.9;
}
.wd-held {
	margin: 8px 0 2px;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 12px;
	background: color-mix(in srgb, var(--down) 12%, transparent);
	color: var(--down);
	border: 1px solid color-mix(in srgb, var(--down) 32%, transparent);
}
.wd-card.wd-locked {
	border-color: color-mix(in srgb, var(--down) 45%, var(--border));
}

/* Admin withdrawals — pool balances grouped by coin (all networks). */
#ad-wd-pools {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}
.wd-pgroup {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.wd-pcoin {
	flex: none;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 13px var(--num);
	color: var(--accent);
	background: var(--accent-dim);
	border: 1px solid var(--accent-dim);
	border-radius: 10px;
}
.wd-pnets {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
	gap: 6px;
}
.wd-pnet {
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 7px 11px;
	min-width: 0;
}
.wd-pnet span {
	display: block;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wd-pnet b {
	display: block;
	font: 600 12.5px var(--num);
	color: var(--txt);
	white-space: nowrap;
	margin-top: 2px;
}

/* Admin — onboard user form. */
.cu-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 6px;
}
.cu-form #cu-email {
	flex: 1;
	min-width: 200px;
	padding: 9px 12px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	color: var(--txt);
	font-size: 13px;
}
.cu-form #cu-email:focus {
	outline: none;
	border-color: var(--accent);
}
.cu-form #cu-role {
	padding: 9px 10px;
}

/* Margin modal — empty-cap hint + disabled slider. */
.mg-hint {
	font-size: 11.5px;
	color: #e3a93c;
	line-height: 1.4;
}
.pos-range:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.pos-range:disabled::-webkit-slider-thumb {
	background: var(--muted);
	cursor: not-allowed;
}

/* ===== UI redesign (2026-07) — shared primitives (existing palette only) ===== */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--txt-2);
	background: var(--card-2);
	border: 1px solid var(--border);
	cursor: pointer;
	transition: 0.14s;
}
.pill:hover {
	background: var(--hover);
}
.pill--active {
	background: var(--txt);
	color: var(--bg);
	border-color: transparent;
}
.pill--ghost {
	background: transparent;
}
.pill--accent {
	background: var(--accent);
	color: var(--on-accent);
	border-color: transparent;
}
.pill--warn {
	background: var(--warn);
	color: #241704;
	border-color: transparent;
}
.chk-box {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1.5px solid var(--border-3);
	background: var(--inset);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.12s;
	flex: none;
}
.chk-box[data-on="1"] {
	background: var(--accent);
	border-color: var(--accent);
}
.chk-box[data-on="1"]::after {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -1px;
	border: solid var(--on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.trade-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--card-2);
	border: 1px solid var(--border-2);
	color: var(--txt);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.trade-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--up);
	flex: none;
}
.chg-arrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-variant-numeric: tabular-nums;
}
.cell-ring {
	box-shadow: inset 0 0 0 1.5px var(--accent);
	border-radius: 10px;
}
.cell-ring--purple {
	box-shadow: inset 0 0 0 1.5px var(--purple);
}

/* ===== UI redesign — market table reskin ===== */
.mkt-panel {
	border-radius: var(--radius-xl);
}
.mkt-panel .tbl {
	font-size: 13px;
}
.mkt-panel .tbl th {
	font-size: 10.5px;
	letter-spacing: 0.08em;
	padding: 13px 14px;
	background: var(--card);
}
.mkt-panel .tbl td {
	padding: 14px;
	border-bottom: 1px solid var(--border);
}
.mkt-panel tbody tr:hover {
	background: var(--hover);
}
.mkt-panel .coin-cell b {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
/* up/down change arrows — scoped to the market table's change cells only */
.mkt-panel td.up,
.mkt-panel td.down {
	font-weight: 600;
}
.mkt-panel td.up::before {
	content: "↗";
	margin-right: 4px;
	font-size: 11px;
}
.mkt-panel td.down::before {
	content: "↘";
	margin-right: 4px;
	font-size: 11px;
}
/* checkbox + action columns, filter tools, checked-row selection ring */
.mkt-panel .chk-col {
	width: 30px;
	padding-left: 16px;
	padding-right: 4px;
}
.mkt-panel .act-col {
	text-align: right;
}
.mkt-panel td.act-col {
	padding-right: 16px;
}
.mkt-tools {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 8px;
}
.mkt-tools .pill {
	font-size: 12px;
	padding: 6px 13px;
}
.mkt-panel tbody tr:has(.chk-box[data-on="1"]) {
	background: var(--card-2);
}
.mkt-panel tbody tr:has(.chk-box[data-on="1"]) td:nth-child(4) {
	box-shadow: inset 0 0 0 1.5px var(--accent);
	border-radius: 10px;
}

/* ===== UI redesign — Swap + Send cards ===== */
.swap-card,
.send-card {
	border-radius: var(--radius-xl);
}
.swap-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 12px 14px;
	margin: 0 0 4px;
}
.swap-token {
	flex: none;
	min-width: 92px;
	background: var(--inset);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--txt);
	padding: 7px 12px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.swap-num {
	flex: 1;
	text-align: right;
	font-family: var(--num);
	font-size: 22px;
	font-weight: 600;
	color: var(--txt);
	background: none;
	border: none;
	outline: none;
	min-width: 0;
}
input.swap-num::placeholder {
	color: var(--faint);
}
.swap-recv {
	font-size: 12px;
	align-self: center;
}
.swap-mid {
	display: flex;
	justify-content: center;
	margin: -8px 0;
	position: relative;
	z-index: 1;
}
.swap-flip {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	border: 3px solid var(--panel);
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.send-amount {
	background: var(--raise);
	border-radius: var(--radius-lg);
	padding: 12px 14px;
	margin: 8px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.send-amount .lab {
	color: var(--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.send-amount input.swap-num {
	text-align: left;
}

/* ===== UI redesign — collapsible sidebar + mini top bar ===== */
.app {
	flex-direction: row;
	align-items: stretch;
}
.sidebar {
	flex: none;
	width: 236px;
	display: flex;
	flex-direction: column;
	background: var(--cardcolor);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin: 12px;
	padding: 16px 12px;
	position: sticky;
	top: 12px;
	height: calc(100vh - 24px);
	overflow: visible;
	transition: width 0.16s ease;
	z-index: 50;
}
.sidebar.collapsed {
	width: 68px;
}
.sb-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 6px 14px;
	position: relative;
}
.sidebar .brand {
	font-size: 15px;
	letter-spacing: 0.14em;
}
.sb-collapse {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 8px;
	background: none;
	border: none;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition:
		background 0.12s,
		color 0.12s;
}
.sb-collapse:hover {
	background: var(--card-2);
	color: var(--txt);
}
.sb-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}
.sb-nav .nav-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--txt-2);
	font-size: 14px;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
	transition: 0.12s;
}
.sb-nav .nav-btn:hover {
	background: var(--card-2);
	color: var(--txt);
}
.sb-nav .nav-btn {
	position: relative;
}
.sb-nav .nav-btn.active {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 9%, transparent);
	font-weight: 600;
}
.sb-nav .nav-btn.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 0 3px 3px 0;
	background: var(--accent);
}
.nav-ic {
	flex: none;
	width: 20px;
	height: 20px;
}
.nav-lbl {
	white-space: nowrap;
	overflow: hidden;
}
.sb-bottom {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 10px;
	margin-top: 6px;
	border-top: 1px solid var(--border);
}
.sb-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--txt-2);
	font-size: 14px;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
}
.sb-item:hover {
	background: var(--card-2);
	color: var(--txt);
}
.sb-logout:hover {
	color: var(--down);
}
/* neutralize the old top-bar theme-toggle styling so the sidebar Theme row aligns like Log out */
.sb-item.theme-toggle {
	justify-content: flex-start;
	width: 100%;
	height: auto;
	background: none;
	border: none;
}
.sidebar.collapsed .nav-btn.active::before {
	display: none;
}
.sidebar.collapsed .nav-lbl,
.sidebar.collapsed .brand-txt {
	display: none;
}
/* keep the toggle visible when collapsed (flip it) so the rail can be re-expanded */
.sidebar.collapsed .sb-top {
	justify-content: center;
}
/* collapsed: on hover the logo fades and an expand button takes its place (ChatGPT-style) */
.sidebar.collapsed .brand {
	transition: opacity 0.12s;
}
.sidebar.collapsed:hover .brand {
	opacity: 0;
}
.sidebar.collapsed .sb-collapse {
	position: absolute;
	inset: 0;
	margin: auto;
	display: none;
}
.sidebar.collapsed:hover .sb-collapse {
	display: inline-flex;
}

/* ===== trade layout — coinbar spans chart+book (row 1); .trade-left stacks
   chart → code → positions (col 1, row 2); order book + ticket sticky.
   Row 2 is naturally tall (set by .trade-left), so the book gets a real
   height for its flex ladder AND has room to stay pinned. ===== */
.trade-grid {
	display: grid;
	grid-template-columns: minmax(380px, 1fr) var(--book-w, 268px) var(
			--ticket-w,
			308px
		);
	grid-template-rows: auto auto;
	gap: 11px;
	align-items: start;
}
.trade-grid > .coinbar {
	grid-column: 1 / 3;
	grid-row: 1;
	margin: 0;
}
.trade-left {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.trade-left > .card {
	margin: 0;
}
.trade-left > .chart-card {
	min-height: max(500px, 60vh);
}
.trade-grid > .book-card {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: var(--trade-sticky-top, 80px);
	align-self: start;
	height: calc(100vh - var(--trade-sticky-top, 80px) - 16px);
}
.trade-grid > .ticket {
	grid-column: 3;
	grid-row: 1 / 3;
	position: sticky;
	top: var(--trade-sticky-top, 80px);
	align-self: start;
}

/* ===== unified segmented tabs — one style everywhere (#313133 track, #4E4D52 active) ===== */
.ivals,
.seg,
.mkt-cats,
.panel-tabs,
.pf-feed-tabs {
	background: var(--tab-bg);
	border: none;
	border-radius: 100vmax;
	padding: 3px;
}
.panel-tabs {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	gap: 3px;
	border-bottom: none;
	margin-bottom: 10px;
}
.ival,
.seg-btn,
.ptab,
.btab,
.mkt-cats button {
	background: none;
	border: none;
	border-bottom: none;
	color: var(--tab-txt);
	border-radius: 100vmax;
	font-weight: 600;
	box-shadow: none;
	transition: 0.12s;
}
.ival:hover:not(.active),
.seg-btn:hover:not(.active),
.ptab:hover:not(.active),
.btab:hover:not(.active),
.mkt-cats button:hover:not(.active) {
	color: var(--tab-txt-on);
	background: transparent;
}
.ival.active,
.seg-btn.active,
.ptab.active,
.btab.active,
.mkt-cats button.active,
.seg-types .seg-btn.active,
.mm-seg .seg-btn.active {
	background: var(--tab-active);
	color: var(--tab-txt-on);
	border-bottom: none;
	box-shadow: none;
}
.sidebar.collapsed .sb-nav {
	overflow: visible;
}
.sidebar.collapsed .nav-btn,
.sidebar.collapsed .sb-item {
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 auto;
	border-radius: 12px;
}
.sidebar.collapsed .nav-btn.active {
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: none;
}

.app-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100vh;
}
.topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	background: var(--nav-bg);
	backdrop-filter: blur(8px);
	position: sticky;
	top: 0;
	z-index: 40;
}

.sb-toggle-m {
	display: none;
	background: none;
	border: none;
	color: var(--txt-2);
	cursor: pointer;
	padding: 4px;
}
.topbar .nav-search {
	position: static;
	transform: none;
	left: auto;
	flex: 1;
	max-width: 520px;
}
.topbar .nav-right {
	margin-left: auto;
}
.topbar-bell {
	flex: none;
	background: var(--cardcolor);
	border: 1px solid var(--border);
	color: var(--txt-2);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.topbar-bell:hover {
	color: var(--txt);
	background: var(--hover);
}
.app-right .main {
	flex: 1;
}

@media (max-width: 860px) {
	.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		transform: translateX(-100%);
		box-shadow: var(--shadow);
		z-index: 60;
	}
	.sidebar.open {
		transform: translateX(0);
	}
	.sb-toggle-m {
		display: inline-flex;
	}
}

/* ===== UI redesign — neo-minimal top bar (match reference) ===== */
.topbar {
	padding: 14px 20px 14px 0px;
	background: transparent;
	backdrop-filter: none;
}
.topbar::before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	backdrop-filter: blur(8px);
	z-index: -1;
	right: 0;
	top: 0;
}
.topbar .nav-search {
	flex: 1;
	max-width: 560px;
	height: 46px;
	padding: 0 12px 0 18px;
	gap: 11px;
	background: var(--cardcolor);
	border-radius: 999px;
}
.topbar .nav-search:focus-within {
	border-color: var(--border-3);
}
.topbar .nav-search-ic {
	width: 17px;
	height: 17px;
	color: var(--muted);
	flex: none;
}
.topbar .nav-search input {
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	color: var(--txt);
	height: 44px;
	line-height: 44px;
	padding: 0;
	margin-top: 0 !important;
}
.topbar .nav-search-kbd {
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	color: var(--muted);
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 7px;
}
.topbar .nav-right {
	gap: 10px;
}
.topbar #solvency-pill {
	background: var(--card-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 7px 14px;
	color: var(--txt-2);
}
.topbar #nav-deposit {
	border-radius: 999px;
	padding: 9px 20px;
}
.topbar-bell {
	width: 40px;
	height: 40px;
}
.topbar .profile-btn {
	border-radius: 999px;
	padding: 5px 12px 5px 5px;
}
.topbar .cp-launch {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--card-2);
	border: 1px solid var(--border);
	color: var(--txt-2);
}
.topbar .cp-launch:hover {
	background: var(--hover);
	color: var(--txt);
}
/* right cluster — clean dark pills, #4F5051 CTA, consistent 40px row */
.topbar .nav-right {
	align-items: center;
}
.topbar #nav-deposit {
	background: var(--cardcolor);
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--txt);
	font-weight: 600;
	height: 40px;
	padding: 0 20px;
	border-radius: 999px;
}
.topbar #nav-deposit:hover {
	background: #5b5c5d;
	box-shadow: none;
	filter: none;
}
.topbar .nav-right .cp-navcredits {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 15px;
	background: var(--cardcolor);
	border: 1px solid var(--border);
	color: var(--txt-2);
	border-radius: 999px;
	font-weight: 600;
}
.topbar .nav-right .cp-navcredits:hover {
	background: var(--hover);
	color: var(--txt);
}
.topbar .nav-right .cp-navtoggle {
	position: relative;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 0;
	border: none;
	background: #6b46e5;
	color: #fff;
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.3),
		0 0 14px rgba(124, 92, 246, 0.42),
		0 0 24px rgba(79, 139, 255, 0.28);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		box-shadow 0.2s ease,
		transform 0.16s ease;
}
/* same rotating "liquid" AI wash as the launcher, clipped to the circle */
.topbar .nav-right .cp-navtoggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130px;
	height: 130px;
	background: conic-gradient(
		from 0deg,
		#8b5cf6,
		#4f8bff,
		#e458ff,
		#6366f1,
		#a855f7,
		#8b5cf6
	);
	animation: cp-liquid 7s linear infinite;
	z-index: 0;
}
.topbar .nav-right .cp-navtoggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(
		115% 88% at 28% 16%,
		rgba(255, 255, 255, 0.38),
		transparent 62%
	);
	z-index: 1;
	pointer-events: none;
}
.topbar .nav-right .cp-navtoggle svg {
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
	animation: cp-tick 8s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.topbar .nav-right .cp-navtoggle:hover {
	transform: translateY(-1px);
	box-shadow:
		0 5px 16px rgba(0, 0, 0, 0.35),
		0 0 22px rgba(168, 85, 247, 0.6),
		0 0 38px rgba(88, 120, 255, 0.45);
}
.topbar .nav-right .cp-navtoggle.on {
	box-shadow:
		inset 0 0 0 2px rgba(255, 255, 255, 0.5),
		0 0 22px rgba(168, 85, 247, 0.6);
}
.topbar .profile-btn {
	height: 40px;
	background: var(--cardcolor);
}

/* ===== 100vmax pills everywhere + order-type as a list ===== */
.ival,
.seg-btn,
.ptab,
.btab,
.mkt-cats button {
	border-radius: 100vmax;
}
.btn,
.tk-pill,
select,
.coin-select,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
	border-radius: 100vmax;
}
/* Order type: single-select vertical list instead of a cramped 3x2 grid */
#otype-pop {
	min-width: 250px;
}
#otype-pop .seg-types {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}
#otype-pop .seg-types .seg-btn {
	width: 100%;
	text-align: left;
	justify-content: flex-start;
	padding: 11px 16px;
	font-size: 13px;
}

/* All dropdowns + inputs (except search) — #313133 bg, borderless; inputs get an accent border only on focus */
select,
.coin-select,
.tk-pill,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
		#mkt-search
	):not(#nav-mkt-search) {
	background: var(--tab-bg);
	border: 1px solid transparent;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
		#mkt-search
	):not(#nav-mkt-search):focus {
	border-color: var(--accent);
	outline: none;
}

/* ===== trade layout — responsive (stack below tablet width) ===== */
@media (max-width: 1280px) {
	.trade-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.trade-grid > .coinbar,
	.trade-left,
	.trade-grid > .book-card,
	.trade-grid > .ticket {
		grid-column: 1;
		grid-row: auto;
	}
	.trade-grid > .book-card,
	.trade-grid > .ticket {
		position: static;
		height: auto;
	}
}
@media (max-width: 640px) {
	.trade-left > .chart-card {
		min-height: 340px;
	}
}

/* ===== order ticket — tall card; footer (summary + place button) bottom-aligned ===== */
.ticket {
	min-height: 86vh;
}
#perp-ticket,
#spot-ticket {
	flex: 1;
}
#perp-ticket > .preview,
#spot-ticket > .preview {
	margin-top: auto;
}

/* ===== positions card — fix tab pill padding + card breathing room ===== */
.bottom-card {
	padding: 10px 12px 6px;
}
.bottom-card .panel-tabs {
	padding: 3px;
	margin-bottom: 10px;
}

/* ===== view-more ("expand") modals — chart fullscreen, order book + table 80% ===== */
/* The real card node is MOVED into the modal (so live JS updates keep flowing via
   IDs) and moved back on close. .vm-mounted neutralises its grid/sticky/height. */
.chart-card,
.book-card,
.bottom-card {
	position: relative;
}
.vm-more {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	width: 28px;
	height: 28px;
	border-radius: 100vmax;
	border: none;
	background: var(--tab-bg);
	color: var(--txt-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: 0.12s;
}
.vm-more:hover {
	color: var(--txt);
	background: var(--btn-2);
}
.vm-mounted .vm-more {
	display: none;
}
.vm-overlay {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3vh 3vw;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(3px);
}
.vm-overlay.hidden {
	display: none;
}
.vm-modal {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cardcolor);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.vm-modal.vm-full {
	width: 95vw;
	height: 94vh;
}
.vm-modal.vm-wide {
	width: 80vw;
	height: 80vh;
}
.vm-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}
.vm-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--txt);
}
.vm-x {
	width: 30px;
	height: 30px;
	border-radius: 100vmax;
	border: none;
	background: var(--tab-bg);
	color: var(--txt-2);
	cursor: pointer;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: 0.12s;
}
.vm-x:hover {
	color: var(--txt);
	background: var(--btn-2);
}
.vm-body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 12px;
	overflow: auto;
}
.vm-body > .vm-mounted {
	flex: 1 1 auto;
	min-height: 0;
}
.vm-mounted {
	position: static !important;
	inset: auto !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
	width: 100% !important;
}
/* in the expanded table modal, let the active pane use the full height + show all rows */
.vm-expanded .btpane {
	max-height: none;
}

/* ===== positions table — fewer columns when inline (under the chart), all when expanded.
   Hide Entry/Cost/Liq/Margin/Value inline; keep Market/Side/Size/uPnL. ===== */
.bottom-card:not(.vm-expanded) #tr-positions
	th:nth-child(n + 4):nth-child(-n + 8),
.bottom-card:not(.vm-expanded)
	#tr-positions
	td:nth-child(n + 4):nth-child(-n + 8) {
	display: none;
}

/* keep the chart ⤢ expand button clear of the OHLC legend */
.chart-card .chart-head {
	padding-right: 38px;
}

/* ==== PORTFOLIO RESKIN — keep content + layout; adopt the reference dashboard
   language: lifted dark cards, big confident numbers, sentence-case labels,
   refined green/red pills, airier spacing. ==== */
#view-portfolio > h1 {
	font-size: 22px;
	margin-bottom: 18px;
}

/* Lift every card off the page with a hairline (like the ref's bento cards). */
.pf-hero,
.pf-chart-card,
.pf-metric,
.pf-table,
.pf-feed-card {
	border: 1px solid var(--border);
}

/* Hero — flat dark surface, oversized equity, calm sentence-case label. */
.pf-hero {
	background: var(--cardcolor);
	padding: 26px 28px;
	margin-bottom: 14px;
}
.pf-hero-lab {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 550;
	color: var(--txt-2);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.pf-hero-val {
	font-size: 52px;
	letter-spacing: -0.04em;
	margin: 12px 0 12px;
}
.pf-hero-chg {
	font-size: 13px;
}

/* Change pill — rounded, arrow + value read as one chip. */
.chg-badge {
	font-size: 13px;
	padding: 5px 11px;
	gap: 4px;
	border-radius: 100vmax;
	display: inline-flex;
	align-items: center;
}

/* Charts + metrics: more air between cards. */
.pf-charts {
	gap: 14px;
	margin-bottom: 14px;
}
.pf-metrics {
	gap: 14px;
	margin-bottom: 14px;
}

/* Metric cards — sentence-case label, big value, muted sub. */
.pf-metric {
	padding: 20px;
	gap: 9px;
}
.pf-metric .lab {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
	font-weight: 550;
	color: var(--txt-2);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.pf-metric b {
	font-size: 27px;
	letter-spacing: -0.03em;
	line-height: 1.05;
}
.pf-metric .sub {
	font-size: 11.5px;
	color: var(--muted);
}

/* Chart cards. */
.pf-chart-card {
	padding: 20px 22px;
}
.pf-chart-head h3 {
	font-size: 15px;
	font-weight: 600;
}
.pf-chart-head b {
	font-size: 20px;
	letter-spacing: -0.02em;
}

/* Section headers — sentence-case, real heading weight (not shouty 11px caps). */
.pf-sec-head {
	margin: 26px 0 12px;
}
.pf-sec-head h2 {
	font-size: 17px;
	font-weight: 650;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--txt);
}

/* Table + feed padding. */
.pf-table {
	padding: 6px 10px;
}
.pf-feed-card {
	padding: 8px 12px;
}

/* Small monochrome icons sit in the muted label colour. */
.pf-ic {
	width: 15px;
	height: 15px;
	flex: none;
	opacity: 0.8;
}

/* ==== PORTFOLIO BENTO — dashboard grid (ref #49/#50). Left col = ONE mint
   accent-framed container holding the equity hero + recent-activity cards; right
   col = both charts. Metrics + positions sit below. Full width up to 1200px. ==== */
#view-portfolio {
	max-width: 1400px;
}
.pf-bento {
	display: grid;
	grid-template-columns: minmax(330px, 0.92fr) 1.4fr;
	gap: 14px;
	align-items: stretch;
	margin-bottom: 14px;
}
.pf-col-left,
.pf-col-right {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Left column: one accent-framed container with nested inner cards (ref #50). */
.pf-col-left {
	padding: 4px;
	border-radius: var(--radius-xl);
	background: #2ed3a1;
	min-height: 600px;
	gap: 4px;
}
.pf-col-left .pf-hero,
.pf-col-left .pf-feed-card {
	margin: 0;
	background: var(--cardcolor);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.pf-col-left .pf-hero {
	padding: 20px 22px;
}
.pf-col-left .pf-feed-card {
	flex: 1;
	padding: 14px 16px;
}

/* Hero: label + big value on top, Deposit/Withdraw as a full-width pill row below. */
.pf-col-left .pf-hero-head {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.pf-col-left .pf-hero-val {
	font-size: 42px;
	margin: 10px 0 10px;
}
.pf-col-left .pf-hero-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}
.pf-col-left .pf-hero-actions .btn {
	width: 100%;
	background: transparent;
	border: 1px solid var(--border-2);
	color: var(--txt);
	border-radius: 100vmax;
}
.pf-col-left .pf-hero-actions .btn:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-dim);
}

/* Activity header now lives inside the feed card (like the ref "Balances" title). */
.pf-col-left .pf-activity-head {
	margin: 0 0 10px;
	padding: 0;
	gap: 10px;
}
.pf-col-left .pf-activity-head h2 {
	font-size: 15px;
	white-space: nowrap;
}
.pf-col-left .pf-feed-tabs .seg-btn {
	padding: 5px 12px;
	font-size: 12px;
}

/* Right column: both charts stack full-width and grow to fill the height. */
.pf-col-right {
	height: 100%;
}
.pf-col-right .pf-charts {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 0;
	flex: 1;
}
.pf-col-right .pf-chart-card {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.pf-col-right .pf-eq-chart {
	flex: 1;
	min-height: 170px;
}

@media (max-width: 900px) {
	.pf-bento {
		grid-template-columns: 1fr;
	}
}

/* ==== PORTFOLIO ACTIVITY + NOTCH ==== */
/* Columns hug their content (top-aligned) so the framed left column fits snugly. */
.pf-bento {
	align-items: start;
}
/* Activity card shows 5 rows; "See all" opens the full feed in a modal. */
.pf-col-left #pf-history > .feed-row:nth-child(n + 6) {
	display: none;
}
.pf-seeall {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 11px;
	background: none;
	border: none;
	border-top: 1px solid var(--border);
	color: var(--accent);
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.pf-seeall:hover {
	color: var(--accent-2);
	background: var(--accent-dim);
}
/* In the modal the whole feed shows (the 5-row cap drops once the card leaves
   .pf-col-left) — no "See all" there. */
.vm-mounted .pf-seeall {
	display: none;
}

/* ===== Copilot chat redesign: toolbar, attachments, palette, collapsible === */
.cp-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cp-tool-sp {
	flex: 1;
}
.cp-tool {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition:
		background 0.13s,
		color 0.13s;
}
.cp-tool:hover {
	background: var(--tab-bg);
	color: var(--txt);
}
.cp-send:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

/* composer attachment strip + chips */
.cp-attach-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.cp-attach-strip.hidden {
	display: none;
}
.cp-att {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 190px;
	padding: 6px 8px;
	background: var(--card);
	border: 1px solid var(--border-2);
	border-radius: 12px;
}
.cp-att-thumb {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	object-fit: cover;
	flex: none;
}
.cp-att-ic {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tab-bg);
	font-size: 16px;
	flex: none;
}
.cp-att-meta {
	min-width: 0;
	flex: 1;
}
.cp-att-name {
	font-size: 12px;
	color: var(--txt);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-att-size {
	font-size: 10.5px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.cp-att-x {
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font-size: 12px;
	padding: 2px 4px;
	border-radius: 6px;
	flex: none;
}
.cp-att-x:hover {
	background: var(--tab-bg);
	color: var(--txt);
}

/* attachment chips on a sent user message */
.cp-msg-atts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	max-width: 100%;
	margin-bottom: 2px;
}
.cp-msg-atts .cp-att {
	background: var(--card-2);
}

/* keyboard-navigable suggestion palette */
.cp-suggest {
	margin-bottom: 10px;
	background: var(--cardcolor);
	border: 1px solid var(--border-2);
	border-radius: 16px;
	padding: 8px;
}
.cp-suggest.hidden {
	display: none;
}
.cp-suggest-hints {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 4px 8px 8px;
	font-size: 11px;
	color: var(--muted);
}
.cp-suggest-hints .cp-suggest-esc {
	margin-left: auto;
}
.cp-suggest kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	margin-right: 3px;
	border-radius: 5px;
	background: var(--tab-bg);
	color: var(--txt-2);
	font-family: var(--mono);
	font-size: 10px;
	vertical-align: middle;
}
.cp-suggest-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cp-suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border: none;
	border-radius: 11px;
	background: transparent;
	color: var(--txt);
	font-family: var(--ui);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.12s;
}
.cp-suggest-item.active {
	background: var(--tab-active);
}
.cp-suggest-arrow {
	color: var(--muted);
	flex: none;
}
.cp-suggest-item.active .cp-suggest-arrow {
	color: var(--txt);
}
.cp-suggest-txt {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* collapsible assistant response header */
.cp-asst-head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 3px;
}
/* Vera identity — a small luminous mark + name that gives the assistant presence
   and cleanly separates its replies from the user's right-aligned bubbles. */
.cp-ava {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	line-height: 1;
	color: var(--bg);
	border-radius: 100vmax;
	background: radial-gradient(
		120% 120% at 30% 20%,
		color-mix(in srgb, var(--accent) 92%, #fff) 0%,
		var(--accent) 55%,
		color-mix(in srgb, var(--accent) 70%, #000) 100%
	);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
		0 2px 8px -3px color-mix(in srgb, var(--accent) 65%, transparent);
}
.cp-ava-name {
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.01em;
	color: var(--txt);
}
.cp-time {
	font-size: 10px;
	color: var(--muted);
	font-family: var(--mono);
	background: var(--tab-bg);
	padding: 2px 8px;
	border-radius: 100vmax;
	margin-left: auto; /* push time + collapse to the right of the Vera identity */
}
.cp-collapse {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--muted);
	border-radius: 6px;
	cursor: pointer;
	transition:
		background 0.12s,
		transform 0.15s;
}
.cp-collapse:hover {
	background: var(--tab-bg);
	color: var(--txt);
}
.cp-asst.cp-collapsed .cp-collapse {
	transform: rotate(-90deg);
}
.cp-asst.cp-collapsed .cp-asst-body {
	display: none;
}

/* ==== FUNDS TABS — Deposit/Withdraw as tabs (swap/send removed) ==== */
#view-funds {
	max-width: 1120px;
}
/* Tab stack fills the funds width (matches the hero), not a narrow centred column. */
.fa-primary {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}
.fa-secondary {
	width: 100%;
	margin-top: 4px;
}
.funds-tabs {
	display: flex;
	gap: 3px;
	width: 100%;
	margin-bottom: 0 !important;
}
.funds-tabs .seg-btn {
	flex: 1;
	padding: 10px 14px;
	font-size: 13px;
}
/* Cards sit on the dark --cardcolor surface. */
.fund-card,
.fund-card.primary {
	background: var(--cardcolor);
}
/* Deposit (ref #60): a bigger, centred QR + clean address block. */
#ftab-deposit .dep-qr-wrap {
	margin: 10px 0 16px;
}
#ftab-deposit .dep-qr {
	width: 208px;
	height: 208px;
	padding: 15px;
	border-radius: 20px;
}
#ftab-deposit #dep-addr-lab {
	text-align: center;
}
#ftab-deposit .addr-box {
	justify-content: center;
}
#ftab-deposit .addr-box .addr {
	flex: 0 1 auto;
	text-align: center;
	word-break: break-all;
}

/* ==== FUNDS CHIPS 3COL — network chooser as a 3-column grid (2 on narrow) ==== */
.chain-chips {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
	.chain-chips {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==== FUNDS TOP — wallet (1fr) beside actions (3fr); wallet stacks column-wise ==== */
.funds-top {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 4px;
	align-items: start;
	margin-bottom: 14px;
	padding: 4px;
	background: var(--accent);
	border-radius: 24px;
}
.funds-wallet {
	grid-template-columns: 1fr;
	align-items: stretch;
	align-content: start;
	gap: 18px;
	margin-bottom: 0;
	height: 100%;
}
.fw-equity {
	padding-right: 0;
	padding-bottom: 16px;
	border-right: none;
	border-bottom: 1px solid var(--border);
}
.fw-grid {
	flex-direction: column;
	gap: 16px;
}
.funds-actions {
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.funds-top {
		grid-template-columns: 1fr;
	}
	.funds-wallet {
		grid-template-columns: minmax(200px, 260px) 1fr;
		height: auto;
	}
	.fw-equity {
		padding-right: 24px;
		padding-bottom: 0;
		border-right: 1px solid var(--border);
		border-bottom: none;
	}
	.fw-grid {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==== VM FEED SCROLL — the activity/trades feed keeps natural height so the
   modal body (overflow:auto) scrolls, instead of the feed shrinking to fit. ==== */
.vm-body > .vm-feed {
	flex: none;
}

/* ==== FUNDS FRAME LIGHT — soften the solid-mint funds-top frame in light mode ==== */
html[data-theme="light"] .funds-top {
	background: rgba(15, 180, 136, 0.5);
}

/* ===== Vera empty-state: welcome hero + recent chats ==================== */
.cp-welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 9px;
	padding: 22px 8px;
}
.cp-welcome.center {
	margin: auto 0; /* vertically center the first-run hero in the list */
}
.cp-welcome-orb {
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--accent);
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--accent) 20%, transparent),
		transparent 68%
	);
	position: relative;
	animation: cpFloat 3.4s ease-in-out infinite;
}
.cp-welcome-orb svg {
	filter: drop-shadow(
		0 0 7px color-mix(in srgb, var(--accent) 65%, transparent)
	);
}
.cp-welcome-orb::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--accent) 26%, transparent),
		transparent 62%
	);
	filter: blur(9px);
	z-index: -1;
	animation: cpHalo 3.4s ease-in-out infinite;
}
@keyframes cpFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
}
@keyframes cpHalo {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.85);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.12);
	}
}
.cp-welcome-title {
	font-size: 16px;
	font-weight: 650;
	color: var(--txt);
	margin-top: 2px;
}
.cp-welcome-sub {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
	max-width: 300px;
}
.cp-recent {
	width: 100%;
	margin-top: 14px;
	text-align: left;
}
.cp-recent-h {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin: 0 4px 8px;
}
.cp-recent-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--border);
	background: var(--cardcolor);
	border-radius: 12px;
	color: var(--txt);
	cursor: pointer;
	margin-bottom: 6px;
	transition:
		border-color 0.12s,
		background 0.12s;
}
.cp-recent-row:hover {
	border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
	background: color-mix(in srgb, var(--accent) 5%, var(--cardcolor));
}
.cp-recent-title {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-recent-time {
	flex: none;
	font-size: 11px;
	color: var(--muted);
	font-family: var(--mono);
}
@media (prefers-reduced-motion: reduce) {
	.cp-welcome-orb,
	.cp-welcome-orb::before {
		animation: none;
	}
}

/* bottom-card tab bar: even segments + inline expand button (4px gap row) */
.bottom-card .btab {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	padding: 8px 10px;
	border-radius: 100vmax;
}
.bottom-card .panel-tabs .vm-more {
	position: static;
	flex: none;
	top: auto;
	right: auto;
	width: 30px;
	height: 30px;
}

/* ==== CP TICK — sparkle snaps 90deg every 2s (8s loop = 4 steps) ==== */
@keyframes cp-tick {
	0%,
	19% {
		transform: rotate(0deg);
	}
	25%,
	44% {
		transform: rotate(90deg);
	}
	50%,
	69% {
		transform: rotate(180deg);
	}
	75%,
	94% {
		transform: rotate(270deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cp-launch-ic svg,
	.topbar .nav-right .cp-navtoggle svg {
		animation: none;
	}
}
/* ============================================================================
   Copilot "Conductor" stage — P0: run vignette + live thinking rail.
   Cinematic always-on (design fork 1); prefers-reduced-motion → calm static.
   Design: docs/superpowers/specs/2026-07-07-copilot-conductor-design.md
   ============================================================================ */
.cp-vignette {
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.55s ease;
	--vig: var(--accent);
	--vig2: #6aa6ff;
}
.cp-vignette.cp-vig-on {
	opacity: 1;
}
.cp-vignette[data-mood="think"] {
	--vig: #6aa6ff;
	--vig2: #9b8bff;
}
.cp-vignette[data-mood="work"] {
	--vig: var(--accent);
	--vig2: #6aa6ff;
}
.cp-vignette[data-mood="draw"] {
	--vig: #b98bff;
	--vig2: #ff8bd0;
}
.cp-vignette[data-mood="reply"] {
	--vig: #46d6a0;
	--vig2: var(--accent);
}
.cp-vignette[data-mood="error"] {
	--vig: var(--down);
	--vig2: #ff9b6a;
}
.cp-vig-ring {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	box-shadow:
		inset 0 0 0 1.5px color-mix(in srgb, var(--vig) 60%, transparent),
		inset 0 0 40px -6px color-mix(in srgb, var(--vig) 42%, transparent),
		inset 0 0 130px -30px color-mix(in srgb, var(--vig2) 52%, transparent),
		inset 0 0 230px -70px color-mix(in srgb, var(--vig) 62%, transparent);
	animation: cp-vig-breathe 3.4s ease-in-out infinite;
}
@keyframes cp-vig-breathe {
	0%,
	100% {
		opacity: 0.68;
	}
	50% {
		opacity: 1;
	}
}

.cp-rail {
	position: fixed;
	top: 66px;
	right: 22px;
	z-index: 9999;
	width: min(300px, 30vw);
	max-height: 46vh;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	opacity: 0;
	transform: translateX(10px);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
	font-family: var(--mono);
	--rmood: var(--accent);
}
.cp-rail.cp-rail-on {
	opacity: 1;
	transform: none;
}
.cp-rail[data-mood="think"] {
	--rmood: #6aa6ff;
}
.cp-rail[data-mood="work"] {
	--rmood: var(--accent);
}
.cp-rail[data-mood="reply"] {
	--rmood: #46d6a0;
}
.cp-rail[data-mood="error"] {
	--rmood: var(--down);
}
.cp-rail-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 7px;
	padding-left: 2px;
}
.cp-rail-orb {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rmood);
	box-shadow: 0 0 9px var(--rmood);
	animation: cp-orb 1.3s ease-in-out infinite;
}
@keyframes cp-orb {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}
.cp-rail-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
}
.cp-rail-line {
	pointer-events: auto;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 11px;
	line-height: 1.45;
	color: color-mix(in srgb, var(--txt) 55%, transparent);
	opacity: 0;
	transform: translateY(5px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		color 0.15s ease;
	text-shadow: 0 1px 8px color-mix(in srgb, var(--bg) 82%, transparent);
}
.cp-rail-line.in {
	opacity: 1;
	transform: none;
}
.cp-rail-line:hover {
	color: var(--txt);
}
.cp-rail-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	flex: 0 0 5px;
	margin-top: 5px;
	background: currentColor;
	opacity: 0.55;
}
.cp-rail-txt {
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cp-rail-line:hover .cp-rail-txt {
	-webkit-line-clamp: unset;
}
.cp-rl-think .cp-rail-txt {
	font-style: italic;
	color: color-mix(in srgb, var(--txt) 44%, transparent);
}
.cp-rl-narrate {
	color: color-mix(in srgb, var(--txt) 78%, transparent);
}
.cp-rl-step .cp-rail-dot {
	background: var(--rmood);
	opacity: 1;
}
.cp-rl-step .cp-rail-txt {
	color: color-mix(in srgb, var(--rmood) 85%, var(--txt));
}

@media (prefers-reduced-motion: reduce) {
	.cp-vig-ring {
		animation: none;
		opacity: 0.85;
	}
	.cp-rail-orb {
		animation: none;
	}
	.cp-rail-line {
		transition: none;
	}
	.cp-vignette,
	.cp-rail {
		transition: opacity 0.2s ease;
	}
}

/* ---- Chart loading shimmer — shown on timeframe/coin switch until new data lands ---- */
#chart-host {
	position: relative;
}
.chart-shimmer {
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.18s ease;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 22px,
			color-mix(in srgb, var(--txt) 4%, transparent) 22px,
			color-mix(in srgb, var(--txt) 4%, transparent) 24px
		),
		var(--card);
}
.chart-shimmer.on {
	opacity: 1;
	pointer-events: auto; /* block interaction with the stale chart while loading */
}
.chart-shimmer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 20%,
		color-mix(in srgb, var(--txt) 7%, transparent) 42%,
		color-mix(in srgb, var(--txt) 12%, transparent) 50%,
		color-mix(in srgb, var(--txt) 7%, transparent) 58%,
		transparent 80%
	);
	transform: translateX(-100%);
	animation: chart-shimmer-sweep 1.15s ease-in-out infinite;
}
@keyframes chart-shimmer-sweep {
	to {
		transform: translateX(100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.chart-shimmer::after {
		animation: none;
	}
	.chart-shimmer {
		transition: opacity 0.05s ease;
	}
}

/* ============================================================================
   Copilot "floating center" shell — overrides the fixed right sidebar.
   Click AI → a minimal composer slides up from the bottom into the centre; the
   message thread sits above it and COLLAPSES when you move away, so the terminal
   (with Vera working) stays visible. Focus in → thread expands. iMessage-style.
   Later rules win on ties; !important guards the layout props.
   ============================================================================ */
.cp-side {
	top: auto !important;
	right: auto !important;
	left: 50% !important;
	bottom: 20px !important;
	width: min(680px, 94vw) !important;
	height: auto !important;
	max-height: 84vh !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: translate(-50%, 120%) !important;
	opacity: 0;
	transition:
		transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
		opacity 0.3s ease !important;
	justify-content: flex-end;
	gap: 10px;
	pointer-events: none;
}
.cp-side.cp-open {
	transform: translate(-50%, 0) !important;
	opacity: 1;
}
.cp-side > * {
	pointer-events: auto;
}

/* Header → a slim floating pill above the composer; part of the collapsible thread. */
.cp-side .cp-head {
	align-self: center;
	background: color-mix(in srgb, var(--panel) 90%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid var(--border-2);
	border-radius: 100vmax;
	padding: 4px 6px 4px 14px;
	box-shadow: 0 10px 32px -14px rgba(0, 0, 0, 0.6);
}

/* Messages thread — bubbles float on the terminal; collapse when not focused. */
.cp-side .cp-list {
	flex: 0 1 auto;
	max-height: 62vh;
	overflow-y: auto;
	padding: 2px 4px;
	transition:
		max-height 0.34s cubic-bezier(0.32, 0.72, 0, 1),
		opacity 0.24s ease,
		transform 0.24s ease;
}
.cp-side:not(.cp-focused):not(.cp-active) .cp-head,
.cp-side:not(.cp-focused):not(.cp-active) .cp-list,
.cp-side:not(.cp-focused):not(.cp-active) .cp-sessions,
.cp-side:not(.cp-focused):not(.cp-active) .cp-settings {
	max-height: 0 !important;
	opacity: 0;
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
	overflow: hidden;
	transform: translateY(10px);
}

/* Composer → the always-visible floating iMessage box. */
.cp-side .cp-compose {
	background: color-mix(in srgb, var(--panel) 93%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	border: 1px solid var(--border-2);
	border-radius: 22px;
	box-shadow:
		0 18px 50px -16px rgba(0, 0, 0, 0.66),
		0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
	padding: 8px 10px;
}
.cp-side .cp-input-row {
	align-items: flex-end;
}

/* ==== AUTH REDESIGN — empty green-gradient hero (left) + sign-up form (right) ==== */
#auth {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: block;
	background: #0a0b0a;
	color: #f2f3f1;
	font-family: var(--ui);
	overflow: auto;
	-webkit-font-smoothing: antialiased;
}
#auth .va-tabs {
	display: none !important;
}
.au-shell {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	min-height: 100%;
	padding: 14px;
}
.au-hero {
	border-radius: 22px;
	min-height: 320px;
	background:
		radial-gradient(
			88% 52% at 50% -4%,
			rgba(47, 211, 160, 0.9),
			rgba(47, 211, 160, 0.4) 22%,
			rgba(15, 60, 46, 0.12) 48%,
			transparent 64%
		),
		linear-gradient(180deg, #0c1613, #070b09 72%);
}
.au-side {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 20px;
}
.au-card {
	width: 100%;
	max-width: 430px;
}
.au-card h2 {
	margin: 0;
	text-align: center;
	text-transform: none;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #f2f3f1;
}
.au-sub {
	margin: 8px 0 26px;
	text-align: center;
	color: #8b8f8c;
	font-size: 14px;
}
#auth #google-row {
	display: block;
	margin-bottom: 4px;
}
.au-oauth-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.au-oauth {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	border-radius: 12px;
	background: #131513;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #f2f3f1;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: 0.14s;
}
.au-oauth:hover {
	background: #1b1e1b;
	border-color: rgba(255, 255, 255, 0.18);
}
.au-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0;
	color: #8b8f8c;
	font-size: 13px;
}
.au-or::before,
.au-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
}
.au-namegrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.au-field {
	display: block;
	margin-bottom: 16px;
}
.au-lab {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #d6d8d5;
}
.au-lab .opt {
	color: #8b8f8c;
	font-weight: 500;
}
.au-field input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border-radius: 12px;
	background: #1d1d1f;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #f2f3f1;
	font: inherit;
	font-size: 14px;
	transition: border-color 0.14s;
}
.au-field input::placeholder {
	color: #6b6f6c;
}
.au-field input:focus {
	outline: none;
	border-color: var(--accent);
}
.au-pass {
	position: relative;
	display: block;
}
.au-pass input {
	padding-right: 44px;
}
.au-eye {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: none;
	background: none;
	color: #8b8f8c;
	cursor: pointer;
}
.au-eye:hover {
	color: #d6d8d5;
}
.au-eye .au-eye-slash {
	display: block;
}
.au-eye.on .au-eye-slash {
	display: none;
}
.au-hint {
	margin: -6px 0 18px;
	color: #8b8f8c;
	font-size: 12.5px;
}
.au-forgot {
	margin: -6px 0 16px;
	text-align: right;
}
.au-forgot a {
	color: #8b8f8c;
	font-size: 12.5px;
	text-decoration: none;
}
.au-forgot a:hover {
	color: var(--accent);
}
.au-cta {
	width: 100%;
	height: 50px;
	border: none;
	border-radius: 12px;
	background: #ffffff;
	color: #0a0b0a;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: 0.14s;
}
.au-cta:hover {
	background: #e9eae7;
}
.au-cta:disabled {
	opacity: 0.6;
	cursor: default;
}
.au-err {
	margin-top: 12px;
	text-align: center;
	color: #f0655f;
	font-size: 13px;
}
.au-err.ok {
	color: var(--accent);
}
.au-switch {
	margin-top: 20px;
	text-align: center;
	color: #8b8f8c;
	font-size: 13.5px;
}
.au-switch a {
	color: #f2f3f1;
	font-weight: 700;
	text-decoration: none;
}
.au-switch a:hover {
	text-decoration: underline;
}
@media (max-width: 860px) {
	.au-shell {
		grid-template-columns: 1fr;
	}
	.au-hero {
		min-height: 170px;
	}
}

/* ==== AUTH AUTOFILL — keep fields dark; Chrome's autofill forces a light bg ==== */
#auth input:-webkit-autofill,
#auth input:-webkit-autofill:hover,
#auth input:-webkit-autofill:focus,
#auth input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #1d1d1f inset;
	-webkit-text-fill-color: #f2f3f1;
	caret-color: #f2f3f1;
	transition: background-color 600000s 0s ease;
}

/* ==== AUTH FORCE DARK — login/signup is always dark, even when the app is in
   light theme (the global input rules use theme vars + high specificity, so they'd
   otherwise paint the fields light + pill-shaped). ==== */
#auth {
	color-scheme: dark;
	--bg: #0a0b0a;
	--panel: #131513;
	--card: #131513;
	--card-2: #1d1d1f;
	--tab-bg: #1d1d1f;
	--inset: #1d1d1f;
	--hover: #22242a;
	--txt: #f2f3f1;
	--txt-2: #b7b7b2;
	--muted: #8b8f8c;
	--border: rgba(255, 255, 255, 0.1);
	--border-2: rgba(255, 255, 255, 0.14);
}
#auth .au-field input {
	background: #1d1d1f !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 12px !important;
	color: #f2f3f1 !important;
}
#auth .au-field input:focus {
	border-color: var(--accent) !important;
}

/* ==== AUTH HERO BARS — live order-book: green asks hang from the top, red bids
   rise from the bottom, headline between. Chart green/red. Pure CSS animation. ==== */
.au-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	background:
		radial-gradient(
			115% 60% at 50% 42%,
			rgba(47, 211, 160, 0.07),
			transparent 60%
		),
		#17181c;
}
.au-bars {
	display: flex;
	gap: 5px;
	padding: 0;
	height: 27%;
	flex: none;
}
.au-bars-top {
	align-items: flex-start;
}
.au-bars-bot {
	align-items: flex-end;
	margin-top: auto;
}
.au-bars i {
	flex: 1;
	min-width: 0;
	height: var(--h, 60%);
	border-radius: 7px;
	opacity: 0.92;
	transition: height 0.42s cubic-bezier(0.3, 0.05, 0.3, 1);
}
.au-bars-top i {
	background: #7ebd7d;
}
.au-bars-bot i {
	background: #f03f44;
}
@keyframes au-bar {
	from {
		transform: scaleY(0.5);
	}
	to {
		transform: scaleY(1);
	}
}
.au-hero-copy {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 42px;
}
.au-hl {
	margin: 0;
	font-size: clamp(30px, 3.3vw, 46px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: #f4f6f4;
}
.au-hl em {
	font-style: normal;
	color: #7ebd7d;
}
.au-hp {
	margin: 18px 0 0;
	max-width: 45ch;
	font-size: 14.5px;
	line-height: 1.3;
	color: #929292;
}
@media (prefers-reduced-motion: reduce) {
	.au-bars i {
		transition: none;
	}
}
@media (max-width: 860px) {
	.au-bars {
		height: 54px;
	}
	.au-hero-copy {
		padding: 18px 22px;
	}
}

/* ==== AUTH BRAND — Veyra logo above the sign-up header ==== */
#auth {
	--accent: #2fd3a0;
	--accent-2: #29c294;
}
.au-brand {
	justify-content: center;
	margin-bottom: 22px;
	color: #f2f3f1;
}