/* ==========================================================================
   Profitra — Frontend SaaS Dashboard (Dark Mode, Full-Screen App)
   ========================================================================== */

/* Full-bleed reset — !important because app-template.php calls wp_head()
   so this app page (which otherwise bypasses the theme entirely) still
   loads the active theme's global stylesheet. Many themes set a max-width
   + auto margins on html/body for readability on ordinary content pages;
   without overriding that here, the theme's cap silently shrinks this
   whole app into a narrow centered column with dead space on both sides
   instead of filling the viewport. */
html:has(body.tpp-app-body), body.tpp-app-body {
	margin: 0 !important;
	padding: 0 !important;
	background: #0f172a;
	height: 100%;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	/* Without this, the page's own vertical scrollbar (whenever the
	   dashboard is taller than the viewport) falls back to the browser's
	   default light/OS-chrome scrollbar — a jarring, boxy mismatch against
	   this dark app. color-scheme is safe unconditionally here since the
	   body background above stays dark regardless of the in-app Light/Dark
	   Mode toggle (that only re-themes the .tpp-app div's own surface). */
	color-scheme: dark;
	scrollbar-width: thin;
	scrollbar-color: #475569 #1e293b;
}
html:has(body.tpp-app-body)::-webkit-scrollbar,
body.tpp-app-body::-webkit-scrollbar { width: 11px; height: 11px; }
html:has(body.tpp-app-body)::-webkit-scrollbar-track,
body.tpp-app-body::-webkit-scrollbar-track { background: #0f172a; }
html:has(body.tpp-app-body)::-webkit-scrollbar-thumb,
body.tpp-app-body::-webkit-scrollbar-thumb { background: #475569; border-radius: 8px; border: 2px solid #0f172a; }
html:has(body.tpp-app-body)::-webkit-scrollbar-thumb:hover,
body.tpp-app-body::-webkit-scrollbar-thumb:hover { background: #64748b; }

.tpp-app {
	--tpp-bg: #0f172a;
	--tpp-bg-alt: #111827;
	--tpp-surface: #1e293b;
	--tpp-surface-2: #273449;
	--tpp-border: #334155;
	--tpp-text: #f1f5f9;
	--tpp-text-muted: #94a3b8;
	--tpp-primary: #2563eb;
	--tpp-primary-hover: #1d4ed8;
	--tpp-success: #16a34a;
	--tpp-warning: #f59e0b;
	--tpp-danger: #dc2626;
	--tpp-success-text: #4ade80;
	--tpp-danger-text: #f87171;
	--tpp-warning-text: #fbbf24;
	--tpp-info-text: #38bdf8;
	--tpp-info: #0284c7;
	--tpp-neutral-text: #aab2c5;
	--tpp-orange-text: #fb923c;
	--tpp-sidebar-text: #ffffff;
	--tpp-sidebar-text-muted: #aab4cc;
	/* Sidebar nav item text for the "selected"/"promoted" states —
	   deliberately lighter than --tpp-primary/the Learning item's raw
	   violet (#8b5cf6). Using those saturated accent colors directly as
	   TEXT here reads fine on a light background but goes low-contrast
	   and muddy once it's sitting on this app's dark surfaces (and worse
	   still on the item's own translucent accent-tinted background) —
	   these lighter tints keep the same accent identity while staying
	   clearly readable in Dark Mode. Icons/accent bars keep using the
	   saturated colors directly since those are decorative, not text. */
	--tpp-nav-accent-text: #93c5fd;
	--tpp-nav-highlight-text: #c4b5fd;
	--tpp-color-scheme: dark;
	--tpp-radius: 14px;
	--tpp-radius-sm: 9px;
	--tpp-shadow: 0 10px 30px rgba(0,0,0,0.35);
	--tpp-sidebar-w: 258px;
	--tpp-sidebar-w-collapsed: 76px;
	--tpp-font-size: 13.5px;

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

	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	color: var(--tpp-text);
	background: var(--tpp-bg);
	font-size: var(--tpp-font-size);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	/* clip, not hidden: .tpp-app's height is auto (grows to fit its
	   content, per min-height above) so nothing ever actually needs to
	   scroll inside it — this exists purely to guillotine any stray
	   horizontal overflow. But per the CSS overflow spec, an element with
	   overflow-x set to anything but visible and overflow-y left at its
	   visible default gets overflow-y silently forced to auto — which
	   turns .tpp-app into a scroll container. Since that container's own
	   box never actually needs to scroll, every position:sticky
	   descendant (the topbar, the Learning lesson-nav column, etc.) was
	   computing its stuck position against this inert container instead
	   of the real page scroll, so it just scrolled away with the page
	   instead of sticking. overflow: clip on both axes clips the same as
	   hidden but — unlike hidden — never establishes a scroll container,
	   so it doesn't trigger that auto-promotion and sticky descendants
	   correctly track the page's real scroll again. */
	overflow-x: clip;
	overflow-y: clip;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Light theme overrides — applied when the user switches to Light Mode.
   Every rule in this file reads colors through these variables, so this
   block alone re-themes the entire app (structure + status text). */
.tpp-app[data-tpp-theme="light"] {
	--tpp-bg: #f8fafc;
	--tpp-bg-alt: #ffffff;
	--tpp-surface: #ffffff;
	--tpp-surface-2: #f1f5f9;
	--tpp-border: #e2e8f0;
	--tpp-text: #0f172a;
	--tpp-text-muted: #64748b;
	--tpp-primary: #2563eb;
	--tpp-primary-hover: #1d4ed8;
	--tpp-success: #16a34a;
	--tpp-warning: #f59e0b;
	--tpp-danger: #dc2626;
	--tpp-success-text: #15803d;
	--tpp-danger-text: #b91c1c;
	--tpp-warning-text: #b45309;
	--tpp-info-text: #0369a1;
	--tpp-info: #0284c7;
	--tpp-neutral-text: #475569;
	--tpp-orange-text: #c2410c;
	--tpp-sidebar-text: #0f1424;
	--tpp-sidebar-text-muted: #4b5468;
	/* Light Mode's sidebar is near-white, so the saturated accent colors
	   already read clearly as text there — these match the original raw
	   values exactly (var(--tpp-primary) / #8b5cf6) so every rule now
	   reading through these tokens is a no-op change in Light Mode; only
	   Dark Mode gets the lighter tint above. */
	--tpp-nav-accent-text: var(--tpp-primary);
	--tpp-nav-highlight-text: #8b5cf6;
	--tpp-color-scheme: light;
	--tpp-shadow: 0 10px 30px rgba(15,23,42,0.1);
}

/* Every internal scroll container (sidebar nav, tables, modal bodies,
   chart wraps, etc.) gets a slim scrollbar in the current theme's own
   colors instead of the browser's default light/OS-chrome scrollbar —
   the same fix as the page-level scrollbar above, applied wherever a
   scrollbar can appear inside the app itself. */
.tpp-app, .tpp-app * {
	scrollbar-width: thin;
	scrollbar-color: var(--tpp-border) var(--tpp-surface-2);
}
.tpp-app ::-webkit-scrollbar { width: 9px; height: 9px; }
.tpp-app ::-webkit-scrollbar-track { background: transparent; }
.tpp-app ::-webkit-scrollbar-thumb { background: var(--tpp-border); border-radius: 8px; }
.tpp-app ::-webkit-scrollbar-thumb:hover { background: var(--tpp-text-muted); }

.tpp-app a { color: var(--tpp-primary); text-decoration: none; }
.tpp-app a:hover { color: var(--tpp-primary-hover); }

.tpp-app button:focus-visible,
.tpp-app a:focus-visible,
.tpp-app input:focus-visible,
.tpp-app select:focus-visible,
.tpp-app textarea:focus-visible {
	outline: 2px solid var(--tpp-primary);
	outline-offset: 2px;
}
.tpp-app h1, .tpp-app h2, .tpp-app h3, .tpp-app h4, .tpp-app p, .tpp-app ul { margin: 0 0 0.6em; padding: 0; color: var(--tpp-text); }
.tpp-section-heading { font-size: 14px; font-weight: 700; color: var(--tpp-text); }
.tpp-app ul { list-style: none; }
.tpp-app input, .tpp-app select, .tpp-app button, .tpp-app textarea { font-family: inherit; font-size: var(--tpp-font-size); }
.tpp-app svg.tpp-icon { width: 19px; height: 19px; flex-shrink: 0; }

/* Safety net: many components set their own `display` (flex/inline-flex/
   grid/etc.) with higher priority than the UA stylesheet's default
   `[hidden] { display: none }`, which silently defeats every JS
   `el.hidden = true` toggle used throughout the app (wizard steps,
   Next/Save buttons, etc. would render "hidden" elements anyway). This
   guarantees the hidden state always wins, everywhere, regardless of
   what a component's own class rule sets. */
.tpp-app [hidden] { display: none !important; }

/* -------------------- Auth screens -------------------- */

.tpp-auth-app {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background: radial-gradient(circle at 20% 20%, #1a2340 0%, var(--tpp-bg) 55%);
}

/* Light Mode: the dark-navy gradient stop above is tuned for Dark Mode
   and reads as a heavy, mismatched panel against the light card in Light
   Mode — swap in a soft light-blue glow that matches the rest of the
   Light Mode surface palette instead. */
.tpp-app[data-tpp-theme="light"].tpp-auth-app {
	background: radial-gradient(circle at 20% 20%, #e0e9fb 0%, var(--tpp-bg) 55%);
}

.tpp-auth-wrap {
	width: 100%;
	max-width: 420px;
	animation: tpp-fade-up 0.45s ease;
}

.tpp-auth-brand {
	text-align: center;
	margin-bottom: 16px;
}

.tpp-logo-mark {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	margin-bottom: 4px;
	box-shadow: 0 8px 24px rgba(37,99,235,0.4);
	flex-shrink: 0;
}

.tpp-sidebar-brand .tpp-logo-mark { width: 36px; height: 36px; margin-bottom: 0; box-shadow: none; }

.tpp-auth-brand h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--tpp-text);
}

.tpp-auth-brand h1 span { color: var(--tpp-primary); }

.tpp-tagline {
	color: var(--tpp-text-muted);
	font-size: 13px;
}

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

.tpp-auth-tabs {
	display: flex;
	background: var(--tpp-surface-2);
	border-radius: var(--tpp-radius-sm);
	padding: 4px;
	margin-bottom: 22px;
}

.tpp-auth-tabs .tpp-tab {
	flex: 1;
	text-align: center;
	padding: 9px 0;
	border-radius: 7px;
	color: var(--tpp-text-muted);
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s ease, color 0.2s ease;
}

.tpp-tab.is-active {
	background: var(--tpp-primary);
	color: #fff;
}

.tpp-tab:hover:not(.is-active) { color: var(--tpp-text); }

/* `.tpp-app a:hover { color: var(--tpp-primary-hover) }` (specificity
   0,2,1) otherwise beats `.tpp-tab.is-active`'s color (0,2,0) whenever the
   active tab is hovered/focused, silently turning its white text into
   dark blue text on the same blue background — unreadable. */
.tpp-tab.is-active:hover,
.tpp-tab.is-active:focus-visible { color: #fff; }

/* Page-level tabs (Risk Management, Psychology) — same pill look as the
   auth tabs above, reused via TPP.initPageTabs() in tpp-app.js. */
.tpp-page-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--tpp-surface-2);
	border-radius: var(--tpp-radius-sm);
	padding: 4px;
	gap: 2px;
	margin-bottom: 18px;
	scrollbar-width: thin;
}
.tpp-page-tab {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 9px 16px;
	border-radius: 7px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tpp-app:not([data-tpp-theme="light"]) .tpp-page-tab { color: #fff; }
.tpp-page-tab.is-active { background: var(--tpp-primary); color: #fff; }
.tpp-app:not([data-tpp-theme="light"]) .tpp-page-tab:hover:not(.is-active) { background: var(--tpp-surface); }
.tpp-page-tab-panel { animation: tpp-fade-up 0.15s ease; }

/* Light Mode only: inactive tabs get a solid navy chip (not the pale
   --tpp-surface-2 strip they sit on) so white text — required so every
   tab, active or not, reads the same weight — stays legible instead of
   washing out; hover swaps the chip to the system primary blue. Dark
   Mode is untouched (it already had good contrast on --tpp-surface-2). */
.tpp-app[data-tpp-theme="light"] .tpp-page-tab {
	color: #fff;
	background: #1e293b;
	border-color: #334155;
}
.tpp-app[data-tpp-theme="light"] .tpp-page-tab.is-active { background: var(--tpp-primary); border-color: var(--tpp-primary); }
.tpp-app[data-tpp-theme="light"] .tpp-page-tab:hover:not(.is-active) { background: #2563eb; border-color: #2563eb; color: #fff; }

/* -------------------- Rich-text Notes editor -------------------- */

.tpp-rich-editor { border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius-sm); overflow: hidden; }
.tpp-rich-toolbar {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
	gap: 3px;
	padding: 5px 6px;
	background: var(--tpp-surface-2);
	border-bottom: 1px solid var(--tpp-border);
}
.tpp-rich-toolbar button {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--tpp-text);
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	font-size: 12px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tpp-rich-toolbar button:hover { background: var(--tpp-surface); border-color: var(--tpp-border); }
.tpp-rich-sep { width: 1px; height: 18px; flex-shrink: 0; background: var(--tpp-border); margin: 0 2px; }
.tpp-rich-content {
	min-height: 64px;
	max-height: 220px;
	overflow-y: auto;
	padding: 9px 12px;
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
	font-size: 13.5px;
	line-height: 1.5;
}
.tpp-rich-content:focus { outline: none; }
.tpp-rich-content:empty::before { content: attr(data-placeholder); color: var(--tpp-text-muted); }
.tpp-rich-content h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.tpp-rich-content h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.tpp-rich-content p { margin: 0 0 8px; }
.tpp-rich-content ul, .tpp-rich-content ol { margin: 0 0 8px; padding-left: 22px; }
.tpp-rich-content blockquote { margin: 0 0 8px; padding: 4px 12px; border-left: 3px solid var(--tpp-primary); color: var(--tpp-text-muted); font-style: italic; }
.tpp-rich-content a { color: var(--tpp-primary); text-decoration: underline; }

/* -------------------- Forms -------------------- */

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

.tpp-field { display: flex; flex-direction: column; gap: 6px; }

.tpp-field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tpp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Wraps a label (or section heading) together with its optional "?" help
   icon on one line — .tpp-field's own column layout treats this wrapper
   as a single flex child, so existing label-to-input spacing is
   unaffected either way. */
.tpp-field-label-row { display: flex; align-items: center; gap: 6px; }
.tpp-field-label-row label,
.tpp-field-label-row .tpp-section-heading { margin: 0; }

.tpp-help-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--tpp-text-muted);
	cursor: help;
}
.tpp-help-icon:hover,
.tpp-help-icon:focus-visible { color: var(--tpp-primary); }
.tpp-help-icon .tpp-icon { width: 14px; height: 14px; display: block; }

.tpp-app input[type="text"],
.tpp-app input[type="email"],
.tpp-app input[type="password"],
.tpp-app input[type="number"],
.tpp-app input[type="search"],
.tpp-app input[type="date"],
.tpp-app input[type="datetime-local"],
.tpp-app input[type="time"],
.tpp-app input[type="tel"],
.tpp-app input[type="url"],
.tpp-app select,
.tpp-app textarea {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text);
	border-radius: var(--tpp-radius-sm);
	padding: 11px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
	color-scheme: var(--tpp-color-scheme);
}

/* Calendar/clock picker icon visibility (Trade Open/Close Date, Dashboard
   date filters, Settings, every date/time input in the plugin).
   ::-webkit-calendar-picker-indicator + filter (the previous approach)
   reliably recolors a plain <input type="date">'s icon, but empirically
   Chromium does NOT apply that filter to <input type="datetime-local">'s
   picker indicator — it stays black regardless, even though the same
   selector matches the element. Rather than depend on a per-input-type
   browser quirk, the native icon is hidden (opacity: 0, still the real
   clickable control) and a custom SVG icon is drawn instead via
   background-image, explicitly colored per theme — this is guaranteed to
   render correctly and consistently across every input type and browser,
   the same technique already used for the <select> dropdown arrow below. */
.tpp-app input[type="date"]::-webkit-calendar-picker-indicator,
.tpp-app input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.tpp-app input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: 0;
	cursor: pointer;
}
.tpp-app input[type="date"],
.tpp-app input[type="datetime-local"],
.tpp-app input[type="time"] {
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
}
/* Dark Mode: light gray icon, visible against dark input backgrounds. */
.tpp-app:not([data-tpp-theme="light"]) input[type="date"],
.tpp-app:not([data-tpp-theme="light"]) input[type="datetime-local"] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='16' rx='2'/%3e%3cpath d='M16 3v4M8 3v4M3 10h18'/%3e%3c/svg%3e");
}
.tpp-app:not([data-tpp-theme="light"]) input[type="time"] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 7v5l3.5 2'/%3e%3c/svg%3e");
}
/* Light Mode: dark gray icon, kept clearly visible against light inputs. */
.tpp-app[data-tpp-theme="light"] input[type="date"],
.tpp-app[data-tpp-theme="light"] input[type="datetime-local"] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='5' width='18' height='16' rx='2'/%3e%3cpath d='M16 3v4M8 3v4M3 10h18'/%3e%3c/svg%3e");
}
.tpp-app[data-tpp-theme="light"] input[type="time"] {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 7v5l3.5 2'/%3e%3c/svg%3e");
}

.tpp-app textarea { resize: vertical; min-height: 80px; }

.tpp-app select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 15px;
	padding-right: 36px;
}

.tpp-app input:focus, .tpp-app select:focus, .tpp-app textarea:focus {
	outline: none;
	border-color: var(--tpp-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

/* Dark Mode only: force typed text to stay clearly visible while a field
   is focused. Some active themes ship a global `input:focus { color: ... }`
   rule (e.g. a global color-palette variable) that ties our selector on
   specificity and can win the cascade based on stylesheet load order,
   leaving typed text low-contrast. !important guarantees this wins
   regardless of theme load order. Light Mode is untouched. */
.tpp-app:not([data-tpp-theme="light"]) input:focus,
.tpp-app:not([data-tpp-theme="light"]) select:focus,
.tpp-app:not([data-tpp-theme="light"]) textarea:focus {
	color: #ffffff !important;
}

.tpp-app input:disabled, .tpp-app select:disabled, .tpp-app textarea:disabled { opacity: 0.6; }
/* Scoped to text-like inputs only — a blanket `input:read-only` selector
   would also match checkboxes/radios/ranges/file inputs, which the CSS
   spec treats as :read-only by default (they don't support text editing)
   even without the readonly attribute, dimming controls across the
   entire app that were never meant to look disabled. */
.tpp-app input[type="text"]:read-only,
.tpp-app input[type="email"]:read-only,
.tpp-app input[type="number"]:read-only,
.tpp-app input[type="tel"]:read-only { opacity: 0.6; cursor: not-allowed; }

/* Dark Mode only: the same theme-conflict class of bug as the :focus fix
   above, but covering every other select state — the closed box's own
   displayed text, and every row of the opened native option list (which
   is OS/browser-rendered chrome that `color-scheme` alone doesn't
   reliably re-theme on every browser/version). Without !important here,
   a theme's plain `select { color: ... }` / `option { ... }` rule can
   still win by load order even though ours matches too, leaving a
   dropdown's text unreadable against its own dark background. Light
   Mode is untouched. */
.tpp-app:not([data-tpp-theme="light"]) select {
	color: #ffffff !important;
	background-color: var(--tpp-surface-2) !important;
}
.tpp-app:not([data-tpp-theme="light"]) select option {
	background-color: var(--tpp-surface) !important;
	color: #ffffff !important;
}
.tpp-app:not([data-tpp-theme="light"]) select option:checked,
.tpp-app:not([data-tpp-theme="light"]) select option:hover,
.tpp-app:not([data-tpp-theme="light"]) select option:focus {
	background-color: var(--tpp-primary) !important;
	color: #ffffff !important;
}

.tpp-app input[type="checkbox"], .tpp-app input[type="radio"] { accent-color: var(--tpp-primary); }

.tpp-app ::placeholder { color: var(--tpp-text-muted); opacity: 1; }

/* Chrome/Safari force a light autofill background by default — override it. */
.tpp-app input:-webkit-autofill,
.tpp-app input:-webkit-autofill:hover,
.tpp-app input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--tpp-text);
	-webkit-box-shadow: 0 0 0 1000px var(--tpp-surface-2) inset;
	box-shadow: 0 0 0 1000px var(--tpp-surface-2) inset;
	caret-color: var(--tpp-text);
	transition: background-color 9999s ease-in-out 0s;
}

/* Icon-decorated inputs (auth screens) */

.tpp-input-icon {
	position: relative;
	display: flex;
	align-items: center;
}

.tpp-input-icon > svg.tpp-icon {
	position: absolute;
	left: 14px;
	color: var(--tpp-text-muted);
	pointer-events: none;
	width: 18px;
	height: 18px;
}

.tpp-input-icon input {
	padding-left: 42px !important;
}

.tpp-input-icon input[type="password"],
.tpp-input-icon input[data-tpp-has-toggle] {
	padding-right: 42px !important;
}

.tpp-input-toggle {
	position: absolute;
	right: 10px;
	background: transparent;
	border: none;
	color: var(--tpp-text-muted);
	cursor: pointer;
	padding: 6px;
	display: flex;
	border-radius: 6px;
}

.tpp-input-toggle:hover { color: var(--tpp-text); background: var(--tpp-border); }
.tpp-input-toggle svg { width: 17px; height: 17px; }

.tpp-field-inline {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.tpp-app input[type="color"] {
	width: 44px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	cursor: pointer;
}

.tpp-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

/* Suggested Investment — a compact card sitting directly above the
   Investment Amount field it fills in: label, big value, the risk % it
   was based on, and an explicit "Use This Amount" button. Hidden until
   Risk Management has both an account balance and a risk-per-trade % to
   calculate from. */
.tpp-suggested-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 12px 14px;
	margin-bottom: 8px;
	border: 1px solid rgba(37,99,235,0.35);
	border-radius: var(--tpp-radius-sm);
	background: rgba(37,99,235,0.08);
}
.tpp-suggested-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-primary); }
.tpp-suggested-card-value { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--tpp-text); }
.tpp-suggested-card-note { font-size: 11.5px; color: var(--tpp-text-muted); margin-bottom: 5px; }

.tpp-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tpp-text-muted); text-transform: none; }
.tpp-checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
@media (max-width: 480px) { .tpp-checkbox-grid { grid-template-columns: 1fr; } }

.tpp-link { font-size: 13.5px; }

.tpp-honeypot { position: absolute; left: -9999px; }

/* Password strength meter (registration) — a thin bar + colored label
   updated live from JS as the user types (see initPasswordStrengthMeter()
   in tpp-app.js). Hidden entirely while the field is empty. */
.tpp-password-strength { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
/* Author CSS beats the browser's default [hidden] { display: none } UA
   rule at equal specificity, so the display: flex above would otherwise
   win and show this permanently regardless of the hidden attribute JS
   toggles — this override restores the expected hide behavior. */
.tpp-password-strength[hidden] { display: none; }
.tpp-password-strength-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--tpp-border); overflow: hidden; }
.tpp-password-strength-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.2s ease, background-color 0.2s ease; }
.tpp-password-strength-label { font-size: 12px; font-weight: 600; white-space: nowrap; }

.tpp-password-strength-bar span.tpp-strength-weak { background: var(--tpp-danger); }
.tpp-password-strength-bar span.tpp-strength-fair { background: var(--tpp-warning); }
.tpp-password-strength-bar span.tpp-strength-strong { background: var(--tpp-success); }

.tpp-password-strength-label.tpp-strength-weak { color: var(--tpp-danger-text); }
.tpp-password-strength-label.tpp-strength-fair { color: var(--tpp-warning-text); }
.tpp-password-strength-label.tpp-strength-strong { color: var(--tpp-success-text); }

.tpp-form-note { font-size: 12.5px; color: var(--tpp-text-muted); }
.tpp-form-note-error { color: var(--tpp-danger-text, #f87171); font-weight: 600; }
.tpp-form-note-success { color: var(--tpp-success-text); font-weight: 600; }
/* Buy/Long vs Sell/Short selector (Add/Edit Trade Step 1) — two large
   selectable buttons replacing the old <select>; the actual saved value
   still lives in the hidden #tj-direction input right after this block
   (see setDirection() in trade-journal.js). */
.tpp-direction-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.tpp-direction-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 12px;
	border-radius: var(--tpp-radius-sm);
	border: 1.5px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.tpp-direction-btn svg { flex-shrink: 0; transition: transform 0.15s ease; }
.tpp-direction-btn:hover {
	transform: translateY(-1px);
	border-color: var(--tpp-primary);
}
.tpp-direction-btn:focus-visible {
	outline: 2px solid var(--tpp-primary);
	outline-offset: 2px;
}
.tpp-direction-btn-buy:hover { border-color: var(--tpp-success); color: var(--tpp-success-text); }
.tpp-direction-btn-sell:hover { border-color: var(--tpp-danger); color: var(--tpp-danger-text); }

.tpp-direction-btn-buy.is-selected {
	background: var(--tpp-success);
	border-color: var(--tpp-success);
	color: #fff;
	box-shadow: 0 6px 18px rgba(22,163,74,0.35);
}
.tpp-direction-btn-sell.is-selected {
	background: var(--tpp-danger);
	border-color: var(--tpp-danger);
	color: #fff;
	box-shadow: 0 6px 18px rgba(220,38,38,0.35);
}
.tpp-direction-btn.is-selected svg { transform: scale(1.12); }

@media (max-width: 480px) {
	.tpp-direction-toggle { grid-template-columns: 1fr; }
}

.tpp-leverage-warning { color: var(--tpp-warning-text); font-weight: 600; margin-top: 6px; }
.tpp-leverage-maxed { display: inline-flex; align-items: center; gap: 5px; color: var(--tpp-danger-text); font-weight: 700; }
.tpp-leverage-maxed svg { flex-shrink: 0; }

/* Subscription page: unified Active Plan card, shown only while the
   member's subscription is active — replaces the separate Status/
   Current Plan/Time Remaining cards with one green-accented summary. */
.tpp-card-active-plan {
	background: linear-gradient(135deg, rgba(22,163,74,0.14), rgba(22,163,74,0.05));
	border: 1px solid rgba(22,163,74,0.35);
}
.tpp-active-plan-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}
.tpp-active-plan-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.tpp-active-plan-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tpp-success);
	color: #ffffff;
}
.tpp-active-plan-check svg { width: 13px; height: 13px; }
.tpp-active-plan-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--tpp-success);
	color: #ffffff;
}
.tpp-active-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tpp-active-plan-label {
	display: block;
	font-size: 12px;
	color: var(--tpp-text-muted);
	margin-bottom: 4px;
}
.tpp-active-plan-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--tpp-text);
}
@media (max-width: 640px) {
	.tpp-active-plan-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Subscription page: Coupon Code + Apply Coupon */
.tpp-coupon-row {
	display: flex;
	gap: 8px;
}
.tpp-coupon-row input { flex: 1; }

.tpp-form-footer-link { text-align: center; margin-top: 4px; font-size: 13.5px; }

.tpp-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--tpp-text-muted);
	font-size: 12px;
	margin: 4px 0;
}

.tpp-divider::before, .tpp-divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--tpp-border);
}

.tpp-divider span { padding: 0 10px; }

.tpp-divider-line { border: none; border-top: 1px solid var(--tpp-border); margin: 6px 0 16px; }

.tpp-google-btn { display: flex; justify-content: center; }

/* Plan option cards (subscription request form) */

.tpp-plan-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.tpp-plan-option {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 12px 14px;
	cursor: pointer;
	text-transform: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.tpp-plan-option:has(input:checked) { border-color: var(--tpp-primary); background: rgba(37,99,235,0.12); }
.tpp-plan-option input { width: auto; margin-right: 6px; }
.tpp-plan-option-label { font-weight: 600; color: var(--tpp-text); }

/* Select Plan pricing: LKR and USD given equal typographic weight (same
   size/weight) so USD never reads as a faded, secondary afterthought —
   only the color differs, purely to tell the two currencies apart at a
   glance, not to rank one above the other. */
.tpp-plan-option-prices {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
}
.tpp-plan-option-price,
.tpp-plan-option-price-usd {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.tpp-plan-option-price { color: var(--tpp-text); }
.tpp-plan-option-price-usd { color: var(--tpp-primary); }
.tpp-plan-option-price-approx { font-weight: 500; opacity: 0.7; }

/* -------------------- Buttons -------------------- */

.tpp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--tpp-radius-sm);
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
}

.tpp-btn:hover { background: var(--tpp-border); transform: translateY(-1px); }
.tpp-btn:active { transform: translateY(0); }

.tpp-btn-primary {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: #fff;
	box-shadow: 0 6px 18px rgba(37,99,235,0.35);
}

.tpp-btn-primary:hover { transform: translateY(-1px); color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* `.tpp-app a { color: var(--tpp-primary); }` is more specific (class +
   element) than a bare `.tpp-btn-primary` class rule, so a
   `<a class="tpp-btn tpp-btn-primary">` (used for "Create a Goal",
   "Add Trade", "Renew Subscription", etc.) would otherwise render its
   text in link-blue instead of white — invisible against the same blue
   gradient background in both Light and Dark Mode. */
.tpp-app a.tpp-btn-primary,
.tpp-app a.tpp-btn-primary:hover { color: #fff; }

.tpp-btn-danger { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }
.tpp-btn-danger:hover { background: rgba(220,38,38,0.24); color: var(--tpp-danger-text); }

.tpp-btn-sm { padding: 7px 12px; font-size: 12.5px; }
.tpp-btn-lg { padding: 14px 28px; font-size: 15px; }

.tpp-btn-block { width: 100%; }
.tpp-btn-icon { padding: 8px; }
/* Profile "Save Changes": a full-width block button reads as much
   heavier than it needs to once the fields above it are paired up into
   .tpp-field-row columns — a normal-width button aligned to the same
   right edge as the fields matches the rest of the app's form/modal
   footers instead of dominating the card. */
.tpp-btn-profile-save { align-self: flex-end; }
.tpp-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* -------------------- Alerts -------------------- */

.tpp-alert {
	padding: 12px 16px;
	border-radius: var(--tpp-radius-sm);
	font-size: 13.5px;
	margin-bottom: 18px;
	border: 1px solid transparent;
}

.tpp-alert-success { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.35); color: var(--tpp-success-text); }
.tpp-alert-error { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.35); color: var(--tpp-danger-text); }
.tpp-alert-warning { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.4); color: var(--tpp-warning-text); }
.tpp-alert-info { background: rgba(2,132,199,0.12); border-color: rgba(2,132,199,0.35); color: var(--tpp-info-text); }

.tpp-alert-inline { margin: 0 0 20px; }

.tpp-text-success { color: var(--tpp-success-text); }
.tpp-text-danger { color: var(--tpp-danger-text); }

/* -------------------- Global toast notifications -----------------------
   Floating, stacked, bottom-right. Created/managed entirely by
   TPP.toast() in tpp-app.js — this is the only notification surface
   that pop-up alerts (validation, save success, subscription messages,
   API errors, etc.) should use across the app. */

.tpp-toast-container {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10000;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	max-width: min(360px, calc(100vw - 32px));
	pointer-events: none;
}

.tpp-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-radius: var(--tpp-radius-sm);
	box-shadow: 0 12px 28px rgba(15,23,42,0.28), 0 2px 8px rgba(15,23,42,0.16);
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 500;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tpp-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.tpp-toast.is-leaving { opacity: 0; transform: translateY(-6px) scale(0.98); }

.tpp-toast-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.tpp-toast-icon svg { width: 100%; height: 100%; }
.tpp-toast-message { flex: 1 1 auto; word-break: break-word; }

.tpp-toast-close {
	all: unset;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
	opacity: 0.85;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.tpp-toast-close:hover { opacity: 1; background: rgba(255,255,255,0.16); }
.tpp-toast-close svg { width: 12px; height: 12px; }

.tpp-toast-success { background: var(--tpp-success); color: #ffffff; }
.tpp-toast-error { background: var(--tpp-danger); color: #ffffff; }
.tpp-toast-info { background: var(--tpp-info); color: #ffffff; }
.tpp-toast-warning { background: var(--tpp-warning); color: #291a04; }
.tpp-toast-warning .tpp-toast-close:hover { background: rgba(0,0,0,0.1); }

@media (max-width: 640px) {
	.tpp-toast-container {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}
}

/* -------------------- App shell: sidebar + content -------------------- */

.tpp-dashboard-app {
	display: flex;
	min-height: 100vh;
	width: 100%;
}

.tpp-sidebar {
	width: var(--tpp-sidebar-w);
	flex-shrink: 0;
	background: var(--tpp-bg-alt);
	border-right: 1px solid var(--tpp-border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	transition: width 0.2s ease, transform 0.25s ease;
	z-index: 40;
}

.tpp-app[data-sidebar="collapsed"] .tpp-sidebar { width: var(--tpp-sidebar-w-collapsed); }

.tpp-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--tpp-border);
}

.tpp-sidebar-brand { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.tpp-sidebar-brand .tpp-brand-name { white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--tpp-sidebar-text); }
.tpp-sidebar-brand .tpp-brand-name span { color: var(--tpp-primary); }

.tpp-app[data-sidebar="collapsed"] .tpp-brand-name,
.tpp-app[data-sidebar="collapsed"] .tpp-nav-label {
	display: none;
}

.tpp-sidebar-toggle {
	background: transparent;
	border: none;
	color: var(--tpp-sidebar-text-muted);
	cursor: pointer;
	padding: 6px;
	border-radius: 7px;
	display: flex;
	transition: background 0.15s ease, color 0.15s ease;
}
.tpp-sidebar-toggle:hover { background: var(--tpp-surface-2); color: var(--tpp-sidebar-text); }
.tpp-app[data-sidebar="collapsed"] .tpp-sidebar-toggle svg { transform: rotate(180deg); }

.tpp-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }

.tpp-sidebar .tpp-nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--tpp-radius-sm);
	color: var(--tpp-sidebar-text);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tpp-nav-item svg.tpp-icon { color: var(--tpp-sidebar-text-muted); transition: color 0.18s ease; flex-shrink: 0; }

.tpp-nav-item:hover { background: var(--tpp-surface-2); color: var(--tpp-sidebar-text); transform: translateX(3px); }
.tpp-nav-item:hover svg.tpp-icon { color: var(--tpp-nav-accent-text); }
/* Dark Mode only: hover text also picks up the accent tint (the icon
   already does above, in both themes — --tpp-nav-accent-text equals
   --tpp-primary in Light Mode, so that line is a no-op there). Light
   Mode's hover text stays the original --tpp-sidebar-text (near-black on
   a near-white surface) since that combination already read fine — no
   reason to touch a theme that was never the problem. */
.tpp-app:not([data-tpp-theme="light"]) .tpp-nav-item:hover { color: var(--tpp-nav-accent-text); }

.tpp-nav-item.is-active {
	background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(37,99,235,0.08));
	color: var(--tpp-nav-accent-text);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgba(37,99,235,0.35);
}
.tpp-nav-item.is-active::before {
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 20px;
	border-radius: 0 4px 4px 0;
	background: var(--tpp-primary);
}
.tpp-nav-item.is-active svg.tpp-icon { color: var(--tpp-nav-accent-text); }

.tpp-nav-item.is-locked { color: var(--tpp-sidebar-text-muted); cursor: pointer; }
.tpp-nav-item.is-locked svg.tpp-icon { color: var(--tpp-sidebar-text-muted); }
.tpp-nav-item.is-locked:hover { background: var(--tpp-surface-2); color: var(--tpp-sidebar-text); transform: none; }

/* Learning: violet accent (matches the violet already used in the app's
   progress-bar gradient) instead of the primary blue every other nav
   item uses, so it reads as a distinct, promoted destination in the
   list at rest — not just once selected. Same is-active/hover mechanics
   as every other item, just re-colored; wins over .tpp-nav-item.is-active
   by having one more class in the selector. */
.tpp-nav-item.tpp-nav-item-highlight:not(.is-locked) svg.tpp-icon { color: var(--tpp-nav-highlight-text); }
.tpp-nav-item.tpp-nav-item-highlight:not(.is-locked) .tpp-nav-label { color: var(--tpp-nav-highlight-text); font-weight: 700; }
/* A persistent (not just hover/active) faint violet wash + hairline so
   the item reads as a distinct, promoted destination the instant the
   sidebar renders, not only once the user interacts with it. */
.tpp-nav-item.tpp-nav-item-highlight:not(.is-locked):not(.is-active) {
	background: rgba(139,92,246,0.07);
	box-shadow: inset 0 0 0 1px rgba(139,92,246,0.16);
}
.tpp-nav-item.tpp-nav-item-highlight:not(.is-locked):hover { background: rgba(139,92,246,0.16); box-shadow: inset 0 0 0 1px rgba(139,92,246,0.3); }
.tpp-nav-item.tpp-nav-item-highlight:not(.is-locked):hover svg.tpp-icon { color: var(--tpp-nav-highlight-text); }
.tpp-nav-item.tpp-nav-item-highlight.is-active {
	background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.08));
	color: var(--tpp-nav-highlight-text);
	box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35);
}
.tpp-nav-item.tpp-nav-item-highlight.is-active::before { background: #8b5cf6; }
.tpp-nav-item.tpp-nav-item-highlight.is-active svg.tpp-icon { color: var(--tpp-nav-highlight-text); }
.tpp-nav-item.is-locked:hover svg.tpp-icon { color: var(--tpp-sidebar-text); }

.tpp-nav-lock-icon { width: 14px !important; height: 14px !important; margin-left: auto; flex-shrink: 0; opacity: 0.8; }
.tpp-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Light/Dark mode toggle ------------------------------------------- */

.tpp-theme-icon-dark { display: none; }
.tpp-app[data-tpp-theme="light"] .tpp-theme-icon-light { display: none; }
.tpp-app[data-tpp-theme="light"] .tpp-theme-icon-dark { display: inline-flex; }

/* Standalone circular toggle used on the logged-out auth/gate screens. */
.tpp-theme-toggle-auth {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 30;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text-muted);
	border-radius: 8px;
	padding: 7px;
	cursor: pointer;
	box-shadow: var(--tpp-shadow);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tpp-theme-toggle-auth:hover { background: var(--tpp-surface-2); color: var(--tpp-text); border-color: var(--tpp-primary); }
.tpp-theme-toggle-auth svg { width: 17px; height: 17px; }
.tpp-gate-app .tpp-theme-toggle-auth { position: absolute; }

/* Menu-row toggle inside the topbar profile dropdown. */
.tpp-theme-toggle-label-dark { display: none; }
.tpp-app[data-tpp-theme="light"] .tpp-theme-toggle-label-light { display: none; }
.tpp-app[data-tpp-theme="light"] .tpp-theme-toggle-label-dark { display: inline; }
.tpp-profile-dropdown-item.tpp-theme-toggle {
	width: 100%;
	background: transparent;
	border: none;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}

.tpp-content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tpp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 24px;
	background: var(--tpp-bg-alt);
	border-bottom: 1px solid var(--tpp-border);
	position: sticky;
	top: 0;
	z-index: 20;
}

.tpp-topbar-left { display: flex; align-items: center; gap: 14px; }
.tpp-mobile-menu-btn { display: none; background: transparent; border: none; color: var(--tpp-text); cursor: pointer; padding: 6px; }
.tpp-topbar .tpp-page-title { font-weight: 700; font-size: 17px; color: var(--tpp-text); margin: 0; }

.tpp-topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; padding: 0 20px; }
.tpp-topbar-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 420px;
}
.tpp-topbar-search-icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--tpp-text-muted); pointer-events: none; }
.tpp-topbar-search input[type="search"].tpp-topbar-search-input {
	width: 100%;
	padding: 9px 44px 9px 36px;
	font-size: 13px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: 999px;
	color: var(--tpp-text);
}
.tpp-topbar-search-input:focus { border-color: var(--tpp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.tpp-topbar-search-kbd {
	position: absolute;
	right: 10px;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--tpp-text-muted);
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: 5px;
	padding: 2px 6px;
	pointer-events: none;
}
.tpp-topbar-search-input:focus ~ .tpp-topbar-search-kbd { display: none; }

.tpp-topbar-right { display: flex; align-items: center; gap: 10px; }

.tpp-notif-bell { position: relative; color: var(--tpp-text-muted); display: flex; padding: 8px; border-radius: 9px; flex-shrink: 0; background: transparent; border: none; cursor: pointer; }
.tpp-notif-bell:hover { background: var(--tpp-surface-2); color: var(--tpp-text); }
.tpp-topbar-theme-toggle svg { width: 18px; height: 18px; }
.tpp-notif-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--tpp-danger); border: 2px solid var(--tpp-bg-alt); }
.tpp-notif-bell-badge { position: absolute; top: -2px; right: -2px; margin-left: 0; }

.tpp-member-id { color: var(--tpp-text-muted); background: var(--tpp-surface-2); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.tpp-user-name { font-weight: 600; }

/* Topbar profile dropdown ------------------------------------------- */

.tpp-profile-menu { position: relative; }

.tpp-profile-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 5px 10px 5px 5px;
	cursor: pointer;
	color: var(--tpp-text);
	transition: background 0.15s ease, border-color 0.15s ease;
	position: relative;
}
.tpp-profile-trigger:hover,
.tpp-profile-menu.is-open .tpp-profile-trigger {
	background: var(--tpp-surface-2);
	border-color: var(--tpp-border);
	color: var(--tpp-text);
}
.tpp-profile-trigger svg { width: 15px; height: 15px; color: var(--tpp-text-muted); transition: transform 0.2s ease; }
.tpp-profile-menu.is-open .tpp-profile-trigger svg:last-child { transform: rotate(180deg); }
.tpp-profile-trigger-info .tpp-user-name,
.tpp-profile-trigger:hover .tpp-profile-trigger-info .tpp-user-name {
	color: var(--tpp-text);
}

.tpp-profile-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tpp-primary), #1d4ed8);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

.tpp-profile-trigger-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.tpp-profile-trigger-info .tpp-user-name { font-size: 13px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-profile-trigger-info .tpp-member-id { background: none; padding: 0; font-size: 11px; }

.tpp-notif-dot-trigger { position: absolute; top: 2px; right: 30px; }

.tpp-profile-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	background: var(--tpp-bg-alt);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	box-shadow: 0 16px 40px rgba(0,0,0,0.4);
	padding: 6px;
	z-index: 40;
	animation: tppDropdownIn 0.15s ease;
}

@keyframes tppDropdownIn {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.tpp-profile-dropdown-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 10px;
}
.tpp-profile-dropdown-header-info { display: flex; flex-direction: column; overflow: hidden; }
.tpp-profile-dropdown-header-info .tpp-user-name { font-weight: 600; font-size: 13.5px; color: var(--tpp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-profile-dropdown-header-info .tpp-member-id { color: var(--tpp-text-muted); font-size: 11.5px; }

.tpp-profile-dropdown .tpp-profile-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--tpp-text);
	font-size: 13.5px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}
.tpp-profile-dropdown-item svg { width: 16px; height: 16px; color: var(--tpp-text-muted); transition: color 0.15s ease; }
.tpp-profile-dropdown-item:hover { background: var(--tpp-surface-2); }
/* Same accent-tint treatment as the main sidebar nav items: active/hover
   icon always reads through --tpp-nav-accent-text (a no-op in Light Mode,
   since that token equals --tpp-primary there); hover TEXT only picks up
   the tint in Dark Mode, where the plain --tpp-text color it replaces
   would otherwise stay unchanged. Locked items and the red Logout row
   keep their own colors — this is for ordinary, clickable destinations. */
.tpp-profile-dropdown-item:hover:not(.is-locked):not(.tpp-profile-dropdown-logout) svg { color: var(--tpp-nav-accent-text); }
.tpp-app:not([data-tpp-theme="light"]) .tpp-profile-dropdown-item:hover:not(.is-locked):not(.tpp-profile-dropdown-logout) { color: var(--tpp-nav-accent-text); }
.tpp-profile-dropdown-item.is-active { background: rgba(37,99,235,0.14); color: var(--tpp-nav-accent-text); }
.tpp-profile-dropdown-item.is-active svg { color: var(--tpp-nav-accent-text); }
.tpp-profile-dropdown-item.is-locked { color: var(--tpp-text-muted); }
.tpp-profile-dropdown-item.is-locked svg:not(.tpp-nav-lock-icon) { color: var(--tpp-text-muted); }
.tpp-profile-dropdown .tpp-profile-dropdown-logout { color: var(--tpp-danger-text); }
.tpp-profile-dropdown-logout svg { color: var(--tpp-danger-text); }

.tpp-profile-dropdown-badge {
	margin-left: auto;
	background: var(--tpp-danger);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 1px 7px;
}

.tpp-profile-dropdown-divider { height: 1px; background: var(--tpp-border); margin: 6px 4px; }

.tpp-profile-dropdown-heading {
	padding: 4px 10px 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tpp-text-muted);
}

/* Topbar notification bell dropdown — reuses .tpp-profile-dropdown for the
   panel chrome (same premium SaaS look as the profile dropdown) and only
   adds the notification-list-specific bits below. */
.tpp-notif-menu { position: relative; }
.tpp-notif-dropdown { width: 340px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; }
.tpp-notif-dropdown-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpp-text);
}
.tpp-notif-dropdown-mark-all { background: none; border: none; cursor: pointer; padding: 0; color: var(--tpp-primary); font-weight: 500; }
.tpp-notif-dropdown-mark-all:hover { text-decoration: underline; }
.tpp-notif-dropdown .tpp-profile-dropdown-divider { margin: 0 0 4px; }
.tpp-notif-dropdown-list { max-height: 340px; overflow-y: auto; padding: 4px; }
.tpp-notif-dropdown-item {
	display: flex;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	align-items: flex-start;
}
.tpp-notif-dropdown-item:hover { background: var(--tpp-surface-2); }
.tpp-notif-dropdown-item.is-unread { background: rgba(37,99,235,0.08); }
.tpp-notif-dropdown-icon { font-size: 17px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.tpp-notif-dropdown-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpp-notif-dropdown-title { font-size: 13px; font-weight: 600; color: var(--tpp-text); }
.tpp-notif-dropdown-desc { font-size: 12px; color: var(--tpp-text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-line; }
.tpp-notif-list-item p { white-space: pre-line; }
.tpp-notif-dropdown-time { font-size: 11px; color: var(--tpp-text-muted); }
.tpp-notif-dropdown-viewall { justify-content: center; font-weight: 600; color: var(--tpp-primary); }
.tpp-notif-dropdown-viewall:hover { background: var(--tpp-surface-2); }

/* Trade Reminder meta line (pair / opened date / status) + Done badge —
   shared markup rendered by TPP.notifTradeMetaHtml() in both the topbar
   bell dropdown and the full Notifications page. */
.tpp-notif-trade-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; color: var(--tpp-text-muted); margin-top: 2px; }
.tpp-notif-trade-meta span:first-child { font-weight: 600; color: var(--tpp-text); }
.tpp-notif-done-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #16a34a;
	background: rgba(22,163,74,0.12);
	width: fit-content;
}

.tpp-trial-banner {
	margin: 20px 24px 0;
	padding: 12px 18px;
	border-radius: var(--tpp-radius-sm);
	background: rgba(245,158,11,0.12);
	border: 1px solid rgba(245,158,11,0.35);
	color: var(--tpp-warning-text);
	font-size: 13.5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.tpp-trial-banner a {
	font-weight: 700;
	color: var(--tpp-warning-text);
	text-decoration: underline;
}

.tpp-main { flex: 1; padding: 24px; width: 100%; max-width: 1400px; }

.tpp-sidebar-backdrop { display: none; }

/* -------------------- Dashboard period filter -------------------- */

.tpp-dashboard-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.tpp-segmented-control {
	display: inline-flex;
	max-width: 100%;
	background: var(--tpp-surface-2);
	border-radius: var(--tpp-radius-sm);
	padding: 4px;
	gap: 2px;
}

/* Segmented controls (period filters, Analytics section tabs, chart mode
   toggles, etc.) never wrap — on narrow screens their options would
   otherwise be clipped off-screen and unreachable, since .tpp-app hides
   horizontal overflow at the page level. Scrolling the control itself
   keeps every option reachable without eating vertical space. */
@media (max-width: 640px) {
	.tpp-segmented-control {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tpp-segmented-control::-webkit-scrollbar { display: none; }
	.tpp-segmented-control .tpp-segmented-option { flex-shrink: 0; white-space: nowrap; }
}

.tpp-tj-quick-filter { margin-bottom: 0; flex-wrap: wrap; }

.tpp-tj-daterange-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tpp-tj-custom-daterange { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpp-tj-custom-daterange input[type="date"] { padding: 6px 10px; font-size: 12.5px; }
.tpp-tj-daterange-sep { font-size: 12px; color: var(--tpp-text-muted); }

@media (max-width: 600px) {
	.tpp-tj-daterange-bar { gap: 8px; }
	.tpp-tj-custom-daterange { width: 100%; }
	.tpp-tj-custom-daterange input[type="date"] { flex: 1; min-width: 0; }
}

.tpp-segmented-control .tpp-segmented-option {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid transparent;
	padding: 7px 14px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tpp-text);
	opacity: 0.72;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.tpp-segmented-control .tpp-segmented-option:hover { opacity: 1; background: var(--tpp-surface); border-color: var(--tpp-border); }
.tpp-segmented-control .tpp-segmented-option.is-active { background: var(--tpp-primary); border-color: var(--tpp-primary); color: #fff; opacity: 1; }

.tpp-dashboard-custom-range { display: flex; align-items: center; gap: 8px; color: var(--tpp-text-muted); }
.tpp-dashboard-custom-range input[type="date"] {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text);
	border-radius: var(--tpp-radius-sm);
	padding: 7px 10px;
	font-size: 13px;
	color-scheme: var(--tpp-color-scheme);
	width: auto;
}

.tpp-monthly-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--tpp-border); }
.tpp-monthly-row:last-child { border-bottom: none; }

/* -------------------- Cards -------------------- */

.tpp-cards-grid {
	display: grid;
	/* auto-fill (not auto-fit): with auto-fit, a row with fewer items than
	   fit the container collapses its empty tracks and stretches the
	   remaining card(s) to fill the freed-up space — the "first card is
	   huge" bug (most visible on Trading Plans, which starts empty and
	   gets its very first card at full container width). auto-fill keeps
	   unfilled tracks in the layout instead of collapsing them, so every
	   card stays sized by its own minmax() column regardless of how many
	   items are in the grid. */
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.tpp-relax-fav-active { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); border-color: rgba(245,158,11,0.4); }

/* -------------------- Help Center: Help & Support, Contact Us -------------------- */

.tpp-help-link-card {
	display: block;
	text-align: left;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpp-help-link-card:hover { transform: translateY(-3px); border-color: var(--tpp-primary); box-shadow: 0 14px 34px rgba(37,99,235,0.16); }
.tpp-help-link-icon { width: 26px; height: 26px; color: var(--tpp-primary); margin-bottom: 10px; }
.tpp-help-link-card h3 { margin: 0 0 6px; font-size: 15px; }
.tpp-help-link-card p { margin: 0; }

.tpp-contact-card { text-align: center; }
.tpp-contact-card-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tpp-surface-2);
	color: var(--tpp-primary);
}
.tpp-contact-card-icon svg { width: 22px; height: 22px; }
.tpp-contact-card-icon-whatsapp { background: rgba(37,211,102,0.14); color: #1eb155; }
.tpp-contact-card h3 { margin: 0 0 4px; font-size: 14.5px; }
.tpp-contact-card p { margin: 0 0 12px; }
.tpp-contact-card .tpp-btn { width: 100%; justify-content: center; }

.tpp-faq-category { margin-bottom: 22px; }
.tpp-faq-category-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tpp-text-muted); margin: 0 0 10px; }

.tpp-faq-item {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	margin-bottom: 8px;
	overflow: hidden;
}
.tpp-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	background: transparent;
	border: none;
	text-align: left;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpp-text);
	cursor: pointer;
}
.tpp-faq-question:hover { background: var(--tpp-surface-2); }
.tpp-faq-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--tpp-text-muted); transition: transform 0.2s ease; }
.tpp-faq-chevron svg { width: 100%; height: 100%; }
.tpp-faq-item.is-open .tpp-faq-chevron { transform: rotate(180deg); color: var(--tpp-primary); }
.tpp-faq-answer { padding: 0 16px 14px; }
.tpp-faq-answer p { margin: 0; color: var(--tpp-text-muted); font-size: 13px; line-height: 1.6; }

/* -------------------- Relax Mind gallery -------------------- */

.tpp-relax-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tpp-relax-card {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tpp-relax-card:hover { transform: translateY(-3px); border-color: var(--tpp-primary); box-shadow: 0 14px 34px rgba(37,99,235,0.16); }
.tpp-relax-card.is-selected { border-color: var(--tpp-primary); box-shadow: 0 0 0 2px var(--tpp-primary); }
.tpp-relax-card-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; cursor: zoom-in; background: var(--tpp-surface-2); }
.tpp-relax-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpp-relax-card-select {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 20px;
	height: 20px;
	z-index: 2;
	cursor: pointer;
	accent-color: var(--tpp-primary);
}

/* Bulk-select toolbar above the gallery grid (Select All / selection
   count / Delete Selected) — hidden until the gallery has at least one
   favorited screenshot to select. */
.tpp-relax-gallery-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tpp-relax-select-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tpp-relax-select-label input { accent-color: var(--tpp-primary); width: 16px; height: 16px; cursor: pointer; }
.tpp-relax-card-body { padding: 12px 14px; cursor: pointer; }
.tpp-relax-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.tpp-relax-card-meta { font-size: 12px; font-weight: 600; color: var(--tpp-text-muted); margin-top: 4px; }
.tpp-relax-card-date { font-size: 11.5px; color: var(--tpp-text-muted); margin-top: 6px; }

/* Real Trade Setups / Backtest Trade Setups tab toolbars: search input
   (filters the already-fetched list client-side) sits alongside the
   section heading / Add button. */
.tpp-relax-search { max-width: 260px; }
.tpp-relax-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tpp-relax-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

@media (max-width: 480px) {
	.tpp-relax-gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
	.tpp-relax-search { max-width: 100%; }
}

/* Psychology gallery cards show Pair/Strategy/Result/Date/Confidence/PNL —
   a richer variant of the plain screenshot card above, reusing the same
   .tpp-relax-card shell/hover. */
.tpp-relax-card-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpp-relax-card-pnl { font-weight: 800; font-size: 13.5px; }
.tpp-relax-card-confidence { font-size: 11.5px; font-weight: 600; color: var(--tpp-text-muted); }
.tpp-relax-card-view-btn { width: 100%; margin-top: 10px; }

/* Backtest Trade Setups cards reuse the .tpp-relax-card shell above (image
   + padded body); tags are the one new visual element they need. */
.tpp-relax-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tpp-pill-tag { background: rgba(37,99,235,0.1); color: var(--tpp-primary); text-transform: none; letter-spacing: normal; font-size: 11px; }

/* -------------------- Psychology tab -------------------- */

.tpp-psych-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.tpp-psych-hero-text { flex: 1 1 260px; min-width: 220px; }
.tpp-psych-hero-text h2 { margin: 0 0 6px; font-size: 19px; }

.tpp-psych-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tpp-psych-gauge-label { font-size: 12.5px; font-weight: 700; color: var(--tpp-text-muted); text-align: center; }
.tpp-psych-gauge-empty { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; text-align: center; }
.tpp-psych-gauge-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; padding: 8px 0 4px; }
.tpp-psych-subheading { margin: 22px 0 12px; font-size: 14px; font-weight: 700; }

.tpp-psych-motivation { display: flex; flex-direction: column; gap: 10px; }
.tpp-psych-motivation-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(139,92,246,0.08));
	border: 1px solid rgba(37,99,235,0.22);
	border-radius: var(--tpp-radius-sm);
	padding: 12px 16px;
	font-weight: 600;
	font-size: 13.5px;
}
.tpp-psych-motivation-item svg { flex-shrink: 0; width: 18px; height: 18px; color: #f59e0b; }

.tpp-psych-mistake-list { display: flex; flex-direction: column; gap: 12px; }
.tpp-psych-mistake-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius-sm); }
.tpp-psych-mistake-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tpp-psych-mistake-icon svg { width: 20px; height: 20px; }
.tpp-psych-mistake-body { flex: 1 1 auto; min-width: 0; }
.tpp-psych-mistake-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }

.tpp-psych-journal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 4px;
	border-bottom: 1px solid var(--tpp-border);
}
.tpp-psych-journal-row:last-child { border-bottom: none; }
.tpp-psych-journal-trade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.tpp-psych-journal-moods { display: flex; align-items: center; gap: 10px; font-size: 18px; flex-wrap: wrap; }
.tpp-psych-journal-arrow { font-size: 13px; color: var(--tpp-text-muted); }

.tpp-psych-mood-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.tpp-psych-mood-picker button {
	all: unset;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid transparent;
	background: var(--tpp-surface-2);
	transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.tpp-psych-mood-picker button:hover { transform: translateY(-2px); }
.tpp-psych-mood-picker button.is-selected { border-color: var(--tpp-primary); background: rgba(37,99,235,0.12); }

@media (max-width: 640px) {
	.tpp-psych-hero { flex-direction: column; text-align: center; }
	.tpp-psych-gauge-row { gap: 14px; }
	.tpp-psych-journal-row { flex-direction: column; align-items: flex-start; }
}

/* -------------------- Trading Cooldown (Psychology → Trading Cooldown) --------------------
   Reuses .tpp-card/.tpp-preview-grid/.tpp-alert/.tpp-pill/.tpp-psych-journal-row/
   .tpp-dash-empty-state/.tpp-section-heading/.tpp-relax-pagination throughout — the
   classes below only cover what those don't already provide: the status pill colors,
   the countdown timer + breathing circle, and the chip-style pickers. */

.tpp-cooldown-status-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.tpp-cooldown-title { margin: 0; font-size: 16px; }

.tpp-cooldown-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}
.tpp-cooldown-status-calm { background: rgba(22,163,74,0.14); color: var(--tpp-success-text); }
.tpp-cooldown-status-caution { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); }
.tpp-cooldown-status-high_risk { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }

.tpp-cooldown-stats-grid { margin-bottom: 4px; }

.tpp-cooldown-start-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 28px; }

/* Countdown timer card */
.tpp-cooldown-timer-card { text-align: center; padding: 32px 24px; }
.tpp-cooldown-timer-eyebrow {
	margin: 0 0 18px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--tpp-text-muted);
	text-transform: uppercase;
}

.tpp-cooldown-breathing-circle {
	width: 120px;
	height: 120px;
	margin: 0 auto 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle, rgba(37,99,235,0.22), rgba(37,99,235,0.05) 70%);
	border: 2px solid var(--tpp-border);
	transform: scale(1);
	transition: transform 4s ease-in-out, border-color 0.3s ease;
	font-size: 12px;
	font-weight: 600;
	color: var(--tpp-primary);
}
.tpp-cooldown-breathing-circle.is-active { border-color: var(--tpp-primary); }
.tpp-cooldown-breathing-in,
.tpp-cooldown-breathing-hold { transform: scale(1.35); }
.tpp-cooldown-breathing-out { transform: scale(1); }

.tpp-cooldown-timer-display {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--tpp-text);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.tpp-cooldown-timer-actions { display: flex; justify-content: center; margin-top: 18px; }

/* Completion flow */
.tpp-cooldown-complete { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--tpp-border); }
.tpp-cooldown-complete h4 { margin: 0 0 6px; font-size: 15px; }
.tpp-cooldown-complete-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.tpp-cooldown-checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px auto 0;
	max-width: 360px;
	text-align: left;
}
.tpp-cooldown-reflection { margin-top: 18px; }
.tpp-cooldown-reflection .tpp-cooldown-chip-group { justify-content: center; }
.tpp-cooldown-extend-options { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Chip pickers — mood / intention / duration presets / reflection */
.tpp-cooldown-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tpp-cooldown-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	color: var(--tpp-text);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.tpp-cooldown-chip:hover { transform: translateY(-1px); border-color: var(--tpp-primary); }
.tpp-cooldown-chip.is-selected { border-color: var(--tpp-primary); background: rgba(37,99,235,0.14); color: var(--tpp-primary); }

.tpp-cooldown-preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tpp-cooldown-custom-input { max-width: 200px; }

/* -------------------- Mind Cooldown Games -------------------- */
/* Hub cards reuse .tpp-calc-card as-is (see the Calculator hub) — only
   the grid modifier and the in-modal game-play surfaces are new here. */

.tpp-cooldown-games-grid { margin-bottom: 4px; }

.tpp-cooldown-game-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0; }
.tpp-cooldown-game-center .tpp-cooldown-breathing-circle { margin-bottom: 16px; }

.tpp-cooldown-game-stats { margin-bottom: 16px; }

.tpp-cooldown-game-prompt { font-size: 15px; font-weight: 700; text-align: center; margin: 0 0 14px; }

/* Focus Challenge play area: a fixed-height bounded box so the target's
   randomized position (computed from getBoundingClientRect()) is always
   correct immediately after mount, and so it never grows past the modal
   on any screen size. */
.tpp-cooldown-game-area {
	position: relative;
	height: 240px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	overflow: hidden;
}
.tpp-cooldown-game-target {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--tpp-primary);
	color: #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(37,99,235,0.4);
	animation: tpp-fade-up 0.15s ease;
}
.tpp-cooldown-game-target:active { transform: scale( 0.92 ); }

.tpp-cooldown-memory-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	max-width: 480px;
	margin: 0 auto;
}
.tpp-cooldown-memory-card {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tpp-cooldown-memory-card:disabled { cursor: default; }
.tpp-cooldown-memory-card.is-up { border-color: var(--tpp-primary); background: rgba(37,99,235,0.1); }
.tpp-cooldown-memory-card.is-matched { border-color: var(--tpp-success); background: rgba(22,163,74,0.12); }

.tpp-cooldown-number-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	max-width: 320px;
	margin: 0 auto;
}
.tpp-cooldown-number-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	font-weight: 700;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	color: var(--tpp-text);
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
.tpp-cooldown-number-cell:hover { border-color: var(--tpp-primary); transform: translateY(-1px); }
.tpp-cooldown-number-cell.is-wrong { border-color: var(--tpp-danger); background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }

@media (max-width: 640px) {
	.tpp-cooldown-status-header { flex-direction: column; align-items: flex-start; }
	.tpp-cooldown-timer-display { font-size: 36px; }
	.tpp-cooldown-breathing-circle { width: 96px; height: 96px; }
	.tpp-cooldown-start-row,
	.tpp-cooldown-complete-actions,
	.tpp-cooldown-extend-options { flex-direction: column; align-items: stretch; }
	.tpp-cooldown-custom-input { max-width: 100%; }
	.tpp-cooldown-game-area { height: 200px; }
	.tpp-cooldown-memory-grid,
	.tpp-cooldown-number-grid { max-width: 100%; gap: 8px; }
	.tpp-cooldown-memory-grid { grid-template-columns: repeat(3, 1fr); }
	.tpp-cooldown-memory-card { font-size: 22px; }
	.tpp-cooldown-number-cell { font-size: 16px; }
}

/* Masonry-style layout (CSS multi-column, not grid): the cards here vary a
   lot in height (Trading Preferences alone has 6 fields, Dashboard has 1),
   and a plain CSS grid sizes every row to its tallest card — leaving a big
   empty gap under every shorter card in that row before the next row can
   start. Columns pack each card immediately under the previous one in the
   same column instead, so there's no dead space to create that gap. */
.tpp-settings-grid {
	column-width: 340px;
	column-gap: 18px;
	margin-bottom: 18px;
}
.tpp-settings-grid .tpp-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 18px;
}
.tpp-settings-grid .tpp-card .tpp-btn { margin-top: 4px; }

.tpp-panels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
	margin-top: 18px;
}

.tpp-card {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 22px;
	animation: tpp-fade-up 0.4s ease;
}

.tpp-card h2, .tpp-card h3, .tpp-card h4 { color: var(--tpp-text); }
.tpp-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); }
.tpp-card h4 { font-size: 14px; margin-bottom: 10px; }

.tpp-card-welcome { grid-column: 1 / -1; }

.tpp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tpp-card-header h3 { margin: 0; }

.tpp-stat { font-size: 24px; font-weight: 700; }
.tpp-stat-sub { font-size: 12px; font-weight: 500; color: var(--tpp-text-muted); }
.tpp-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,0.15); color: var(--tpp-primary); margin-bottom: 10px; }

.tpp-status-active { color: var(--tpp-success); }
.tpp-status-pending, .tpp-status-in_progress { color: var(--tpp-warning); }
.tpp-status-expired, .tpp-status-rejected, .tpp-status-deactivated, .tpp-status-failed { color: var(--tpp-danger); }
.tpp-status-none { color: var(--tpp-text-muted); }
.tpp-status-neutral { color: var(--tpp-neutral-text); }
.tpp-app a.tpp-status-active, .tpp-app a.tpp-status-active:hover { color: var(--tpp-success); }
.tpp-app a.tpp-status-expired, .tpp-app a.tpp-status-expired:hover { color: var(--tpp-danger); }

.tpp-payment-method { margin-bottom: 18px; }
.tpp-payment-method ul,
.tpp-payment-method-panel ul { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--tpp-text-muted); }
.tpp-payment-method li strong,
.tpp-payment-method-panel li strong { color: var(--tpp-text); }
.tpp-qr-image { max-width: 160px; border-radius: var(--tpp-radius-sm); margin-top: 8px; }

.tpp-payment-method-panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-bottom: 0;
	transform: translateY(-4px);
	transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease, transform 0.3s ease;
}
.tpp-payment-method-panel.is-active {
	max-height: 320px;
	opacity: 1;
	margin-bottom: 18px;
	transform: translateY(0);
}

/* Subscription page: payment details sit directly under the Payment
   Method dropdown, inside the request form, instead of a separate card
   elsewhere on the page. */
.tpp-card-subscribe { max-width: 640px; margin-top: 32px; }
.tpp-payment-details { background: var(--tpp-surface-2); border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius-sm); padding: 0 14px; }
.tpp-payment-details .tpp-payment-method-panel.is-active { padding-top: 14px; margin-bottom: 14px; }

.tpp-payment-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(245,158,11,0.1);
	border: 1px solid rgba(245,158,11,0.35);
	border-radius: var(--tpp-radius-sm);
	padding: 14px 16px;
	margin: 14px 0 20px;
}
.tpp-payment-notice-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--tpp-warning-text); }
.tpp-payment-notice-body strong { display: block; color: var(--tpp-warning-text); font-size: 13.5px; margin-bottom: 4px; }
.tpp-payment-notice-body p { margin: 0 0 6px; color: var(--tpp-text); font-size: 13.5px; }
.tpp-payment-notice-body p:last-child { margin-bottom: 0; }
ul.tpp-payment-notice-list { list-style: disc; margin: 0 0 8px; padding-left: 20px; color: var(--tpp-text); font-size: 13.5px; }
.tpp-payment-notice-list li { margin-bottom: 3px; }
.tpp-payment-notice-highlight {
	display: inline-block;
	background: rgba(245,158,11,0.18);
	border: 1px solid rgba(245,158,11,0.4);
	border-radius: 4px;
	padding: 1px 6px;
	font-weight: 700;
	font-family: monospace;
	color: var(--tpp-warning-text);
}
.tpp-whatsapp-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	color: #25D366;
	margin-left: 4px;
}
.tpp-whatsapp-link:hover { color: #1eb155; }
.tpp-whatsapp-icon { width: 16px; height: 16px; }

.tpp-locked-card {
	max-width: 480px;
	margin: 40px auto;
	text-align: center;
}

.tpp-locked-card h2 { color: var(--tpp-text); }

.tpp-locked-card-icon,
.tpp-locked-modal-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(220,38,38,0.12);
	color: var(--tpp-danger-text);
	margin: 0 auto 16px;
}
.tpp-locked-card-icon svg, .tpp-locked-modal-icon svg { width: 24px; height: 24px; }

.tpp-locked-modal-body { text-align: center; padding: 6px 0 4px; }
.tpp-locked-modal-body p { color: var(--tpp-text-muted); font-size: 14px; }

.tpp-gate-app {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 20% 20%, #1a2340 0%, var(--tpp-bg) 55%);
	padding: 24px;
}

.tpp-gate-screen { width: 100%; display: flex; justify-content: center; }

.tpp-gate-card {
	max-width: 440px;
	width: 100%;
	text-align: center;
	background: var(--tpp-bg-alt);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 40px 32px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.tpp-gate-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: rgba(220,38,38,0.12);
	color: var(--tpp-danger-text);
	margin: 0 auto 20px;
}
.tpp-gate-icon svg { width: 30px; height: 30px; }

.tpp-gate-card h1 { font-size: 22px; margin: 0 0 12px; color: var(--tpp-text); }
.tpp-gate-card p { color: var(--tpp-text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 6px; }

.tpp-gate-logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}
.tpp-gate-logout svg { width: 16px; height: 16px; }

.tpp-trial-banner-expired {
	background: rgba(220,38,38,0.12);
	border-color: rgba(220,38,38,0.35);
	color: var(--tpp-danger-text);
}
.tpp-trial-banner-expired a { color: var(--tpp-danger-text); }

/* -------------------- Pills / badges -------------------- */

.tpp-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--tpp-surface-2);
	color: var(--tpp-text-muted);
}

.tpp-pill-buy, .tpp-pill-active, .tpp-pill-achieved, .tpp-pill-closed, .tpp-pill-win { background: rgba(22,163,74,0.14); color: var(--tpp-success-text); }
.tpp-pill-sell, .tpp-pill-failed, .tpp-pill-inactive, .tpp-pill-loss { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }
.tpp-pill-open, .tpp-pill-in_progress, .tpp-pill-breakeven { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); }
.tpp-pill-draft, .tpp-pill-archived { background: rgba(139,148,171,0.16); color: var(--tpp-neutral-text); }

/*
 * Trade status badge only: Open uses a dedicated blue tone (rather than
 * the generic .tpp-pill-open amber, which is also used for unrelated
 * pills like the trial "days left" badge) so the 5-state trade status
 * system — 🟢 Win / 🔴 Loss / 🟡 Break-even / 🔵 Open / ⚪ Draft — reads
 * with 5 visually distinct colors. Win/Loss/Break-even/Draft already get
 * distinct colors from the shared rules above.
 */
.tpp-pill-trade-open { background: rgba(2,132,199,0.14); color: var(--tpp-info-text); }

/* Support Messages ticket status pills — .tpp-pill-open/.tpp-pill-closed
   are already covered by the shared rules above (this list just adds the
   two statuses unique to tickets). */
.tpp-pill-answered { background: rgba(2,132,199,0.14); color: var(--tpp-info-text); }
.tpp-pill-waiting_reply { background: rgba(139,148,171,0.16); color: var(--tpp-neutral-text); }

/*
 * Trade Status filter dropdowns (Trade Journal's tj-filter-status, Settings
 * → Default Trade Status Filter): color the option text itself to match the
 * same 5-state palette as the badges above, since the emoji prefix alone
 * (🔵🟢🔴🟡⚪) doesn't render consistently as a recognizable color in every
 * browser/OS's native <option> list. !important to win over the dark-mode
 * "every select option is plain white" readability rule above (also
 * !important, for the same reason) — these are more specific than that
 * blanket rule, but only !important beats !important.
 */
#tj-filter-status option[value="win"],
#settings-default-status-filter option[value="win"] { color: var(--tpp-success-text) !important; }
#tj-filter-status option[value="loss"],
#settings-default-status-filter option[value="loss"] { color: var(--tpp-danger-text) !important; }
#tj-filter-status option[value="breakeven"],
#settings-default-status-filter option[value="breakeven"] { color: var(--tpp-warning-text) !important; }
#tj-filter-status option[value="open"],
#settings-default-status-filter option[value="open"] { color: var(--tpp-info-text) !important; }
#tj-filter-status option[value="draft"],
#settings-default-status-filter option[value="draft"] { color: var(--tpp-neutral-text) !important; }

/*
 * Trading Rule Importance dropdowns (Add Rule + Edit Rule): color each
 * option to match the same 5-level Very Low→Critical palette used by the
 * badges below, same !important-vs-!important reasoning as the status
 * filter block above.
 */
#rule-weight-input option[value="1"],
#rule-edit-weight option[value="1"] { color: var(--tpp-neutral-text) !important; }
#rule-weight-input option[value="2"],
#rule-edit-weight option[value="2"] { color: var(--tpp-info-text) !important; }
#rule-weight-input option[value="3"],
#rule-edit-weight option[value="3"] { color: var(--tpp-warning-text) !important; }
#rule-weight-input option[value="4"],
#rule-edit-weight option[value="4"] { color: var(--tpp-orange-text) !important; }
#rule-weight-input option[value="5"],
#rule-edit-weight option[value="5"] { color: var(--tpp-danger-text) !important; }

.tpp-risk-safe { color: var(--tpp-success-text); }
.tpp-risk-moderate { color: var(--tpp-warning-text); }
.tpp-risk-high { color: var(--tpp-orange-text); }
.tpp-risk-extreme { color: var(--tpp-danger-text); }

/* -------------------- Tables -------------------- */

.tpp-table-wrap { overflow-x: auto; background: var(--tpp-surface); border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius); }

.tpp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tpp-table th, .tpp-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.tpp-table thead th { color: var(--tpp-text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--tpp-border); }
.tpp-table tbody tr { border-bottom: 1px solid var(--tpp-border); }
.tpp-table tbody tr:last-child { border-bottom: none; }
.tpp-table tbody tr:hover { background: var(--tpp-surface-2); }
.tpp-table tbody tr.is-selected { background: rgba(37,99,235,0.08); }
.tpp-table td.tpp-wrap { white-space: normal; max-width: 260px; }

.tpp-table-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* Deleted Items' bulk-action bar lives inside .tpp-card-header instead of
   above the table, so it's always visible without scrolling — override the
   default toolbar spacing/justification to sit inline with the "Delete"
   heading, wrapping onto its own row on narrow screens instead of
   squeezing the heading. */
.tpp-trash-bulk-toolbar { margin-bottom: 0; justify-content: flex-end; flex: 1 1 auto; }
@media (max-width: 560px) {
	.tpp-card-header:has(.tpp-trash-bulk-toolbar) { flex-wrap: wrap; }
	.tpp-trash-bulk-toolbar { justify-content: flex-start; width: 100%; }
}
.tpp-table-filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* Mobile filter toggle: hidden on desktop, where filters are always
   visible inline — see the mobile breakpoint below for the collapsed
   panel this button controls. */
.tpp-tj-filter-toggle { display: none; }

.tpp-table-pagesize { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tpp-text-muted); }
.tpp-table-pagesize select { width: auto; padding: 6px 28px 6px 10px; font-size: 12.5px; }

.tpp-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.tpp-th-sortable:hover { color: var(--tpp-text); }
.tpp-sort-arrow { display: inline-block; width: 10px; margin-left: 3px; opacity: 0.4; }
.tpp-th-sortable.is-sort-asc .tpp-sort-arrow::after { content: '▲'; opacity: 1; font-size: 9px; }
.tpp-th-sortable.is-sort-desc .tpp-sort-arrow::after { content: '▼'; opacity: 1; font-size: 9px; }
.tpp-th-sortable:not(.is-sort-asc):not(.is-sort-desc) .tpp-sort-arrow::after { content: '↕'; font-size: 9px; }
.tpp-table-filters input,
.tpp-table-filters select {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text);
	border-radius: var(--tpp-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	color-scheme: var(--tpp-color-scheme);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpp-table-filters input[type="text"],
.tpp-table-filters input[type="search"],
.tpp-table-filters input[type="date"],
.tpp-table-filters input[type="datetime-local"],
.tpp-table-filters select {
	width: auto;
}
.tpp-table-filters input:focus,
.tpp-table-filters select:focus {
	outline: none;
	border-color: var(--tpp-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
.tpp-table-filters input[type="search"]::-webkit-search-decoration,
.tpp-table-filters input[type="search"]::-webkit-search-cancel-button,
.tpp-table-filters input[type="search"]::-webkit-search-results-button,
.tpp-table-filters input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}
.tpp-table-filters select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	padding-right: 30px;
}

.tpp-empty-state { text-align: center; padding: 40px 20px; color: var(--tpp-text-muted); }
.tpp-empty-state svg { width: 40px; height: 40px; margin-bottom: 10px; opacity: 0.6; }

.tpp-row-actions { display: flex; gap: 6px; }
.tpp-icon-btn { background: transparent; border: 1px solid var(--tpp-border); color: var(--tpp-text-muted); border-radius: 7px; padding: 6px; cursor: pointer; display: inline-flex; }
.tpp-icon-btn:hover { background: var(--tpp-surface-2); color: var(--tpp-text); }
.tpp-icon-btn-danger:hover { color: var(--tpp-danger-text); border-color: rgba(220,38,38,0.4); }

.tpp-icon-btn-warning {
	background: rgba(245,158,11,0.16);
	color: var(--tpp-warning-text);
	border-color: rgba(245,158,11,0.45);
}
.tpp-icon-btn-warning:hover {
	background: var(--tpp-warning);
	color: #291a04;
	border-color: var(--tpp-warning);
}

/* Record Result: the most important action on an open trade, so it gets
   a filled, unmistakably distinct treatment instead of blending in with
   the other (outline, muted) row action icons — light blue, matching the
   Open trade status badge (.tpp-pill-trade-open) so the color means the
   same thing everywhere. Shared by Dashboard Recent Trades and Trade
   Journal (same markup, same class, one place to restyle). */
.tpp-icon-btn-info {
	background: rgba(2,132,199,0.16);
	color: var(--tpp-info-text);
	border-color: rgba(2,132,199,0.45);
}
.tpp-icon-btn-info:hover {
	background: var(--tpp-info);
	color: #ffffff;
	border-color: var(--tpp-info);
}

/* Delete tab row actions: Restore/Permanently Delete previously used the
   plain outline .tpp-icon-btn look (muted-gray text, near-invisible
   border) meant for small square icon buttons, not text-labeled ones —
   hard to see at a glance. Scoped to this page only (not a global
   .tpp-icon-btn change, which several other modules also use) — same
   filled-chip treatment as the Record Result info button above, plus
   consistent sizing since both buttons now carry text labels. */
#tpp-deleted-items .tpp-row-actions .tpp-icon-btn {
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: var(--tpp-radius-sm);
	background: rgba(22,163,74,0.14);
	color: var(--tpp-success-text);
	border-color: rgba(22,163,74,0.4);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#tpp-deleted-items .tpp-row-actions .tpp-icon-btn:hover {
	background: var(--tpp-success);
	color: #ffffff;
	border-color: var(--tpp-success);
}
#tpp-deleted-items .tpp-row-actions .tpp-icon-btn-danger {
	background: rgba(220,38,38,0.14);
	color: var(--tpp-danger-text);
	border-color: rgba(220,38,38,0.4);
}
#tpp-deleted-items .tpp-row-actions .tpp-icon-btn-danger:hover {
	background: var(--tpp-danger);
	color: #ffffff;
	border-color: var(--tpp-danger);
}

/* -------------------- Modal -------------------- */

/* transform: translateZ(0) forces the overlay onto its own guaranteed
   compositing layer instead of leaving the browser to decide paint order
   between it and any other promoted layer on the page purely from
   z-index — the Trading Rules cards grid needs isolation: isolate (see
   its own comment) specifically because, without a rule like this one,
   some browsers can composite a lower element's layer above a
   position:fixed overlay's despite the z-index gap, leaving part of the
   underlying page (a card, a toolbar button row, a scrollbar) visibly
   un-dimmed or drawn as a stray box through the translucent backdrop —
   reported on both the Add/Edit Rule and Strategy Video popups. Forcing
   the overlay itself onto an explicit layer here is the more general,
   overlay-side fix for the same class of bug, rather than reacting to
   it per-page. */
.tpp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5,8,15,0.65);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 20px 16px;
	overflow-y: auto;
	z-index: 100;
	transform: translateZ(0);
}

.tpp-modal-overlay[hidden] { display: none; }

.tpp-modal {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	padding: 24px;
	box-shadow: var(--tpp-shadow);
	animation: tpp-fade-up 0.25s ease;
	/* The whole modal is one scroll region — Save/Cancel/Next/Submit sits
	   in normal document flow at the true end of the content, not pinned
	   permanently in view. A fixed footer let a user reach and click
	   Next/Save without ever scrolling past everything above it, so a
	   field further down could go unseen and unfilled; requiring a
	   scroll to reach the action buttons means they've scrolled past
	   every field on the way there. Only the header stays pinned
	   (sticky, not fixed the way the footer was) purely so the title/
	   close button stay reachable — it's a thin strip that never covers
	   form content the way a full-width sticky footer would. */
	overflow-y: auto;
}

.tpp-modal-header {
	display: flex; align-items: center; justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 2;
	margin: -24px -24px 18px; padding: 20px 24px 14px;
	background: var(--tpp-surface);
	border-radius: var(--tpp-radius) var(--tpp-radius) 0 0;
}
.tpp-modal-header h3 { margin: 0; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--tpp-text); }
.tpp-modal-close { background: transparent; border: none; color: var(--tpp-text-muted); cursor: pointer; padding: 4px; }
.tpp-modal-footer {
	display: flex; justify-content: flex-end; align-items: center; gap: 10px;
	margin: 20px -24px -24px; padding: 14px 24px 20px;
	background: var(--tpp-surface);
	border-radius: 0 0 var(--tpp-radius) var(--tpp-radius);
}

/* -------------------- Add Trade wizard -------------------- */

.tpp-wizard-modal { max-width: 680px; }

/* -------------------- Analytics -------------------- */

.tpp-analytics-section-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.tpp-analytics-metric-toggle { margin-left: auto; }
#an-period-label { margin: -6px 0 14px; font-weight: 600; }
.tpp-analytics-tiles { margin-bottom: 18px; }

.tpp-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tpp-insight-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	font-size: 13px;
	line-height: 1.5;
}
.tpp-insight-item .tpp-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--tpp-primary); }
.tpp-insight-list-warning .tpp-icon { color: var(--tpp-danger-text); }

/* Loading skeletons: a soft pulsing placeholder shown while an Analytics
   section's REST fetch is in flight, so switching periods/sections never
   flashes an empty page. */
@keyframes tpp-skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.tpp-skeleton { background: var(--tpp-surface-2); border-radius: var(--tpp-radius-sm); animation: tpp-skeleton-pulse 1.4s ease-in-out infinite; }
.tpp-skeleton-card { display: flex; flex-direction: column; gap: 10px; }
.tpp-skeleton-title { width: 60%; height: 12px; }
.tpp-skeleton-value { width: 40%; height: 22px; }
.tpp-skeleton-chart { width: 100%; height: 160px; }
#an-section-body.is-loading { pointer-events: none; }

/* -------------------- Reports -------------------- */

.tpp-report-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.tpp-report-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--tpp-border); }
.tpp-report-header h2 { margin: 0 0 6px; font-size: 19px; }
.tpp-report-section { margin-bottom: 26px; }
.tpp-report-section-title { font-size: 15px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tpp-border); }

@media print {
	.tpp-sidebar, .tpp-topbar, .tpp-app-footer, .tpp-report-toolbar, .tpp-tj-daterange-bar, .tpp-scroll-top-btn { display: none !important; }
	.tpp-content-area, .tpp-main { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
	.tpp-app { display: block !important; }
	#tpp-reports { padding: 0 !important; }
	.tpp-card { break-inside: avoid; box-shadow: none !important; }
	.tpp-report-section { break-inside: avoid; }
}

/* -------------------- Quick Record Trade Result popup -------------------- */

.tpp-modal-narrow { max-width: 380px; }
.tpp-modal-lg { max-width: 720px; }

.tpp-quick-result-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 4px; }
.tpp-quick-result-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 18px 20px;
	border-radius: var(--tpp-radius);
	border: 1.5px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	cursor: pointer;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.03em;
	transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
	text-align: left;
}
.tpp-quick-result-card:hover { transform: translateY(-1px); }
.tpp-quick-result-dot { width: 16px; height: 16px; min-width: 16px; border-radius: 50%; background: currentColor; }

.tpp-quick-result-win { color: var(--tpp-success-text); border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.12); }
.tpp-quick-result-win:hover { border-color: rgba(22,163,74,0.8); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

.tpp-quick-result-loss { color: var(--tpp-danger-text, #f87171); border-color: rgba(220,38,38,0.4); background: rgba(220,38,38,0.12); }
.tpp-quick-result-loss:hover { border-color: rgba(220,38,38,0.8); box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }

.tpp-quick-result-breakeven { color: var(--tpp-warning-text, #d97706); border-color: rgba(217,119,6,0.4); background: rgba(217,119,6,0.12); }
.tpp-quick-result-breakeven:hover { border-color: rgba(217,119,6,0.8); box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }

.tpp-quick-result-card.is-selected { border-width: 2px; }
.tpp-quick-result-card.is-selected.tpp-quick-result-win { border-color: var(--tpp-success); background: rgba(22,163,74,0.18); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.tpp-quick-result-card.is-selected.tpp-quick-result-loss { border-color: var(--tpp-danger); background: rgba(220,38,38,0.18); box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.tpp-quick-result-card.is-selected.tpp-quick-result-breakeven { border-color: var(--tpp-warning); background: rgba(217,119,6,0.18); box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }

/* -------------------- Strategy View modal -------------------- */

.tpp-strategy-view-modal { max-width: 640px; }
.tpp-strategy-view-section {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 10px 14px;
	margin-bottom: 8px;
}
.tpp-strategy-view-section summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--tpp-text);
	list-style: none;
}
.tpp-strategy-view-section summary::-webkit-details-marker { display: none; }
.tpp-strategy-view-section summary::before { content: '▸ '; color: var(--tpp-primary); }
.tpp-strategy-view-section[open] summary::before { content: '▾ '; }
.tpp-strategy-view-section p, .tpp-strategy-view-section ul { margin: 8px 0 0; color: var(--tpp-text-muted); font-size: 13.5px; line-height: 1.55; }
ul.tpp-strategy-view-list { padding-left: 20px; list-style: disc; }
.tpp-strategy-view-list li { margin-bottom: 4px; }

.tpp-wizard-steps {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	background: var(--tpp-surface-2);
	border-radius: var(--tpp-radius-sm);
	padding: 4px;
}

.tpp-wizard-step-indicator {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 6px;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tpp-text-muted);
	transition: background 0.2s ease, color 0.2s ease;
}

.tpp-wizard-step-indicator span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tpp-border);
	color: var(--tpp-text-muted);
	font-size: 11px;
	flex-shrink: 0;
}

.tpp-wizard-step-indicator.is-active { background: var(--tpp-primary); color: #fff; }
.tpp-wizard-step-indicator.is-active span { background: rgba(255,255,255,0.25); color: #fff; }
.tpp-wizard-step-indicator.is-complete span { background: var(--tpp-success); color: #fff; }

.tpp-wizard-step { display: flex; flex-direction: column; gap: 16px; }
.tpp-wizard-footer { flex-wrap: wrap; }

.tpp-dropzone {
	border: 2px dashed var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 24px 16px;
	text-align: center;
	color: var(--tpp-text-muted);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.tpp-dropzone svg { width: 28px; height: 28px; margin-bottom: 8px; }
.tpp-dropzone p { margin: 0; font-size: 13.5px; }
.tpp-dropzone:hover, .tpp-dropzone.is-dragover { border-color: var(--tpp-primary); background: rgba(37,99,235,0.06); color: var(--tpp-text); }

#tj-screenshot-preview img,
.tpp-preview-screenshot {
	max-width: 220px;
	border-radius: var(--tpp-radius-sm);
	margin-top: 10px;
	cursor: zoom-in;
	border: 1px solid var(--tpp-border);
}

/* Trading Rule image field (Add/Edit modals, Trading Setup page and Add
   Trade wizard alike) and its read-only display in the View popup. */
.tpp-rule-image-preview:empty { display: none; }
.tpp-rule-image-preview img {
	max-width: 180px;
	max-height: 140px;
	display: block;
	border-radius: var(--tpp-radius-sm);
	margin-top: 8px;
	border: 1px solid var(--tpp-border);
	object-fit: cover;
	cursor: zoom-in;
}
.tpp-rule-view-image img { max-width: 260px; max-height: 200px; margin-top: 0; margin-bottom: 16px; }

.tpp-lightbox {
	background: rgba(5,8,15,0.92);
	align-items: center;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 20px;
	animation: tpp-lightbox-fade-in 0.2s ease both;
}
.tpp-lightbox[hidden] { display: none; }
.tpp-lightbox.is-closing { animation: tpp-lightbox-fade-out 0.18s ease both; }
@keyframes tpp-lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpp-lightbox-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* The stage is the pannable/zoomable viewport: it owns the wheel/drag/
   pinch handlers and clips the image so a zoomed-in pan never spills
   outside the lightbox. touch-action: none hands pinch/drag gestures to
   our own JS instead of the browser's native page-zoom/scroll. */
.tpp-lightbox-stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	max-width: 1400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}
.tpp-lightbox-stage.is-zoomed { cursor: grab; }
.tpp-lightbox-stage.is-panning { cursor: grabbing; }
.tpp-lightbox img {
	max-width: 90vw;
	max-height: 78vh;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	transform-origin: center center;
	transition: transform 0.15s ease;
	user-select: none;
	-webkit-user-drag: none;
}
.tpp-lightbox-stage.is-panning img { transition: none; }
/* Close (✕): fixed top-right so it's always visible regardless of scroll
   position or zoom state, sized as a proper 44px touch target (WCAG
   minimum) rather than the smaller default .tpp-modal-close used in
   regular popups — this is a full-screen viewer, so it's the only way
   out and needs to be unmissable on mobile. */
.tpp-lightbox .tpp-modal-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255,255,255,0.12);
	border-radius: 50%;
	z-index: 3;
	transition: background 0.15s ease, transform 0.15s ease;
}
.tpp-lightbox .tpp-modal-close svg { width: 20px; height: 20px; }
.tpp-lightbox .tpp-modal-close:hover { background: rgba(255,255,255,0.24); transform: scale(1.05); }
.tpp-lightbox-toolbar { display: flex; gap: 8px; background: rgba(255,255,255,0.08); padding: 6px; border-radius: 999px; flex-shrink: 0; }
.tpp-lightbox-toolbar .tpp-btn { min-width: 36px; }

/* "1 / 6" image counter, shown whenever a caller opens the lightbox with
   more than one image (Trade screenshots only ever have one, so this stays
   invisible there; Psychology gallery and Trading Plans both pass several). */
.tpp-lightbox-counter {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: rgba(255,255,255,0.12);
	padding: 5px 14px;
	border-radius: 999px;
	z-index: 3;
}
.tpp-lightbox-counter[hidden] { display: none; }

/* Prev/Next: large, easy-to-hit circular buttons pinned to the vertical
   center of each side — hidden entirely (not just disabled) when there's
   nothing to navigate to, e.g. only one screenshot in the current list. */
.tpp-lightbox-nav {
	all: unset;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	z-index: 2;
}
.tpp-lightbox-nav svg { width: 22px; height: 22px; }
.tpp-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.tpp-lightbox-nav[hidden] { display: none; }
.tpp-lightbox-prev { left: 16px; }
.tpp-lightbox-next { right: 16px; }

@media (max-width: 640px) {
	.tpp-lightbox { padding: 12px; gap: 10px; }
	.tpp-lightbox-nav { width: 38px; height: 38px; }
	.tpp-lightbox-nav svg { width: 18px; height: 18px; }
	.tpp-lightbox-prev { left: 6px; }
	.tpp-lightbox-next { right: 6px; }
}

/* Optional trade-info side panel — only present (has-info) when
   TPP.openLightbox() is called with a meta array, e.g. from the
   Psychology Gallery, so the plain screenshot viewer used elsewhere is
   unaffected. */
.tpp-lightbox.has-info {
	display: grid;
	max-width: 1400px;
	margin: 0 auto;
	grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-rows: 1fr auto;
	grid-template-areas: "stage info" "toolbar toolbar";
	gap: 16px;
	align-items: stretch;
}
.tpp-lightbox.has-info .tpp-lightbox-stage { grid-area: stage; max-width: none; width: 100%; }
.tpp-lightbox.has-info .tpp-lightbox-toolbar { grid-area: toolbar; justify-self: center; }
.tpp-lightbox-info {
	grid-area: info;
	background: rgba(8,12,24,0.96);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 12px;
	padding: 18px;
	color: #fff;
	overflow-y: auto;
	align-self: stretch;
}
.tpp-lightbox-info[hidden] { display: none; }
.tpp-lightbox-info-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.tpp-lightbox-info-pnl { font-weight: 800; font-size: 15px; }
.tpp-lightbox-info-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.tpp-lightbox-info-list > div { display: flex; flex-direction: column; gap: 2px; }
.tpp-lightbox-info-list dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }
.tpp-lightbox-info-list dd { margin: 0; font-size: 13.5px; font-weight: 600; color: #fff; }

@media (max-width: 900px) {
	.tpp-lightbox.has-info {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0,1fr) auto auto;
		grid-template-areas: "stage" "info" "toolbar";
		max-height: 100%;
	}
	.tpp-lightbox-info { max-height: 160px; }
}

.tpp-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tpp-preview-grid div { background: var(--tpp-surface-2); border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius-sm); padding: 12px 14px; transition: border-color 0.15s ease; }
.tpp-preview-grid div:hover { border-color: var(--tpp-primary); }
.tpp-preview-grid label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); margin-bottom: 5px; }

/* Read-only-by-default field with a small pencil icon that swaps it for
   an editable input in place (Trade Close Date / Time) — icon and text
   share one flex row so they stay vertically centered and aligned. */
.tpp-preview-inline-field { margin-bottom: 0; }
.tpp-preview-inline-value { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.tpp-preview-inline-display { font-size: 13.5px; font-weight: 600; color: var(--tpp-text); }
.tpp-preview-inline-input { flex: 1; }
.tpp-preview-inline-inputs { display: flex; gap: 8px; flex: 1; }
.tpp-preview-inline-inputs .tpp-preview-inline-input { min-width: 0; }
.tpp-preview-edit-icon { flex-shrink: 0; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; font-size: 13px; }

.tpp-preview-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 14px 16px;
	margin-bottom: 18px;
}
.tpp-preview-header-pair { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.tpp-preview-header-pnl { font-size: 20px; font-weight: 800; }
.tpp-preview-header-pnl .tpp-form-note { font-weight: 500; font-size: 13px; margin-left: 2px; }

/* Result P/L: the first thing a user should see when opening Trade
   Details, so it gets its own full-width, large, color-coded block
   directly under the header rather than sharing a line with other info. */
.tpp-preview-pnl-hero {
	text-align: center;
	padding: 18px 16px;
	border-radius: var(--tpp-radius);
	border: 1px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	margin-bottom: 18px;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
}
.tpp-preview-pnl-hero.tpp-value-positive { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.4); }
.tpp-preview-pnl-hero.tpp-value-negative { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.4); }
.tpp-preview-pnl-hero-pct { display: block; font-size: 16px; font-weight: 600; margin-top: 4px; opacity: 0.85; }

.tpp-confidence-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tpp-confidence-summary-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); }
.tpp-confirmation-checklist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.tpp-confirmation-checklist li { background: var(--tpp-surface-2); border: 1px solid var(--tpp-border); border-radius: var(--tpp-radius-sm); padding: 8px 12px; font-size: 13px; color: var(--tpp-success-text); font-weight: 600; }

#tj-preview-body .tpp-section-heading { margin: 18px 0 10px; }
#tj-preview-body .tpp-section-heading:first-of-type { margin-top: 0; }

/* -------------------- Progress / confidence -------------------- */

.tpp-progress-track { background: var(--tpp-surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.tpp-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--tpp-primary), #8b5cf6); transition: width 0.3s ease; }
.tpp-confidence-weak .tpp-progress-fill { background: var(--tpp-danger); }
.tpp-confidence-fair .tpp-progress-fill { background: var(--tpp-warning); }
.tpp-confidence-good .tpp-progress-fill { background: var(--tpp-info-text); }
.tpp-confidence-excellent .tpp-progress-fill { background: var(--tpp-success); }

/* Trade Journal table Confidence column: same weak/fair/good/excellent
   color system as the wizard's confidence bar above, as a small badge so
   the level reads at a glance without opening the trade. */
.tpp-pill-confidence { font-weight: 700; }
.tpp-pill-confidence.tpp-confidence-weak { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }
.tpp-pill-confidence.tpp-confidence-fair { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); }
.tpp-pill-confidence.tpp-confidence-good { background: rgba(56,189,248,0.14); color: var(--tpp-info-text); }
.tpp-pill-confidence.tpp-confidence-excellent { background: rgba(22,163,74,0.14); color: var(--tpp-success-text); }

/* Trade Rules & Confirmation: compact selectable cards (icon, rule name,
   selection indicator, hover animation, selected state) — replaces the
   earlier large checkbox rows. */
.tpp-rule-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.tpp-rule-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	font-size: 12.5px;
	text-transform: none;
	font-weight: 600;
	color: var(--tpp-text);
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 14px 10px 12px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.tpp-rule-card:hover { border-color: rgba(37,99,235,0.45); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
.tpp-rule-card.is-checked {
	background: rgba(22,163,74,0.1);
	border-color: var(--tpp-success);
	box-shadow: 0 0 0 1px var(--tpp-success);
	animation: tppRulePulse 0.35s ease;
}
@keyframes tppRulePulse {
	0% { transform: scale(0.96); }
	60% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

.tpp-rule-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

/* Small "view details" icon in the card's top-right corner — see
   openRuleView() in trade-journal.js. Sits above the (visually hidden)
   checkbox so it can intercept its own click before the label forwards
   it to the checkbox. */
.tpp-rule-card-view-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: 50%;
	color: var(--tpp-text-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.tpp-rule-card-view-btn svg { width: 12px; height: 12px; }
.tpp-rule-card-view-btn:hover,
.tpp-rule-card-view-btn:focus-visible { color: var(--tpp-primary); border-color: var(--tpp-primary); }

.tpp-rule-card-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--tpp-primary); }
.tpp-rule-card-icon svg { width: 22px; height: 22px; }
.tpp-rule-card.is-checked .tpp-rule-card-icon { color: var(--tpp-success); }

.tpp-rule-card-text { line-height: 1.35; }

.tpp-rule-card-weight {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(139,148,171,0.16);
	color: var(--tpp-neutral-text);
}
.tpp-rule-weight-2 .tpp-rule-card-weight { background: rgba(56,189,248,0.14); color: var(--tpp-info-text); }
.tpp-rule-weight-3 .tpp-rule-card-weight { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); }
.tpp-rule-weight-4 .tpp-rule-card-weight { background: rgba(251,146,60,0.14); color: var(--tpp-orange-text); }
.tpp-rule-weight-5 .tpp-rule-card-weight { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }

/* -------------------- Trading Rules management page -------------------- */

/* Rule cards are the only cards in the app with an inline contenteditable
   rule-name field (see data-edit-text in trading-rules.js) plus a hover
   lift (transform, below) and an inline Plan <select> all on the same
   card — each of those can independently push a card onto its own browser
   compositing layer. Normally a later sibling with position:fixed and a
   higher z-index (the Add/Edit/View Rule modal overlay) still paints on
   top regardless, but on some browsers a composited layer for one of
   these can end up drawn in the wrong order, letting a card show through
   over an open modal instead of staying dimmed behind it. isolation:
   isolate pins the whole rule list to one atomic stacking slot in the
   page, so nothing inside it — no matter what triggers a layer promotion
   — can ever paint outside that slot and above a later, higher z-index
   element like the modal overlay. */
#tpp-trading-rules .tpp-cards-grid { isolation: isolate; }

.tpp-rule-card-manage { position: relative; z-index: 1; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
.tpp-rule-card-manage:hover { border-color: rgba(37,99,235,0.4); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
/* While its Plan popover is open, this card must paint above every card in
   the row(s) below it — otherwise a card lower in the grid (raised onto its
   own stacking context by the :hover transform above, or just later in DOM
   order) can visually cover the bottom of the open dropdown. is-plan-open is
   toggled by the details element's native 'toggle' event (trading-rules.js). */
.tpp-rule-card-manage.is-plan-open { z-index: 30; }
.tpp-rule-card-manage.is-inactive { opacity: 0.55; }
.tpp-rule-active-toggle { font-size: 12px; gap: 5px; }

/* Four-line card: 1) Rule Name, 2) Priority Badge, 3) Favorite + Active
   toggles, 4) View/Edit/Delete actions (.tpp-row-actions, below). */
.tpp-rule-card-manage .tpp-rule-card-text {
	outline: none;
	border-radius: var(--tpp-radius-sm);
	padding: 2px 4px;
	margin: 0 -4px 10px;
}
.tpp-rule-card-manage .tpp-rule-card-text:focus { background: var(--tpp-surface-2); }

.tpp-rule-card-priority-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tpp-priority-badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(139,148,171,0.16);
	color: var(--tpp-neutral-text);
}
/* Five-level Importance badge (Very Low/Low/Medium/High/Critical) — the
   same Gray/Blue/Yellow/Orange/Red palette used everywhere else importance
   is shown (Trade Rules & Confirmation checklist cards, dropdowns above). Level 1
   (Very Low) uses the base .tpp-priority-badge gray, so only 2-5 need rules. */
.tpp-priority-badge.tpp-priority-2 { background: rgba(56,189,248,0.14); color: var(--tpp-info-text); }
.tpp-priority-badge.tpp-priority-3 { background: rgba(245,158,11,0.14); color: var(--tpp-warning-text); }
.tpp-priority-badge.tpp-priority-4 { background: rgba(251,146,60,0.14); color: var(--tpp-orange-text); }
.tpp-priority-badge.tpp-priority-5 { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }

/* Inline "Assign to Trading Plan(s)" popover — quick multi-plan
   reassignment straight from the card, no need to open Edit. */
.tpp-rule-card-plan-line { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.tpp-rule-card-plan-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); }
.tpp-rule-card-plan-popover { flex: 1; min-width: 0; position: relative; }
.tpp-rule-card-plan-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	font-size: 12.5px;
	padding: 5px 10px;
	border: 1px solid var(--tpp-border);
	border-radius: 8px;
	background: var(--tpp-surface-2);
	color: var(--tpp-text-muted);
}
.tpp-rule-card-plan-summary::-webkit-details-marker { display: none; }
.tpp-rule-card-plan-summary::after { content: '▾'; flex: 0 0 auto; }
.tpp-rule-card-plan-summary-text { color: var(--tpp-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpp-rule-card-plan-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	max-width: 260px;
	max-height: 220px;
	overflow-y: auto;
	background: var(--tpp-bg-alt);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	box-shadow: 0 16px 40px rgba(0,0,0,0.4);
	padding: 6px;
	z-index: 20;
	animation: tppDropdownIn 0.15s ease;
}

/* Static checkbox list used in the Add/Edit Rule forms (not a popover —
   the modal already has room, so it's always visible). */
.tpp-plan-checkbox-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 160px;
	overflow-y: auto;
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 6px;
	background: var(--tpp-surface-2);
}
.tpp-plan-checkbox-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--tpp-text);
	cursor: pointer;
}
.tpp-plan-checkbox-item:hover { background: var(--tpp-surface); }
.tpp-plan-checkbox-item input { margin: 0; flex: 0 0 auto; }
.tpp-plan-checkbox-empty { padding: 6px 8px; font-size: 12.5px; color: var(--tpp-text-muted); }

/* Favourite + Active toggles, on their own line above View/Edit/Delete. */
.tpp-rule-card-utility { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.tpp-rule-card-utility .tpp-preset-favorite-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tpp-text-muted); }
.tpp-rule-card-utility .tpp-preset-favorite-btn.is-active { color: var(--tpp-warning-text); }

/* Selection indicator: a small checkmark badge, top-right corner */
.tpp-rule-card-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--tpp-border);
	background: var(--tpp-surface);
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tpp-rule-card.is-checked .tpp-rule-card-check {
	background: var(--tpp-success);
	border-color: var(--tpp-success);
	color: #fff;
	transform: scale(1.05);
}

/* -------------------- Trading Setup workspace (left nav / right content) -------------------- */
/* Reuses TPP.initPageTabs() unchanged (same [data-tpp-page-tabs]/[data-tab]/
   [data-tab-panel] contract as Risk Management's/Psychology's horizontal
   .tpp-page-tabs) — only the nav's visual layout differs here (vertical
   list instead of a pill bar), so the click/switch/deep-link behavior is
   already proven elsewhere in the app. */
.tpp-workspace { display: flex; align-items: flex-start; gap: 20px; }
.tpp-workspace-nav {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: var(--tpp-surface-2);
	border-radius: var(--tpp-radius-sm);
	padding: 8px;
	position: sticky;
	top: 84px;
}
.tpp-workspace-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 13.5px;
	text-align: left;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tpp-app:not([data-tpp-theme="light"]) .tpp-workspace-nav-item { color: #fff; }
.tpp-workspace-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.tpp-workspace-nav-item.is-active { background: var(--tpp-primary); color: #fff; }
.tpp-app:not([data-tpp-theme="light"]) .tpp-workspace-nav-item:hover:not(.is-active) { background: var(--tpp-surface); }

/* Light Mode only: same solid-navy-chip-by-default / blue-on-hover
   treatment as .tpp-page-tab above (Risk Management/Psychology) — kept
   in sync since these are the same underlying tab component, just laid
   out as a vertical sidebar here. Previously this item stayed white
   text with no background change of its own; on hover its background
   fell back to --tpp-surface, which in Light Mode is pure white — white
   text on a white hover background was invisible. Dark Mode is
   untouched. */
.tpp-app[data-tpp-theme="light"] .tpp-workspace-nav-item {
	color: #fff;
	background: #1e293b;
	border-color: #334155;
}
.tpp-app[data-tpp-theme="light"] .tpp-workspace-nav-item.is-active { background: var(--tpp-primary); border-color: var(--tpp-primary); }
.tpp-app[data-tpp-theme="light"] .tpp-workspace-nav-item:hover:not(.is-active) { background: #2563eb; border-color: #2563eb; color: #fff; }
.tpp-workspace-content { flex: 1 1 0; min-width: 0; }
.tpp-workspace-panel { animation: tpp-fade-up 0.15s ease; }

@media (max-width: 900px) {
	.tpp-workspace { flex-direction: column; }
	.tpp-workspace-nav {
		flex: 0 0 auto;
		flex-direction: row;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		position: static;
		scrollbar-width: thin;
	}
	.tpp-workspace-nav-item { flex: 0 0 auto; white-space: nowrap; }
}

.tpp-setup-block h4 { margin: 0 0 10px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tpp-text-muted); }

.tpp-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; min-height: 26px; }
.tpp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.tpp-chip:hover { border-color: var(--tpp-primary); color: var(--tpp-primary); }
.tpp-chip button {
	background: transparent;
	border: none;
	color: var(--tpp-text-muted);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 0;
}
.tpp-chip button:hover { color: var(--tpp-danger-text); }

.tpp-inline-form { display: flex; gap: 8px; }
.tpp-inline-form input { flex: 1; min-width: 0; }

.tpp-setup-search { width: 100%; margin-bottom: 8px; }

.tpp-input-with-action { display: flex; gap: 6px; align-items: center; }
.tpp-input-with-action input { flex: 1; }

/* -------------------- Trading Pair searchable combobox -------------------- */

.tpp-pair-combobox { position: relative; }

.tpp-pair-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 38px;
	z-index: 20;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 260px;
	overflow-y: auto;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.tpp-pair-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--tpp-text);
}
.tpp-pair-dropdown-item:hover,
.tpp-pair-dropdown-item.is-highlighted { background: var(--tpp-surface-2); }

.tpp-pair-dropdown-star { color: var(--tpp-warning-text); font-size: 13px; width: 14px; text-align: center; }
.tpp-pair-dropdown-star-empty { color: var(--tpp-text-muted); }

.tpp-pair-dropdown-empty { padding: 10px; font-size: 12.5px; color: var(--tpp-text-muted); }

@media (max-width: 640px) {
	.tpp-pair-dropdown { right: 0; }
}
.tpp-icon-btn.is-active { color: var(--tpp-warning-text); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.1); }

/* Take Profit preset manager ---------------------------------------- */

.tpp-tp-preset-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 280px; overflow-y: auto; }

.tpp-setup-block-presets h4.tpp-setup-block-presets-list-heading { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tpp-border); }

.tpp-tp-preset-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 8px 10px;
}

.tpp-preset-favorite-btn { border: none; background: transparent; color: var(--tpp-text-muted); font-size: 15px; padding: 2px 4px; cursor: pointer; transition: color 0.18s ease, transform 0.12s ease; }
.tpp-preset-favorite-btn.is-active { color: var(--tpp-warning-text); }
.tpp-preset-favorite-btn:active { transform: scale(0.85); }

.tpp-tp-preset-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.tpp-tp-preset-info strong { font-size: 13px; color: var(--tpp-text); }
.tpp-tp-preset-info .tpp-form-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tpp-tp-preset-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tpp-tp-preset-row-actions .tpp-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.tpp-tp-preset-form { display: flex; flex-direction: column; gap: 12px; }
.tpp-tp-preset-form .tpp-field-row:empty { display: none; }

/* Mobile: the desktop row (favorite star + info + 4 action icons all on
   one line) has no room to breathe below ~480px — the info text gets
   squeezed and the icon row can push past the viewport edge, forcing a
   horizontal scroll. Wrapping the row onto two lines (star+title on top,
   actions on their own full-width line) keeps every element at its
   natural size with no scrolling, and the shared .tpp-icon-btn sizing
   already keeps the four action buttons equal height. Desktop layout
   above this breakpoint is untouched. */
@media (max-width: 480px) {
	.tpp-tp-preset-list { max-height: none; }
	.tpp-tp-preset-row { flex-wrap: wrap; padding: 10px; }
	.tpp-tp-preset-info { flex: 1 1 calc(100% - 40px); min-width: 0; }
	.tpp-tp-preset-info .tpp-form-note { white-space: normal; overflow-wrap: break-word; }
	.tpp-tp-preset-row-actions { flex: 1 1 100%; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tpp-border); }
}

/* Wizard TP preset quick-select: highlight the chosen preset */
#tj-tp-presets button.is-selected { background: var(--tpp-primary); color: #fff; }

/* -------------------- Table screenshot thumbnail -------------------- */

.tpp-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--tpp-border);
	cursor: zoom-in;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.tpp-thumb:hover { transform: scale(1.08); border-color: var(--tpp-primary); }
.tpp-thumb-empty { color: var(--tpp-text-muted); }

/* -------------------- Record Result quick action -------------------- */

.tpp-result-btn.is-selected.tpp-result-win { background: rgba(22,163,74,0.18); border-color: var(--tpp-success); color: var(--tpp-success-text); }
.tpp-result-btn.is-selected.tpp-result-loss { background: rgba(220,38,38,0.18); border-color: var(--tpp-danger); color: var(--tpp-danger-text); }
.tpp-result-btn.is-selected.tpp-result-breakeven { background: rgba(245,158,11,0.18); border-color: var(--tpp-warning); color: var(--tpp-warning-text); }

/* -------------------- Simple SVG charts -------------------- */

.tpp-chart-wrap { width: 100%; overflow-x: auto; }
.tpp-chart-wrap svg { width: 100%; height: auto; display: block; }
.tpp-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--tpp-text-muted); }
.tpp-chart-legend span.tpp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }

.tpp-chart-svg-holder { position: relative; display: inline-flex; width: 100%; }
.tpp-chart-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.tpp-chart-center-value { font-size: 22px; font-weight: 700; color: var(--tpp-text); line-height: 1.1; }
.tpp-chart-center-label { font-size: 11px; font-weight: 500; color: var(--tpp-text-muted); margin-top: 2px; }

/* Premium entrance animation: replays whenever chart markup is inserted
   (initial page load or an AJAX refresh), since each swap is a fresh
   element. Respects reduced-motion preference. */
@keyframes tpp-chart-reveal {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.tpp-chart-svg { animation: tpp-chart-reveal 0.45s cubic-bezier(0.16, 0.84, 0.44, 1) both; }
@media (prefers-reduced-motion: reduce) {
	.tpp-chart-svg { animation: none; }
}

/* Chart hover affordances: hit-targets stay invisible until interacted
   with, but give a subtle visual cue so users know a point/bar/segment
   is interactive. ------------------------------------------------------ */

.tpp-chart-point-hit, .tpp-chart-bar-hit { cursor: pointer; }
.tpp-chart-point-dot { transition: r 0.15s ease; pointer-events: none; }
.tpp-chart-point-hit:hover + .tpp-chart-point-dot,
.tpp-chart-point-hit:focus + .tpp-chart-point-dot { r: 4.5; }
.tpp-chart-bar-hit:hover { fill: rgba(148,163,184,0.12); }
.tpp-chart-segment { cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; }
.tpp-chart-segment:hover, .tpp-chart-segment:focus { filter: brightness(1.12); outline: none; }

/* Shared interactive chart tooltip -------------------------------------
   Rendered once per page (appended to #tpp-app-root) and repositioned/
   repopulated by JS on hover or tap; themed automatically via the same
   --tpp-* custom properties used everywhere else. ---------------------- */

.tpp-chart-tooltip {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	min-width: 160px;
	max-width: 240px;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15,23,42,0.22), 0 2px 8px rgba(15,23,42,0.12);
	padding: 10px 12px;
	opacity: 0;
	transform: translateY(4px) scale(0.98);
	transition: opacity 0.12s ease, transform 0.12s ease;
}
.tpp-chart-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.tpp-chart-tooltip-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--tpp-text);
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--tpp-border);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpp-chart-tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.6; }
/* Plain-language help tooltips (a field label's "?" icon) — prose, not a
   label/value data row, so it wraps normally instead of staying nowrap. */
.tpp-chart-tooltip-text { font-size: 12.5px; line-height: 1.55; color: var(--tpp-text); }
/* Small illustrative diagram shown above a field-help tooltip's text
   (see $tpp_sl_diagram in trade-modals.php) — the SVG itself carries all
   its own colors via var(), this just sizes/spaces it. */
.tpp-chart-tooltip-diagram { margin-bottom: 8px; }
.tpp-chart-tooltip-diagram svg { display: block; width: 100%; height: auto; }
.tpp-chart-tooltip-label { color: var(--tpp-text-muted); white-space: nowrap; display: inline-flex; align-items: center; }
.tpp-chart-tooltip-value { color: var(--tpp-text); font-weight: 600; white-space: nowrap; }
.tpp-chart-tooltip-value.tpp-status-active { color: var(--tpp-success); }
.tpp-chart-tooltip-value.tpp-status-expired { color: var(--tpp-danger); }
.tpp-chart-tooltip-value.tpp-status-neutral { color: var(--tpp-neutral-text); }

/* Small per-row icon (Performance Overview's richer tooltip) + a wider
   variant for that same tooltip's 9-row payload — every other chart's
   tooltip payload omits both and is completely unaffected. */
.tpp-chart-tooltip-icon { display: inline-flex; flex-shrink: 0; width: 12px; height: 12px; margin-right: 6px; color: var(--tpp-text-muted); }
.tpp-chart-tooltip-icon svg { width: 100%; height: 100%; }
.tpp-chart-tooltip.tpp-chart-tooltip-wide { min-width: 220px; max-width: 270px; }

/* -------------------- Motion & responsive -------------------- */

/* Every user of this animation used to end in ...ease both — fill-mode
   both/forwards keeps the terminal keyframe's transform actively
   "animated" on the element forever after the animation finishes, and a
   browser represents that held value as a resolved matrix rather than
   the literal keyword none even when the authored value is translateY(0)
   or none itself (confirmed via getComputedStyle: it read back as
   matrix(1,0,0,1,0,0), never the string "none", for as long as
   fill-mode held it). Per spec, ANY non-none transform on an ancestor —
   and a held animated matrix counts — becomes the containing block for
   a position:fixed descendant. So a popup modal nested inside a
   .tpp-workspace-panel or .tpp-page-tab-panel (both animate with this
   keyframe) stopped sizing itself to the real viewport and instead got
   clipped to that panel's own content height, cropping the popup down
   to roughly how tall its surrounding card grid/list happened to be —
   the actual root cause of the "popup gets cropped" reports on the
   Add/Edit Rule and Strategy Video popups. Dropping both/forwards (see
   every "animation: tpp-fade-up ..." rule below) is what actually fixes
   it: once the animation ends, the element reverts to its own
   un-animated computed style, which has no transform rule at all, so
   the containing block goes back to being the real viewport. The
   translateZ(0)/isolation fixes tried earlier addressed a different,
   cosmetic compositing quirk, not this. transform: none instead of
   translateY(0) here is kept anyway as the more correct end value, even
   though it isn't what resolves this on its own. */
@keyframes tpp-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Dashboard (redesign) — 12-column responsive grid, stat cards, chart
   panel, recent trades, trading calendar, mini stats, quick actions,
   goals card. Everything reuses existing tokens (--tpp-*) so it stays
   consistent with the rest of the app in both themes.
   ========================================================================== */

.tpp-dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }

/* Welcome section ----------------------------------------------------- */

.tpp-dash-welcome {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}
.tpp-dash-greeting { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.tpp-dash-subtitle { color: var(--tpp-text-muted); margin: 0; font-size: 13.5px; }
.tpp-dash-welcome-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tpp-dash-welcome-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tpp-text-muted);
	font-size: 12.5px;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	padding: 7px 12px;
	border-radius: 999px;
}
.tpp-dash-welcome-date svg { width: 14px; height: 14px; }
.tpp-dash-welcome-clock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tpp-text);
	font-weight: 600;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	padding: 7px 12px;
	border-radius: 999px;
}
.tpp-dash-welcome-clock svg { width: 14px; height: 14px; color: var(--tpp-primary); }

/* Global dashboard filter ----------------------------------------------- */

.tpp-dash-global-filter {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: -6px;
}
.tpp-dash-global-filter-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tpp-text-muted);
}
.tpp-dash-global-filter-label svg { width: 14px; height: 14px; }

/* Six performance cards ------------------------------------------------ */

.tpp-dash-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

.tpp-dash-stat-card {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 18px;
	box-shadow: var(--tpp-shadow);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 152px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tpp-dash-stat-card > .tpp-dash-stat-spark { margin-top: auto; }
.tpp-dash-stat-card:hover { transform: translateY(-3px); border-color: var(--tpp-primary); box-shadow: 0 14px 34px rgba(37,99,235,0.16); }

.tpp-dash-stat-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(37,99,235,0.14);
	color: var(--tpp-primary);
}
.tpp-dash-stat-icon svg { width: 19px; height: 19px; }

.tpp-dash-stat-title { font-size: 12px; font-weight: 600; color: var(--tpp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tpp-dash-stat-value { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; color: var(--tpp-text); line-height: 1.2; }
.tpp-dash-stat-unit { font-size: 14px; font-weight: 600; color: var(--tpp-text-muted); margin-left: 2px; }
.tpp-dash-stat-empty { color: var(--tpp-text-muted); }

.tpp-dash-trend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; font-weight: 600; text-decoration: none; }
.tpp-dash-trend-icon { width: 12px; height: 12px; }
.tpp-dash-trend-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-weight: 700; }
.tpp-dash-trend-up .tpp-dash-trend-pill { background: rgba(22,163,74,0.14); color: var(--tpp-success-text); }
.tpp-dash-trend-down .tpp-dash-trend-pill { background: rgba(220,38,38,0.14); color: var(--tpp-danger-text); }
.tpp-dash-trend-flat .tpp-dash-trend-pill { background: var(--tpp-surface-2); color: var(--tpp-text-muted); }
.tpp-dash-trend-suffix { color: var(--tpp-text-muted); font-weight: 500; }

.tpp-dash-stat-spark { margin-top: auto; padding-top: 6px; }
.tpp-dash-stat-spark svg { display: block; width: 100%; height: 34px; }

/* Shared card shell for panels below the stat row ---------------------- */

.tpp-dash-card {
	grid-column: span 6;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 20px;
	box-shadow: var(--tpp-shadow);
	min-width: 0;
}
.tpp-dash-card-wide { grid-column: 1 / -1; }

.tpp-dash-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tpp-dash-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.tpp-dash-card-header-actions { display: flex; align-items: center; gap: 12px; }
.tpp-dash-card-header-actions .tpp-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--tpp-primary); }
.tpp-dash-card-header-actions .tpp-link:hover { text-decoration: underline; }

.tpp-dash-chart-wrap { margin-top: 4px; }

/* Analytics row: Performance Overview / Strategy / Pair / Session -------- */

.tpp-dash-analytics-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
}
.tpp-dash-analytics-card { grid-column: span 1; padding: 16px; display: flex; flex-direction: column; }
.tpp-dash-analytics-card.tpp-dash-card-wide { grid-column: 1 / -1; }
.tpp-dash-analytics-card .tpp-dash-card-header { margin-bottom: 10px; }
.tpp-dash-analytics-card .tpp-dash-card-header h3 { font-size: 13px; }

.tpp-dash-card-header .tpp-dash-rank-sort { width: auto; flex: 0 0 auto; padding: 4px 28px 4px 10px; background-position: right 8px center; background-size: 12px; font-size: 11px; font-weight: 600; border-radius: 999px; }

.tpp-dash-period-filter { flex-wrap: wrap; }
.tpp-dash-period-filter .tpp-segmented-option { padding: 6px 12px; font-size: 12px; }

.tpp-dash-chart-spinner { display: flex; align-items: center; justify-content: center; padding: 48px 0; }

/* ============================================================
   Performance Overview — premium spline/area chart
   ============================================================ */

.tpp-perf-card { padding: 20px; }
.tpp-perf-header { align-items: flex-start; margin-bottom: 18px; }
.tpp-perf-header-titles h3 { font-size: 16px; }
.tpp-perf-subtitle { margin: 3px 0 0; font-size: 12px; font-weight: 500; color: var(--tpp-text-muted); }

.tpp-perf-header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 100%; }
.tpp-perf-metric .tpp-segmented-option { padding: 6px 11px; font-size: 12.5px; }

/* Global dashboard period filter: pill row + Custom Range popover ------- */

.tpp-dash-period-custom { display: inline-flex; align-items: center; gap: 5px; }
.tpp-dash-period-custom svg { width: 13px; height: 13px; }

.tpp-dash-period-wrap { position: relative; }
.tpp-dash-period-custom-popover {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 230px;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	box-shadow: var(--tpp-shadow);
	padding: 14px;
	animation: tpp-fade-up 0.15s ease;
}
.tpp-dash-period-custom-popover label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--tpp-text-muted); }
.tpp-dash-period-custom-popover input[type="date"] { padding: 7px 10px; font-size: 12.5px; }
.tpp-dash-period-custom-popover .tpp-btn { align-self: flex-end; }

/* Row 1: Performance Overview (wide) + Trade Status Overview (narrow) --- */

.tpp-dash-perf-status-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 16px;
	align-items: stretch;
}
.tpp-dash-perf-status-row > .tpp-dash-card { grid-column: span 1; display: flex; flex-direction: column; }

/* Cross-fade instead of an instant swap when the period/metric changes —
   the fresh chart's own entrance animation (.tpp-chart-svg) then fades/
   scales it back in, so the whole switch reads as one smooth motion. */
#tpp-dash-performance { transition: opacity 0.16s ease; }
#tpp-dash-performance.is-transitioning { opacity: 0; }

/* Animated skeleton loader shown while a new period/metric is fetched -- */
.tpp-perf-skeleton { padding: 10px 4px 0; }
.tpp-perf-skeleton-bars { display: flex; align-items: flex-end; gap: 8px; height: 240px; }
.tpp-perf-skeleton-bars span {
	flex: 1 1 auto;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(90deg, var(--tpp-surface-2) 25%, var(--tpp-border) 37%, var(--tpp-surface-2) 63%);
	background-size: 400% 100%;
	animation: tpp-perf-skeleton-shimmer 1.4s ease infinite;
}
.tpp-perf-skeleton-bars span:nth-child(1) { height: 55%; }
.tpp-perf-skeleton-bars span:nth-child(2) { height: 78%; animation-delay: 0.08s; }
.tpp-perf-skeleton-bars span:nth-child(3) { height: 45%; animation-delay: 0.16s; }
.tpp-perf-skeleton-bars span:nth-child(4) { height: 88%; animation-delay: 0.24s; }
.tpp-perf-skeleton-bars span:nth-child(5) { height: 62%; animation-delay: 0.32s; }
.tpp-perf-skeleton-bars span:nth-child(6) { height: 72%; animation-delay: 0.4s; }
@keyframes tpp-perf-skeleton-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tpp-perf-skeleton-bars span { animation: none; }
}

/* Empty state: literal 📈 per spec, reusing .tpp-dash-empty-state's
   existing centering/spacing. */
.tpp-perf-empty-state .tpp-perf-empty-icon { display: block; font-size: 42px; line-height: 1; margin-bottom: 10px; }

/* The chart line/area color: a brighter blue in Dark Mode (the app's
   default theme), the exact rgba(37,99,235) blue requested for Light
   Mode — both live CSS variables, so the same server-rendered SVG
   re-themes instantly on toggle with no re-render. */
.tpp-app { --tpp-perf-line: #3b82f6; }
.tpp-app[data-tpp-theme="light"] { --tpp-perf-line: #2563eb; }

.tpp-perf-chart-wrap { margin-top: 4px; }
.tpp-perf-chart-line { stroke: var(--tpp-perf-line); }
.tpp-perf-chart-grad-top { stop-color: var(--tpp-perf-line); stop-opacity: 0.28; }
.tpp-perf-chart-grad-bottom { stop-color: var(--tpp-perf-line); stop-opacity: 0; }

/* Timeline point markers: a small solid dot at every data point, same
   color as the line, growing slightly on hover/focus of its (invisible,
   wider) hit-circle — same interaction pattern as .tpp-chart-point-dot
   used by the app's other line charts. */
.tpp-perf-chart-dot { fill: var(--tpp-perf-line); pointer-events: none; transition: r 0.15s ease; }
.tpp-perf-chart-hit:hover + .tpp-perf-chart-dot,
.tpp-perf-chart-hit:focus + .tpp-perf-chart-dot { r: 4.5; }

.tpp-perf-chart-grid line { stroke: var(--tpp-border); stroke-width: 1; opacity: 0.6; }
.tpp-perf-chart-axis-label { font-size: 13px; font-weight: 600; fill: var(--tpp-text-muted); font-family: inherit; }

.tpp-perf-chart-hit { cursor: pointer; }
.tpp-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid var(--tpp-border);
	border-top-color: var(--tpp-primary);
	border-radius: 50%;
	display: inline-block;
	animation: tpp-spin 0.7s linear infinite;
}
@keyframes tpp-spin { to { transform: rotate(360deg); } }

/* SPA sidebar navigation (initSpaNav(), tpp-app.js): a small overlay
   spinner + dimmed content inside #tpp-view-container while the next
   view's fragment is being fetched, instead of a blank/frozen screen. */
#tpp-view-container { position: relative; }
#tpp-view-container.is-tpp-nav-loading { opacity: 0.45; transition: opacity 0.15s ease; pointer-events: none; }
#tpp-view-container.is-tpp-nav-loading::after {
	content: "";
	position: absolute;
	top: 40vh;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border: 3px solid var(--tpp-border);
	border-top-color: var(--tpp-primary);
	border-radius: 50%;
	animation: tpp-spin 0.7s linear infinite;
	z-index: 20;
}

#tpp-dash-performance.is-loading { opacity: 0.6; transition: opacity 0.15s ease; }
#tpp-dash-calendar-card.is-loading { opacity: 0.6; transition: opacity 0.15s ease; pointer-events: none; }
[data-tpp-rank-body].is-loading { opacity: 0.6; transition: opacity 0.15s ease; }
#tpp-dash-winloss.is-loading { opacity: 0.6; transition: opacity 0.15s ease; }
[id^="tpp-dash-card-"].is-loading { opacity: 0.6; transition: opacity 0.15s ease; }

.tpp-dash-rank-chart { display: flex; justify-content: center; flex: 1; align-items: center; }
.tpp-dash-rank-chart .tpp-chart-wrap { flex-direction: column; align-items: center; gap: 10px; }
.tpp-dash-rank-chart .tpp-chart-legend { font-size: 11px; justify-content: center; }

.tpp-winloss-chart { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
.tpp-winloss-chart .tpp-chart-wrap { width: auto; align-self: center; }
.tpp-winloss-chart .tpp-chart-svg-holder { width: 148px; }
.tpp-winloss-legend { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.tpp-winloss-row { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; flex-wrap: wrap; }
.tpp-winloss-row .tpp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.tpp-winloss-row-label { font-weight: 700; color: var(--tpp-text); }
.tpp-winloss-row-detail { color: var(--tpp-text-muted); }

/* Horizontal bar list: Time Performance / Day Performance ---------------
   One row per category with the bar and its underlying figures both
   visible at once (label, proportional bar, net profit, trades/win-rate)
   — a hover tooltip still carries the full breakdown, but the headline
   numbers don't require hovering to read. ------------------------------ */

.tpp-hbar-list { display: flex; flex-direction: column; gap: 4px; }
.tpp-hbar-list.is-scrollable { overflow-y: auto; padding-right: 4px; }
.tpp-hbar-row {
	display: grid;
	grid-template-columns: 74px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: var(--tpp-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
}
.tpp-hbar-row:hover, .tpp-hbar-row:focus { background: var(--tpp-surface-2); outline: none; }
.tpp-hbar-row.is-empty { opacity: 0.55; }
.tpp-hbar-label { font-size: 11.5px; font-weight: 600; color: var(--tpp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-hbar-track { position: relative; height: 8px; border-radius: 999px; background: var(--tpp-surface-2); overflow: hidden; }
.tpp-hbar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #4ade80, #16a34a);
	transition: width 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
}
/* Loss/neutral rows get their own bar color so a losing strategy, pair,
   hour or day reads as a loss in the bar itself, not just its number. */
.tpp-hbar-fill.is-negative { background: linear-gradient(90deg, #f87171, #dc2626); }
.tpp-hbar-fill.is-neutral { background: linear-gradient(90deg, #94a3b8, #64748b); }
.tpp-hbar-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 78px; }
.tpp-hbar-value { font-size: 12px; font-weight: 700; color: var(--tpp-text); white-space: nowrap; }
.tpp-hbar-meta { font-size: 10.5px; color: var(--tpp-text-muted); white-space: nowrap; }

/* Show More / Show Less: the extra rows sit in a max-height-animated
   container so revealing them feels smooth rather than an abrupt jump;
   if the expanded content is taller than the cap it scrolls internally
   so one long list can't blow out the whole card's height. */
.tpp-hbar-extra {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.tpp-hbar-extra.is-open { max-height: 320px; overflow-y: auto; margin-top: 2px; }
.tpp-hbar-toggle {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 8px;
	border: 1px dashed var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	background: transparent;
	color: var(--tpp-primary);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.tpp-hbar-toggle:hover { background: var(--tpp-surface-2); border-color: var(--tpp-primary); }

.tpp-dash-empty-state-compact { padding: 20px 10px; }
.tpp-dash-empty-state-compact p { font-size: 12px; }

/* Empty states ----------------------------------------------------------- */

.tpp-dash-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 40px 20px;
	color: var(--tpp-text-muted);
}
.tpp-dash-empty-icon { width: 34px; height: 34px; opacity: 0.55; }
.tpp-dash-empty-state p { margin: 0; }

/* Recent Trades: clickable rows ------------------------------------------ */

.tpp-dash-clickable-row { cursor: pointer; }
.tpp-dash-mini-stat.tpp-dash-clickable-row:hover,
.tpp-dash-mini-stat.tpp-dash-clickable-row:focus-visible { border-color: var(--tpp-primary); }
.tpp-dash-clickable-row:hover { background: var(--tpp-surface-2); }

/* Trading Calendar + Trading Statistics: side by side, equal height ------ */

.tpp-dash-calendar-stats-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 16px;
	align-items: stretch;
}
.tpp-dash-calendar-col, .tpp-dash-stats-col { grid-column: span 1; display: flex; flex-direction: column; min-width: 0; }
.tpp-dash-stats-col .tpp-dash-mini-grid { flex: 1; }

.tpp-dash-calendar-nav { display: flex; align-items: center; gap: 8px; }
.tpp-dash-calendar-label { font-weight: 700; font-size: 13px; min-width: 104px; text-align: center; }

.tpp-dash-calendar-legend { display: flex; gap: 14px; margin-bottom: 12px; font-size: 11.5px; color: var(--tpp-text-muted); }
.tpp-dash-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tpp-dash-cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tpp-dash-cal-dot-win { background: var(--tpp-success); }
.tpp-dash-cal-dot-loss { background: var(--tpp-danger); }
.tpp-dash-cal-dot-none { background: var(--tpp-border); }

.tpp-dash-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.tpp-dash-calendar-weekday { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--tpp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 4px; }

.tpp-dash-calendar-cell {
	aspect-ratio: 1 / 1;
	max-width: 64px;
	margin: 0 auto;
	width: 100%;
	border-radius: 9px;
	border: 1px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	padding: 3px;
}
.tpp-dash-calendar-cell:hover { transform: translateY(-2px) scale(1.04); border-color: var(--tpp-primary); box-shadow: 0 6px 14px rgba(37,99,235,0.2); z-index: 1; position: relative; }
.tpp-dash-calendar-cell-empty { visibility: hidden; cursor: default; }
.tpp-dash-calendar-cell-empty:hover { transform: none; box-shadow: none; }
.tpp-dash-calendar-cell.is-today { border-color: var(--tpp-primary); border-width: 2px; }
.tpp-dash-calendar-cell-win { background: rgba(22,163,74,0.2); border-color: rgba(22,163,74,0.55); }
.tpp-dash-calendar-cell-loss { background: rgba(220,38,38,0.2); border-color: rgba(220,38,38,0.55); }
.tpp-dash-calendar-daynum { font-size: 13px; font-weight: 700; color: var(--tpp-text); line-height: 1; }
.tpp-dash-calendar-daynet { font-size: 9px; font-weight: 600; letter-spacing: 0.01em; color: var(--tpp-text-muted); line-height: 1; opacity: 0.9; }
.tpp-dash-calendar-cell-win .tpp-dash-calendar-daynet { color: var(--tpp-success-text); }
.tpp-dash-calendar-cell-loss .tpp-dash-calendar-daynet { color: var(--tpp-danger-text); }

.tpp-dash-day-trade-list { display: flex; flex-direction: column; gap: 8px; }
.tpp-dash-day-trade-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.tpp-dash-day-trade-row:hover { border-color: var(--tpp-primary); }
.tpp-dash-day-trade-row { flex-wrap: wrap; }
.tpp-dash-day-trade-time { flex: 0 0 auto; font-size: 12px; color: var(--tpp-text-muted); font-variant-numeric: tabular-nums; }
.tpp-dash-day-trade-pair { flex: 1; min-width: 70px; font-weight: 600; }
.tpp-dash-day-trade-strategy,
.tpp-dash-day-trade-plan { flex: 0 1 auto; font-size: 12px; color: var(--tpp-text-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px) {
	.tpp-dash-day-trade-strategy,
	.tpp-dash-day-trade-plan { display: none; }
}

/* Trading Statistics mini cards ------------------------------------------- */

.tpp-dash-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tpp-dash-mini-grid-2col { grid-template-columns: repeat(2, 1fr); }
.tpp-dash-mini-stat {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tpp-dash-mini-label { font-size: 11.5px; font-weight: 600; color: var(--tpp-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tpp-dash-mini-value { font-size: 19px; font-weight: 800; }

/* Quick Actions ------------------------------------------------------------ */

.tpp-dash-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tpp-dash-quick-action {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-radius: var(--tpp-radius-sm);
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-text);
	font-weight: 600;
	font-size: 13px;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tpp-dash-quick-action:hover { transform: translateY(-2px); border-color: var(--tpp-primary); background: rgba(37,99,235,0.1); color: var(--tpp-text); }
.tpp-dash-quick-action svg { width: 18px; height: 18px; color: var(--tpp-primary); flex-shrink: 0; }
/* Dark mode: the global `.tpp-app a` rule (0,1,1) otherwise beats the class-only
   selector above (0,1,0) and forces the blue link color, which is hard to read. */
.tpp-app:not([data-tpp-theme="light"]) .tpp-dash-quick-action,
.tpp-app:not([data-tpp-theme="light"]) .tpp-dash-quick-action:hover { color: #fff; }

/* Goals card ---------------------------------------------------------------- */

.tpp-dash-goal-title { font-weight: 700; font-size: 14px; margin: 0 0 10px; }
.tpp-dash-goal-amounts { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.tpp-dash-goal-amounts .tpp-dash-stat-unit { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* -------------------- System footer (every view) -------------------- */

.tpp-app-footer {
	flex-shrink: 0;
	text-align: center;
	padding: 18px 24px 20px;
	border-top: 1px solid var(--tpp-border);
	background: var(--tpp-bg-alt);
}
.tpp-app-footer-brand {
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--tpp-text);
	margin: 0 0 4px;
}
.tpp-app-footer-copyright {
	font-size: 12px;
	font-weight: 600;
	color: var(--tpp-text-muted);
	margin: 0;
}
.tpp-app-footer-copyright a {
	color: var(--tpp-primary);
	font-weight: 700;
}
.tpp-app-footer-copyright a:hover { color: var(--tpp-primary-hover); }

@media (max-width: 640px) {
	.tpp-app-footer { padding: 16px 16px 18px; }
}

/* -------------------- Floating Scroll to Top button -------------------- */

.tpp-scroll-top-btn {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--tpp-border);
	background: var(--tpp-surface);
	color: var(--tpp-primary);
	box-shadow: var(--tpp-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease, border-color 0.2s ease;
}
.tpp-scroll-top-btn svg { width: 20px; height: 20px; }
.tpp-scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.tpp-scroll-top-btn:hover { border-color: var(--tpp-primary); background: var(--tpp-surface-2); }

@media (max-width: 640px) {
	.tpp-scroll-top-btn { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

@media (max-width: 960px) {
	.tpp-sidebar {
		position: fixed;
		left: 0;
		top: 0;
		transform: translateX(-100%);
		width: var(--tpp-sidebar-w);
		box-shadow: var(--tpp-shadow);
	}
	.tpp-app[data-sidebar-mobile="open"] .tpp-sidebar { transform: translateX(0); }
	.tpp-app[data-sidebar="collapsed"] .tpp-sidebar { width: var(--tpp-sidebar-w); }
	.tpp-app[data-sidebar="collapsed"] .tpp-brand-name,
	.tpp-app[data-sidebar="collapsed"] .tpp-nav-label { display: block; }
	.tpp-sidebar-toggle { display: none; }
	.tpp-mobile-menu-btn { display: flex; }
	.tpp-sidebar-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.5);
		z-index: 30;
	}
	.tpp-app[data-sidebar-mobile="open"] .tpp-sidebar-backdrop { display: block; }

	/* Dashboard: 6 stat cards -> 3 columns, wide panels stay full-width -- */
	.tpp-dash-grid { grid-template-columns: repeat(3, 1fr); }
	.tpp-dash-card { grid-column: 1 / -1; }
	.tpp-dash-mini-grid { grid-template-columns: repeat(2, 1fr); }
	.tpp-topbar-center { padding: 0 10px; }

	/* Analytics row: 4 -> 2 columns; Calendar/Stats stay side by side ---- */
	.tpp-dash-analytics-row { grid-template-columns: repeat(2, 1fr); }
	.tpp-dash-analytics-card { grid-column: span 1; }
	.tpp-dash-analytics-card.tpp-dash-card-wide { grid-column: 1 / -1; }
	.tpp-dash-calendar-stats-row { grid-template-columns: 1fr 1fr; }
	.tpp-dash-calendar-col, .tpp-dash-stats-col { grid-column: span 1; }

	/* Row 1: Performance Overview / Trade Status Overview stack ---------- */
	.tpp-dash-perf-status-row { grid-template-columns: 1fr; }

	/* Performance Overview: controls move below the title, full-width --- */
	.tpp-perf-header { flex-direction: column; align-items: stretch; }
	.tpp-perf-header-controls { align-items: stretch; }
	.tpp-perf-metric { width: 100%; }
}

@media (max-width: 640px) {
	.tpp-topbar { padding: 12px 16px; }
	.tpp-main { padding: 16px; }
	.tpp-trial-banner { margin: 16px 16px 0; flex-direction: column; align-items: flex-start; gap: 6px; }
	.tpp-table th, .tpp-table td { padding: 10px 12px; }

	/* Dashboard: keep everything readable and full-width on phones ----- */
	.tpp-topbar-center { display: none; }
	.tpp-dash { gap: 14px; }
	.tpp-dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tpp-dash-stat-card { padding: 14px; }
	.tpp-dash-stat-value { font-size: 21px; }
	.tpp-dash-welcome { flex-direction: column; }
	.tpp-dash-mini-grid { grid-template-columns: repeat(2, 1fr); }
	.tpp-dash-quick-actions { grid-template-columns: 1fr; }
	.tpp-dash-calendar-daynet { display: none; }
	.tpp-dash-calendar-nav { width: 100%; justify-content: space-between; }
	.tpp-dash-analytics-row { grid-template-columns: 1fr; }
	.tpp-dash-calendar-stats-row { grid-template-columns: 1fr; }
	.tpp-dash-mini-grid-2col { grid-template-columns: repeat(2, 1fr); }

	.tpp-perf-card { padding: 14px; }
	.tpp-dash-period-custom-popover { left: 0; right: 0; min-width: 0; }

	/* Auth screens (Login/Register/Forgot/Reset) ---------------------- */
	.tpp-auth-app { padding: 28px 14px; align-items: flex-start; }
	.tpp-auth-wrap { max-width: 100%; }
	.tpp-auth-brand { margin-bottom: 14px; }
	.tpp-auth-brand h1 { font-size: 21px; }
	.tpp-logo-mark { width: 42px; height: 42px; }
	.tpp-auth-card { padding: 18px; border-radius: 12px; }
	.tpp-auth-tabs { margin-bottom: 18px; }
	.tpp-tab { padding: 10px 0; font-size: 12.5px; }
	.tpp-theme-toggle-auth { top: 12px; right: 12px; padding: 6px; }
	.tpp-theme-toggle-auth svg { width: 15px; height: 15px; }

	/* Comfortable touch targets everywhere ---------------------------- */
	.tpp-field input, .tpp-field select, .tpp-field textarea,
	.tpp-table-filters input, .tpp-table-filters select {
		min-height: 44px;
	}
	.tpp-btn, .tpp-icon-btn, .tpp-theme-toggle, .tpp-nav-item, .tpp-tab {
		min-height: 42px;
	}
	.tpp-nav-item { min-height: 46px; }

	/* Grids collapse to a single column so nothing overflows ---------- */
	.tpp-cards-grid, .tpp-panels-grid, .tpp-preview-grid {
		grid-template-columns: 1fr;
	}
	.tpp-field-row { grid-template-columns: 1fr; }

	/* Modals: reclaim width on narrow viewports ------------------------ */
	.tpp-modal-overlay { padding: 10px; }
	/* 100vh on a phone is the height once the browser's address bar has
	   collapsed away — while it's still on screen (the common case, and
	   what the screenshot in the bug report showed) the real visible area
	   is shorter, so a max-height in plain vh lets the modal size itself
	   taller than what's actually visible, cropping the wizard footer
	   buttons off the bottom edge with no way to scroll to them. 100dvh
	   tracks the real visible viewport instead; the vh line above stays
	   as a fallback for browsers that don't support dvh. */
	.tpp-modal { padding: 18px; border-radius: 12px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
	/* The header/footer (see the desktop rules above) pull negative
	   margins matching .tpp-modal's own padding/radius so they sit flush
	   against the box edge with no gap — those are sized for the desktop
	   24px/14px values, so this breakpoint's smaller 18px/12px need their
	   own matching override, or the header/footer would overshoot the
	   box's actual edge by 6px on narrow viewports. */
	.tpp-modal-header { margin: -18px -18px 18px; border-radius: 12px 12px 0 0; }
	.tpp-modal-footer { margin: 20px -18px -18px; border-radius: 0 0 12px 12px; }
	.tpp-wizard-step-indicator { font-size: 11.5px; padding: 8px 4px; }
	.tpp-modal-footer, .tpp-wizard-footer { justify-content: stretch; }
	.tpp-modal-footer .tpp-btn, .tpp-wizard-footer .tpp-btn { flex: 1; }

	/* Add/Edit Trade wizard footer (Save Draft, Save Trade, Next, Back,
	   Cancel): up to 4 buttons show at once depending on the wizard step,
	   plus an invisible flex spacer used on desktop to push Cancel/Next to
	   the right — on a phone that spacer plus 4-5 equal-flex buttons wrap
	   unpredictably (an odd button left stranded alone, uneven widths).
	   Hiding the spacer and laying buttons out two-per-row instead gives a
	   consistent, predictable grid at any step: full-width when there's
	   only one or two buttons, tidy equal-width pairs otherwise. */
	.tpp-wizard-footer { gap: 8px; }
	.tpp-wizard-footer > span { display: none; }
	.tpp-wizard-footer .tpp-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }

	/* Topbar: keep the profile trigger compact ------------------------- */
	.tpp-profile-trigger-info { display: none; }
	.tpp-profile-trigger { padding: 4px; gap: 0; }
	.tpp-page-title { font-size: 15px; }
	.tpp-profile-dropdown { min-width: 200px; max-width: calc(100vw - 32px); right: -8px; }
	/* The bell sits mid-topbar (theme toggle + avatar follow it), not at
	   the true right edge like the profile trigger, so anchoring the
	   dropdown to the bell's own position (like .tpp-profile-dropdown
	   above) pushes it off the left edge of narrow viewports. Pinning it
	   to the viewport instead keeps it fully on-screen at any bell
	   position. */
	.tpp-notif-dropdown { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; max-width: none; }

	/* Table toolbar: full-width stacked filters ------------------------ */
	.tpp-table-toolbar { flex-direction: column; align-items: stretch; }
	/* flex-wrap: wrap (inherited from the desktop rule) combined with
	   flex-direction: column lets a browser wrap overflowing items into a
	   second column instead of stacking everything in one — widening the
	   toolbar past the viewport and leaving blank space on the right when
	   scrolled (seen on Trading Setup > Strategies/Trading Rules, whose
	   toolbars mix a search input with two buttons). Forcing nowrap here
	   keeps every child on its own row, matching the stacked layout the
	   width:100% rules below already assume. */
	.tpp-table-filters { flex-direction: column; flex-wrap: nowrap; }
	.tpp-table-filters input, .tpp-table-filters select { width: 100%; }
	/* Scoped to the toolbar context only — .tpp-table-filters is reused
	   inside modals (Take Profit Presets, Win/Loss/Break-even pickers) as
	   a compact button-pill row that must stay auto-width there. */
	.tpp-table-toolbar .tpp-table-filters button { width: 100%; }
	#tj-add-btn { width: 100%; }

	/* Trade Journal filter panel collapses behind a "Filters" toggle so
	   it doesn't push the table below the fold on small screens — the
	   toggle itself only appears at this breakpoint (desktop keeps the
	   filters always visible, no toggle). Collapsed/expanded state is
	   remembered per-session by JS via a class on #tj-filter-panel. */
	.tpp-tj-filter-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
	#tj-filter-panel {
		flex-basis: 100%;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		margin-top: 0;
		transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
	}
	#tj-filter-panel.is-expanded {
		max-height: 640px;
		opacity: 1;
		margin-top: 10px;
	}
}

@media (max-width: 380px) {
	.tpp-auth-brand h1 { font-size: 19px; }
	.tpp-tagline { font-size: 12px; }
	.tpp-auth-card { padding: 14px; }
}

@media (max-width: 640px) {
	.tpp-gate-app { padding: 20px 16px; }
	.tpp-gate-card { padding: 28px 20px; }
}

/* -------------------- Compact Mode (Settings → Appearance) -------------------- */

.tpp-app[data-tpp-compact="1"] {
	--tpp-font-size: 12.5px;
}
.tpp-app[data-tpp-compact="1"] .tpp-main { padding: 16px; }
.tpp-app[data-tpp-compact="1"] .tpp-card,
.tpp-app[data-tpp-compact="1"] .tpp-dash-card,
.tpp-app[data-tpp-compact="1"] .tpp-dash-stat-card { padding: 12px; }
.tpp-app[data-tpp-compact="1"] .tpp-dash-stat-card { min-height: 128px; gap: 5px; }
.tpp-app[data-tpp-compact="1"] .tpp-dash-stat-value { font-size: 21px; }
.tpp-app[data-tpp-compact="1"] .tpp-table th,
.tpp-app[data-tpp-compact="1"] .tpp-table td { padding: 8px 10px; }
.tpp-app[data-tpp-compact="1"] .tpp-dash-grid,
.tpp-app[data-tpp-compact="1"] .tpp-dash-analytics-row { gap: 10px; }

/* -------------------- Risk Management: Account Balance ledger -------------------- */

.tpp-risk-lock-banner { margin-bottom: 18px; font-weight: 600; }

.tpp-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 4px; }

.tpp-balance-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
}
.tpp-balance-stat-primary { background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(29,78,216,0.08)); border-color: rgba(37,99,235,0.35); }
.tpp-balance-stat-label { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); }
.tpp-balance-stat-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--tpp-text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.tpp-balance-stat-edit svg { width: 12px; height: 12px; }
.tpp-balance-stat-edit:hover { background: var(--tpp-primary); color: #fff; }
.tpp-balance-stat-value { font-size: 19px; font-weight: 700; color: var(--tpp-text); }
/* !important: these need to win over the base typography rule
   (.tpp-app p { color: var(--tpp-text); }), which otherwise outranks a
   single-class selector like this one whenever the colored value happens
   to be a <p> — e.g. the Edit Trade wizard's live PNL % preview. */
.tpp-value-positive { color: var(--tpp-success-text) !important; }
.tpp-value-negative { color: var(--tpp-danger-text) !important; }
.tpp-value-neutral { color: var(--tpp-text-muted) !important; }

.tpp-inline-form { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--tpp-border); }

.tpp-history-filter { margin: 14px 0; }
.tpp-history-custom-range { margin-bottom: 14px; align-items: flex-end; }

.tpp-history-delete-btn { background: none; border: none; color: var(--tpp-danger-text); cursor: pointer; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.tpp-history-delete-btn:hover { text-decoration: underline; }

/* Account History (Trading Workspace): trimmed to the essentials in the
   table itself — Date & Time / Activity / Amount / Balance After / Status
   — everything else (pair, strategy, market, direction, investment,
   PNL%, duration) lives in the existing Trade Details popup, opened via
   the row's View button. */
.tpp-history-table td { white-space: normal; }
.tpp-history-activity { display: flex; flex-direction: column; gap: 2px; }
.tpp-history-activity strong { font-size: 13.5px; color: var(--tpp-text); }
.tpp-history-activity .tpp-form-note { margin: 0; }

@media (max-width: 640px) {
	.tpp-balance-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- Trading Workspace: Overview widgets -------------------- */

.tpp-workspace-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tpp-workspace-widget h3 { margin-bottom: 10px; }
.tpp-widget-rows { display: flex; flex-direction: column; gap: 9px; }
.tpp-widget-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.tpp-widget-row span { color: var(--tpp-text-muted); }
.tpp-widget-row strong { color: var(--tpp-text); font-weight: 700; text-align: right; }
.tpp-widget-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpp-widget-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(37,99,235,0.12);
	color: var(--tpp-primary);
	border: 1px solid rgba(37,99,235,0.3);
}

@media (max-width: 640px) {
	.tpp-workspace-overview-grid { grid-template-columns: 1fr; }
}

/* -------------------- Trading Workspace: Market Profile -------------------- */

.tpp-workspace-section-header { margin: 24px 0 14px; }
.tpp-workspace-section-header h3 { margin: 0 0 4px; }
.tpp-workspace-section-header p { margin: 0; }

.tpp-best-market-card {
	margin-bottom: 16px;
	background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(22,163,74,0.10));
	border: 1px solid rgba(37,99,235,0.35);
}
.tpp-best-market-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--tpp-primary);
	text-transform: uppercase;
	margin-bottom: 6px;
}
.tpp-best-market-card h4 { margin: 0 0 12px; font-size: 20px; }
.tpp-best-market-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.tpp-best-market-stats > div { display: flex; flex-direction: column; gap: 2px; }
.tpp-best-market-stats span { font-size: 11px; color: var(--tpp-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.tpp-best-market-stats strong { font-size: 17px; font-weight: 700; color: var(--tpp-text); }

.tpp-market-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tpp-market-profile-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tpp-market-profile-card-header h4 { margin: 0; font-size: 15px; }
.tpp-market-profile-trend { font-size: 12px; font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
	.tpp-market-profile-grid { grid-template-columns: 1fr; }
}

/* -------------------- Support Messages (User Messaging System) -------------------- */

.tpp-ticket-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	cursor: pointer;
	margin-bottom: 8px;
}
.tpp-ticket-list-item:hover { border-color: var(--tpp-primary); }
.tpp-ticket-list-item.is-unread { border-color: rgba(37,99,235,0.45); }
.tpp-ticket-list-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tpp-ticket-list-subject { font-weight: 600; color: var(--tpp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpp-ticket-list-meta { font-size: 12px; color: var(--tpp-text-muted); }
.tpp-ticket-list-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.tpp-ticket-thread { display: flex; flex-direction: column; gap: 12px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.tpp-ticket-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; background: var(--tpp-surface-2); border: 1px solid var(--tpp-border); }
.tpp-ticket-msg-user { align-self: flex-end; background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); }
.tpp-ticket-msg-admin { align-self: flex-start; }
.tpp-ticket-msg-meta { font-size: 11px; color: var(--tpp-text-muted); margin-bottom: 4px; }
.tpp-ticket-msg-body { font-size: 13.5px; color: var(--tpp-text); white-space: pre-line; }
.tpp-ticket-msg img.tpp-ticket-msg-attachment { max-width: 100%; max-height: 220px; border-radius: 8px; margin-top: 8px; display: block; }

.tpp-ticket-msg-file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	color: var(--tpp-primary);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	max-width: 100%;
	overflow: hidden;
}
.tpp-ticket-msg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpp-ticket-msg-file:hover { border-color: var(--tpp-primary); }
.tpp-ticket-msg-file svg { flex-shrink: 0; }

.tpp-ticket-attachment-chip {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	font-size: 12px;
	color: var(--tpp-text-muted);
}

@media (max-width: 640px) {
	.tpp-ticket-list-item { flex-direction: column; align-items: flex-start; }
	.tpp-ticket-msg { max-width: 100%; }
}

/* ==================================================================
   Trading Calculators hub (formerly the standalone Leverage
   Calculator view) — a card-grid dashboard linking to 8 focused
   calculators, each a self-contained panel with inputs, live results,
   and a "What does this calculator do?" help section.
   ================================================================== */

.tpp-calc-hub-header { margin-bottom: 22px; }
.tpp-calc-hub-header h2 { margin: 0 0 6px; font-size: 22px; color: var(--tpp-text); }
.tpp-calc-hub-header p { margin: 0; color: var(--tpp-text-muted); font-size: 14px; max-width: 640px; }

.tpp-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.tpp-calc-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 22px;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background-color 0.25s ease;
	animation: tpp-fade-up 0.4s ease;
}
.tpp-calc-card:hover,
.tpp-calc-card:focus-visible {
	transform: translateY(-3px);
	outline: none;
}

/* Light Mode: professional blue accent, soft background tint, deeper icon
   color and title contrast, smooth shadow — kept gentle since the card is
   already on a white surface. */
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:hover,
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:focus-visible {
	background: #f0f6ff;
	border-color: var(--tpp-primary);
	box-shadow: 0 10px 24px rgba(37,99,235,0.14);
}
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:hover .tpp-calc-card-icon,
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:focus-visible .tpp-calc-card-icon {
	background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(29,78,216,0.18));
	color: #1d4ed8;
}
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:hover .tpp-calc-card-name,
.tpp-app[data-tpp-theme="light"] .tpp-calc-card:focus-visible .tpp-calc-card-name {
	color: #0f172a;
}

/* Dark Mode: lift onto a distinct dark surface, blue accent border, bright
   readable text, brighter icon glow, and a premium blue hover glow rather
   than the light mode's soft shadow. */
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:hover,
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:focus-visible {
	background: var(--tpp-surface-2);
	border-color: var(--tpp-primary);
	box-shadow: 0 14px 32px rgba(37,99,235,0.3), 0 0 0 1px rgba(37,99,235,0.18);
}
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:hover .tpp-calc-card-icon,
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:focus-visible .tpp-calc-card-icon {
	background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(29,78,216,0.35));
	color: #60a5fa;
}
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:hover .tpp-calc-card-name,
.tpp-app:not([data-tpp-theme="light"]) .tpp-calc-card:focus-visible .tpp-calc-card-name {
	color: #ffffff;
}

.tpp-calc-card-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(29,78,216,0.18));
	color: var(--tpp-primary);
	flex-shrink: 0;
	transition: background 0.25s ease, color 0.25s ease;
}
.tpp-calc-card-icon svg { width: 24px; height: 24px; }

.tpp-calc-card-name { font-size: 15.5px; font-weight: 700; color: var(--tpp-text); transition: color 0.25s ease; }
.tpp-calc-card-desc { font-size: 13px; color: var(--tpp-text-muted); line-height: 1.5; flex-grow: 1; }

.tpp-calc-card-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tpp-primary);
	margin-top: 4px;
}
.tpp-calc-card-open svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.tpp-calc-card:hover .tpp-calc-card-open svg { transform: translateX(3px); }

/* ---- Calculator modal (opened from a hub card) ---- */

.tpp-calc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5,8,15,0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 16px;
	overflow-y: auto;
	z-index: 200;
	animation: tpp-calc-overlay-in 0.2s ease both;
}
.tpp-calc-modal-overlay[hidden] { display: none; }

.tpp-calc-modal {
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 60px);
	overflow-y: auto;
	padding: 24px;
	box-shadow: var(--tpp-shadow);
	animation: tpp-calc-modal-in 0.25s ease both;
}

.tpp-calc-modal-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.tpp-calc-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--tpp-text-muted);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 0;
}
.tpp-calc-back:hover { color: var(--tpp-primary); }
.tpp-calc-back svg { width: 16px; height: 16px; }

.tpp-calc-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid var(--tpp-border);
	background: var(--tpp-surface-2);
	color: var(--tpp-text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tpp-calc-modal-close:hover {
	background: var(--tpp-danger);
	border-color: var(--tpp-danger);
	color: #fff;
}
.tpp-calc-modal-close svg { width: 16px; height: 16px; }

@keyframes tpp-calc-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes tpp-calc-modal-in {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.tpp-calc-card-detail { animation: none; }

.tpp-calc-panel-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--tpp-border);
}
.tpp-calc-panel-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(29,78,216,0.18));
	color: var(--tpp-primary);
	flex-shrink: 0;
}
.tpp-calc-panel-icon svg { width: 22px; height: 22px; }
.tpp-calc-panel-title { margin: 0 0 3px; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--tpp-text); }
.tpp-calc-panel-sub { margin: 0; font-size: 13px; color: var(--tpp-text-muted); }

.tpp-calc-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.tpp-calc-body-single { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

.tpp-calc-inputs { display: flex; flex-direction: column; gap: 14px; }

.tpp-calc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.tpp-btn-secondary {
	background: rgba(37,99,235,0.1);
	color: var(--tpp-primary);
	border: 1px solid rgba(37,99,235,0.25);
}
.tpp-btn-secondary:hover { background: rgba(37,99,235,0.18); }
.tpp-btn-secondary svg { width: 15px; height: 15px; }

.tpp-calc-results {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 20px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tpp-calc-results-centered { text-align: center; align-items: center; }

.tpp-calc-empty { color: var(--tpp-text-muted); font-size: 13.5px; text-align: center; line-height: 1.6; }

.tpp-calc-result-main { display: flex; flex-direction: column; gap: 6px; }
.tpp-calc-result-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted); }
.tpp-calc-result-value { font-size: 30px; font-weight: 700; color: var(--tpp-text); }

.tpp-calc-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 16px;
}
.tpp-calc-result-tile { display: flex; flex-direction: column; gap: 6px; }
.tpp-calc-result-tile .tpp-calc-result-label { font-size: 11.5px; }
.tpp-calc-result-tile .tpp-calc-result-value { font-size: 21px; }

/* Risk:Reward visual bar */
.tpp-calc-rr-bar {
	display: flex;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 18px;
	background: var(--tpp-border);
}
.tpp-calc-rr-bar-risk { background: var(--tpp-danger-text); transition: width 0.25s ease; }
.tpp-calc-rr-bar-reward { background: var(--tpp-success-text); transition: width 0.25s ease; }
.tpp-calc-rr-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--tpp-text-muted); }
.tpp-calc-rr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.tpp-calc-rr-dot-risk { background: var(--tpp-danger-text); }
.tpp-calc-rr-dot-reward { background: var(--tpp-success-text); }

/* Drawdown progress bar */
.tpp-calc-dd-bar-wrap { margin-top: 18px; }
.tpp-calc-dd-bar { height: 12px; border-radius: 999px; background: var(--tpp-border); overflow: hidden; }
.tpp-calc-dd-bar-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tpp-warning-text), var(--tpp-danger-text));
	transition: width 0.3s ease;
}

/* Help / "What does this calculator do?" accordion */
.tpp-calc-help {
	margin-top: 20px;
	border-top: 1px solid var(--tpp-border);
	padding-top: 16px;
}
.tpp-calc-help summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tpp-primary);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.tpp-calc-help summary::-webkit-details-marker { display: none; }
.tpp-calc-help summary::before {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.tpp-calc-help[open] summary::before { transform: rotate(45deg); }
.tpp-calc-help-body { margin-top: 12px; font-size: 13.5px; color: var(--tpp-text-muted); line-height: 1.7; }
.tpp-calc-help-body p { margin: 0 0 10px; }
.tpp-calc-help-body p:last-child { margin-bottom: 0; }
.tpp-calc-help-body strong { color: var(--tpp-text); }

@media (max-width: 900px) {
	.tpp-calc-body,
	.tpp-calc-body-single { grid-template-columns: 1fr; }
	.tpp-calc-results { min-height: auto; }
	.tpp-calc-modal { max-width: 100%; }
}

@media (max-width: 560px) {
	.tpp-calc-grid { grid-template-columns: 1fr; }
	.tpp-calc-panel-header { flex-wrap: wrap; }
	.tpp-calc-result-value { font-size: 24px; }
	.tpp-calc-modal-overlay { padding: 0; }
	.tpp-calc-modal {
		max-width: 100%;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
		padding: 18px 16px;
	}
}

/* -------------------- Trading Plans -------------------- */

.tpp-pill-completed { background: rgba(2,132,199,0.14); color: var(--tpp-info-text); }

/* Cards: .tpp-plan-cards-grid reuses the existing .tpp-cards-grid
   auto-fill grid (220px min column) as-is, so 3/2/1 columns across
   desktop/tablet/mobile happen automatically without extra breakpoints,
   and a card never stretches to fill the row just because there aren't
   enough plans yet to fill it (see .tpp-cards-grid's own comment). */
.tpp-plan-card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tpp-plan-card:hover {
	transform: translateY(-3px);
	border-color: var(--tpp-primary);
	box-shadow: 0 14px 34px rgba(37,99,235,0.14);
}
.tpp-plan-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tpp-surface-2); }
.tpp-plan-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpp-plan-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tpp-plan-card-preview {
	margin: -4px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tpp-plan-card-preview-empty { font-style: italic; opacity: 0.75; }
.tpp-plan-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--tpp-text-muted); }

/* Empty state: bigger heading/paragraph + CTA, distinct from the plain
   one-line "No strategies yet." empty states elsewhere. */
.tpp-plan-empty-state { grid-column: 1 / -1; padding: 60px 20px; }
.tpp-plan-empty-state h3 { margin: 0 0 8px; font-size: 17px; color: var(--tpp-text); }
.tpp-plan-empty-state p { max-width: 440px; margin: 0 auto 18px; }

/* Add/Edit modal */
.tpp-plan-modal { max-width: 640px; }

/* Plan Images: dropzone thumbnail grid inside the Add/Edit form */
.tpp-plan-image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.tpp-plan-image-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
}
.tpp-plan-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpp-plan-image-thumb.is-uploading { display: flex; align-items: center; justify-content: center; }
.tpp-plan-image-uploading { font-size: 11px; color: var(--tpp-text-muted); text-align: center; padding: 0 6px; }
.tpp-plan-image-thumb-actions {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	padding: 5px;
	background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 60%);
	opacity: 0;
	transition: opacity 0.15s ease;
}
.tpp-plan-image-thumb:hover .tpp-plan-image-thumb-actions,
.tpp-plan-image-thumb:focus-within .tpp-plan-image-thumb-actions { opacity: 1; }
.tpp-plan-image-thumb-actions .tpp-icon-btn {
	background: rgba(15,23,42,0.7);
	border-color: rgba(255,255,255,0.25);
	color: #fff;
	padding: 4px 6px;
	font-size: 11px;
}
.tpp-plan-image-thumb-actions .tpp-icon-btn:hover { background: rgba(15,23,42,0.9); }
.tpp-dropzone.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* View popup */
.tpp-plan-view-modal { max-width: 720px; }
.tpp-plan-view-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tpp-plan-view-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px 20px;
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
}
.tpp-plan-view-info-item { display: flex; flex-direction: column; gap: 2px; }
.tpp-plan-view-info-item dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tpp-text-muted); }
.tpp-plan-view-info-item dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tpp-text); }
.tpp-plan-view-notes { max-height: none; margin-bottom: 20px; }
.tpp-plan-view-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}
.tpp-plan-view-gallery-thumb {
	all: unset;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
}
.tpp-plan-view-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpp-plan-view-gallery-thumb:hover { border-color: var(--tpp-primary); }

@media (max-width: 640px) {
	.tpp-plan-modal, .tpp-plan-view-modal { max-width: 100%; }
	.tpp-plan-card-thumb { aspect-ratio: 16 / 10; }
	.tpp-plan-image-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
	.tpp-plan-view-gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* -------------------- Learning: Trading A-Z / Strategy Videos / Progress -------------------- */

.tpp-learning-az {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.tpp-learning-nav {
	min-width: 0;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 10px;
	max-height: 70vh;
	overflow-y: auto;
	position: sticky;
	top: 84px;
	box-shadow: var(--tpp-shadow);
}
.tpp-learning-module-group { position: relative; border-radius: 10px; transition: background 0.15s ease; }
.tpp-learning-module-group.is-open { background: var(--tpp-surface-2); }
.tpp-learning-module-group + .tpp-learning-module-group { margin-top: 4px; }
/* Left accent bar marks the open module — a background tint alone reads
   very faintly on the dark surface, and using the primary blue as the
   module *name*'s text color (the previous approach) put a mid-brightness
   blue on a near-black card, which is exactly the low-contrast combo that
   made the name hard to read in Dark Mode. The name stays --tpp-text
   (always high-contrast) in every state; only this accent bar + the
   chevron + the number badge below carry the "open" color. */
.tpp-learning-module-group.is-open::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 3px;
	background: var(--tpp-primary);
}

/* Module header doubles as the collapse/expand toggle — a plain-text
   label until now, which meant every one of the 20 modules rendered its
   lesson list (or a "No lessons yet." line) open at all times, making
   the nav column very tall well before most modules have real content. */
.tpp-learning-module-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 8px;
	padding: 9px 10px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.tpp-learning-module-title:hover { background: var(--tpp-surface-2); }
.tpp-learning-module-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tpp-learning-module-num {
	flex-shrink: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--tpp-surface-2);
	color: var(--tpp-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}
.tpp-learning-module-group.is-open .tpp-learning-module-num { background: var(--tpp-primary); color: #fff; }
.tpp-learning-module-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--tpp-text);
}
.tpp-learning-module-chevron { flex-shrink: 0; width: 14px; height: 14px; color: var(--tpp-text-muted); transition: transform 0.2s ease, color 0.15s ease; }
.tpp-learning-module-chevron svg { width: 100%; height: 100%; }
.tpp-learning-module-group.is-open .tpp-learning-module-chevron { transform: rotate(180deg); color: var(--tpp-primary); }
.tpp-learning-lesson-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 8px; }
.tpp-learning-lesson-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--tpp-text);
	font-size: 13px;
	line-height: 1.35;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tpp-learning-lesson-title { min-width: 0; }
/* color is repeated here (not just inherited from the base rule above)
   so the lesson title is guaranteed readable against the hover
   background in every theme, rather than relying on it never being
   overridden by anything else that might target :hover more
   specifically. */
.tpp-learning-lesson-item:hover { background: var(--tpp-surface); color: var(--tpp-text); transform: translateX(2px); box-shadow: var(--tpp-shadow); }
.tpp-learning-lesson-item.is-active { background: var(--tpp-primary); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.35); }
.tpp-learning-lesson-item.is-active:hover { transform: none; }
.tpp-learning-lesson-item.is-locked { color: var(--tpp-text-muted); opacity: 0.75; }
.tpp-learning-lesson-item.is-locked:hover { color: var(--tpp-text-muted); }

/* Status icon: a small filled/outlined circle instead of a bare emoji —
   completed = solid green, locked = muted outline, open/available = a
   primary-colored outline that reads as "ready to start". */
.tpp-learning-lesson-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 10px;
	line-height: 1;
	border: 1.5px solid var(--tpp-border);
	color: var(--tpp-text-muted);
	background: var(--tpp-surface-2);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tpp-learning-lesson-icon.is-completed { background: var(--tpp-success); border-color: var(--tpp-success); color: #fff; }
.tpp-learning-lesson-icon.is-open { border-color: var(--tpp-primary); color: var(--tpp-primary); background: transparent; }
.tpp-learning-lesson-item.is-active .tpp-learning-lesson-icon { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(255,255,255,0.15); }
.tpp-learning-lesson-item.is-active .tpp-learning-lesson-icon.is-completed { border-color: #fff; background: #fff; color: var(--tpp-success); }

.tpp-learning-content {
	/* Grid items default to min-width: auto, i.e. never smaller than
	   their content's min-content size — a nowrap pager button (or any
	   other unbreakable content) can then force this whole column wider
	   than its 1fr track instead of being constrained by it, pushing the
	   nav column and the page itself into horizontal scroll. min-width: 0
	   is the standard override so the grid's own sizing wins instead. */
	min-width: 0;
	position: relative;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius);
	padding: 22px;
	min-height: 320px;
}

.tpp-learning-module-badge {
	position: absolute;
	top: 14px;
	right: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--tpp-success);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	white-space: nowrap;
	max-width: calc(100% - 32px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpp-learning-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--tpp-radius-sm);
	overflow: hidden;
	background: #000;
	margin-bottom: 16px;
}
.tpp-learning-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Strategy Video popup: at 16:9 and 100% of the modal's ~572px content
   width the video renders ~322px tall, which on a short browser window
   (laptop-height viewports especially) can exceed the modal's own
   max-height: calc(100vh - 40px) budget before the header/footer/padding
   chrome around it is even counted — the video then gets clipped by the
   modal's overflow-y: auto right in the middle of the frame instead of
   fully fitting, reading as "cropped" rather than "scroll for more".
   Deriving the width from the viewport height instead (backing out the
   modal's chrome) keeps the video's full 16:9 frame inside the visible
   area on any window size — it only shrinks the video, never crops it. */
.tpp-modal .tpp-learning-video {
	width: min(100%, calc((100vh - 260px) * 16 / 9));
	margin-left: auto;
	margin-right: auto;
}

/* Rendered lesson/video HTML content (from the wp-admin rich text editor). */
.tpp-learning-body { color: var(--tpp-text); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.tpp-learning-body h1, .tpp-learning-body h2, .tpp-learning-body h3, .tpp-learning-body h4 { color: var(--tpp-text); margin: 18px 0 8px; }
.tpp-learning-body p { margin: 0 0 12px; }
.tpp-learning-body ul, .tpp-learning-body ol { margin: 0 0 12px; padding-left: 22px; }
.tpp-learning-body li { margin-bottom: 4px; }
.tpp-learning-body a { color: var(--tpp-primary); text-decoration: underline; }
.tpp-learning-body img { max-width: 100%; margin: 14px 0; border-radius: var(--tpp-radius-sm); display: block; cursor: zoom-in; }
.tpp-learning-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.tpp-learning-body th, .tpp-learning-body td { border: 1px solid var(--tpp-border); padding: 8px 10px; text-align: left; }
.tpp-learning-body th { background: var(--tpp-surface-2); }
.tpp-learning-body blockquote { margin: 0 0 12px; padding: 4px 14px; border-left: 3px solid var(--tpp-primary); color: var(--tpp-text-muted); font-style: italic; }

.tpp-learning-feature-card {
	background: var(--tpp-surface-2);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.tpp-learning-feature-label { margin: 0 0 10px; font-weight: 600; font-size: 13.5px; color: var(--tpp-text); }

.tpp-learning-actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--tpp-border); }

/* Previous/Next lesson pager — lets mobile users move through the course
   from inside the content panel without scrolling back up to the nav
   column for every lesson (see learning.js openLesson()/adjacentLesson()). */
.tpp-learning-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tpp-learning-pager-prev, .tpp-learning-pager-next {
	/* min-width: 0 overrides the flex-item default (min-width: auto,
	   sized to its unwrapped text) — without it, max-width/ellipsis are
	   silently ignored and a long lesson title pushes the button (and the
	   whole panel) past the viewport instead of truncating in place. */
	flex: 0 1 48%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tpp-learning-pager-next { margin-left: auto; }

.tpp-quiz-question { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--tpp-border); }
.tpp-quiz-question:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tpp-quiz-question-text { font-weight: 600; color: var(--tpp-text); margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.tpp-quiz-options { display: flex; flex-direction: column; gap: 8px; }
.tpp-quiz-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	cursor: pointer;
	font-size: 13.5px;
	color: var(--tpp-text);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.tpp-quiz-option:hover { border-color: var(--tpp-primary); }
.tpp-quiz-option input[type="radio"] { flex-shrink: 0; }
.tpp-quiz-option:has(input:checked) { border-color: var(--tpp-primary); background: rgba(37,99,235,0.08); }

/* A question already answered correctly on a previous attempt: locked,
   green, no longer clickable — a failed retry only needs to fix the rest. */
.tpp-quiz-question-locked { opacity: 0.9; }
.tpp-quiz-option-correct { border-color: var(--tpp-success) !important; background: rgba(22,163,74,0.1) !important; }
.tpp-quiz-option-incorrect { border-color: var(--tpp-danger) !important; background: rgba(220,38,38,0.08) !important; }
.tpp-quiz-option input[type="radio"]:disabled { cursor: not-allowed; }
.tpp-quiz-option:has(input:disabled) { cursor: not-allowed; }
.tpp-quiz-correct-tag { color: var(--tpp-success); font-weight: 600; font-size: 12px; }
.tpp-quiz-incorrect-tag { color: var(--tpp-danger); font-weight: 600; font-size: 12px; }

/* Read-only review (My Quiz Answers): options rendered as plain divs, not
   inputs — nothing to click, just the reader's own past answer vs. the
   correct one. */
.tpp-quiz-option-static { justify-content: space-between; cursor: default; }
.tpp-quiz-option-static:hover { border-color: var(--tpp-border); }
.tpp-quiz-your-answer { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tpp-text-muted, var(--tpp-primary)); }

.tpp-learning-video-card { cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.tpp-learning-video-card:hover { transform: translateY(-3px); border-color: var(--tpp-primary); box-shadow: 0 14px 34px rgba(37,99,235,0.16); }
.tpp-learning-video-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--tpp-radius-sm); margin-bottom: 10px; display: block; }
.tpp-learning-video-card h3 { margin: 0 0 8px; }
.tpp-learning-video-desc {
	margin: -4px 0 10px;
	color: var(--tpp-text-muted);
	font-size: 12.5px;
	line-height: 1.5;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.tpp-learning-video-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.tpp-learning-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--tpp-surface);
	border: 1px solid var(--tpp-border);
	border-radius: var(--tpp-radius-sm);
	font-size: 13.5px;
}
.tpp-learning-progress-row + .tpp-learning-progress-row { margin-top: 8px; }

@media (max-width: 900px) {
	.tpp-learning-az { grid-template-columns: 1fr; }
	.tpp-learning-nav { position: static; max-height: none; }
}

/* Phone widths: Mark as Complete and the Previous/Next pager go full
   width and stack instead of squeezing side by side — at this size two
   half-width buttons either truncated their lesson-title labels down to
   a few unreadable characters or, for the single Mark as Complete
   button (right-aligned by default), left a large dead patch of empty
   space to its left with nothing else on the row. */
@media (max-width: 640px) {
	.tpp-learning-actions { justify-content: stretch; }
	.tpp-learning-actions .tpp-btn { width: 100%; }
	.tpp-learning-pager { flex-direction: column; align-items: stretch; }
	.tpp-learning-pager-prev, .tpp-learning-pager-next {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
		margin-left: 0;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		text-align: center;
	}
}