/* Ultra-violet trading UI — electric purple vibe */

/* Hide translatable text until i18n translations are applied to prevent flash of English */
[data-i18n]:not(.i18n-ready [data-i18n]) {
	visibility: hidden;
}
.i18n-ready [data-i18n] {
	visibility: visible;
}

/* Accent palette (Gen‑Z ultraviolet) */
:root {
	--accent: #8b5cf6; /* violet-500 */
	--accent-2: #a78bfa; /* violet-400 */
	--accent-3: #c084fc; /* fuchsia/violet blend */
	--accent-rgb: 139, 92, 246;
	--glow: 0 0 24px rgba(var(--accent-rgb), .35), 0 0 48px rgba(var(--accent-rgb), .15);
	/* Brand icon filter to shift green bull.png to violet */
	--brand-filter: hue-rotate(120deg) saturate(175%) brightness(1.08);
}

[data-bs-theme="light"] {
	--bs-body-bg: #ffffff; /* crisp white */
	--bs-body-color: #0b0b0d; /* near-black */
	--bs-secondary-color: #3f3f46; /* zinc-600 */
	--bs-card-bg: #ffffff;
	--bs-border-color: #e5e7eb; /* gray-200 */
	--bs-primary: var(--accent);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #6d28d9; /* deeper violet */
}

[data-bs-theme="dark"] {
	--bs-body-bg: #0a0a0b; /* charcoal / near-black */
	--bs-body-color: #f5f5ff; /* cool white */
	--bs-secondary-color: #a1a1aa; /* zinc-400 */
	--bs-card-bg: #0f0f12; /* deep charcoal */
	--bs-border-color: #1f1f26; /* subtle border */
	--bs-primary: var(--accent);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #c084fc;
	--brand-filter: hue-rotate(120deg) saturate(190%) brightness(1.25) contrast(1.05);
}

body {
		background:
			radial-gradient(1200px 600px at 85% 65%, rgba(var(--accent-rgb), .10), transparent 60%),
			radial-gradient(900px 500px at 10% 10%, rgba(199, 120, 255, .10), transparent 55%),
			var(--bs-body-bg);
}

/* === NAVBAR THEMING === */
[data-bs-theme="dark"] .navbar,
.navbar[data-bs-theme="dark"] {
	background: linear-gradient(180deg, rgba(10,10,11,.98), rgba(10,10,11,.92)) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	box-shadow: var(--glow);
}
[data-bs-theme="dark"] .navbar .nav-link,
.navbar[data-bs-theme="dark"] .nav-link {
	color: rgba(255,255,255,0.85) !important;
}
[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link.active,
.navbar[data-bs-theme="dark"] .nav-link:hover,
.navbar[data-bs-theme="dark"] .nav-link.active {
	color: #fff !important;
}
[data-bs-theme="dark"] .navbar .navbar-brand,
.navbar[data-bs-theme="dark"] .navbar-brand {
	color: #fff !important;
}
[data-bs-theme="dark"] .navbar .text-secondary,
.navbar[data-bs-theme="dark"] .text-secondary {
	color: rgba(255,255,255,0.5) !important;
}
[data-bs-theme="light"] .navbar,
.navbar[data-bs-theme="light"] {
	background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94)) !important;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-bs-theme="light"] .navbar .nav-link,
.navbar[data-bs-theme="light"] .nav-link {
	color: rgba(0,0,0,0.75) !important;
}
[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link.active,
.navbar[data-bs-theme="light"] .nav-link:hover,
.navbar[data-bs-theme="light"] .nav-link.active {
	color: var(--accent) !important;
}
[data-bs-theme="light"] .navbar .navbar-brand,
.navbar[data-bs-theme="light"] .navbar-brand {
	color: #0b0b0d !important;
}
[data-bs-theme="light"] .navbar .text-secondary,
.navbar[data-bs-theme="light"] .text-secondary {
	color: rgba(0,0,0,0.45) !important;
}
/* Navbar toggler icon adapts to theme */
[data-bs-theme="dark"] .navbar .navbar-toggler-icon,
.navbar[data-bs-theme="dark"] .navbar-toggler-icon {
	filter: invert(1);
}
.navbar .navbar-brand { letter-spacing: .3px; display: inline-flex; align-items: center; gap: .5rem; }
.navbar .navbar-brand .brand-logo { width: 24px; height: 24px; filter: var(--brand-filter); image-rendering: -webkit-optimize-contrast; }
.brand-mark { width: 28px; height: 28px; border-radius: 50%; background:
	radial-gradient(circle at 50% 50%, rgba(192,132,252, 0.95) 0 6px, transparent 6px),
	radial-gradient(circle at 50% 50%, rgba(167,139,250, 0.85) 0 12px, transparent 12px),
	radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.75) 0 50%, transparent 50%);
	box-shadow: var(--glow);
}

.card { background-color: var(--bs-card-bg); border-color: var(--bs-border-color); }
.card .card-title { color: inherit; }

.btn-primary { background-color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-outline-primary { color: var(--accent); border-color: rgba(var(--accent-rgb), .55); }
.btn-outline-primary:hover { background-color: rgba(var(--accent-rgb), .12); border-color: var(--accent); }

/* Make buttons accessible and consistent across themes */
.btn:focus, .btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .28);
}

/* Solid danger for Stop button to keep consistent contrast */
.btn-danger { background-color: #ef4444; border-color: #ef4444; }
.btn-danger:hover { filter: brightness(1.07); }
.btn-danger:focus, .btn-danger:focus-visible {
	box-shadow: 0 0 0 .2rem rgba(239, 68, 68, .35);
}

/* Keep outline-danger subtle; avoid heavy fill on hover in toolbar context */
.btn-outline-danger { color: #ef4444; border-color: rgba(239, 68, 68, .55); }
.btn-outline-danger:hover, .btn-outline-danger.active { background-color: rgba(239, 68, 68, .12); border-color: #ef4444; }

/* Links */
a, .nav-link { color: var(--bs-link-color); }
.nav-link.active, .nav-link:hover { color: var(--bs-link-hover-color); }

.hero {
		background:
				radial-gradient(900px 400px at 70% 80%, rgba(var(--accent-rgb), .22), transparent 60%),
				radial-gradient(700px 300px at 0% 20%, rgba(167,139,250,.22), transparent 60%),
				linear-gradient(180deg, #0a0a0b, #111114 40%, #0a0a0b);
		color: #ececff;
		border-radius: .75rem;
		box-shadow: var(--glow);
}
.hero .display-5 { letter-spacing: .3px; }
[data-bs-theme="dark"] .hero .lead { color: #bdbde6; }
[data-bs-theme="light"] .hero {
		background:
			linear-gradient(180deg, #ffffff, #f7f7fb);
		color: #0b0b0d;
}
.hero .lead { color: #5b5b66; }
.hero .display-5 { letter-spacing: .3px; }

.instrument-card [data-field="change"].pos { color: #22c55e; }
.instrument-card [data-field="change"].neg { color: #ef4444; }

/* Watchlist card close (unwatch) */
.instrument-card {
	position: relative;
}
.instrument-card .card-close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	padding: .15rem .45rem; /* compact like other btn-sm */
	line-height: 1;
	z-index: 2;
}

/* Avoid cross overlapping the price area */
.instrument-card .card-body {
	padding-right: 3rem; /* extra space for the close button */
}

/* Add a little vertical breathing room for the price block */
.instrument-card [data-field="price"] {
	margin-top: .15rem;
}

.order-form .btn-outline-success.active,
.order-form .btn-outline-danger.active { color: #fff; }

/* Buy/Sell buttons contrast */
.btn-outline-success { color: #22c55e; border-color: rgba(34, 197, 94, .55); }
.btn-outline-success:hover, .btn-outline-success.active { background-color: rgba(34, 197, 94, .15); border-color: #22c55e; }
.btn-outline-danger { color: #ef4444; border-color: rgba(239, 68, 68, .55); }
.btn-outline-danger:hover, .btn-outline-danger.active { background-color: rgba(239, 68, 68, .15); border-color: #ef4444; }

.toast-container { z-index: 1080; }

/* Inputs, tables, focus rings */
.form-control, .form-select {
	background-color: var(--bs-card-bg);
	border-color: var(--bs-border-color);
	color: inherit;
}
.form-control:focus, .form-select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25);
}

/* ========== SIMULATION MODE BANNER ========== */
/* Sticky container for simulation UI (banner + controls + chart) */
#simStickyContainer {
	background: var(--bs-body-bg);
	/* Solid background to prevent content showing through when scrolling */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding-bottom: 0.5rem;
}

/* Light theme sticky container */
[data-bs-theme="light"] #simStickyContainer {
	background: rgba(255,255,255,0.95) !important;
}

/* Dark theme sticky container */
[data-bs-theme="dark"] #simStickyContainer {
	background: rgba(10,10,11,0.95) !important;
}

/* Subtle shadow at bottom of sticky container when scrolled */
#simStickyContainer::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);
	pointer-events: none;
}

[data-bs-theme="dark"] #simStickyContainer::after {
	background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
}

#simModeBanner .sim-banner-content {
	/* WCAG AA compliant: #c2410c has 4.87:1 contrast with white, #9a3412 has 6.23:1 */
	background: linear-gradient(90deg, #c2410c, #9a3412);
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 8px rgba(194, 65, 12, 0.35);
}
#simModeBanner .sim-icon {
	animation: pulse-flask 2s ease-in-out infinite;
}
@keyframes pulse-flask {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.85; }
}
[data-bs-theme="dark"] #simModeBanner .sim-banner-content {
	/* Darker theme maintains same WCAG AA compliance */
	background: linear-gradient(90deg, #9a3412, #7c2d12);
}
/* Simulation mode indicator in cards */
.sim-mode-indicator {
	border-left: 4px solid #f59e0b !important;
	background: rgba(245, 158, 11, 0.05) !important;
}
.sim-mode-badge {
	background-color: #f59e0b !important;
	color: #1a1a1a !important;
	font-weight: 600;
}
/* ========== END SIMULATION MODE BANNER ========== */

.form-check-input:checked {
	background-color: var(--accent);
	border-color: var(--accent);
}

.table { --bs-table-color: inherit; }
.table thead th { border-color: var(--bs-border-color); }
.table tbody td { border-color: var(--bs-border-color); }

/* Toast variants tune-up */
.text-bg-primary { background-color: var(--accent) !important; }

/* Button group tweaks so adjacent outline buttons don't show double heavy borders */
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn-outline-primary { border-color: rgba(var(--accent-rgb), .45); }
.btn-group .btn-outline-primary:hover { border-color: var(--accent); }

/* Toolbar background adapts subtly to theme */
[data-bs-theme="dark"] .bg-body-tertiary { background-color: #121218 !important; border: 1px solid #1f1f26; }
[data-bs-theme="light"] .bg-body-tertiary { background-color: #f7f7fb !important; border: 1px solid #e5e7eb; }

/* --- Realtime price change animations --- */
@keyframes flash-up {
	0% { background-color: rgba(34, 197, 94, 0.20); }
	100% { background-color: transparent; }
}
@keyframes flash-down {
	0% { background-color: rgba(239, 68, 68, 0.20); }
	100% { background-color: transparent; }
}
/* Apply on the numeric fields when a change occurs */
.price-flash-up, .price-flash-down {
	animation-duration: 600ms;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
	border-radius: .25rem;
}
.price-flash-up { animation-name: flash-up; }
.price-flash-down { animation-name: flash-down; }

/* Slight transition on color changes for the change% label */
.instrument-card [data-field="change"] {
	transition: color 200ms ease-out;
}

/* Trade ticket */
.trade-ticket .modal-content { background-color: var(--bs-card-bg); border: 1px solid var(--bs-border-color); box-shadow: var(--glow); }
.trade-ticket .nav-pills .nav-link.active { background-color: var(--accent); }
.trade-ticket .modal-header .brand-mark { width: 18px; height: 18px; }
.trade-ticket .modal-footer { justify-content: space-between; }

/* Compact inputs for ticket fields */
.trade-ticket .narrow-input {
	max-width: 100%;
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Make the ticket dialog narrower to avoid empty right space */
.trade-ticket .modal-dialog {
	/* Compact width to remove empty right space */
	--bs-modal-width: 440px;
}

/* No additional alignment rules needed for top-right action */

.trade-ticket .modal-footer {
	justify-content: center;
}

.trade-ticket .ticket-btn-wide { display: block; width: 100%; }

/* Center all content within the ticket body */
.trade-ticket .modal-body {
	display: flex;
	flex-direction: column;
}
.trade-ticket .tt-align { width: auto; text-align: center; }
.trade-ticket .tt-align-inner { display: inline-block; text-align: left; }
.trade-ticket #ttTypeTabs { display: inline-flex; }
.trade-ticket .tt-align .order-form, .trade-ticket .tt-align .ticket-btn-wide { width: 100%; }
.trade-ticket .order-form .vstack.align-items-center > * { width: 100%; }

/* Center the Side button group within its block */
.trade-ticket .order-form .btn-group {
	width: 100%;
	justify-content: center;
}

/* Left-align field labels while the column is centered */
.trade-ticket .order-form .form-label { text-align: left; width: 100%; display: block; }
.trade-ticket .nav.nav-pills.justify-content-center {
	margin-left: auto;
	margin-right: auto;
}

/* --- Blockly (Blocks editor) --- */
/* Keep Blockly readable in light/dark mode using Bootstrap theme variables. */

/* === BLOCKLY AREA THEMING === */
/* Workspace container frames (Strategies page uses #blocklyArea/#blocklyDiv) */
#blocklyArea {
	border: 1px solid var(--bs-border-color);
	border-radius: .375rem;
	background: var(--bs-body-bg);
	overflow: hidden;
}

/* Light theme blockly area */
[data-bs-theme="light"] #blocklyArea,
#blocklyArea[data-bs-theme="light"] {
	background: #ffffff !important;
	border-color: #e5e7eb !important;
}

/* Dark theme blockly area */
[data-bs-theme="dark"] #blocklyArea,
#blocklyArea[data-bs-theme="dark"] {
	background: #0f0f12 !important;
	border-color: #1f1f26 !important;
}

#blocklyDiv {
	border-radius: 0 0 .375rem .375rem;
}

/* Tutorial page hosts Blockly inside #tutorialBlocklyDiv */
#tutorialBlocklyDiv {
	overflow: hidden;
}

/* Ensure toolbox/flyout layering (some Blockly builds rely on this) */
#tutorialBlocklyDiv .blocklyFlyout {
	z-index: 20;
}

#tutorialBlocklyDiv .blocklyToolboxDiv {
	z-index: 10;
}

/* Workspace + canvas */
.blocklySvg {
	background: var(--bs-body-bg) !important;
}

.blocklyMainBackground {
	fill: var(--bs-body-bg) !important;
}

/* Light theme workspace surfaces */
[data-bs-theme="light"] .blocklySvg,
[data-bs-theme="light"] .blocklyMainBackground {
	background: #ffffff !important;
	fill: #ffffff !important;
}

/* Dark theme workspace surfaces */
[data-bs-theme="dark"] .blocklySvg,
[data-bs-theme="dark"] .blocklyMainBackground {
	background: #0f0f12 !important;
	fill: #0f0f12 !important;
}

/* Toolbox */
.blocklyToolboxDiv {
	background: var(--bs-card-bg, var(--bs-body-bg)) !important;
	background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
	border-right: 1px solid var(--bs-border-color) !important;
}

/* Blockly sets background on inner toolbox elements in some builds */
.blocklyToolboxDiv .blocklyTreeRoot,
.blocklyToolboxDiv .blocklyToolboxContents,
.blocklyToolboxDiv .blocklyTreeScrollbox {
	background: var(--bs-card-bg, var(--bs-body-bg)) !important;
	background-color: var(--bs-card-bg, var(--bs-body-bg)) !important;
}

/* Light theme: force toolbox surfaces to white */
[data-bs-theme='light'] .blocklyToolboxDiv,
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyTreeRoot,
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyToolboxContents,
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyTreeScrollbox {
	background: #ffffff !important;
	background-color: #ffffff !important;
}

/* Dark theme: hard-force toolbox surfaces to avoid Blockly default light gray */
[data-bs-theme='dark'] .blocklyToolboxDiv,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeRoot,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyToolboxContents,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeScrollbox {
	background: var(--bs-card-bg) !important;
	background-color: var(--bs-card-bg) !important;
}

.blocklyToolboxDiv .blocklyTreeLabel,
.blocklyToolboxDiv .blocklyTreeRow {
	color: var(--bs-body-color) !important;
	opacity: 1 !important;
	font-weight: 500;
}

/* Light theme: ensure toolbox labels are dark */
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyTreeLabel,
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyTreeRow {
	color: #0b0b0d !important;
}

/* Dark theme: ensure toolbox labels are light */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeLabel,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeRow {
	color: #f5f5ff !important;
}

.blocklyToolboxDiv .blocklyTreeIcon {
	filter: brightness(1.15);
}

/* Light theme: ensure icons stay dark */
[data-bs-theme='light'] .blocklyToolboxDiv .blocklyTreeIcon {
	filter: none !important;
}

/* Dark theme: expand/collapse arrows can render black; force to light */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon {
	filter: invert(1) brightness(1.35) !important;
}

[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon svg {
	fill: var(--bs-body-color) !important;
	color: var(--bs-body-color) !important;
}

[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon svg * {
	fill: var(--bs-body-color) !important;
	stroke: var(--bs-body-color) !important;
}

/* Some Blockly builds render the expand/collapse arrows via background sprites.
   In dark mode, invert those icon sprites so arrows become light. */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosed,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpen,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosedLtr,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconClosedRtl,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpenLtr,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIconOpenRtl {
	filter: invert(1) brightness(1.25) !important;
}

/* If the icon is an <img>/<image>, invert it too */
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon img,
[data-bs-theme='dark'] .blocklyToolboxDiv .blocklyTreeIcon image {
	filter: invert(1) brightness(1.25) !important;
}

.blocklyTreeRow {
	color: var(--bs-body-color) !important;
	background: transparent !important;
}

.blocklyTreeRow:hover {
	background-color: rgba(var(--accent-rgb), .12) !important;
}

/* Selected category (class name varies slightly across Blockly versions) */
.blocklyTreeSelected,
.blocklyTreeRow.blocklyTreeSelected {
	background-color: rgba(var(--accent-rgb), .18) !important;
}

/* Flyout panel */
.blocklyFlyoutBackground {
	fill: var(--bs-body-bg) !important;
}

.blocklyFlyoutLabelBackground {
	fill: var(--bs-card-bg) !important;
}

/* Do NOT force .blocklyText fill globally; it harms contrast on brightly-colored blocks.
	Instead, rely on Blockly defaults for block text and only style UI chrome.
*/

/* Scrollbars */
.blocklyScrollbarBackground {
	fill: var(--bs-border-color) !important;
}

.blocklyScrollbarHandle {
	fill: var(--bs-secondary-color) !important;
}

.blocklyScrollbarHandle:hover {
	fill: var(--bs-primary) !important;
}

/* Zoom controls */
.blocklyZoom {
	fill: var(--bs-body-color) !important;
}

.blocklyZoom:hover {
	fill: var(--bs-primary) !important;
}

/* Input fields (rename variable, etc.) */
.blocklyFieldTextInput {
	background-color: var(--bs-card-bg) !important;
	color: var(--bs-body-color) !important;
	border: 1px solid var(--bs-border-color) !important;
	border-radius: .25rem;
}

.blocklyFieldTextInput:hover {
	background-color: var(--bs-body-bg) !important;
}

/* --- Symbol bubble selector --- */
#simSymbolsContainer {
	min-height: 60px;
	max-height: 400px;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.symbol-bubble {
	font-size: 0.875rem;
	padding: 0.35rem 0.75rem;
	white-space: nowrap;
	transition: all 150ms ease-out;
	border-radius: 1.5rem;
	user-select: none;
	cursor: pointer;
}

.symbol-bubble:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
}

.symbol-bubble.active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: var(--glow);
}

.symbol-bubble.active:hover {
	filter: brightness(1.1);
}

/* ========================================
   Pricing Page Styles
   ======================================== */

.pricing-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 1rem;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.15);
}

.pricing-card-featured {
	border-width: 2px;
	box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.2);
}

.pricing-card-featured:hover {
	box-shadow: 0 16px 50px rgba(var(--accent-rgb), 0.25);
}

.pricing-price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--accent);
}

.pricing-card .card-header {
	border-radius: 1rem 1rem 0 0;
}

/* Upgrade modal */
#upgradeModal .modal-header {
	background: linear-gradient(135deg, var(--accent), #6d28d9);
}

/* Tier badges in nav */
.tier-badge {
	font-size: 0.65rem;
	padding: 0.15rem 0.4rem;
	border-radius: 0.75rem;
	vertical-align: middle;
	margin-left: 0.25rem;
}

.tier-badge-pro {
	background: linear-gradient(135deg, var(--accent), #6d28d9);
	color: white;
}

.tier-badge-free {
	background: #6b7280;
	color: white;
}

/* Feature lock icon */
.feature-locked {
	position: relative;
	opacity: 0.6;
	cursor: not-allowed;
}

.feature-locked::after {
	content: "🔒";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5rem;
}

/* Pro badge on locked features */
.pro-badge {
	font-size: 0.6rem;
	padding: 0.1rem 0.35rem;
	background: linear-gradient(135deg, var(--accent), #6d28d9);
	color: white;
	border-radius: 0.5rem;
	vertical-align: super;
	margin-left: 0.25rem;
}

/* Hide simulator controls on Arena page (arena has its own simulation controls) */
body.page-arenas #simControls {
	display: none !important;
}

/* === SIM CONTROLS BAR THEMING === */
#simControls .sim-controls-bar {
	max-width: 1100px;
	backdrop-filter: blur(6px);
	transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

/* Light theme sim controls bar */
[data-bs-theme="light"] #simControls .sim-controls-bar,
#simControls .sim-controls-bar[data-bs-theme="light"] {
	background: rgba(255,255,255,0.92) !important;
	border-color: rgba(0,0,0,0.1) !important;
}
[data-bs-theme="light"] #simControls .sim-controls-bar .input-group-text,
#simControls .sim-controls-bar[data-bs-theme="light"] .input-group-text {
	background: rgba(247,247,251,0.95);
	border-color: rgba(0,0,0,0.1);
	color: #3f3f46;
}
[data-bs-theme="light"] #simControls .sim-controls-bar .form-control,
#simControls .sim-controls-bar[data-bs-theme="light"] .form-control {
	background: #fff;
	border-color: rgba(0,0,0,0.1);
	color: #0b0b0d;
}

/* Dark theme sim controls bar */
[data-bs-theme="dark"] #simControls .sim-controls-bar,
#simControls .sim-controls-bar[data-bs-theme="dark"] {
	background: rgba(18,18,24,0.92) !important;
	border-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] #simControls .sim-controls-bar .input-group-text,
#simControls .sim-controls-bar[data-bs-theme="dark"] .input-group-text {
	background: rgba(31,31,38,0.95);
	border-color: rgba(255,255,255,0.08);
	color: #a1a1aa;
}
[data-bs-theme="dark"] #simControls .sim-controls-bar .form-control,
#simControls .sim-controls-bar[data-bs-theme="dark"] .form-control {
	background: #0f0f12;
	border-color: rgba(255,255,255,0.08);
	color: #f5f5ff;
}

/* Live chart container glassy background (same as controls bar) */
#simLiveChartContainer .card {
	backdrop-filter: blur(6px);
	background: var(--bs-body-bg) !important;
	border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* Pulsing glow animation when simulation is running */
@keyframes sim-pulse {
	0%, 100% {
		box-shadow: 0 0 12px 2px rgba(25, 135, 84, 0.5),
					0 0 30px 4px rgba(25, 135, 84, 0.25);
	}
	50% {
		box-shadow: 0 0 25px 6px rgba(25, 135, 84, 0.7),
					0 0 50px 10px rgba(25, 135, 84, 0.4);
	}
}

#simControls .sim-controls-bar.sim-running {
	animation: sim-pulse 1.2s ease-in-out infinite;
	border: 2px solid rgba(25, 135, 84, 0.7) !important;
	background: linear-gradient(
		135deg,
		rgba(25, 135, 84, 0.08) 0%,
		rgba(25, 135, 84, 0.03) 100%
	) !important;
}

/* Running badge pulse */
#simControls .sim-controls-bar.sim-running #simCtrlStatus {
	animation: sim-badge-pulse 0.8s ease-in-out infinite;
}

@keyframes sim-badge-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.75; transform: scale(1.08); }
}

#simControls .sim-controls-tick {
	width: 320px;
}

#simControls .sim-controls-progress {
	min-width: 240px;
}

#simControls .sim-controls-progress .form-range {
	width: 240px;
}

/* Progress bar styling - more visible track and thumb */
#simControls .sim-controls-progress .form-range::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), #dee2e6 var(--progress, 0%), #dee2e6 100%);
	height: 8px;
	border-radius: 4px;
}
#simControls .sim-controls-progress .form-range::-moz-range-track {
	background: #dee2e6;
	height: 8px;
	border-radius: 4px;
}
#simControls .sim-controls-progress .form-range::-webkit-slider-thumb {
	background: var(--accent);
	border: 2px solid white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	width: 18px;
	height: 18px;
	margin-top: -5px;
}
#simControls .sim-controls-progress .form-range::-moz-range-thumb {
	background: var(--accent);
	border: 2px solid white;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	width: 18px;
	height: 18px;
}
[data-bs-theme="dark"] #simControls .sim-controls-progress .form-range::-webkit-slider-runnable-track {
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--progress, 0%), #495057 var(--progress, 0%), #495057 100%);
}
[data-bs-theme="dark"] #simControls .sim-controls-progress .form-range::-moz-range-track {
	background: #495057;
}

@media (max-width: 576px) {
	#simControls .sim-controls-tick {
		width: 100%;
	}

	#simControls .sim-controls-progress {
		width: 100%;
		min-width: 0;
	}

	#simControls .sim-controls-progress .form-range {
		width: 100%;
	}

	#simControls .btn {
		padding: 0.35rem 0.6rem;
		font-size: 0.95rem;
	}

	#simControls .badge {
		padding: 0.45rem 0.65rem;
		font-size: 0.85rem;
	}
}

/* Live equity chart styling - sim-running border only */
#simLiveChartContainer .card.sim-running {
	border-color: rgba(var(--bs-success-rgb), 0.4);
}

@media (max-width: 576px) {
	#simLiveChartContainer {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	
	#simLiveChartContainer .d-flex.gap-3 {
		flex-wrap: wrap;
		gap: 0.5rem !important;
	}
}

/* Language dropdown styling */
#langDropdown {
	min-width: 2.5rem;
	padding: 0.25rem 0.5rem;
	font-size: 1.1rem;
}

#langDropdown .dropdown-toggle::after {
	display: none;
}

/* Ensure dropdowns appear above simulator controls */
.dropdown-menu {
	z-index: 1050 !important;
}

/* App confirm/alert modal: respect newlines in message text */
#appConfirmBody {
	white-space: pre-line;
}

.dropdown-menu [data-lang].active {
	background-color: var(--accent);
	color: white;
}

.dropdown-menu [data-lang]:hover:not(.active) {
	background-color: rgba(var(--accent-rgb), 0.1);
}