/*
 * QipQop Trader — Frontend Chrome Reset
 * When a page is rendered by our plugin chrome (body.qqt-plugin-layout),
 * zero out any theme styles that would leak through. We reset margins,
 * paddings, font inheritance, and common theme-injected elements.
 *
 * This does NOT affect shortcode output rendered inside themes — only
 * pages where class-layout.php has hijacked the template.
 */

body.qqt-plugin-layout {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	background: var(--qqt-fg-bg, #f8fafc) !important;
	color: var(--qqt-fg-text, #0f172a) !important;
	line-height: 1.5 !important;
	min-height: 100vh !important;
}

body.qqt-plugin-layout * { box-sizing: border-box; }

/* Many themes inject their own header/footer via body_class hooks or
 * by positioning `header#masthead` / `#site-header` absolutely. Hide
 * any such remnants that slip past suppress_theme_chrome(). */
body.qqt-plugin-layout > header.site-header,
body.qqt-plugin-layout > #masthead,
body.qqt-plugin-layout > #site-header,
body.qqt-plugin-layout > nav.main-navigation,
body.qqt-plugin-layout > #primary-menu,
body.qqt-plugin-layout > footer.site-footer,
body.qqt-plugin-layout > #colophon,
body.qqt-plugin-layout > #site-footer,
body.qqt-plugin-layout > .site-branding,
body.qqt-plugin-layout > .wp-site-blocks > header:not(.qqt-header),
body.qqt-plugin-layout > .wp-site-blocks > footer:not(.qqt-footer) {
	display: none !important;
}

/* Admin bar — keep visible for logged-in admins but push our header
 * down so it doesn't hide behind the bar. */
body.qqt-plugin-layout.admin-bar .qqt-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.qqt-plugin-layout.admin-bar .qqt-header { top: 46px; }
}

/*
 * QipQop Trader — Frontend CSS
 * Mobile-first, full-width, themed for the trading product.
 * Works across all plugin-owned pages: home, markets, trade, wallet,
 * how-it-works, responsible-trading, faq, about, contact, login, register,
 * terms, privacy, dashboard.
 *
 * Design tokens borrowed from assets/css/trader.css so the trader UI
 * feels continuous with the rest of the site.
 */

/* ───────────────────────────────────────────────────────────
 * Design tokens
 * ─────────────────────────────────────────────────────────── */
:root {
	--qqt-fg-bg: #ffffff;
	--qqt-fg-bg-alt: #f7f8fa;
	--qqt-fg-surface: #ffffff;
	--qqt-fg-border: #e5e7eb;
	--qqt-fg-text: #0f172a;
	--qqt-fg-text-dim: #475569;
	--qqt-fg-text-muted: #94a3b8;

	--qqt-fg-brand: #3b82f6;
	--qqt-fg-brand-hover: #2563eb;
	--qqt-fg-green: #10b981;
	--qqt-fg-red: #ef4444;
	--qqt-fg-amber: #f59e0b;

	/* Dark chrome tokens (header + footer) */
	--qqt-dark-bg: #0b111a;
	--qqt-dark-surface: #121826;
	--qqt-dark-border: #1f2a3e;
	--qqt-dark-text: #e6eaf2;
	--qqt-dark-text-dim: #8b94a8;

	--qqt-radius-sm: 4px;
	--qqt-radius: 8px;
	--qqt-radius-lg: 12px;
	--qqt-radius-xl: 20px;

	--qqt-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--qqt-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

	--qqt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--qqt-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	--qqt-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.15);

	--qqt-max-width: 1200px;
	--qqt-header-height: 64px;
	--qqt-header-height-mobile: 56px;
}

/* ───────────────────────────────────────────────────────────
 * Base + reset (scoped — don't blow up theme styles elsewhere)
 * ─────────────────────────────────────────────────────────── */
body.qqt-frontend-body {
	margin: 0;
	padding: 0;
	font-family: var(--qqt-font-sans);
	background: var(--qqt-fg-bg);
	color: var(--qqt-fg-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.qqt-frontend-body * { box-sizing: border-box; }

.qqt-frontend-body img,
.qqt-frontend-body svg { max-width: 100%; height: auto; display: block; }

.qqt-frontend-body a { color: var(--qqt-fg-brand); text-decoration: none; transition: color 0.15s; }
.qqt-frontend-body a:hover { color: var(--qqt-fg-brand-hover); }

.qqt-frontend-body h1,
.qqt-frontend-body h2,
.qqt-frontend-body h3,
.qqt-frontend-body h4 {
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--qqt-fg-text);
}
.qqt-frontend-body h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
.qqt-frontend-body h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -0.015em; }
.qqt-frontend-body h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.qqt-frontend-body h4 { font-size: 1.05rem; }
.qqt-frontend-body p  { margin: 0 0 16px; }

/* Make sure the page content area on trader page is truly full-width */
.qqt-frontend-body .entry-content,
.qqt-frontend-body .post-content,
.qqt-frontend-body #content,
.qqt-frontend-body .site-content { max-width: none; width: 100%; padding: 0; margin: 0; }

.qqt-container {
	max-width: var(--qqt-max-width);
	margin: 0 auto;
	padding: 40px 20px;
}
@media (min-width: 768px) { .qqt-container { padding: 60px 40px; } }

/* Full-bleed pages still need left/right padding on their own internal content */
.qqt-main--qqt-trade { padding-top: var(--qqt-header-height); }
.qqt-main--qqt-home  { padding: 0; }

@media (max-width: 899px) {
	.qqt-main--qqt-trade { padding-top: var(--qqt-header-height-mobile); }
}

/* ───────────────────────────────────────────────────────────
 * Header
 * ─────────────────────────────────────────────────────────── */
.qqt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--qqt-dark-bg);
	color: var(--qqt-dark-text);
	border-bottom: 1px solid var(--qqt-dark-border);
	height: var(--qqt-header-height);
}
@media (max-width: 899px) { .qqt-header { height: var(--qqt-header-height-mobile); } }

.qqt-header-inner {
	max-width: var(--qqt-max-width);
	margin: 0 auto;
	height: 100%;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 40px;
}
@media (max-width: 899px) { .qqt-header-inner { gap: 12px; padding: 0 16px; } }

.qqt-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--qqt-dark-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 17px;
	flex-shrink: 0;
}
.qqt-brand:hover { color: var(--qqt-dark-text); }
.qqt-brand-mark { color: var(--qqt-fg-brand); display: flex; align-items: center; }
.qqt-brand-text { letter-spacing: -0.01em; }

.qqt-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
}
@media (max-width: 899px) { .qqt-nav { display: none; } }

.qqt-nav-link {
	padding: 8px 14px;
	color: var(--qqt-dark-text-dim);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--qqt-radius-sm);
	transition: all 0.15s;
}
.qqt-nav-link:hover { color: var(--qqt-dark-text); background: rgba(255,255,255,0.04); }
.qqt-nav-link.is-active { color: var(--qqt-dark-text); background: rgba(59, 130, 246, 0.1); }

.qqt-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
@media (max-width: 899px) { .qqt-header-actions { display: none; } }

/* Buttons */
.qqt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--qqt-radius-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s;
	white-space: nowrap;
}
.qqt-btn--primary {
	background: var(--qqt-fg-brand);
	color: #fff;
}
.qqt-btn--primary:hover { background: var(--qqt-fg-brand-hover); color: #fff; }
.qqt-btn--ghost {
	background: transparent;
	color: var(--qqt-dark-text-dim);
	border-color: var(--qqt-dark-border);
}
.qqt-btn--ghost:hover { color: var(--qqt-dark-text); border-color: var(--qqt-dark-text-dim); background: rgba(255,255,255,0.03); }
.qqt-btn--large { padding: 14px 24px; font-size: 16px; }
.qqt-btn--block { display: flex; width: 100%; padding: 14px; }

/* User menu */
.qqt-user-menu { position: relative; }
.qqt-user-menu-trigger {
	background: transparent;
	border: 1px solid var(--qqt-dark-border);
	border-radius: 50%;
	width: 36px; height: 36px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qqt-dark-text);
	transition: all 0.15s;
}
.qqt-user-menu-trigger:hover { border-color: var(--qqt-dark-text-dim); }
.qqt-user-avatar {
	background: var(--qqt-fg-brand);
	color: #fff;
	width: 28px; height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
}
.qqt-user-menu-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--qqt-dark-surface);
	border: 1px solid var(--qqt-dark-border);
	border-radius: var(--qqt-radius);
	min-width: 220px;
	padding: 8px 0;
	box-shadow: var(--qqt-shadow-lg);
}
.qqt-user-menu-dropdown[hidden] { display: none; }
.qqt-user-menu-dropdown a {
	display: block;
	padding: 8px 16px;
	color: var(--qqt-dark-text);
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s;
}
.qqt-user-menu-dropdown a:hover { background: rgba(255,255,255,0.04); color: var(--qqt-dark-text); }
.qqt-user-menu-dropdown hr { border: 0; border-top: 1px solid var(--qqt-dark-border); margin: 6px 0; }
.qqt-user-menu-header { padding: 10px 16px; border-bottom: 1px solid var(--qqt-dark-border); margin-bottom: 6px; }
.qqt-user-menu-name { font-weight: 600; color: var(--qqt-dark-text); font-size: 14px; }
.qqt-user-menu-email { color: var(--qqt-dark-text-dim); font-size: 12px; }

/* Mobile hamburger */
.qqt-mobile-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	align-items: center;
	margin-left: auto;
}
.qqt-mobile-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--qqt-dark-text);
	border-radius: 1px;
	transition: all 0.2s;
}
.qqt-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qqt-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.qqt-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) { .qqt-mobile-toggle { display: flex; } }

/* Mobile menu */
.qqt-mobile-menu {
	position: fixed;
	top: var(--qqt-header-height-mobile);
	left: 0; right: 0;
	bottom: 0;
	background: var(--qqt-dark-bg);
	padding: 24px 20px;
	overflow-y: auto;
	z-index: 99;
}
.qqt-mobile-menu[hidden] { display: none; }
.qqt-mobile-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.qqt-mobile-nav-link {
	display: block;
	padding: 14px 16px;
	color: var(--qqt-dark-text);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--qqt-radius-sm);
	transition: background 0.15s;
}
.qqt-mobile-nav-link:hover { background: rgba(255,255,255,0.04); }
.qqt-mobile-nav-link.is-active { background: rgba(59, 130, 246, 0.15); color: var(--qqt-dark-text); }
.qqt-mobile-actions { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--qqt-dark-border); padding-top: 20px; }
.qqt-mobile-logout {
	text-align: center;
	padding: 12px;
	color: var(--qqt-dark-text-dim);
	font-size: 14px;
}

/* ───────────────────────────────────────────────────────────
 * Footer
 * ─────────────────────────────────────────────────────────── */
.qqt-footer {
	background: var(--qqt-dark-bg);
	color: var(--qqt-dark-text-dim);
	border-top: 1px solid var(--qqt-dark-border);
	padding: 60px 0 30px;
}
.qqt-footer-inner {
	max-width: var(--qqt-max-width);
	margin: 0 auto;
	padding: 0 20px;
}
.qqt-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}
@media (max-width: 899px) {
	.qqt-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.qqt-footer-col--brand { grid-column: span 2; }
}
@media (max-width: 500px) {
	.qqt-footer-grid { grid-template-columns: 1fr; }
	.qqt-footer-col--brand { grid-column: span 1; }
}

.qqt-brand--footer { color: var(--qqt-dark-text); margin-bottom: 14px; }
.qqt-footer-tagline { font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0; }

.qqt-footer-heading {
	color: var(--qqt-dark-text);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 14px;
}
.qqt-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.qqt-footer-col a { color: var(--qqt-dark-text-dim); font-size: 14px; text-decoration: none; transition: color 0.15s; }
.qqt-footer-col a:hover { color: var(--qqt-dark-text); }

.qqt-footer-disclaimer {
	padding: 20px;
	background: rgba(245, 158, 11, 0.05);
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: var(--qqt-radius);
	font-size: 12px;
	line-height: 1.7;
	margin-bottom: 30px;
	color: var(--qqt-dark-text-dim);
}
.qqt-footer-disclaimer strong { color: var(--qqt-fg-amber); }

.qqt-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid var(--qqt-dark-border);
	font-size: 13px;
}
@media (max-width: 600px) {
	.qqt-footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}
.qqt-footer-powered { color: var(--qqt-dark-text-dim); font-size: 12px; }

/* ───────────────────────────────────────────────────────────
 * Page-specific generic content styles
 * ─────────────────────────────────────────────────────────── */

/* Section hero — used on non-home marketing pages */
.qqt-page-hero {
	text-align: center;
	padding: 40px 0 50px;
	border-bottom: 1px solid var(--qqt-fg-border);
	margin-bottom: 40px;
}
.qqt-page-hero-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--qqt-fg-brand);
	margin-bottom: 14px;
}
.qqt-page-hero h1 { margin: 0 0 14px; }
.qqt-page-hero .qqt-page-hero-sub { font-size: 1.15rem; color: var(--qqt-fg-text-dim); max-width: 700px; margin: 0 auto; }

/* Cards used across how-it-works, faq, about, etc */
.qqt-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 30px 0;
}
.qqt-feature-card {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius);
	padding: 28px;
	transition: all 0.2s;
}
.qqt-feature-card:hover { border-color: var(--qqt-fg-brand); box-shadow: var(--qqt-shadow); }
.qqt-feature-card-icon {
	width: 42px; height: 42px;
	border-radius: var(--qqt-radius-sm);
	background: rgba(59, 130, 246, 0.1);
	color: var(--qqt-fg-brand);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.qqt-feature-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.qqt-feature-card p { color: var(--qqt-fg-text-dim); font-size: 14px; margin: 0; }

/* Numbered steps list for how-it-works */
.qqt-steps { counter-reset: qqt-step; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .qqt-steps { grid-template-columns: repeat(4, 1fr); } }
.qqt-step {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius);
	padding: 28px 24px;
	position: relative;
	counter-increment: qqt-step;
}
.qqt-step::before {
	content: counter(qqt-step, decimal-leading-zero);
	position: absolute;
	top: 20px;
	right: 20px;
	color: var(--qqt-fg-text-muted);
	font-family: var(--qqt-font-mono);
	font-size: 14px;
	font-weight: 600;
}
.qqt-step h3 { font-size: 1.1rem; margin: 0 0 8px; padding-right: 40px; }
.qqt-step p  { color: var(--qqt-fg-text-dim); font-size: 14px; margin: 0; }

/* FAQ accordion */
.qqt-faq-list { max-width: 820px; margin: 0 auto; }
.qqt-faq-item {
	border-bottom: 1px solid var(--qqt-fg-border);
	padding: 4px 0;
}
.qqt-faq-item summary {
	list-style: none;
	padding: 20px 0;
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: color 0.15s;
}
.qqt-faq-item summary::-webkit-details-marker { display: none; }
.qqt-faq-item summary:hover { color: var(--qqt-fg-brand); }
.qqt-faq-item summary::after {
	content: '+';
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--qqt-fg-text-muted);
	transition: transform 0.2s;
}
.qqt-faq-item[open] summary::after { transform: rotate(45deg); }
.qqt-faq-item-body {
	padding: 0 0 20px;
	color: var(--qqt-fg-text-dim);
	line-height: 1.7;
}
.qqt-faq-item-body p:last-child { margin-bottom: 0; }

/* Responsible trading / notices */
.qqt-notice {
	padding: 20px 24px;
	background: rgba(245, 158, 11, 0.06);
	border-left: 4px solid var(--qqt-fg-amber);
	border-radius: var(--qqt-radius-sm);
	color: var(--qqt-fg-text);
	margin: 30px 0;
}
.qqt-notice strong { color: var(--qqt-fg-amber); }

/* CTA block used across pages */
.qqt-cta {
	background: linear-gradient(135deg, #0b111a 0%, #1a2234 100%);
	color: #fff;
	padding: 48px 32px;
	border-radius: var(--qqt-radius-lg);
	text-align: center;
	margin: 40px 0;
}
.qqt-cta h2 { color: #fff; margin: 0 0 12px; }
.qqt-cta p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 24px; }
.qqt-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Contact page form */
.qqt-contact-wrap { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .qqt-contact-wrap { grid-template-columns: 1fr 1.5fr; } }
.qqt-contact-info ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.qqt-contact-info .label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--qqt-fg-text-muted); margin-bottom: 4px; }
.qqt-contact-info .value { color: var(--qqt-fg-text); font-size: 15px; }

.qqt-form { display: flex; flex-direction: column; gap: 16px; }
.qqt-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--qqt-fg-text-dim); }
.qqt-form input,
.qqt-form textarea,
.qqt-form select {
	padding: 12px 14px;
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-sm);
	font-family: inherit;
	font-size: 15px;
	color: var(--qqt-fg-text);
	background: var(--qqt-fg-surface);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.qqt-form input:focus,
.qqt-form textarea:focus,
.qqt-form select:focus {
	outline: 0;
	border-color: var(--qqt-fg-brand);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.qqt-form textarea { min-height: 140px; resize: vertical; }

/* Legal pages (terms, privacy) */
.qqt-legal { max-width: 780px; margin: 0 auto; }
.qqt-legal h2 { margin-top: 40px; }
.qqt-legal h3 { margin-top: 28px; font-size: 1.15rem; }
.qqt-legal ol, .qqt-legal ul { padding-left: 24px; color: var(--qqt-fg-text-dim); }
.qqt-legal li { margin-bottom: 8px; }
.qqt-legal-meta { color: var(--qqt-fg-text-muted); font-size: 13px; margin-bottom: 40px; }

/* Ensure trader.css dark styles still work when combined with frontend.css */
.qqt-trader { font-family: var(--qqt-font-sans); }

/* ───────────────────────────────────────────────────────────
 * Homepage — full-bleed marketing layout
 * ─────────────────────────────────────────────────────────── */
.qqt-home { background: #fff; color: var(--qqt-fg-text); }
.qqt-home-container {
	max-width: var(--qqt-max-width);
	margin: 0 auto;
	padding: 0 20px;
}
@media (min-width: 768px) { .qqt-home-container { padding: 0 40px; } }

/* Hero */
.qqt-home-hero {
	background: linear-gradient(135deg, #0b111a 0%, #121826 60%, #1a2234 100%);
	color: #fff;
	padding: 80px 0 100px;
	position: relative;
	overflow: hidden;
}
.qqt-home-hero::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 70%; height: 200%;
	background: radial-gradient(closest-side, rgba(59, 130, 246, 0.18), transparent);
	pointer-events: none;
}
.qqt-home-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
}
.qqt-home-eyebrow-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--qqt-fg-green);
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
	animation: qqt-pulse 2s infinite;
}
@keyframes qqt-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
	50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}
.qqt-home-headline {
	color: #ffffff !important;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	max-width: 900px;
	position: relative;
	z-index: 1;
}
.qqt-home-sub {
	color: rgba(255,255,255,0.7);
	font-size: clamp(1rem, 2.2vw, 1.25rem);
	line-height: 1.6;
	max-width: 680px;
	margin: 0 0 40px;
	position: relative;
	z-index: 1;
}
.qqt-home-ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	position: relative;
	z-index: 1;
}
.qqt-home-ctas .qqt-btn--primary,
.qqt-home-ctas .qqt-btn-primary {
	background: var(--qqt-fg-brand);
	color: #fff;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--qqt-radius-sm);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: all 0.2s;
}
.qqt-home-ctas .qqt-btn--primary:hover,
.qqt-home-ctas .qqt-btn-primary:hover {
	background: var(--qqt-fg-brand-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -8px rgba(59, 130, 246, 0.5);
}
.qqt-home-ctas .qqt-btn--secondary,
.qqt-home-ctas .qqt-btn-secondary {
	background: rgba(255,255,255,0.08);
	color: #fff;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: var(--qqt-radius-sm);
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.15);
	transition: all 0.2s;
}
.qqt-home-ctas .qqt-btn--secondary:hover,
.qqt-home-ctas .qqt-btn-secondary:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.3);
	color: #fff;
}
.qqt-home-trust {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	position: relative;
	z-index: 1;
}
.qqt-home-trust-item { font-weight: 500; }

/* Features */
.qqt-home-features { padding: 100px 0; background: var(--qqt-fg-bg); }
.qqt-home-section-header { text-align: center; margin-bottom: 60px; }
.qqt-home-section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--qqt-fg-brand);
	margin-bottom: 14px;
	text-transform: uppercase;
}
.qqt-home-section-title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 auto;
	max-width: 700px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}
.qqt-home-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
}
.qqt-home-feature {
	padding: 32px;
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-lg);
	transition: all 0.2s;
}
.qqt-home-feature:hover {
	border-color: var(--qqt-fg-brand);
	box-shadow: var(--qqt-shadow);
	transform: translateY(-2px);
}
.qqt-home-feature h3 {
	font-size: 1.25rem;
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.qqt-home-feature p { color: var(--qqt-fg-text-dim); margin: 0; line-height: 1.7; }
.qqt-home-feature-icon {
	width: 48px; height: 48px;
	border-radius: var(--qqt-radius);
	background: rgba(59, 130, 246, 0.1);
	color: var(--qqt-fg-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

/* CTA section */
.qqt-home-cta {
	padding: 80px 0 100px;
	background: linear-gradient(180deg, var(--qqt-fg-bg) 0%, var(--qqt-fg-bg-alt) 100%);
	text-align: center;
}
.qqt-home-cta h2 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 16px;
	letter-spacing: -0.02em;
}
.qqt-home-cta p {
	color: var(--qqt-fg-text-dim);
	font-size: 1.1rem;
	max-width: 620px;
	margin: 0 auto 36px;
	line-height: 1.6;
}
.qqt-home-cta .qqt-home-ctas { justify-content: center; }
.qqt-home-cta-responsible {
	margin-top: 40px;
	font-size: 13px;
	color: var(--qqt-fg-text-muted);
}
.qqt-home-cta-responsible a { color: var(--qqt-fg-text-dim); }
.qqt-home-cta-responsible a:hover { color: var(--qqt-fg-brand); }

@media (max-width: 767px) {
	.qqt-home-hero { padding: 60px 0 70px; }
	.qqt-home-features { padding: 60px 0; }
	.qqt-home-cta { padding: 60px 0 80px; }
	.qqt-home-ctas .qqt-btn--primary, .qqt-home-ctas .qqt-btn--secondary { width: 100%; text-align: center; }
}

/* ───────────────────────────────────────────────────────────
 * Licensing components (Stage 15.2)
 * ─────────────────────────────────────────────────────────── */

/* Top banner — emerald strip above header */
.qqt-license-banner {
	background: #059669;
	color: #ffffff;
	padding: 10px 16px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.qqt-license-banner-inner {
	max-width: var(--qqt-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}
.qqt-license-banner-pill {
	background: #ffffff;
	color: #059669;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}
.qqt-license-banner-text { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.qqt-license-banner-link {
	color: #ffffff;
	text-decoration: underline;
	font-size: 12px;
	font-weight: 600;
	margin-left: 4px;
	flex-shrink: 0;
}
.qqt-license-banner-link:hover { color: #ffffff; text-decoration: none; }
@media (max-width: 700px) {
	.qqt-license-banner { font-size: 12px; padding: 8px 12px; }
	.qqt-license-banner-inner { gap: 8px; }
}

/* Footer license block (dark on dark footer) */
.qqt-license-footer-block {
	padding: 20px 24px;
	background: rgba(5, 150, 105, 0.06);
	border: 1px solid rgba(5, 150, 105, 0.25);
	border-radius: var(--qqt-radius);
	line-height: 1.7;
	font-size: 13px;
	margin-bottom: 30px;
	color: var(--qqt-dark-text-dim);
}
.qqt-license-footer-block p { margin: 0 0 10px; }
.qqt-license-footer-block p:last-child { margin-bottom: 0; }
.qqt-license-footer-block strong { color: var(--qqt-dark-text); }
.qqt-license-check { color: #10b981; margin-right: 6px; font-weight: 700; }
.qqt-license-footer-main { font-size: 14px; }
.qqt-license-footer-meta { font-size: 13px; }
.qqt-license-footer-site { font-size: 12px; opacity: 0.88; }
.qqt-license-footer-site a { color: #10b981; }
.qqt-license-footer-risk { font-size: 12px; opacity: 0.75; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.qqt-license-footer-copyright { font-size: 11px; opacity: 0.6; }
.qqt-license-footer-disclaimer { font-size: 10px; opacity: 0.5; }

/* Full regulation section — for Regulation + About pages */
.qqt-license-section {
	max-width: 900px;
	margin: 40px auto;
}
.qqt-license-section-title {
	text-align: center;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.qqt-license-section-title .qqt-license-check {
	color: #10b981;
	font-size: 1.2em;
}
.qqt-license-card {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-lg);
	padding: 32px;
	box-shadow: var(--qqt-shadow-sm);
}
.qqt-license-card-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--qqt-fg-text);
	margin: 0 0 24px;
}
.qqt-license-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 24px 0;
}
@media (min-width: 768px) {
	.qqt-license-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.qqt-license-grid-col h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--qqt-fg-text);
}
.qqt-license-grid-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--qqt-fg-text-dim);
}
.qqt-license-grid-col ul li strong { color: var(--qqt-fg-text); font-weight: 600; }
.qqt-license-grid-col p { font-size: 14px; line-height: 1.7; color: var(--qqt-fg-text-dim); margin: 0; }
.qqt-license-verify {
	padding: 20px 0 0;
	margin-top: 24px;
	border-top: 1px solid var(--qqt-fg-border);
	font-size: 14px;
}
.qqt-license-verify strong { color: var(--qqt-fg-text); }
.qqt-license-verify a { color: var(--qqt-fg-green); font-weight: 600; text-decoration: none; }
.qqt-license-verify a:hover { text-decoration: underline; }
.qqt-license-notice {
	margin-top: 24px;
	padding: 16px 20px;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: var(--qqt-radius);
	font-size: 13px;
	line-height: 1.7;
	color: var(--qqt-fg-text-dim);
}
.qqt-license-notice strong { color: #b45309; }
.qqt-license-risk {
	margin-top: 20px;
	font-size: 12px;
	color: var(--qqt-fg-text-muted);
	opacity: 0.9;
}
.qqt-license-risk strong { color: var(--qqt-fg-text-dim); }
.qqt-license-section-footer {
	text-align: center;
	font-size: 11px;
	color: var(--qqt-fg-text-muted);
	margin: 24px 0 0;
	line-height: 1.7;
}

/* Legal clause — for T&Cs */
.qqt-license-legal { margin: 30px 0; }
.qqt-license-legal h3 {
	font-size: 1.15rem;
	margin: 0 0 16px;
}
.qqt-license-legal p { line-height: 1.7; margin: 0 0 14px; }
.qqt-license-legal-compliance {
	background: var(--qqt-fg-bg-alt);
	padding: 14px 18px;
	border-radius: var(--qqt-radius-sm);
	font-size: 13px;
}

/* ───────────────────────────────────────────────────────────
 * Notifications bell (Stage 13)
 * ─────────────────────────────────────────────────────────── */
.qqt-notif-bell { position: relative; }
.qqt-notif-trigger {
	background: transparent;
	border: 1px solid var(--qqt-dark-border);
	border-radius: 50%;
	width: 36px; height: 36px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qqt-dark-text);
	position: relative;
	transition: all 0.15s;
}
.qqt-notif-trigger:hover { border-color: var(--qqt-dark-text-dim); background: rgba(255,255,255,0.04); }

.qqt-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--qqt-dark-bg);
	line-height: 1;
}

.qqt-notif-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: -70px;
	background: var(--qqt-fg-surface);
	color: var(--qqt-fg-text);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius);
	width: 360px;
	max-width: 90vw;
	box-shadow: var(--qqt-shadow-lg);
	overflow: hidden;
	z-index: 110;
}
.qqt-notif-dropdown[hidden] { display: none; }

.qqt-notif-dropdown-header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-fg-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.qqt-notif-dropdown-header strong { font-size: 14px; }

.qqt-notif-mark-all {
	background: transparent;
	border: 0;
	color: var(--qqt-fg-brand);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 2px 4px;
}
.qqt-notif-mark-all:hover { text-decoration: underline; }
.qqt-notif-mark-all[disabled] { opacity: 0.4; cursor: not-allowed; }
.qqt-notif-mark-all[disabled]:hover { text-decoration: none; }

.qqt-notif-list {
	max-height: 420px;
	overflow-y: auto;
}

.qqt-notif-item {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	display: block;
	color: inherit;
	text-decoration: none;
	transition: background 0.12s;
	position: relative;
}
.qqt-notif-item:last-child { border-bottom: none; }
.qqt-notif-item:hover { background: var(--qqt-fg-bg-alt); color: inherit; }

.qqt-notif-item.unread { background: rgba(59, 130, 246, 0.04); }
.qqt-notif-item.unread::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 18px;
	width: 6px; height: 6px;
	background: var(--qqt-fg-brand);
	border-radius: 50%;
}
.qqt-notif-item.priority-high::before { background: #ef4444; }

.qqt-notif-title {
	font-weight: 600;
	font-size: 13px;
	color: var(--qqt-fg-text);
	margin-bottom: 4px;
	padding-left: 10px;
}
.qqt-notif-item.unread .qqt-notif-title { font-weight: 700; }

.qqt-notif-body {
	font-size: 12px;
	color: var(--qqt-fg-text-dim);
	line-height: 1.5;
	padding-left: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qqt-notif-meta {
	font-size: 11px;
	color: var(--qqt-fg-text-muted);
	margin-top: 4px;
	padding-left: 10px;
}

.qqt-notif-empty {
	padding: 30px 16px;
	text-align: center;
	color: var(--qqt-fg-text-muted);
	font-size: 13px;
}

/* On mobile (<900px), dropdown goes full width anchored to right edge */
@media (max-width: 899px) {
	.qqt-notif-bell { display: none; } /* Hide desktop bell on mobile — mobile menu shows notifications link instead */
}

/* ───────────────────────────────────────────────────────────
 * KYC components (Stage 18)
 * ─────────────────────────────────────────────────────────── */

.qqt-kyc-container { max-width: 780px; margin: 0 auto; padding-top: 20px; }

/* Tier badge */
.qqt-kyc-tier-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.qqt-kyc-tier-badge.tier-0 { background: #fef3c7; color: #92400e; }
.qqt-kyc-tier-badge.tier-1 { background: #dbeafe; color: #1e40af; }
.qqt-kyc-tier-badge.tier-2 { background: #d1fae5; color: #065f46; }
.qqt-kyc-tier-badge.tier-3 { background: #ede9fe; color: #5b21b6; }

/* Status cards */
.qqt-kyc-status-card {
	border-radius: var(--qqt-radius-lg);
	padding: 32px;
	text-align: center;
	margin: 24px 0;
	border: 1px solid;
}
.qqt-kyc-status-card h2 { margin: 12px 0 10px; font-size: 1.5rem; }
.qqt-kyc-status-card p { margin: 0 0 10px; line-height: 1.7; }
.qqt-kyc-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	font-size: 28px;
	font-weight: 700;
	margin: 0 auto;
}
.qqt-kyc-status-card.approved { background: #ecfdf5; border-color: #a7f3d0; }
.qqt-kyc-status-card.approved .qqt-kyc-status-icon { background: #10b981; color: #fff; }
.qqt-kyc-status-card.pending { background: #fffbeb; border-color: #fde68a; }
.qqt-kyc-status-card.pending .qqt-kyc-status-icon { background: #f59e0b; color: #fff; }
.qqt-kyc-status-card.rejected { background: #fef2f2; border-color: #fecaca; }
.qqt-kyc-status-card.rejected .qqt-kyc-status-icon { background: #ef4444; color: #fff; }
.qqt-kyc-meta { font-size: 13px; color: var(--qqt-fg-text-muted); }

/* Form */
.qqt-kyc-form {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-lg);
	padding: 32px;
	box-shadow: var(--qqt-shadow-sm);
}
.qqt-kyc-form h3 { margin: 0 0 16px; font-size: 1.15rem; }
.qqt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .qqt-form-row { grid-template-columns: 1fr; } }
.qqt-required { color: #ef4444; margin-left: 2px; }

/* Upload slots */
.qqt-kyc-uploads {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 16px 0 24px;
}
@media (max-width: 600px) { .qqt-kyc-uploads { grid-template-columns: 1fr; } }

.qqt-kyc-upload-slot { display: flex; flex-direction: column; }
.qqt-kyc-slot-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--qqt-fg-text);
	display: block;
}
.qqt-kyc-slot-drop {
	border: 2px dashed var(--qqt-fg-border);
	border-radius: var(--qqt-radius);
	padding: 0;
	min-height: 140px;
	position: relative;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	background: var(--qqt-fg-bg-alt);
	overflow: hidden;
	display: block;
}
.qqt-kyc-slot-drop:hover { border-color: var(--qqt-fg-brand); background: rgba(59, 130, 246, 0.03); }
.qqt-kyc-file-input {
	position: absolute;
	opacity: 0;
	width: 100%; height: 100%;
	top: 0; left: 0;
	cursor: pointer;
	z-index: 2;
}
.qqt-kyc-slot-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	gap: 8px;
	color: var(--qqt-fg-text-muted);
	font-size: 13px;
	padding: 20px;
	text-align: center;
	pointer-events: none;
}
.qqt-kyc-slot-icon { font-size: 24px; }
.qqt-kyc-slot-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	padding: 12px;
	background: #fff;
	pointer-events: none;
}
.qqt-kyc-slot-thumb {
	max-width: 100%;
	max-height: 110px;
	border-radius: 4px;
	object-fit: cover;
}
.qqt-kyc-slot-filename {
	font-size: 11px;
	color: var(--qqt-fg-text-dim);
	margin-top: 8px;
	word-break: break-all;
	text-align: center;
}

/* Consent + submit */
.qqt-kyc-consent {
	background: var(--qqt-fg-bg-alt);
	padding: 14px 16px;
	border-radius: var(--qqt-radius);
	margin: 20px 0;
	font-size: 13px;
	line-height: 1.6;
}
.qqt-kyc-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.qqt-kyc-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

.qqt-kyc-submit-row { text-align: center; margin-top: 24px; }
.qqt-kyc-submit-row .qqt-btn { min-width: 240px; }

/* Feedback */
.qqt-kyc-feedback {
	padding: 14px 18px;
	border-radius: var(--qqt-radius);
	margin-top: 16px;
	font-size: 14px;
}
.qqt-kyc-feedback.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.qqt-kyc-feedback.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.qqt-kyc-feedback.loading { background: #dbeafe; color: #1e40af; }

/* Dashboard banner — shown when user is not yet verified */
.qqt-kyc-prompt-banner {
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	border: 1px solid #f59e0b;
	border-radius: var(--qqt-radius);
	padding: 16px 20px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.qqt-kyc-prompt-banner .icon { font-size: 28px; flex-shrink: 0; }
.qqt-kyc-prompt-banner .content { flex: 1; min-width: 200px; }
.qqt-kyc-prompt-banner .content strong { display: block; color: #92400e; margin-bottom: 2px; }
.qqt-kyc-prompt-banner .content span { font-size: 13px; color: #78350f; }
.qqt-kyc-prompt-banner .qqt-btn { flex-shrink: 0; }

/* ───────────────────────────────────────────────────────────
 * Responsible-trading limits page (Stage 20)
 * ─────────────────────────────────────────────────────────── */

.qqt-limits-container { max-width: 780px; margin: 0 auto; padding-top: 20px; }

/* Lockout state cards */
.qqt-limits-lockout {
	padding: 32px;
	border-radius: var(--qqt-radius-lg);
	margin-bottom: 30px;
	text-align: center;
	border: 1px solid;
}
.qqt-limits-lockout .icon { font-size: 40px; margin-bottom: 12px; }
.qqt-limits-lockout h2 { margin: 0 0 10px; font-size: 1.5rem; }
.qqt-limits-lockout p { margin: 0 0 10px; line-height: 1.7; }
.qqt-limits-lockout.self-excluded {
	background: #fef2f2;
	border-color: #fecaca;
	color: #7f1d1d;
}
.qqt-limits-lockout.cool-off {
	background: #fff7ed;
	border-color: #fed7aa;
	color: #7c2d12;
}

/* Form */
.qqt-limits-form {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-lg);
	padding: 32px;
	box-shadow: var(--qqt-shadow-sm);
	margin-bottom: 24px;
}
.qqt-limits-form h2 { margin: 0 0 8px; font-size: 1.25rem; }
.qqt-limits-form .qqt-muted { margin: 0 0 24px; font-size: 13px; }

.qqt-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin-bottom: 20px;
}
@media (max-width: 600px) { .qqt-form-grid { grid-template-columns: 1fr; } }
.qqt-form-grid label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-fg-text);
}
.qqt-form-grid input[type="number"] {
	font-family: 'JetBrains Mono', monospace;
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-sm);
	font-weight: 400;
}
.qqt-form-grid input[type="number"]:focus {
	outline: none;
	border-color: var(--qqt-fg-brand);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.qqt-field-hint {
	font-size: 11px;
	color: var(--qqt-fg-text-muted);
	font-weight: 400;
	line-height: 1.5;
	margin-top: 2px;
}

.qqt-limits-submit-row { text-align: right; margin-top: 8px; }

.qqt-limits-feedback {
	padding: 14px 18px;
	border-radius: var(--qqt-radius);
	margin-top: 16px;
	font-size: 14px;
}
.qqt-limits-feedback.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.qqt-limits-feedback.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.qqt-limits-feedback.loading { background: #dbeafe; color: #1e40af; }

/* Cool-off section */
.qqt-limits-section {
	background: var(--qqt-fg-surface);
	border: 1px solid var(--qqt-fg-border);
	border-radius: var(--qqt-radius-lg);
	padding: 32px;
	margin-bottom: 24px;
}
.qqt-limits-section h2 { margin: 0 0 8px; font-size: 1.25rem; }
.qqt-limits-section > .qqt-muted { margin: 0 0 20px; font-size: 13px; }

.qqt-cooloff-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.qqt-cooloff-btn {
	min-width: 120px;
}

/* Danger (self-exclusion) */
.qqt-limits-danger {
	background: #fff1f2;
	border-color: #fecaca;
}
.qqt-limits-danger h2 { color: #991b1b; }
.qqt-limits-danger p { font-size: 13px; line-height: 1.7; color: #7f1d1d; margin: 0 0 12px; }
.qqt-limits-danger form { margin-top: 20px; }
.qqt-limits-danger label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #7f1d1d;
}
.qqt-limits-danger input[type="text"] {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	padding: 10px 12px;
	border: 1px solid #fecaca;
	border-radius: var(--qqt-radius-sm);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.qqt-btn--danger {
	background: #dc2626;
	color: #fff;
	border: 1px solid #dc2626;
}
.qqt-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.qqt-btn--danger:disabled { background: #fca5a5; border-color: #fca5a5; cursor: not-allowed; }

/* Resources */
.qqt-limits-resources {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--qqt-radius);
	padding: 24px 28px;
	margin-top: 20px;
}
.qqt-limits-resources h3 { margin: 0 0 12px; color: #065f46; font-size: 1rem; }
.qqt-limits-resources ul { margin: 0; padding-left: 20px; color: #14532d; font-size: 13px; line-height: 1.8; }
.qqt-limits-resources ul li strong { color: #065f46; }

/* ───────────────────────────────────────────────────────────
 * Trade detail modal (v1.0.1)
 * ─────────────────────────────────────────────────────────── */

.qqt-contract-row {
	cursor: pointer;
	transition: background 0.12s, transform 0.12s;
}
.qqt-contract-row:hover {
	background: rgba(59, 130, 246, 0.06);
}
.qqt-contract-row:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: -2px;
}

body.qqt-modal-open { overflow: hidden; }

.qqt-trade-modal {
	position: fixed; inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.qqt-trade-modal[hidden] { display: none; }

.qqt-trade-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(8, 15, 26, 0.72);
	backdrop-filter: blur(4px);
}

.qqt-trade-modal-card {
	position: relative;
	width: 100%; max-width: 640px;
	max-height: 90vh; overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 28px 28px 24px;
	animation: qqt-modal-in 0.18s ease-out;
}
@keyframes qqt-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qqt-trade-modal-close {
	position: absolute; top: 10px; right: 14px;
	width: 36px; height: 36px;
	background: transparent; border: 0;
	font-size: 28px; line-height: 1;
	color: #64748b; cursor: pointer;
	border-radius: 50%;
	transition: background 0.12s, color 0.12s;
}
.qqt-trade-modal-close:hover { background: #f1f5f9; color: #0f172a; }

.qqt-trade-modal-loading,
.qqt-trade-modal-error {
	padding: 48px 20px; text-align: center;
	color: #64748b; font-size: 14px;
}
.qqt-trade-modal-error { color: #b91c1c; }

.qqt-trade-modal-header { margin-bottom: 16px; }
.qqt-trade-modal-header h2 {
	margin: 0 0 4px;
	font-size: 1.2rem; font-weight: 600;
	color: #0f172a; letter-spacing: -0.01em;
}
.qqt-trade-modal-sub { font-size: 12px; color: #64748b; }

.qqt-trade-outcome {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-family: 'JetBrains Mono', monospace;
}
.qqt-trade-outcome.open  { background: #eff6ff; color: #1e3a8a; }
.qqt-trade-outcome.won   { background: #ecfdf5; color: #065f46; }
.qqt-trade-outcome.lost  { background: #fef2f2; color: #991b1b; }
.qqt-trade-outcome.voided { background: #f1f5f9; color: #475569; }

.qqt-trade-outcome-badge {
	font-size: 13px; font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 10px; border-radius: 4px;
	background: rgba(255, 255, 255, 0.7);
}
.qqt-trade-outcome-pnl {
	font-size: 18px; font-weight: 700;
}

.qqt-trade-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 16px;
	margin-bottom: 20px;
}
@media (max-width: 520px) { .qqt-trade-facts { grid-template-columns: 1fr; } }
.qqt-trade-fact {
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 8px;
}
.qqt-trade-fact-label {
	font-size: 10px; text-transform: uppercase;
	letter-spacing: 0.05em; color: #64748b;
	font-weight: 600; margin-bottom: 3px;
}
.qqt-trade-fact-value {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px; color: #0f172a; font-weight: 500;
}

.qqt-trade-section-h {
	font-size: 0.8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.06em;
	color: #475569;
	margin: 24px 0 10px;
	padding-bottom: 6px; border-bottom: 1px solid #e2e8f0;
}

.qqt-trade-path-svg {
	width: 100%; max-width: 100%;
	background: #f8fafc;
	border-radius: 8px;
	margin-bottom: 4px;
}
.qqt-trade-path-line {
	stroke: #3b82f6; stroke-width: 2;
}
.qqt-trade-path-baseline {
	stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 3 3;
}
.qqt-trade-path-entry  { fill: #3b82f6; stroke: #fff; stroke-width: 2; }
.qqt-trade-path-exit   { fill: #10b981; stroke: #fff; stroke-width: 2; }

.qqt-trade-explanation {
	background: #f8fafc;
	border-radius: 8px;
	padding: 12px 16px;
}
.qqt-trade-expl-row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 6px 0;
	border-bottom: 1px dashed #e2e8f0;
	font-size: 13px;
}
.qqt-trade-expl-row:last-child { border-bottom: 0; }
.qqt-trade-expl-label {
	color: #64748b; font-weight: 500;
	flex-shrink: 0;
}
.qqt-trade-expl-value {
	color: #0f172a; font-weight: 500;
	text-align: right;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12.5px;
}
.qqt-trade-expl-row.outcome {
	margin-top: 4px; padding: 8px 0;
	border-top: 1px solid #cbd5e1; border-bottom: 0;
}
.qqt-trade-expl-row.outcome-won .qqt-trade-expl-value   { color: #065f46; font-weight: 700; }
.qqt-trade-expl-row.outcome-lost .qqt-trade-expl-value  { color: #991b1b; font-weight: 700; }

.qqt-trade-payout-math {
	background: #f8fafc;
	border-radius: 8px;
	padding: 14px 16px;
}
.qqt-trade-math-formula {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px; color: #1e40af;
	padding: 10px 12px;
	background: #dbeafe; border-radius: 6px;
	margin-bottom: 12px; text-align: center;
}
.qqt-trade-math-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.qqt-trade-math-table td {
	padding: 5px 4px;
}
.qqt-trade-math-table td:first-child { color: #64748b; }
.qqt-trade-math-table td:last-child {
	text-align: right;
	font-family: 'JetBrains Mono', monospace;
}
.qqt-trade-math-table tr.total td {
	padding-top: 10px;
	border-top: 1px solid #cbd5e1;
	color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════
 * v1.1.0 — App-shell dark theme + 3-column /trade layout
 * ═══════════════════════════════════════════════════════════ */

/* Dark palette variables */
body.qqt-dark {
	--qqt-bg:           #0b111a;
	--qqt-bg-2:         #0f1722;
	--qqt-panel:        #131a28;
	--qqt-panel-2:      #17202f;
	--qqt-border:       #1a2332;
	--qqt-border-hi:    #263349;
	--qqt-text:         #e5e7eb;
	--qqt-text-muted:   #8b97ab;
	--qqt-text-dim:     #5c6b82;
	--qqt-accent:       #10b981;
	--qqt-accent-hi:    #16c89e;
	--qqt-loss:         #ef4444;
	--qqt-loss-hi:      #f56565;
	--qqt-warn:         #f59e0b;
	--qqt-blue:         #3b82f6;
	--qqt-appbar-h:     48px;

	background: var(--qqt-bg) !important;
	color: var(--qqt-text) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100vh;
}

/* v1.2.0 — Theme bridge. When QQT_Layout has injected :root theme vars
 * (--qqt-theme-bg etc.), remap the plugin palette to use them. This lets
 * users switch between MT5 Default / TradingView Dark / Nord / Dracula
 * etc. just by writing a new scheme to user_meta. The plugin CSS never
 * needs to change; only the :root block in <head> flips.
 *
 * The `var(foo, fallback)` syntax means: if --qqt-theme-bg is present,
 * use rgb( that ); otherwise fall back to the hardcoded dark palette
 * above. So the bridge is zero-cost when no theme is active. */
body.qqt-dark {
	--qqt-bg:         rgb(var(--qqt-theme-bg,       11, 17, 26));
	--qqt-bg-2:       rgb(var(--qqt-theme-bg,       15, 23, 34));
	--qqt-panel:      rgb(var(--qqt-theme-bg,       19, 26, 40));
	--qqt-panel-2:    rgb(var(--qqt-theme-bg,       23, 32, 47));
	--qqt-border:     rgb(var(--qqt-theme-grid,     26, 35, 50));
	--qqt-border-hi:  rgb(var(--qqt-theme-grid,     38, 51, 73));
	--qqt-text:       rgb(var(--qqt-theme-fg,       229, 231, 235));
	--qqt-text-muted: rgb(var(--qqt-theme-fg,       139, 151, 171));
	--qqt-accent:     rgb(var(--qqt-theme-bull,     16, 185, 129));
	--qqt-accent-hi:  rgb(var(--qqt-theme-bull,     22, 200, 158));
	--qqt-loss:       rgb(var(--qqt-theme-bear,     239, 68, 68));
	--qqt-loss-hi:    rgb(var(--qqt-theme-bear,     245, 101, 101));
}

/* ═════════════════════════════════════════════════════════════════
 * v1.2.2 — Chrome palette layer (dark / dusk / light)
 *
 * The 9 MT5 schemes only colour the CHART CONTENT (candles, grid,
 * price lines). The UI chrome — toolbar buttons, tabs, text,
 * borders — needs guaranteed contrast that works across every
 * scheme. Each scheme is tagged with a chrome mode via the
 * data-chrome-mode attribute on <body>, set by JS at theme apply
 * time. Each chrome mode defines its own text / panel / border
 * palette that overrides the scheme's values for UI elements.
 * ═════════════════════════════════════════════════════════════════ */

/* CHROME MODE: DARK (MT5 Default, TradingView Dark, Pure Black Neon,
 * Midnight Ocean, Dracula, Colorblind Safe) */
body[data-chrome-mode="dark"] {
	--qqt-chrome-text:       #e5e7eb;
	--qqt-chrome-text-muted: #9ba4b5;
	--qqt-chrome-panel:      #1a2332;
	--qqt-chrome-panel-2:    #263349;
	--qqt-chrome-border:     #2a3a50;
	--qqt-chrome-border-hi:  #3f5673;
}

/* CHROME MODE: DUSK (Solarized Dark, Nord) — warmer dark palette */
body[data-chrome-mode="dusk"] {
	--qqt-chrome-text:       #d8dee9;
	--qqt-chrome-text-muted: #8fa1b3;
	--qqt-chrome-panel:      #3b4252;
	--qqt-chrome-panel-2:    #4c566a;
	--qqt-chrome-border:     #4c566a;
	--qqt-chrome-border-hi:  #5e81ac;
}

/* CHROME MODE: LIGHT (Light Day) — dark text on light chrome */
body[data-chrome-mode="light"] {
	--qqt-chrome-text:       #1a2332;
	--qqt-chrome-text-muted: #5c6b82;
	--qqt-chrome-panel:      #f1f4f8;
	--qqt-chrome-panel-2:    #e1e8f0;
	--qqt-chrome-border:     #d1d9e5;
	--qqt-chrome-border-hi:  #a9b5c7;
}

/* Default to dark if no chrome mode set */
body:not([data-chrome-mode]) {
	--qqt-chrome-text:       #e5e7eb;
	--qqt-chrome-text-muted: #9ba4b5;
	--qqt-chrome-panel:      #1a2332;
	--qqt-chrome-panel-2:    #263349;
	--qqt-chrome-border:     #2a3a50;
	--qqt-chrome-border-hi:  #3f5673;
}

/* For light scheme (Light Day) we let text stay readable on white bg
 * by not trying to darken --qqt-text below what the scheme specifies. */
body.qqt-dark[data-theme-id="light-day"] {
	--qqt-text-muted: rgba(50, 58, 68, 0.65);
	--qqt-text-dim:   rgba(50, 58, 68, 0.4);
	--qqt-panel:      #f8f9fb;
	--qqt-panel-2:    #eef1f5;
	--qqt-bg-2:       #ffffff;
}
body.qqt-dark.qqt-viewport-lock {
	overflow: hidden;
	height: 100vh;
}

/* Main wrapper — full-bleed, no centred container */
body.qqt-dark .qqt-main--bleed {
	max-width: none !important;
	width: 100vw !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--qqt-bg) !important;
}
body.qqt-dark.qqt-viewport-lock .qqt-main--bleed {
	height: calc(100vh - var(--qqt-appbar-h));
	overflow: hidden;
}
body.qqt-dark .qqt-container {
	max-width: none !important;
	padding: 0 !important;
}

/* ─────────────── App bar (top header) ─────────────── */

body.qqt-dark .qqt-appbar,
.qqt-appbar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 12px;
	background: var(--qqt-bg-2);
	border-bottom: 1px solid var(--qqt-border);
	position: sticky;
	top: 0;
	z-index: 1000;
	font-size: 14px;
	color: var(--qqt-text);
}

.qqt-appbar-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: #000;
	color: var(--qqt-text);
	text-decoration: none;
	flex-shrink: 0;
}
.qqt-appbar-brand-mark {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0;
}

.qqt-appbar-nav {
	display: flex;
	gap: 2px;
	margin-left: 4px;
	flex: 1;
	min-width: 0;
}
.qqt-appbar-navitem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--qqt-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.12s, color 0.12s;
}
.qqt-appbar-navitem:hover {
	background: var(--qqt-panel);
	color: var(--qqt-text);
}
.qqt-appbar-navitem.active {
	color: var(--qqt-text);
}
.qqt-appbar-navitem svg {
	color: currentColor;
	flex-shrink: 0;
}

.qqt-appbar-brandpill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border-radius: 999px;
	background: var(--qqt-panel);
	color: var(--qqt-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}
.qqt-appbar-brandpill-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--qqt-accent);
	color: #000;
	font-size: 10px;
	font-weight: 700;
}
.qqt-appbar-brandpill svg { color: var(--qqt-text-muted); }

.qqt-appbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.qqt-appbar-balance {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid var(--qqt-border);
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-appbar-mode {
	font-family: 'Inter', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 2px 5px;
	border-radius: 3px;
}
.qqt-appbar-mode.demo { background: var(--qqt-warn); color: #000; }
.qqt-appbar-balance svg { color: var(--qqt-text-muted); }

.qqt-appbar-deposit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	height: 36px;
	border-radius: 6px;
	background: var(--qqt-accent);
	color: #000 !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	transition: background 0.12s;
	border: 0;
	cursor: pointer;
	font-family: 'Inter', -apple-system, sans-serif;
	line-height: 1;
}
.qqt-appbar-deposit-btn:hover,
.qqt-appbar-deposit-btn:focus,
.qqt-appbar-deposit-btn:visited { color: #000 !important; background: var(--qqt-accent-hi); }

.qqt-appbar-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	position: relative;
	transition: background 0.12s, color 0.12s;
}
.qqt-appbar-iconbtn:hover { background: var(--qqt-panel); color: var(--qqt-text); }
.qqt-notif-badge {
	position: absolute;
	top: 3px; right: 3px;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--qqt-loss);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
}
.qqt-notif-badge[hidden] { display: none; }

.qqt-appbar-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #1f2937;
	border: 0;
	color: var(--qqt-text);
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
}

.qqt-appbar-ghost-btn,
.qqt-appbar-primary-btn {
	padding: 7px 14px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.qqt-appbar-ghost-btn { color: var(--qqt-text); border: 1px solid var(--qqt-border); }
.qqt-appbar-primary-btn { background: var(--qqt-accent); color: #000; }

/* ─────────────── /trade 3-column app shell ─────────────── */

.qqt-appshell {
	display: grid;
	grid-template-columns: 320px 1fr;
	height: calc(100vh - var(--qqt-appbar-h, 48px) - var(--qqt-appfoot-h, 32px));
	width: 100%;
	background: var(--qqt-bg, #0b111a);
	color: var(--qqt-text, #e5e7eb);
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative; /* floating trade bubble positions against this */
}
/* The main/container ancestors must NOT constrain the shell */
body .qqt-appshell { max-width: none !important; }
.qqt-main--bleed,
.qqt-main {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* When the trader shell is on the page, lock the body — prevents the
 * chart canvas from pushing the document down and creating a scrollbar.
 */
body:has(.qqt-appshell),
body.qqt-has-appshell { overflow: hidden; height: 100vh; }

/* Left panel (positions) */
.qqt-appshell-left {
	background: var(--qqt-bg);
	border-right: 1px solid var(--qqt-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.qqt-appshell-tabs {
	display: flex;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-appshell-tab {
	flex: 1;
	padding: 12px 8px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.12s, border-color 0.12s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.qqt-appshell-tab.active {
	color: var(--qqt-text);
	border-bottom-color: var(--qqt-accent);
}
.qqt-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 5px;
	height: 16px;
	border-radius: 8px;
	background: var(--qqt-panel);
	color: var(--qqt-text-muted);
	font-size: 10px;
}
.qqt-appshell-tab.active .qqt-tab-count {
	background: var(--qqt-accent);
	color: #000;
}

.qqt-appshell-tab-panel {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.qqt-appshell-tab-panel[hidden] { display: none; }

.qqt-appshell-left-footer {
	padding: 10px 14px;
	border-top: 1px solid var(--qqt-border);
	color: var(--qqt-text-muted);
	font-size: 11px;
	flex-shrink: 0;
}

/* Empty state — centred dot + two lines */
.qqt-trader-empty-state {
	padding: 48px 20px;
	text-align: center;
	color: var(--qqt-text-muted);
}
.qqt-trader-empty-dot {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 2px solid var(--qqt-border-hi);
	margin: 0 auto 16px;
	position: relative;
}
.qqt-trader-empty-dot::after {
	content: '';
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: var(--qqt-border-hi);
}
.qqt-trader-empty-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--qqt-text);
	margin-bottom: 4px;
}
.qqt-trader-empty-sub {
	font-size: 12px;
	color: var(--qqt-text-muted);
}

/* Contract rows in dark theme */
body.qqt-dark .qqt-contract-row {
	padding: 12px 14px;
	border-bottom: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.qqt-dark .qqt-contract-row:hover {
	background: var(--qqt-panel);
}
body.qqt-dark .qqt-contract-main { flex: 1; min-width: 0; }
body.qqt-dark .qqt-contract-market {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
	margin-bottom: 2px;
}
body.qqt-dark .qqt-contract-details {
	font-size: 11px;
	color: var(--qqt-text-muted);
	font-family: 'JetBrains Mono', monospace;
}
body.qqt-dark .qqt-contract-status {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 3px;
	margin-top: 4px;
	letter-spacing: 0.04em;
}
body.qqt-dark .qqt-contract-status.open { background: #1e3a5f; color: #60a5fa; }
body.qqt-dark .qqt-contract-status.won  { background: #064e3b; color: #34d399; }
body.qqt-dark .qqt-contract-status.lost { background: #5f1e2e; color: #f87171; }
body.qqt-dark .qqt-contract-stake {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--qqt-text);
	text-align: right;
	flex-shrink: 0;
}

/* ─────────────── Center: Chart stage ─────────────── */

.qqt-appshell-chart {
	background: var(--qqt-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.qqt-chart-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}

.qqt-chart-market-picker {
	display: flex;
	align-items: center;
	gap: 16px;
}
.qqt-chart-market-picker .qqt-trader-market-select {
	background: var(--qqt-panel);
	color: var(--qqt-text);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 8px 28px 8px 12px;
	font-size: 13px;
	font-weight: 600;
	min-width: 220px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238b97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.qqt-chart-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 18px;
	font-weight: 700;
	color: var(--qqt-text);
	line-height: 1;
}
.qqt-chart-change {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-text-muted);
	margin-top: 2px;
}
.qqt-chart-change.positive { color: var(--qqt-accent); }
.qqt-chart-change.negative { color: var(--qqt-loss); }

.qqt-chart-scale {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-text-muted);
}

.qqt-chart-stage {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.qqt-trader-chart {
	display: block;
	width: 100% !important;
	height: 100% !important;
	background: var(--qqt-bg);
}
body.qqt-dark .qqt-trader-chart-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qqt-text-muted);
	font-size: 13px;
	pointer-events: none;
}
body.qqt-dark .qqt-trader-chart-placeholder[hidden] { display: none; }

/* Digit ticker overlay at the bottom of the chart stage */
.qqt-chart-digits {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 0 12px;
	pointer-events: none;
}
.qqt-chart-digit {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--qqt-border-hi);
	background: var(--qqt-bg-2);
	color: var(--qqt-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	gap: 1px;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.qqt-chart-digit .digit-freq {
	font-size: 9px;
	font-weight: 500;
	color: var(--qqt-text-muted);
	font-family: 'Inter', sans-serif;
}
.qqt-chart-digit.is-current {
	border-color: var(--qqt-accent);
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
	transform: scale(1.1);
}
.qqt-chart-digit.is-current .digit-freq { color: var(--qqt-accent); }
.qqt-chart-digit.is-hot   { border-color: var(--qqt-loss); }
.qqt-chart-digit.is-cold  { border-color: #1e3a5f; }

/* ─────────────── Right panel: trade controls ─────────────── */

.qqt-appshell-right {
	background: var(--qqt-bg);
	border-left: 1px solid var(--qqt-border);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
}

.qqt-trade-learn {
	font-size: 11px;
	color: var(--qqt-accent);
	padding: 4px 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.qqt-trade-learn::before {
	content: '⚡';
	color: var(--qqt-accent);
}

.qqt-trade-type-header {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
}
.qqt-trade-type-caret,
.qqt-trade-type-icon {
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	align-items: center;
}
.qqt-trade-type-icon { color: var(--qqt-accent); }
.qqt-trade-type-name {
	font-size: 15px;
	font-weight: 600;
	color: var(--qqt-text);
	flex: 1;
}
.qqt-trade-type-menu {
	position: absolute;
	top: 100%; left: 0;
	z-index: 10;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 4px;
	margin-top: 4px;
}
.qqt-trade-type-menu select {
	background: transparent;
	color: var(--qqt-text);
	border: 0;
	font-size: 13px;
	min-width: 160px;
	padding: 4px;
}
.qqt-trade-type-menu[hidden] { display: none; }

body.qqt-dark .qqt-trader-field {
	margin-bottom: 0;
}
body.qqt-dark .qqt-trader-field label {
	display: block;
	font-size: 11px;
	color: var(--qqt-text-muted);
	margin-bottom: 6px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body.qqt-dark .qqt-trader-prediction-chips {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}
body.qqt-dark .qqt-digit-chip {
	padding: 8px 0;
	border-radius: 4px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.1s, border-color 0.1s;
}
body.qqt-dark .qqt-digit-chip:hover    { background: var(--qqt-panel-2); }
body.qqt-dark .qqt-digit-chip.active   {
	background: var(--qqt-accent); color: #000; border-color: var(--qqt-accent);
}

body.qqt-dark .qqt-trader-field input[type="number"],
body.qqt-dark .qqt-trader-field input[type="text"] {
	width: 100%;
	padding: 9px 12px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
}
body.qqt-dark .qqt-trader-field input:focus {
	border-color: var(--qqt-accent);
	outline: 0;
}

.qqt-trade-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.qqt-trade-row-label {
	font-size: 11px;
	color: var(--qqt-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
body.qqt-dark .qqt-trader-duration-chips {
	display: inline-flex;
	gap: 4px;
}
body.qqt-dark .qqt-trader-duration-chips button {
	min-width: 36px;
	padding: 6px 10px;
	border-radius: 4px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 12px;
	cursor: pointer;
}
body.qqt-dark .qqt-trader-duration-chips button.active {
	background: var(--qqt-accent);
	color: #000;
	border-color: var(--qqt-accent);
}

.qqt-trade-stakepayout-tabs {
	display: inline-flex;
	background: var(--qqt-panel);
	border-radius: 8px;
	padding: 3px;
	align-self: flex-start;
}
.qqt-stakepayout-tab {
	padding: 6px 14px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 6px;
}
.qqt-stakepayout-tab.active {
	background: var(--qqt-bg-2);
	color: var(--qqt-text);
}

.qqt-trade-stake-control {
	display: flex;
	align-items: center;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 4px;
}
.qqt-trade-stake-control input {
	flex: 1;
	background: transparent !important;
	border: 0 !important;
	color: var(--qqt-text) !important;
	font-family: 'JetBrains Mono', monospace;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	padding: 8px 4px !important;
	-moz-appearance: textfield;
}
.qqt-trade-stake-control input::-webkit-outer-spin-button,
.qqt-trade-stake-control input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.qqt-stake-unit {
	font-size: 11px;
	color: var(--qqt-text-muted);
	font-weight: 600;
	margin-right: 8px;
}
.qqt-stake-step {
	width: 32px; height: 32px;
	background: transparent;
	border: 0;
	color: var(--qqt-text);
	font-size: 18px;
	font-weight: 300;
	cursor: pointer;
	border-radius: 4px;
}
.qqt-stake-step:hover { background: var(--qqt-panel-2); }

/* Rise / Fall big action buttons */
.qqt-trade-action-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 4px;
}
.qqt-trade-action-btn {
	padding: 14px 20px;
	border-radius: 8px;
	border: 0;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	transition: transform 0.08s, filter 0.12s;
}
.qqt-trade-action-btn:hover   { filter: brightness(1.08); }
.qqt-trade-action-btn:active  { transform: translateY(1px); }
.qqt-trade-action-btn.rise    { background: var(--qqt-accent); color: #fff; }
.qqt-trade-action-btn.fall    { background: var(--qqt-loss);   color: #fff; }
.qqt-trade-action-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.02em;
}
.qqt-trade-action-label::before {
	content: '';
	width: 10px; height: 10px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(135deg);
}
.qqt-trade-action-btn.fall .qqt-trade-action-label::before {
	transform: rotate(-45deg);
}
.qqt-trade-action-payout {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	opacity: 0.92;
}

.qqt-trade-payout-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12px;
	color: var(--qqt-text-muted);
	padding-top: 8px;
	border-top: 1px dashed var(--qqt-border);
}
.qqt-trade-payout-line strong {
	color: var(--qqt-text);
	font-size: 14px;
	font-family: 'JetBrains Mono', monospace;
}

body.qqt-dark .qqt-trader-footer-note {
	font-size: 10px;
	color: var(--qqt-text-dim);
	margin: 0;
	line-height: 1.4;
}
body.qqt-dark .qqt-trader-msg {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	display: none;
}
body.qqt-dark .qqt-trader-msg:not(:empty) { display: block; }
body.qqt-dark .qqt-trader-msg.error { background: #3f1d25; color: #f87171; }
body.qqt-dark .qqt-trader-msg.success { background: #0d3a2f; color: #34d399; }

/* Universal submit (when hidden via Rise/Fall split) */
body.qqt-dark .qqt-trader-buy-btn[hidden] { display: none; }
body.qqt-dark .qqt-trader-buy-btn {
	width: 100%;
	padding: 12px;
	background: var(--qqt-accent);
	color: #000;
	border: 0;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

/* ─────────────── Non-trade pages (dashboard/wallet/etc) dark theme ─────────────── */

body.qqt-dark .qqt-main:not(.qqt-main--qqt-trade) {
	padding: 24px;
	background: var(--qqt-bg);
}

body.qqt-dark .qqt-card,
body.qqt-dark .qqt-panel {
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	border-radius: 10px;
}
body.qqt-dark a { color: var(--qqt-accent); }
body.qqt-dark a:hover { color: var(--qqt-accent-hi); }

/* ─────────────── Mobile ─────────────── */

@media (max-width: 900px) {
	.qqt-appshell {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}
	.qqt-appshell-left,
	.qqt-appshell-right {
		border: 0;
		border-top: 1px solid var(--qqt-border);
	}
	.qqt-appshell-left { max-height: 30vh; }
	.qqt-appshell-right { max-height: 50vh; }

	.qqt-appbar-nav { display: none; }
	.qqt-appbar-brandpill-name { display: none; }
	.qqt-chart-digits {
		bottom: 8px;
		gap: 3px;
	}
	.qqt-chart-digit {
		width: 30px; height: 30px;
		font-size: 12px;
	}
	.qqt-chart-digit .digit-freq { font-size: 7px; }
}

/* ─────────────── User menu + notif dropdown ─────────────── */
.qqt-user-menu,
.qqt-notif-bell { position: relative; }

.qqt-user-menu-dropdown,
.qqt-notif-dropdown {
	position: absolute;
	top: calc(100% + 4px); right: 0;
	min-width: 200px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 8px;
	padding: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	z-index: 100;
}
.qqt-user-menu-dropdown a,
.qqt-notif-dropdown a {
	display: block;
	padding: 8px 12px;
	color: var(--qqt-text);
	text-decoration: none;
	font-size: 13px;
	border-radius: 4px;
}
.qqt-user-menu-dropdown a:hover,
.qqt-notif-dropdown a:hover {
	background: var(--qqt-panel-2);
}
.qqt-user-menu-dropdown hr {
	border: 0; border-top: 1px solid var(--qqt-border);
	margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
 * v1.1.1 — Session footer + risk rows + Rise/Fall button polish
 * ═══════════════════════════════════════════════════════════ */

/* Left panel footer — multi-row session stats */
.qqt-appshell-left-footer {
	padding: 12px 14px;
	border-top: 1px solid var(--qqt-border);
	flex-shrink: 0;
	font-size: 11px;
}
.qqt-appshell-left-footer-row {
	color: var(--qqt-text-muted);
	margin-bottom: 10px;
}
.qqt-appshell-left-footer-session {
	padding-top: 10px;
	border-top: 1px solid var(--qqt-border);
	color: var(--qqt-text);
}
.qqt-session-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qqt-text-muted);
	margin-bottom: 4px;
}
.qqt-session-line {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 12px;
	margin-bottom: 2px;
}
.qqt-session-wl { color: var(--qqt-text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.qqt-session-pl {
	font-size: 11px;
	color: var(--qqt-text-muted);
	display: flex;
	gap: 6px;
	align-items: baseline;
}
.qqt-session-pl strong {
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
}
.qqt-session-pl strong.positive { color: var(--qqt-accent); }
.qqt-session-pl strong.negative { color: var(--qqt-loss); }

/* Right-panel range hint */
.qqt-trade-type-hint {
	font-size: 11px;
	color: var(--qqt-text-muted);
	padding-left: 30px;   /* align with trade-type-name */
	margin-top: -8px;
	margin-bottom: 4px;
}

/* Risk-control rows (target profit / target loss / loss multiple) */
.qqt-trade-risk-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
}
.qqt-trade-risk-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--qqt-text-muted);
	font-weight: 500;
}
.qqt-trade-risk-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px; height: 16px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.qqt-trade-risk-icon.target-profit { color: var(--qqt-blue);   }
.qqt-trade-risk-icon.target-loss   { color: var(--qqt-warn);   }
.qqt-trade-risk-icon.loss-multiple { color: var(--qqt-text-muted); }

.qqt-trade-risk-input-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 4px 10px;
	min-width: 100px;
}
.qqt-trade-risk-unit {
	color: var(--qqt-text-muted);
	font-size: 11px;
	font-weight: 600;
}
.qqt-trade-risk-input-wrap input {
	background: transparent !important;
	border: 0 !important;
	color: var(--qqt-text) !important;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	padding: 2px 0 !important;
	width: 60px;
	text-align: right;
	-moz-appearance: textfield;
}
.qqt-trade-risk-input-wrap input::-webkit-outer-spin-button,
.qqt-trade-risk-input-wrap input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Rise / Fall action buttons — new structure */
.qqt-trade-action-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 4px;
}
.qqt-trade-action-btn {
	position: relative;
	padding: 14px 18px;
	border-radius: 10px;
	border: 0;
	color: #fff;
	font-family: 'Inter', -apple-system, sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: filter 0.12s, transform 0.08s;
	text-align: left;
	overflow: hidden;
}
.qqt-trade-action-btn:hover   { filter: brightness(1.08); }
.qqt-trade-action-btn:active  { transform: translateY(1px); }
.qqt-trade-action-btn.rise    { background: var(--qqt-accent); color: #fff; }
.qqt-trade-action-btn.fall    { background: var(--qqt-loss);   color: #fff; }

.qqt-trade-action-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.qqt-trade-action-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	letter-spacing: 0.02em;
}
.qqt-trade-action-arrow {
	display: inline-block;
	transform: rotate(0);
}
.qqt-trade-action-winrate {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 13px;
	opacity: 0.95;
}
.qqt-trade-action-payout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	opacity: 0.92;
	padding-top: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.qqt-trade-action-payout-label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.qqt-trade-action-payout-amt {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════
 * v1.1.1 — Transactions feed, notification dropdown, chat drawer
 * ═══════════════════════════════════════════════════════════ */

/* ─────────────── Transactions list ─────────────── */

.qqt-txn-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--qqt-border);
}
.qqt-txn-row:last-child { border-bottom: 0; }

.qqt-txn-main { flex: 1; min-width: 0; }
.qqt-txn-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--qqt-text);
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.qqt-txn-date {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--qqt-text-muted);
}
.qqt-txn-amt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}
.qqt-txn-amt.credit { color: var(--qqt-accent); }
.qqt-txn-amt.debit  { color: var(--qqt-loss); }

/* Type accents on the left edge */
.qqt-txn-deposit       { border-left: 2px solid var(--qqt-accent); }
.qqt-txn-withdrawal    { border-left: 2px solid var(--qqt-warn); }
.qqt-txn-trade_open    { border-left: 2px solid var(--qqt-blue); }
.qqt-txn-trade_win     { border-left: 2px solid var(--qqt-accent); }
.qqt-txn-trade_loss    { border-left: 2px solid var(--qqt-loss); }
.qqt-txn-trade_refund  { border-left: 2px solid var(--qqt-text-muted); }
.qqt-txn-adjustment    { border-left: 2px solid var(--qqt-text-dim); }

/* ─────────────── Notification dropdown ─────────────── */

.qqt-notif-dropdown {
	min-width: 340px;
	max-width: 400px;
	max-height: 480px;
	padding: 0 !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.qqt-notif-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-notif-header span {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-notif-mark-all {
	background: transparent;
	border: 0;
	color: var(--qqt-accent);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
}
.qqt-notif-mark-all:hover { background: var(--qqt-panel-2); }

.qqt-notif-list {
	flex: 1;
	overflow-y: auto;
}
.qqt-notif-loading,
.qqt-notif-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--qqt-text-muted);
	font-size: 12px;
}
.qqt-notif-empty-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
	margin-bottom: 4px;
}
.qqt-notif-empty-sub { font-size: 11px; }

.qqt-notif-item {
	display: flex;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-border);
	cursor: pointer;
	transition: background 0.12s;
}
.qqt-notif-item:hover { background: var(--qqt-panel-2); }
.qqt-notif-item:last-child { border-bottom: 0; }

.qqt-notif-dot {
	flex-shrink: 0;
	width: 8px; height: 8px;
	border-radius: 50%;
	margin-top: 6px;
	background: transparent;
}
.qqt-notif-item.unread .qqt-notif-dot { background: var(--qqt-accent); }
.qqt-notif-item.priority-high .qqt-notif-dot { background: var(--qqt-loss); }

.qqt-notif-body { flex: 1; min-width: 0; }
.qqt-notif-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
	margin-bottom: 3px;
}
.qqt-notif-item:not(.unread) .qqt-notif-title {
	color: var(--qqt-text-muted);
	font-weight: 500;
}
.qqt-notif-msg {
	font-size: 12px;
	color: var(--qqt-text-muted);
	line-height: 1.4;
	margin-bottom: 4px;
}
.qqt-notif-time {
	font-size: 11px;
	color: var(--qqt-text-dim);
}

/* ─────────────── Chat drawer ─────────────── */

body.qqt-chat-open {
	/* Keep body scrollable on non-trade pages while chat is open */
}

.qqt-chat-drawer {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	justify-content: flex-end;
}
.qqt-chat-drawer[hidden] { display: none; }

.qqt-chat-backdrop {
	position: absolute; inset: 0;
	background: rgba(8, 15, 26, 0.5);
	backdrop-filter: blur(2px);
}

.qqt-chat-panel {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: 100vh;
	background: var(--qqt-bg-2);
	border-left: 1px solid var(--qqt-border);
	display: flex;
	flex-direction: column;
	animation: qqt-chat-slide 0.22s ease-out;
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.4);
}
@keyframes qqt-chat-slide {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.qqt-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-chat-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-chat-close {
	background: transparent;
	border: 0;
	width: 32px; height: 32px;
	font-size: 24px;
	line-height: 1;
	color: var(--qqt-text-muted);
	cursor: pointer;
	border-radius: 6px;
}
.qqt-chat-close:hover { background: var(--qqt-panel); color: var(--qqt-text); }

.qqt-chat-thread {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qqt-chat-welcome {
	margin: auto 0;
	text-align: center;
	padding: 20px;
	color: var(--qqt-text-muted);
}
.qqt-chat-welcome-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--qqt-text);
	margin-bottom: 6px;
}
.qqt-chat-welcome-sub {
	font-size: 12px;
	line-height: 1.5;
}
.qqt-chat-loading {
	margin: auto 0;
	text-align: center;
	color: var(--qqt-text-muted);
	font-size: 12px;
}

.qqt-chat-msg {
	display: flex;
	flex-direction: column;
	max-width: 85%;
}
.qqt-chat-msg.author-user { align-self: flex-end; align-items: flex-end; }
.qqt-chat-msg.author-bot,
.qqt-chat-msg.author-admin { align-self: flex-start; align-items: flex-start; }

.qqt-chat-bubble {
	padding: 8px 14px;
	border-radius: 16px;
	font-size: 13px;
	line-height: 1.45;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.qqt-chat-msg.author-user .qqt-chat-bubble {
	background: var(--qqt-accent);
	color: #000;
	border-bottom-right-radius: 4px;
}
.qqt-chat-msg.author-bot .qqt-chat-bubble,
.qqt-chat-msg.author-admin .qqt-chat-bubble {
	background: var(--qqt-panel);
	color: var(--qqt-text);
	border-bottom-left-radius: 4px;
}
.qqt-chat-msg.pending .qqt-chat-bubble { opacity: 0.7; }
.qqt-chat-msg.failed .qqt-chat-bubble {
	background: var(--qqt-loss);
	color: #fff;
}
.qqt-chat-meta {
	font-size: 10px;
	color: var(--qqt-text-dim);
	margin-top: 3px;
	padding: 0 6px;
}

.qqt-chat-compose {
	display: flex;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--qqt-border);
	background: var(--qqt-bg-2);
	flex-shrink: 0;
}
.qqt-chat-compose textarea {
	flex: 1;
	padding: 10px 12px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 8px;
	color: var(--qqt-text);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	resize: none;
	min-height: 40px;
	max-height: 120px;
}
.qqt-chat-compose textarea:focus {
	border-color: var(--qqt-accent);
	outline: 0;
}
.qqt-chat-send-btn {
	align-self: flex-end;
	padding: 10px 18px;
	background: var(--qqt-accent);
	color: #000;
	border: 0;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s;
}
.qqt-chat-send-btn:hover { background: var(--qqt-accent-hi); }

@media (max-width: 600px) {
	.qqt-chat-panel { max-width: 100%; }
	.qqt-notif-dropdown {
		min-width: calc(100vw - 20px);
		max-width: calc(100vw - 20px);
		right: -70px;
	}
}

/* ═══════════════════════════════════════════════════════════
 * v1.1.2 — Hardening: theme style neutralisation + chart polish
 * ═══════════════════════════════════════════════════════════ */

/* Nuclear option — neutralise ANY button/input/input-wrapper styles
 * that could bleed in from the active theme. Scoped to the app shell
 * so we don't affect legit admin pages.
 */
body.qqt-dark .qqt-appshell button,
body.qqt-dark .qqt-appshell input,
body.qqt-dark .qqt-appshell select {
	box-shadow: none !important;
	text-shadow: none !important;
}
body.qqt-dark .qqt-appshell button:not(.qqt-trade-action-btn):not(.qqt-appbar-deposit-btn):not(.qqt-trader-buy-btn):not(.qqt-digit-chip):not(.qqt-appbar-primary-btn) {
	background: transparent !important;
	color: var(--qqt-text) !important;
}
body.qqt-dark .qqt-stake-step,
body.qqt-dark .qqt-trade-risk-input-wrap,
body.qqt-dark .qqt-trade-risk-input-wrap input,
body.qqt-dark .qqt-trade-stake-control,
body.qqt-dark .qqt-trade-stake-control input {
	background-color: var(--qqt-panel) !important;
	color: var(--qqt-text) !important;
	border-color: var(--qqt-border) !important;
}
body.qqt-dark .qqt-stake-step {
	background: transparent !important;
}
body.qqt-dark .qqt-trade-risk-input-wrap input {
	background: transparent !important;
	border: 0 !important;
}
body.qqt-dark .qqt-trade-stake-control input {
	background: transparent !important;
	border: 0 !important;
}
body.qqt-dark .qqt-appshell-tab,
body.qqt-dark .qqt-appshell-tab * {
	background: transparent !important;
}

/* Footer — hidden on /trade viewport-lock body */
body.qqt-viewport-lock .qqt-footer,
body.qqt-has-appshell .qqt-footer { display: none !important; }

/* Digit ticker — force position into chart-stage even if parent overflow
 * is weird. Use logical bottom + centre transform + explicit z-index.
 */
.qqt-appshell-chart .qqt-chart-stage {
	position: relative;
}
.qqt-appshell-chart .qqt-chart-digits {
	position: absolute !important;
	left: 50% !important;
	bottom: 16px !important;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	gap: 6px;
	align-items: center;
	pointer-events: auto;
}

/* Chart left toolbar (1T / line / candle / download) — v1.1.2 */
.qqt-chart-toolbar {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 15;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 4px;
}
.qqt-chart-toolbar-btn {
	width: 30px; height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	border-radius: 4px;
	cursor: pointer;
	font-size: 10px;
	font-weight: 700;
}
.qqt-chart-toolbar-btn:hover,
.qqt-chart-toolbar-btn.active {
	background: var(--qqt-panel-2);
	color: var(--qqt-text);
}
.qqt-chart-toolbar-btn.active {
	color: var(--qqt-accent);
}

/* Chart X-axis time labels — overlay strip at bottom */
.qqt-chart-xaxis {
	position: absolute;
	left: 0;
	right: 60px; /* leave room for the Y-axis price labels */
	bottom: 4px;
	height: 12px;
	display: flex;
	justify-content: space-between;
	padding: 0 16px;
	pointer-events: none;
	z-index: 5;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--qqt-text-muted);
}


/* Compact dark footer — v1.1.2 */
body.qqt-dark {
	--qqt-appfoot-h: 32px;
}
.qqt-appfooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 32px;
	padding: 0 16px;
	background: var(--qqt-bg-2);
	border-top: 1px solid var(--qqt-border);
	color: var(--qqt-text-muted);
	font-size: 11px;
	font-family: 'Inter', sans-serif;
}
.qqt-appfooter-clock {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-text-muted);
	white-space: nowrap;
}
.qqt-appfooter-center {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.qqt-appfooter-center strong {
	color: var(--qqt-text);
	font-weight: 600;
}
.qqt-appfooter-right {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.qqt-appfooter-right a {
	color: var(--qqt-text-muted);
	text-decoration: none;
	transition: color 0.12s;
}
.qqt-appfooter-right a:hover { color: var(--qqt-accent); }
.qqt-appfooter-sep { color: var(--qqt-text-dim); }

@media (max-width: 900px) {
	.qqt-appfooter { font-size: 10px; padding: 0 10px; gap: 8px; }
	.qqt-appfooter-clock { display: none; }
}

/* Kill old heavyweight footer if any plugin still tries to render it */
.qqt-footer { display: none !important; }

/* ═══════════════════════════════════════════════════════════
 * v1.1.2 — MT5-style left panel (Market Watch + Positions)
 * ═══════════════════════════════════════════════════════════ */

.qqt-appshell-left {
	display: grid;
	grid-template-rows: 1fr 1fr auto; /* market-watch | positions | footer */
	min-height: 0; /* flex/grid child fix */
}

.qqt-appshell-market-watch {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--qqt-border);
}
.qqt-mw-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qqt-text-muted);
	background: var(--qqt-bg-2);
	flex-shrink: 0;
}
.qqt-mw-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px; height: 18px;
	padding: 0 6px;
	background: var(--qqt-panel);
	border-radius: 9px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--qqt-text);
}
.qqt-mw-columns {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 8px;
	padding: 6px 14px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qqt-text-dim);
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-mw-col-price,
.qqt-mw-col-change { text-align: right; }
.qqt-mw-col-change { min-width: 48px; }

.qqt-mw-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}
.qqt-mw-row {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 0;
	border-left: 2px solid transparent;
	color: var(--qqt-text);
	cursor: pointer;
	text-align: left;
	transition: background 0.1s, border-color 0.1s;
}
.qqt-mw-row:hover { background: var(--qqt-panel); }
.qqt-mw-row.active {
	background: var(--qqt-panel);
	border-left-color: var(--qqt-accent);
}
.qqt-mw-symbol {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.qqt-mw-symbol-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	background: #1e293b;
	color: var(--qqt-text);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	flex-shrink: 0;
}
.qqt-mw-symbol-name {
	font-size: 12px;
	font-weight: 500;
	color: var(--qqt-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.qqt-mw-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--qqt-text);
	min-width: 70px;
	text-align: right;
}
.qqt-mw-price.flash-up   { color: var(--qqt-accent); }
.qqt-mw-price.flash-down { color: var(--qqt-loss); }
.qqt-mw-change {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	color: var(--qqt-text-muted);
	min-width: 48px;
	text-align: right;
}
.qqt-mw-change.positive { color: var(--qqt-accent); }
.qqt-mw-change.negative { color: var(--qqt-loss); }

/* Positions (bottom half) */
.qqt-appshell-positions {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}
.qqt-appshell-positions .qqt-appshell-tab-panel {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

/* Override: tabs at top of positions section */
.qqt-appshell-positions .qqt-appshell-tabs {
	border-top: 0;
}

/* Chart top-row: hide the old <select> but keep the symbol label for
 * showing the currently-loaded market. Switching is now done via the
 * market-watch panel on the left.
 */
.qqt-chart-market-picker .qqt-trader-market-select {
	display: none;
}
.qqt-chart-market-picker::before {
	content: attr(data-active-market);
	font-size: 15px;
	font-weight: 700;
	color: var(--qqt-text);
	padding: 8px 12px;
	background: var(--qqt-panel);
	border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════
 * v1.1.3 — MT5 timeframe tabs + chart tools + aviator + bubble
 * ═══════════════════════════════════════════════════════════ */

/* Center panel is now 4 stacked rows: timeframe-tabs · chart-tools · chart-stage · aviator-panels · chart-tabs-ribbon */
.qqt-appshell-chart {
	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
	min-height: 0;
	overflow: hidden;
	background: var(--qqt-bg);
}

.qqt-hidden-select {
	position: absolute;
	left: -10000px;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ─── Timeframe tabs row (top) ─── */
.qqt-timeframe-tabs {
	display: flex;
	align-items: center;
	padding: 0 8px;
	background: var(--qqt-bg-2);
	border-bottom: 1px solid var(--qqt-border);
	gap: 2px;
	height: 34px;
	flex-shrink: 0;
}
.qqt-tf-tab {
	padding: 6px 14px;
	/* v1.2.3 — NUCLEAR VISIBILITY. Same reasoning as qqt-ctool-btn. */
	background: transparent;
	border: 1px solid transparent;
	color: #e2e8f0;
	opacity: 0.85;
	font-size: 11px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.1s, color 0.1s, opacity 0.1s, border-color 0.1s;
	letter-spacing: 0.02em;
}
body[data-chrome-mode="light"] .qqt-tf-tab { color: #1e293b; }
body[data-chrome-mode="dusk"]  .qqt-tf-tab { color: #d8dee9; }
.qqt-tf-tab:hover {
	background: #334155;
	border-color: #475569;
	opacity: 1;
}
body[data-chrome-mode="light"] .qqt-tf-tab:hover {
	background: #e2e8f0;
	border-color: #94a3b8;
}
.qqt-tf-tab.active {
	background: #1e3a2f;
	border-color: #10b981;
	color: #10b981;
	opacity: 1;
}
body[data-chrome-mode="light"] .qqt-tf-tab.active {
	background: #d1fae5;
}
.qqt-timeframe-tabs-spacer { flex: 1; }

.qqt-timeframe-active-market {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 8px;
}
.qqt-tam-symbol {
	font-size: 12px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-tam-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	color: var(--qqt-text);
}
.qqt-tam-change {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-text-muted);
}
.qqt-tam-change.positive { color: var(--qqt-accent); }
.qqt-tam-change.negative { color: var(--qqt-loss); }

/* ─── Chart tools row ─── */
/* ─── Chart tools row (v1.2.3 visibility guarantee) ─── */
.qqt-chart-tools-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	/* v1.2.3 — hardcoded background to guarantee it shows up */
	background: #0f172a;
	border-bottom: 1px solid #1e293b;
	height: 42px;
	flex-shrink: 0;
	position: relative;
	z-index: 20;
}
body[data-chrome-mode="light"] .qqt-chart-tools-row {
	background: #f8fafc;
	border-bottom-color: #cbd5e1;
}
body[data-chrome-mode="dusk"] .qqt-chart-tools-row {
	background: #2e3440;
	border-bottom-color: #3b4252;
}
.qqt-chart-tools-group {
	display: inline-flex;
	gap: 2px;
}
.qqt-chart-tools-sep {
	width: 1px;
	height: 22px;
	background: #475569;
	margin: 0 6px;
}
body[data-chrome-mode="light"] .qqt-chart-tools-sep { background: #cbd5e1; }
.qqt-chart-tools-spacer { flex: 1; }

.qqt-ctool-btn {
	width: 32px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* v1.2.3 — NUCLEAR VISIBILITY. Hardcoded colors, no CSS variables.
	 * The button MUST show up regardless of any CSS var interference.
	 * If a lighter chrome mode is active, the per-chrome-mode override
	 * below will repaint it. But the default here guarantees something
	 * visible even if a CSS var goes undefined. */
	background: #1e293b;
	border: 1px solid #475569;
	color: #e2e8f0;
	opacity: 1;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	padding: 0;
}
body[data-chrome-mode="light"] .qqt-ctool-btn {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #1e293b;
}
body[data-chrome-mode="dusk"] .qqt-ctool-btn {
	background: #3b4252;
	border-color: #5e81ac;
	color: #d8dee9;
}
.qqt-ctool-btn:hover {
	background: #334155;
	border-color: #10b981;
	color: #10b981;
}
body[data-chrome-mode="light"] .qqt-ctool-btn:hover {
	background: #e2e8f0;
	border-color: #10b981;
	color: #10b981;
}
.qqt-ctool-btn.active,
.qqt-ctool-btn[data-toggle][aria-pressed="true"] {
	background: #334155;
	border-color: #10b981;
	color: #10b981;
}
body[data-chrome-mode="light"] .qqt-ctool-btn.active,
body[data-chrome-mode="light"] .qqt-ctool-btn[data-toggle][aria-pressed="true"] {
	background: #e2e8f0;
	border-color: #10b981;
	color: #10b981;
}
/* Force SVGs to respect the button's text color. */
.qqt-ctool-btn svg {
	display: block;
	width: 14px;
	height: 14px;
	color: inherit;
	pointer-events: none;
	overflow: visible;
}
.qqt-ctool-btn svg * {
	stroke: currentColor;
}
.qqt-ctool-btn svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
	fill: currentColor;
}

/* ─── Chart stage ─── */
.qqt-appshell-chart .qqt-chart-stage {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: var(--qqt-bg);
}

/* ─── Aviator panels (Buy/Sell) ─── */
.qqt-aviator-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px 16px;
	background: var(--qqt-bg-2);
	border-top: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-aviator-panel {
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qqt-avi-mode-tabs {
	display: inline-flex;
	background: var(--qqt-bg);
	border-radius: 6px;
	padding: 2px;
	width: fit-content;
	align-self: center;
}
.qqt-avi-mode-tab {
	padding: 4px 14px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
}
.qqt-avi-mode-tab.active {
	background: var(--qqt-panel-2);
	color: var(--qqt-text);
}

.qqt-avi-stake-control {
	display: flex;
	align-items: center;
	gap: 6px;
}
.qqt-avi-step {
	width: 28px; height: 28px;
	background: var(--qqt-bg);
	border: 0;
	color: var(--qqt-text);
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	border-radius: 4px;
	line-height: 1;
	flex-shrink: 0;
}
.qqt-avi-step:hover { background: var(--qqt-panel-2); }
.qqt-avi-stake-input {
	flex: 1;
	background: var(--qqt-bg) !important;
	border: 0 !important;
	color: var(--qqt-text) !important;
	font-family: 'JetBrains Mono', monospace;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 4px !important;
	border-radius: 4px;
	-moz-appearance: textfield;
	min-width: 0;
}
.qqt-avi-stake-input::-webkit-outer-spin-button,
.qqt-avi-stake-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qqt-avi-chips {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 4px;
}
.qqt-avi-chip {
	padding: 6px 0;
	background: var(--qqt-bg);
	border: 0;
	color: var(--qqt-text-muted);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.1s, color 0.1s;
}
.qqt-avi-chip:hover { background: var(--qqt-panel-2); color: var(--qqt-text); }

.qqt-avi-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 12px;
	border: 0;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	border-radius: 8px;
	cursor: pointer;
	transition: filter 0.12s, transform 0.08s;
	line-height: 1.2;
	flex-direction: column;
}
.qqt-avi-action-btn:hover  { filter: brightness(1.08); }
.qqt-avi-action-btn:active { transform: translateY(1px); }
.qqt-avi-action-btn--buy   { background: var(--qqt-accent); }
.qqt-avi-action-btn--sell  { background: var(--qqt-loss); }
.qqt-avi-action-label { font-size: 16px; font-weight: 700; }
.qqt-avi-action-amt {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 500;
	opacity: 0.92;
}

/* ─── Chart tabs ribbon (bottom) ─── */
.qqt-chart-tabs-ribbon {
	display: flex;
	background: var(--qqt-bg-2);
	border-top: 1px solid var(--qqt-border);
	overflow-x: auto;
	flex-shrink: 0;
	height: 28px;
}
.qqt-chart-tabs-ribbon::-webkit-scrollbar { height: 3px; }
.qqt-chart-tabs-ribbon::-webkit-scrollbar-thumb { background: var(--qqt-border-hi); }

.qqt-chart-tab {
	padding: 6px 14px;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--qqt-border);
	color: var(--qqt-text-muted);
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.1s, color 0.1s;
	position: relative;
}
.qqt-chart-tab:hover { background: var(--qqt-panel); color: var(--qqt-text); }
.qqt-chart-tab.active {
	background: var(--qqt-panel);
	color: var(--qqt-text);
}
.qqt-chart-tab.active::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--qqt-accent);
}

/* ─── Floating trade bubble ─── */
.qqt-trade-bubble {
	position: fixed;
	right: 24px;
	top: calc(var(--qqt-appbar-h, 48px) + 16px);
	z-index: 200;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--qqt-accent);
	color: #000;
	border: 0;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(16, 185, 129, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s, filter 0.12s;
}
.qqt-trade-bubble:hover { filter: brightness(1.08); transform: scale(1.05); }
.qqt-trade-bubble[aria-expanded="true"] {
	background: var(--qqt-panel-2);
	color: var(--qqt-text);
}

.qqt-trade-popover {
	position: fixed;
	right: 24px;
	top: calc(var(--qqt-appbar-h, 48px) + 80px);
	z-index: 199;
	width: 360px;
	max-height: calc(100vh - var(--qqt-appbar-h, 48px) - 100px);
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.qqt-trade-popover[hidden] { display: none !important; }

.qqt-trade-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-trade-popover-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.qqt-trade-popover-close {
	width: 28px; height: 28px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.qqt-trade-popover-close:hover { background: var(--qqt-panel-2); color: var(--qqt-text); }

.qqt-trade-popover-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	min-height: 0;
}

.qqt-trade-type-select {
	flex: 1;
	background: var(--qqt-bg);
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 6px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238b97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px;
}

/* Footer — add regulator block in the center */
.qqt-appfooter-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.qqt-appfooter-regulator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--qqt-text-muted);
}
.qqt-appfooter-regulator-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--qqt-panel);
	color: var(--qqt-accent);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 900px) {
	.qqt-appshell {
		grid-template-columns: 1fr;
	}
	.qqt-appshell-left { max-height: 40vh; }
	.qqt-timeframe-tabs { overflow-x: auto; }
	.qqt-aviator-panels { gap: 6px; padding: 8px 10px; }
	.qqt-avi-action-btn { padding: 12px 8px; font-size: 13px; }
	.qqt-avi-chip { font-size: 10px; padding: 5px 0; }
	.qqt-trade-popover { width: calc(100vw - 20px); right: 10px; }
	.qqt-appfooter-regulator { display: none; }
}


/* ═══════════════════════════════════════════════════════════
 * v1.1.4 — Digit ticker enhancements
 * ═══════════════════════════════════════════════════════════ */

/* Make the ticker container support the absolute-positioned cursor + info */
.qqt-chart-digits {
	position: absolute !important;
	padding-bottom: 14px; /* room for the cursor arrow below */
}

/* Make individual digit cells position: relative for the arc */
.qqt-chart-digit {
	position: relative;
	overflow: visible;
	transition: opacity 0.3s, transform 0.15s, border-color 0.15s;
}
.qqt-chart-digit .digit-num {
	font-size: 14px;
	font-weight: 700;
}

/* The arc underline — small colored curve at the bottom of each digit cell */
.qqt-chart-digit .digit-arc {
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	width: 22px; height: 8px;
	border-radius: 0 0 22px 22px;
	border: 2px solid transparent;
	border-top: 0;
	opacity: 0;
	transition: opacity 0.2s, border-color 0.2s;
}
.qqt-chart-digit.is-hot .digit-arc {
	border-color: var(--qqt-accent);
	opacity: 1;
}
.qqt-chart-digit.is-cold .digit-arc {
	border-color: var(--qqt-loss);
	opacity: 0.85;
}

/* Current digit: full opacity override + green ring (beats rank fade) */
.qqt-chart-digit.is-current {
	opacity: 1 !important;
	border-color: var(--qqt-accent);
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
	transform: scale(1.08);
}

/* Cursor arrow — points up at the current digit from below */
.qqt-digit-cursor {
	position: absolute;
	bottom: 0;
	width: 0; height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 9px solid var(--qqt-accent);
	transform: translateX(-50%);
	transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

/* Info button on the right of the strip */
.qqt-digit-info {
	position: absolute;
	right: -32px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid var(--qqt-border-hi);
	background: var(--qqt-bg-2);
	color: var(--qqt-text-muted);
	cursor: help;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: color 0.15s, border-color 0.15s;
}
.qqt-digit-info:hover {
	color: var(--qqt-text);
	border-color: var(--qqt-accent);
}


/* ═══════════════════════════════════════════════════════════
 * v1.1.4 — Aviator panel hot-strip + per-panel duration
 * ═══════════════════════════════════════════════════════════ */

/* Hot-digit strip: 10 compact circles across the top of each Aviator panel */
.qqt-avi-hotstrip {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
	padding: 2px 0 6px;
	border-bottom: 1px dashed var(--qqt-border);
	margin-bottom: 6px;
	position: relative;
}

.qqt-avi-hotbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 3px 0;
	border-radius: 50%;
	border: 1px solid var(--qqt-border-hi);
	background: var(--qqt-bg);
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	font-size: 11px;
	aspect-ratio: 1;
	line-height: 1;
	opacity: 0.85;
	transition: opacity 0.25s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.qqt-avi-hotbtn-num {
	font-size: 11px;
	font-weight: 700;
}
.qqt-avi-hotbtn-freq {
	font-size: 7px;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	color: var(--qqt-text-muted);
	line-height: 1;
}

/* Rank classes (set by JS): .is-hot / .is-cold / .is-current */
.qqt-avi-hotbtn.is-hot    { border-color: var(--qqt-accent); }
.qqt-avi-hotbtn.is-cold   { border-color: var(--qqt-loss);   }
.qqt-avi-hotbtn.is-current {
	border-color: var(--qqt-accent);
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
	opacity: 1 !important;
	transform: scale(1.1);
}
.qqt-avi-hotbtn.is-current .qqt-avi-hotbtn-freq { color: var(--qqt-accent); }

/* Duration block on each Aviator panel */
.qqt-avi-duration {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 0;
	border-top: 1px solid var(--qqt-border);
	border-bottom: 1px solid var(--qqt-border);
}

.qqt-avi-dur-unit-tabs {
	display: inline-flex;
	background: var(--qqt-bg);
	border-radius: 6px;
	padding: 2px;
	align-self: center;
}
.qqt-avi-dur-unit-tab {
	padding: 3px 14px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.1s, color 0.1s;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.qqt-avi-dur-unit-tab.active {
	background: var(--qqt-panel-2);
	color: var(--qqt-text);
}

.qqt-avi-dur-slider-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px;
}

.qqt-avi-dur-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: var(--qqt-bg);
	border-radius: 999px;
	outline: none;
	cursor: pointer;
}
.qqt-avi-dur-slider::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--qqt-bg);
	border-radius: 999px;
}
.qqt-avi-dur-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--qqt-accent);
	border: 2px solid var(--qqt-panel);
	cursor: pointer;
	margin-top: -6px;
	transition: transform 0.1s;
}
.qqt-avi-dur-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.qqt-avi-dur-slider::-moz-range-track {
	height: 4px;
	background: var(--qqt-bg);
	border-radius: 999px;
	border: 0;
}
.qqt-avi-dur-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--qqt-accent);
	border: 2px solid var(--qqt-panel);
	cursor: pointer;
}

.qqt-avi-dur-readout {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--qqt-text);
}
.qqt-avi-dur-unit-label {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 500;
	color: var(--qqt-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Compact: lots of content in a small panel now */
@media (max-width: 900px) {
	.qqt-avi-hotbtn-freq { display: none; }
	.qqt-avi-hotbtn { font-size: 9px; }
	.qqt-avi-duration { padding: 6px 0; }
}


/* ═══════════════════════════════════════════════════════════
 * v1.2.0 — MT5 color schemes + chart-75% + theme picker
 * ═══════════════════════════════════════════════════════════ */

/* The theme CSS vars are set on .qqt-trader via inline style, applied at
 * render time AND at runtime when the user picks a scheme. All chart-
 * related colours reference these vars so the scheme controls the whole
 * chart area at once. Non-chart UI chrome (the shell, app bar, footer)
 * uses the original --qqt-* variables to stay visually stable across
 * scheme switches. */

/* Chart surface uses theme background */
.qqt-chart-stage {
	background: var(--qqt-theme-bg, var(--qqt-bg)) !important;
}

/* Axis text uses theme foreground */
.qqt-chart-xaxis {
	color: var(--qqt-theme-fg, var(--qqt-text-muted)) !important;
}

/* Chart-75%: redistribute center panel vertical space so the chart
 * stage claims ~75% and the aviator panels + ribbon share the rest.
 * We do this by setting the chart stage to `3fr` and everything else
 * `auto`, then capping aviator min-height so it doesn't dominate.
 */
.qqt-appshell-chart {
	grid-template-rows:
		auto  /* timeframe tabs */
		auto  /* chart tools */
		1fr   /* chart stage — grows */
		auto  /* aviator panels */
		auto; /* chart tabs ribbon */
}

/* Aviator panels compressed — the v1.1.4 additions (hot-strip, duration)
 * added a lot of height. Tighter padding + smaller components to fit. */
.qqt-aviator-panels {
	padding: 6px 12px !important;
	gap: 6px !important;
	max-height: 25vh;
}
.qqt-aviator-panel {
	padding: 6px 10px !important;
	gap: 5px !important;
	border-radius: 8px !important;
}
.qqt-avi-hotstrip { padding: 0 0 3px !important; }
.qqt-avi-hotbtn   { padding: 2px 0 !important; }
.qqt-avi-duration { padding: 4px 0 !important; }
.qqt-avi-stake-control { gap: 5px !important; }
.qqt-avi-step {
	width: 24px !important; height: 24px !important;
	font-size: 14px !important;
}
.qqt-avi-stake-input { font-size: 14px !important; padding: 2px !important; }
.qqt-avi-chip { padding: 4px 0 !important; font-size: 10px !important; }
.qqt-avi-action-btn { padding: 8px 10px !important; font-size: 13px !important; }
.qqt-avi-action-btn--buy  { background: var(--qqt-theme-bull, var(--qqt-accent)) !important; }
.qqt-avi-action-btn--sell { background: var(--qqt-theme-bear, var(--qqt-loss))   !important; }
.qqt-avi-action-label { font-size: 14px !important; }
.qqt-avi-action-amt   { font-size: 10px !important; }

/* Theme picker in the timeframe tabs row */
.qqt-theme-picker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	border-left: 1px solid var(--qqt-border);
	height: 100%;
	color: var(--qqt-text-muted);
}
.qqt-theme-select {
	background: transparent;
	border: 0;
	color: var(--qqt-text);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 18px 3px 4px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%238b97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 10px;
	min-width: 110px;
	letter-spacing: 0.02em;
}
.qqt-theme-select:hover { color: var(--qqt-accent); }
.qqt-theme-select option {
	/* The background of the dropdown list respects the OS, not our vars.
	 * Set a sensible bg/color here so list items are readable. */
	background: #1a1f2a;
	color: #e5e7eb;
}

/* Light theme accommodation — auto-flip some chrome elements when the
 * theme bg is bright. We detect this via the .qqt-theme--light class
 * that JS adds when the scheme is light-mode (bg lightness > 0.5). */
.qqt-theme--light .qqt-chart-stage { color: #1a1f2a; }
.qqt-theme--light .qqt-chart-xaxis { color: rgb(var(--qqt-theme-fg-rgb)); }

/* Make the bid-price horizontal line use the theme "last price" colour */
/* (chart.js handles this inside renderChart, via theme var lookup) */


/* ═══════════════════════════════════════════════════════════
 * v1.2.0 — Theme picker + compact aviator + chart 75%
 * ═══════════════════════════════════════════════════════════ */

/* Theme picker popover — positioned below the chart tools row */
.qqt-theme-popover {
	/* v1.2.2 — position:fixed lets this escape the .qqt-appshell-chart
	 * overflow:hidden clipping so the popover can never be hidden. */
	position: fixed;
	right: 16px;
	top: calc(var(--qqt-appbar-h, 48px) + 88px);
	z-index: 1000;
	width: 320px;
	max-height: calc(100vh - 200px);
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border-hi);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.qqt-theme-popover[hidden] { display: none !important; }

.qqt-theme-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-theme-popover-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--qqt-text);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.qqt-theme-popover-close {
	width: 24px; height: 24px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.qqt-theme-popover-close:hover { background: var(--qqt-panel-2); color: var(--qqt-text); }
.qqt-theme-popover-sub {
	padding: 8px 14px;
	font-size: 11px;
	color: var(--qqt-text-muted);
	margin: 0;
	border-bottom: 1px solid var(--qqt-border);
}

.qqt-theme-list {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.qqt-theme-loading {
	padding: 20px;
	text-align: center;
	color: var(--qqt-text-muted);
	font-size: 12px;
}

.qqt-theme-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	text-align: left;
	cursor: pointer;
	transition: background 0.1s;
}
.qqt-theme-row:hover { background: var(--qqt-panel-2); }
.qqt-theme-row.is-active { background: var(--qqt-panel-2); }

.qqt-theme-swatch {
	width: 36px; height: 36px;
	border-radius: 6px;
	border: 1px solid;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}
.qqt-theme-swatch-candle {
	position: absolute;
	width: 4px;
	border-radius: 1px;
	top: 6px;
	bottom: 6px;
	left: 10px;
}
.qqt-theme-swatch-candle.down {
	left: auto;
	right: 10px;
	top: 10px;
	bottom: 6px;
}

.qqt-theme-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.qqt-theme-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-theme-desc {
	font-size: 11px;
	color: var(--qqt-text-muted);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.qqt-theme-check {
	color: var(--qqt-accent);
	opacity: 0;
	flex-shrink: 0;
	transition: opacity 0.12s;
}
.qqt-theme-row.is-active .qqt-theme-check { opacity: 1; }

/* Ensure the chart-stage is a positioning context so the popover
 * anchors correctly within it. */
.qqt-appshell-chart { position: relative; }

/* ─── Aviator panel compactness for 75% chart ─── */
/* Shrink aviator panels vertically — smaller chips, tighter padding,
 * smaller stake input + action button. Chart takes the rest. */
.qqt-aviator-panels {
	padding: 6px 12px;
	gap: 6px;
}
.qqt-aviator-panel {
	padding: 6px 10px;
	gap: 4px;
}
.qqt-avi-hotstrip {
	padding: 0 0 4px;
	margin-bottom: 3px;
	gap: 3px;
}
.qqt-avi-hotbtn {
	padding: 2px 0;
	font-size: 10px;
}
.qqt-avi-hotbtn-num { font-size: 10px; }
.qqt-avi-hotbtn-freq { font-size: 6px; }
.qqt-avi-mode-tabs { padding: 1px; }
.qqt-avi-mode-tab { padding: 3px 10px; font-size: 10px; }
.qqt-avi-duration { padding: 4px 0; gap: 4px; }
.qqt-avi-dur-unit-tab { padding: 2px 10px; font-size: 9px; }
.qqt-avi-dur-slider-wrap { padding: 0 6px; gap: 2px; }
.qqt-avi-dur-readout { font-size: 11px; }
.qqt-avi-dur-unit-label { font-size: 9px; }

.qqt-avi-stake-control { gap: 4px; }
.qqt-avi-step { width: 24px; height: 24px; font-size: 14px; }
.qqt-avi-stake-input { font-size: 13px; padding: 3px !important; }
.qqt-avi-chips { gap: 3px; }
.qqt-avi-chip { padding: 4px 0; font-size: 10px; }
.qqt-avi-action-btn { padding: 8px 10px; font-size: 13px; gap: 2px; }
.qqt-avi-action-label { font-size: 13px; }
.qqt-avi-action-amt { font-size: 10px; }


/* ═══════════════════════════════════════════════════════════
 * v1.2.1 — Strategy picker + how-to overlay
 * ═══════════════════════════════════════════════════════════ */

/* Popover — mirrors the theme picker's position, slightly wider */
.qqt-strategy-popover {
	position: fixed;
	right: 360px; /* left-shift so it doesn't collide with the theme popover */
	top: calc(var(--qqt-appbar-h, 48px) + 88px);
	z-index: 1000;
	width: 380px;
	max-height: calc(100vh - 200px);
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border-hi);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.qqt-strategy-popover[hidden] { display: none !important; }

.qqt-strategy-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-bottom: 1px solid var(--qqt-border);
	flex-shrink: 0;
}
.qqt-strategy-popover-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--qqt-text);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.qqt-strategy-popover-close {
	width: 24px; height: 24px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.qqt-strategy-popover-close:hover { background: var(--qqt-panel-2); color: var(--qqt-text); }
.qqt-strategy-popover-sub {
	padding: 8px 14px;
	font-size: 11px;
	color: var(--qqt-text-muted);
	margin: 0;
	border-bottom: 1px solid var(--qqt-border);
	line-height: 1.4;
}

.qqt-strategy-list {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	padding: 4px 0;
}

.qqt-strategy-loading {
	padding: 20px;
	text-align: center;
	color: var(--qqt-text-muted);
	font-size: 12px;
}

.qqt-strategy-cat {
	padding: 10px 14px 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qqt-text-muted);
}

.qqt-strategy-row {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	text-align: left;
	cursor: pointer;
	transition: background 0.1s;
}
.qqt-strategy-row:hover { background: var(--qqt-panel-2); }
.qqt-strategy-row.is-active {
	background: var(--qqt-panel-2);
	border-left: 2px solid var(--qqt-accent);
	padding-left: 12px;
}
.qqt-strategy-row--none {
	opacity: 0.65;
}
.qqt-strategy-row--none.is-active {
	opacity: 1;
}

.qqt-strategy-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.qqt-strategy-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--qqt-text);
}
.qqt-strategy-desc {
	font-size: 11px;
	color: var(--qqt-text-muted);
	line-height: 1.4;
}
.qqt-strategy-winrate {
	font-size: 10px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--qqt-accent);
	margin-top: 2px;
}

.qqt-strategy-diff {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
	font-weight: 600;
}
.qqt-strategy-diff--beginner     { background: rgba(16, 185, 129, 0.15); color: var(--qqt-accent); }
.qqt-strategy-diff--intermediate { background: rgba(245, 158, 11, 0.15); color: var(--qqt-warn); }
.qqt-strategy-diff--advanced     { background: rgba(239, 68, 68, 0.15);  color: var(--qqt-loss); }

/* ─── How-to panel — fixed above the aviator panels, below the chart ─── */
.qqt-strategy-howto {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 210px; /* sits above the aviator panels */
	z-index: 50;
	background: var(--qqt-panel);
	border: 1px solid var(--qqt-border-hi);
	border-radius: 10px;
	padding: 10px 14px;
	max-height: 140px;
	overflow-y: auto;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.qqt-strategy-howto[hidden] { display: none !important; }

.qqt-strategy-howto-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
	color: var(--qqt-accent);
	font-size: 13px;
}
.qqt-strategy-howto-header strong {
	font-weight: 700;
}
.qqt-strategy-howto-close {
	width: 22px; height: 22px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	cursor: pointer;
	border-radius: 4px;
	font-size: 14px;
}
.qqt-strategy-howto-close:hover { background: var(--qqt-panel-2); color: var(--qqt-text); }

.qqt-strategy-howto-body {
	font-size: 12px;
	color: var(--qqt-text);
	line-height: 1.5;
	margin: 0 0 4px;
}
.qqt-strategy-howto-tf {
	font-size: 11px;
	color: var(--qqt-text-muted);
	margin: 0;
}
.qqt-strategy-howto-tf strong {
	color: var(--qqt-text);
	font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 900px) {
	.qqt-strategy-popover { width: calc(100vw - 20px); right: 10px; }
	.qqt-strategy-howto   { left: 8px; right: 8px; bottom: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.2.4 — Toolbox, resizable panels, site theme, zoom, footer
 *  All new/overriding styles are scoped to this block. Previous
 *  selectors are left intact above.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Site-theme modes (Dark / Dusk / Light) — separate from chart palette ─── */
/* These write to CSS custom properties that the rest of the app already
 * consumes (--qqt-bg, --qqt-panel, --qqt-text, etc). The user toggles
 * between them via the #qqt-site-theme-toggle button in the timeframe
 * bar; state is persisted to localStorage and restored on page load. */

body[data-site-theme="dark"] {
	--qqt-bg:         #0b111a;
	--qqt-bg-2:       #0f1724;
	--qqt-panel:      #131c2b;
	--qqt-panel-2:    #1a2435;
	--qqt-border:     #223044;
	--qqt-border-hi:  #2c3c55;
	--qqt-text:       #e6edf7;
	--qqt-text-muted: #8b97ab;
	--qqt-text-dim:   #5a6679;
}
body[data-site-theme="dusk"] {
	--qqt-bg:         #1e2230;
	--qqt-bg-2:       #262b3b;
	--qqt-panel:      #2e3447;
	--qqt-panel-2:    #3a405a;
	--qqt-border:     #40475f;
	--qqt-border-hi:  #525a78;
	--qqt-text:       #e5e9f0;
	--qqt-text-muted: #a8b0c5;
	--qqt-text-dim:   #7a8295;
}
body[data-site-theme="light"] {
	--qqt-bg:         #f8fafc;
	--qqt-bg-2:       #eef2f7;
	--qqt-panel:      #ffffff;
	--qqt-panel-2:    #eef2f7;
	--qqt-border:     #d8dee7;
	--qqt-border-hi:  #c3cbd6;
	--qqt-text:       #1a202c;
	--qqt-text-muted: #526072;
	--qqt-text-dim:   #7b8697;
}

/* Paint the qqt-appshell root with the active site-theme vars */
body[data-site-theme="light"] .qqt-appshell,
body[data-site-theme="dusk"]  .qqt-appshell,
body[data-site-theme="dark"]  .qqt-appshell {
	background: var(--qqt-bg);
	color: var(--qqt-text);
}

/* Icon swap inside the site-theme toggle button */
.qqt-site-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	padding: 5px 10px;
	margin: 0 6px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qqt-site-theme-toggle:hover { background: var(--qqt-panel-2); }
.qqt-site-theme-toggle .qqt-sitetheme-sun,
.qqt-site-theme-toggle .qqt-sitetheme-moon { transition: opacity 0.15s; }
body[data-site-theme="light"] .qqt-sitetheme-moon { opacity: 0; }
body[data-site-theme="light"] .qqt-sitetheme-sun  { opacity: 1; }
body[data-site-theme="dark"]  .qqt-sitetheme-moon { opacity: 1; }
body[data-site-theme="dark"]  .qqt-sitetheme-sun  { opacity: 0; }
body[data-site-theme="dusk"]  .qqt-sitetheme-moon { opacity: 0.6; }
body[data-site-theme="dusk"]  .qqt-sitetheme-sun  { opacity: 0.6; }
/* In dusk mode, overlay sun on moon */
body[data-site-theme="dusk"] .qqt-site-theme-toggle svg .qqt-sitetheme-sun {
	transform: translate(6px, -6px) scale(0.7);
	transform-origin: center;
}

/* Maximise toggle — shows maximise icon by default, minimise when active */
.qqt-maximise-toggle,
.qqt-layout-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 28px;
	background: transparent;
	border: 1px solid var(--qqt-border);
	color: var(--qqt-text);
	border-radius: 6px;
	cursor: pointer;
	margin: 0 4px;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qqt-maximise-toggle:hover,
.qqt-layout-reset:hover { background: var(--qqt-panel-2); color: var(--qqt-accent, #10b981); }
.qqt-maximise-toggle .qqt-icon-minimise { display: none; }
.qqt-maximise-toggle[aria-pressed="true"] .qqt-icon-maximise { display: none; }
.qqt-maximise-toggle[aria-pressed="true"] .qqt-icon-minimise { display: inline-block; }

/* When maximised, hide the left panel — chart + toolbox get the full width.
 * We also collapse the horizontal resizer and trigger a chart redraw via
 * the window resize hook fired by the JS. */
.qqt-appshell.is-maximised {
	grid-template-columns: 0 1fr !important;
}
.qqt-appshell.is-maximised .qqt-appshell-left { display: none !important; }
.qqt-appshell.is-maximised .qqt-resizer--h   { display: none !important; }

/* ─── Resize handles ─── */
/* Horizontal resizer — vertical strip between left panel and center column.
 * Positioned absolutely so it doesn't disturb the existing grid layout.
 * Its "left" value is set by JS based on the current left-panel width. */
.qqt-resizer {
	position: absolute;
	z-index: 30;
	background: transparent;
	transition: background 0.15s;
	user-select: none;
}
.qqt-resizer:hover,
.qqt-resizer.is-dragging {
	background: rgba(16, 185, 129, 0.22);
}
.qqt-resizer--h {
	top: 0;
	bottom: 0;
	width: 5px;
	margin-left: -2px;
	left: 320px; /* matches default grid-template-columns: 320px 1fr */
	cursor: col-resize;
}
.qqt-resizer--v {
	left: 320px;
	right: 0;
	height: 5px;
	margin-top: -2px;
	cursor: row-resize;
	/* `bottom` is set dynamically by JS based on toolbox height */
	bottom: 260px;
}
.qqt-appshell.is-maximised .qqt-resizer--v { left: 0; }

/* ─── Toolbox (formerly "Aviator") ─── */
.qqt-toolbox { flex-direction: column; }
.qqt-toolbox-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 16px 0;
	flex-shrink: 0;
}
.qqt-toolbox-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--qqt-text-muted);
}
.qqt-toolbox-tradekind {
	display: inline-flex;
	background: var(--qqt-bg);
	border: 1px solid var(--qqt-border);
	border-radius: 6px;
	padding: 2px;
}
.qqt-toolbox-kind-tab {
	padding: 4px 14px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.12s, color 0.12s;
}
.qqt-toolbox-kind-tab.active {
	background: var(--qqt-panel);
	color: var(--qqt-accent, #10b981);
}
.qqt-toolbox-kind-tab:hover:not(.active) { color: var(--qqt-text); }

/* Inner grid — two panels side by side */
.qqt-toolbox-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px 16px 10px;
	flex: 1;
	min-height: 0;
}

/* Stake unit label ("USD" or "Lots") that sits left of the stake control */
.qqt-avi-stake-unit {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	color: var(--qqt-text-muted);
	padding: 4px 6px;
	background: var(--qqt-bg);
	border-radius: 4px;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

/* In Spot kind, hide the hot-digit strip on both panels (spot is not
 * last-digit based) and hide the duration row's *Ticks* tab highlighting
 * so Minutes feels equally natural. */
.qqt-toolbox[data-trade-kind="spot"] .qqt-avi-hotstrip { display: none; }
.qqt-toolbox[data-trade-kind="spot"] .qqt-avi-action-btn--buy  .qqt-avi-action-label::before { content: "BUY"; }
.qqt-toolbox[data-trade-kind="spot"] .qqt-avi-action-btn--sell .qqt-avi-action-label::before { content: "SELL"; }
.qqt-toolbox[data-trade-kind="spot"] .qqt-avi-action-label { font-size: 0; }
.qqt-toolbox[data-trade-kind="spot"] .qqt-avi-action-label::before {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 1px;
}

/* ─── Bull-candle digit strip — filled circles (v1.2.4 prominence) ─── */
/* The old design used an arc underline; new design fills the circle
 * body with a colored background for bull (hot) digits. Bear (cold)
 * digits get a subtle red tint. Current digit gets an accent glow. */
.qqt-chart-digit {
	background: var(--qqt-bg-2, #0f1724);
	transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.qqt-chart-digit .digit-num {
	font-size: 15px;
	font-weight: 800;
	color: var(--qqt-text);
}
.qqt-chart-digit .digit-freq {
	font-size: 9px;
	font-weight: 600;
	color: var(--qqt-text-muted);
}

/* Bull (hot) — top-3 frequency digits get a solid accent fill */
.qqt-chart-digit.is-hot {
	background: var(--qqt-theme-bull, var(--qqt-accent, #10b981));
	border-color: var(--qqt-theme-bull, var(--qqt-accent, #10b981));
	color: #fff;
	box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.qqt-chart-digit.is-hot .digit-num,
.qqt-chart-digit.is-hot .digit-freq { color: #fff; }

/* Bear (cold) — bottom-3 frequency digits get a red-tinted fill */
.qqt-chart-digit.is-cold {
	background: rgba(var(--qqt-theme-bear-rgb, 239, 68, 68), 0.85);
	border-color: var(--qqt-theme-bear, var(--qqt-loss, #ef4444));
	color: #fff;
}
.qqt-chart-digit.is-cold .digit-num,
.qqt-chart-digit.is-cold .digit-freq { color: #fff; }

/* Current digit — pulsing accent ring on top of its fill */
.qqt-chart-digit.is-current {
	transform: scale(1.16);
	box-shadow: 0 0 0 3px var(--qqt-theme-bull, var(--qqt-accent, #10b981)),
	            0 4px 10px rgba(16, 185, 129, 0.35);
	z-index: 2;
}
/* Hide the old arc — we're using fills now */
.qqt-chart-digit .digit-arc { display: none !important; }

/* ─── Footer (compact, 3-zone) — ensure it's visible site-wide ─── */
.qqt-appfooter {
	background: var(--qqt-bg-2);
	border-top: 1px solid var(--qqt-border);
	color: var(--qqt-text-muted);
}
.qqt-appfooter-left,
.qqt-appfooter-center,
.qqt-appfooter-right { font-size: 11px; }
.qqt-appfooter a     { color: var(--qqt-text-muted); }
.qqt-appfooter a:hover { color: var(--qqt-accent, #10b981); }

/* ─── Light mode specifics: when site-theme=light, ensure the
 *     chart panels have white backgrounds and visible text. ─── */
body[data-site-theme="light"] .qqt-appshell-left,
body[data-site-theme="light"] .qqt-appshell-chart,
body[data-site-theme="light"] .qqt-appshell-right,
body[data-site-theme="light"] .qqt-trader-chart-placeholder {
	background: var(--qqt-bg);
	color: var(--qqt-text);
}
body[data-site-theme="light"] .qqt-mw-row,
body[data-site-theme="light"] .qqt-appshell-tab { color: var(--qqt-text); }
body[data-site-theme="light"] .qqt-aviator-panel,
body[data-site-theme="light"] .qqt-toolbox,
body[data-site-theme="light"] .qqt-chart-tools-row,
body[data-site-theme="light"] .qqt-timeframe-tabs { background: var(--qqt-panel); }

/* Mobile — stack panels, hide resizers, still show the header controls */
@media (max-width: 900px) {
	.qqt-resizer { display: none !important; }
	.qqt-site-theme-toggle .qqt-site-theme-label { display: none; }
	.qqt-toolbox-panels { padding: 6px 10px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.2.5 — Balance menu, Toolbox redesign, module modals,
 *  digit-info popover
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Balance pill dropdown ─────────────────────────────────── */
.qqt-appbar-balance { position: relative; }
.qqt-appbar-balance-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}
.qqt-appbar-balance-btn:hover { background: rgba(255,255,255,0.06); }
.qqt-appbar-balance-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	background: var(--qqt-panel, #1a2435);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 8px;
	min-width: 260px;
	padding: 6px;
	z-index: 1000;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.qqt-appbar-balance-menu[hidden] { display: none; }
.qqt-bal-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	color: var(--qqt-text, #e6edf7);
	font-size: 12px;
	cursor: pointer;
	border-radius: 4px;
	text-align: left;
	gap: 8px;
}
.qqt-bal-menu-item:hover { background: var(--qqt-panel-2, #2a3548); }
.qqt-bal-menu-item strong { font-family: 'JetBrains Mono', monospace; color: var(--qqt-accent, #10b981); }
.qqt-bal-menu-item--admin {
	color: #fbbf24 !important;
	border-top: 1px dashed var(--qqt-border-hi, #2c3c55);
	margin-top: 2px;
	padding-top: 10px;
}
.qqt-bal-menu-sep { height: 1px; background: var(--qqt-border, #223044); margin: 4px 2px; }

/* ─── Toolbox redesign ───────────────────────────────────────── */
.qqt-toolbox {
	display: flex !important;
	flex-direction: column;
	background: var(--qqt-bg-2, #0f1724);
	border-top: 1px solid var(--qqt-border, #223044);
	border-left: 3px solid var(--qqt-accent, #10b981);
	min-height: 60px;
	overflow: hidden;
}
.qqt-toolbox-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	background: var(--qqt-panel, #131c2b);
	border-bottom: 1px solid var(--qqt-border, #223044);
	flex-shrink: 0;
}
.qqt-toolbox-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--qqt-accent, #10b981);
}
.qqt-toolbox-title-icon { flex-shrink: 0; }
.qqt-toolbox-tradekind {
	display: inline-flex;
	background: var(--qqt-bg, #0b111a);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 6px;
	padding: 2px;
}
.qqt-toolbox-kind-tab {
	padding: 5px 16px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted, #8b97ab);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.12s, color 0.12s;
}
.qqt-toolbox-kind-tab.active {
	background: var(--qqt-accent, #10b981);
	color: #fff;
}
.qqt-toolbox-kind-tab:hover:not(.active) { color: var(--qqt-text, #e6edf7); }
.qqt-toolbox-actions {
	display: inline-flex;
	gap: 4px;
}
.qqt-toolbox-action {
	width: 26px; height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.qqt-toolbox-action:hover {
	background: var(--qqt-panel-2, #1a2435);
	color: var(--qqt-accent, #10b981);
	border-color: var(--qqt-accent, #10b981);
}
.qqt-toolbox-action .qqt-icon-expand   { display: inline-block; }
.qqt-toolbox-action .qqt-icon-collapse { display: none; }
.qqt-toolbox.is-collapsed .qqt-toolbox-action .qqt-icon-expand   { display: none; }
.qqt-toolbox.is-collapsed .qqt-toolbox-action .qqt-icon-collapse { display: inline-block; }
.qqt-toolbox.is-collapsed .qqt-toolbox-body { display: none; }

.qqt-toolbox-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0;
}
.qqt-toolbox-body .qqt-toolbox-panels {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px 16px;
	background: transparent;
	border-top: 0 !important;
}

/* Stake unit badge — cleaner look */
.qqt-avi-stake-unit {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	background: var(--qqt-panel-2, #1a2435);
	border-radius: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: var(--qqt-text-muted, #8b97ab);
	flex-shrink: 0;
}

/* ─── Digit info popover ─────────────────────────────────────── */
.qqt-digit-info-popover {
	max-width: 340px;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	z-index: 1000;
	color: var(--qqt-text, #e6edf7);
	font-size: 12px;
	line-height: 1.5;
}
.qqt-dip-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 8px;
}
.qqt-dip-close {
	background: transparent; border: 0; color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px;
}
.qqt-digit-info-popover ul { list-style: none; padding: 0; margin: 8px 0; }
.qqt-digit-info-popover li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.qqt-digit-info-popover p { margin: 0 0 8px; }
.qqt-digit-info-popover .qqt-dip-foot { color: var(--qqt-text-muted, #8b97ab); font-size: 11px; margin-top: 8px; }
.qqt-dip-dot {
	width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
	border: 1px solid var(--qqt-border-hi, #2c3c55);
}
.qqt-dip-dot--hot  { background: var(--qqt-accent, #10b981); border-color: var(--qqt-accent, #10b981); }
.qqt-dip-dot--cold { background: var(--qqt-loss,   #ef4444); border-color: var(--qqt-loss,   #ef4444); }
.qqt-dip-dot--curr { box-shadow: 0 0 0 3px var(--qqt-accent, #10b981); background: var(--qqt-bg-2, #0f1724); }

/* ─── Generic module modal (Indicators / Drawing tools) ────── */
.qqt-module-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: qqtMmIn 0.12s ease-out;
}
@keyframes qqtMmIn { from { opacity: 0; } to { opacity: 1; } }
.qqt-module-modal-inner {
	width: 560px;
	max-width: calc(100vw - 32px);
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 10px;
	box-shadow: 0 24px 48px rgba(0,0,0,0.5);
	transition: transform 0.15s, max-height 0.15s;
}
.qqt-module-modal.is-min .qqt-module-modal-inner {
	position: fixed; bottom: 16px; right: 16px;
	width: 280px; max-height: 44px;
}
.qqt-module-modal.is-min .qqt-module-modal-body { display: none; }
.qqt-module-modal.is-max .qqt-module-modal-inner {
	width: calc(100vw - 64px);
	max-height: calc(100vh - 64px);
}
.qqt-module-modal-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--qqt-border, #223044);
	background: var(--qqt-panel-2, #1a2435);
	flex-shrink: 0;
}
.qqt-module-modal-header strong {
	font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
	color: var(--qqt-text, #e6edf7);
}
.qqt-module-modal-actions { display: inline-flex; gap: 4px; }
.qqt-mm-act {
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px; color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer; font-size: 14px; line-height: 1;
}
.qqt-mm-act:hover { background: var(--qqt-panel, #131c2b); color: var(--qqt-text, #e6edf7); }
.qqt-mm-close:hover { background: var(--qqt-loss, #ef4444); color: #fff; border-color: var(--qqt-loss, #ef4444); }
.qqt-module-modal-body {
	flex: 1;
	overflow: auto;
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
@media (max-width: 620px) {
	.qqt-module-modal-body { grid-template-columns: 1fr; }
}
.qqt-module-item {
	display: flex; flex-direction: column; gap: 4px;
	padding: 12px 14px;
	background: var(--qqt-bg-2, #0f1724);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 6px;
	color: var(--qqt-text, #e6edf7);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
	font-family: inherit;
}
.qqt-module-item:hover {
	border-color: var(--qqt-accent, #10b981);
	background: var(--qqt-panel, #131c2b);
}
.qqt-module-item strong { font-size: 13px; font-weight: 700; }
.qqt-module-item span { font-size: 11px; color: var(--qqt-text-muted, #8b97ab); line-height: 1.4; }
.qqt-module-stub {
	display: inline-block;
	margin-top: 4px; padding: 2px 6px;
	background: var(--qqt-panel-2, #1a2435);
	border-radius: 4px;
	font-size: 10px; font-style: normal; font-weight: 600;
	color: var(--qqt-text-muted, #8b97ab);
	align-self: flex-start;
	transition: background 0.2s, color 0.2s;
}
.qqt-module-stub.is-highlight { background: #fbbf24; color: #000; }

/* ─── Button visibility in the chart tools row — v1.2.5 forced contrast ─── */
.qqt-ctool-btn {
	background: var(--qqt-panel, #131c2b) !important;
	border: 1px solid var(--qqt-border-hi, #2c3c55) !important;
	color: var(--qqt-text, #e6edf7) !important;
	opacity: 1 !important;
}
.qqt-ctool-btn:hover {
	border-color: var(--qqt-accent, #10b981) !important;
	color: var(--qqt-accent, #10b981) !important;
}
.qqt-ctool-btn.active {
	background: var(--qqt-accent, #10b981) !important;
	color: #fff !important;
	border-color: var(--qqt-accent, #10b981) !important;
}
/* Light mode tweaks */
body[data-site-theme="light"] .qqt-ctool-btn {
	background: #fff !important;
	border-color: #cbd5e1 !important;
	color: #1a202c !important;
}

/* Maximise + Layout reset buttons — always visible now */
.qqt-maximise-toggle, .qqt-layout-reset, .qqt-site-theme-toggle {
	background: var(--qqt-panel, #131c2b) !important;
	border: 1px solid var(--qqt-border-hi, #2c3c55) !important;
	color: var(--qqt-text, #e6edf7) !important;
}
body[data-site-theme="light"] .qqt-maximise-toggle,
body[data-site-theme="light"] .qqt-layout-reset,
body[data-site-theme="light"] .qqt-site-theme-toggle {
	background: #fff !important;
	border-color: #cbd5e1 !important;
	color: #1a202c !important;
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.2.6 — Button visibility (light mode), toolbox polish, transaction
 *  area bottom boundary, popover position above button
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Force-visible buttons in the timeframe bar across all themes ─── */
/* Previous v1.2.5 fix only targeted .qqt-ctool-btn (in chart tools row)
 * but the maximise, layout-reset, and site-theme toggles live in the
 * TIMEFRAME bar. They needed their own explicit rules. */
body[data-site-theme="light"] .qqt-site-theme-toggle,
body[data-site-theme="light"] .qqt-maximise-toggle,
body[data-site-theme="light"] .qqt-layout-reset {
	background: #ffffff !important;
	border: 1px solid #94a3b8 !important;
	color: #0f172a !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
body[data-site-theme="light"] .qqt-site-theme-toggle svg,
body[data-site-theme="light"] .qqt-maximise-toggle svg,
body[data-site-theme="light"] .qqt-layout-reset svg {
	stroke: #0f172a;
	color: #0f172a;
}
body[data-site-theme="light"] .qqt-site-theme-toggle:hover,
body[data-site-theme="light"] .qqt-maximise-toggle:hover,
body[data-site-theme="light"] .qqt-layout-reset:hover {
	border-color: #10b981 !important;
	color: #10b981 !important;
}
body[data-site-theme="light"] .qqt-site-theme-toggle:hover svg,
body[data-site-theme="light"] .qqt-maximise-toggle:hover svg,
body[data-site-theme="light"] .qqt-layout-reset:hover svg {
	stroke: #10b981;
}

/* Dusk + Dark — same treatment but with dark panel background */
body[data-site-theme="dusk"]  .qqt-site-theme-toggle,
body[data-site-theme="dusk"]  .qqt-maximise-toggle,
body[data-site-theme="dusk"]  .qqt-layout-reset,
body[data-site-theme="dark"]  .qqt-site-theme-toggle,
body[data-site-theme="dark"]  .qqt-maximise-toggle,
body[data-site-theme="dark"]  .qqt-layout-reset {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	color: #e6edf7 !important;
}
body[data-site-theme="dusk"] .qqt-site-theme-toggle svg,
body[data-site-theme="dusk"] .qqt-maximise-toggle svg,
body[data-site-theme="dusk"] .qqt-layout-reset svg,
body[data-site-theme="dark"] .qqt-site-theme-toggle svg,
body[data-site-theme="dark"] .qqt-maximise-toggle svg,
body[data-site-theme="dark"] .qqt-layout-reset svg {
	stroke: #e6edf7;
}

/* ─── Toolbox collapse button — always visible, not opaque ─── */
.qqt-toolbox-action {
	background: rgba(16, 185, 129, 0.12) !important;
	border-color: rgba(16, 185, 129, 0.4) !important;
	color: #10b981 !important;
	opacity: 1 !important;
}
.qqt-toolbox-action:hover {
	background: #10b981 !important;
	color: #ffffff !important;
}
.qqt-toolbox-action svg {
	stroke: currentColor;
}

/* ─── Transaction area bottom boundary ─── */
/* The left appshell column has a subtle bottom border so tabs/content
 * don't visually bleed into the toolbox area. */
.qqt-appshell-left {
	border-bottom: 1px solid var(--qqt-border, #223044);
}
.qqt-appshell-positions {
	border-bottom: 2px solid var(--qqt-border-hi, #2c3c55);
}

/* ─── Trade marker P&L pill (canvas-drawn, but the chart stage has
 *     a small floating legend when markers are present) ─── */
.qqt-trade-marker-legend {
	position: absolute;
	top: 8px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	background: rgba(15, 23, 42, 0.7);
	color: #e6edf7;
	border-radius: 20px;
	font-size: 10px;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	pointer-events: none;
	z-index: 20;
	backdrop-filter: blur(6px);
}
body[data-site-theme="light"] .qqt-trade-marker-legend {
	background: rgba(255, 255, 255, 0.85);
	color: #0f172a;
	border: 1px solid #cbd5e1;
}

/* ─── Popovers should open ABOVE their triggering button, never below ─── */
/* Strategy + theme popovers — anchor to bottom so they expand upward */
.qqt-theme-popover,
.qqt-strategy-popover {
	/* v1.2.6 — put the popover's bottom edge near the triggering row
	 * rather than the top edge (previous "top: 100%" style). Each popover
	 * already uses position: absolute so this just inverts anchor. */
	bottom: calc(100% + 6px);
	top: auto !important;
}

/* ─── Module modals — make sure minimise expands UP, not down ─── */
.qqt-module-modal.is-min .qqt-module-modal-inner {
	bottom: 80px; /* sit above the footer */
}

/* Mobile — vertical stack */
@media (max-width: 820px) {
	.qqt-appshell {
		grid-template-columns: 1fr !important;
		grid-template-rows: minmax(200px, auto) 1fr;
	}
	.qqt-appshell-left {
		max-height: 35vh;
	}
	.qqt-resizer { display: none !important; }
	.qqt-site-theme-toggle .qqt-site-theme-label { display: none; }
	.qqt-toolbox-panels {
		grid-template-columns: 1fr !important;
	}
	.qqt-chart-tools-row { overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.2.7 — Dual-panel Toolbox (Contract + Spot side by side),
 *  resize actually resizes, mobile stacking, disclaimer ribbon
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Force toolbox height to track the CSS var set by applyLayout() ─── */
/* Previous versions wrote `.style.height` inline but a higher-specificity
 * rule in the cascade was clobbering it, so the resize handle moved but
 * the toolbox stayed put. Using a custom property with min AND max AND
 * height all locked to the same variable eliminates that.               */
.qqt-appshell {
	--qqt-toolbox-h: 280px;
	--qqt-left-w: 320px;
}
.qqt-toolbox.qqt-aviator-panels {
	height: var(--qqt-toolbox-h) !important;
	min-height: var(--qqt-toolbox-h) !important;
	max-height: var(--qqt-toolbox-h) !important;
	flex: 0 0 var(--qqt-toolbox-h) !important;
	transition: none; /* drag should be 1:1, not eased */
}
.qqt-toolbox.qqt-aviator-panels.is-collapsed {
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	flex-basis: 48px !important;
}
/* Re-align the vertical resizer to the current toolbox height via var */
.qqt-resizer--v {
	bottom: var(--qqt-toolbox-h) !important;
}

/* ─── Dual-panel grid ─── */
.qqt-toolbox-panels--dual {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 10px 14px;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.qqt-tbox-pane {
	display: flex;
	flex-direction: column;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 10px;
	overflow: hidden;
	min-height: 0;
}
/* Contract pane has a green accent top-border; Spot has blue */
.qqt-tbox-pane--contract { border-top: 3px solid #10b981; }
.qqt-tbox-pane--spot     { border-top: 3px solid #3b82f6; }

.qqt-tbox-pane-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--qqt-bg-2, #0f1724);
	border-bottom: 1px solid var(--qqt-border, #223044);
	flex-shrink: 0;
}
.qqt-tbox-pane-head-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border-radius: 6px;
	flex-shrink: 0;
}
.qqt-tbox-pane--contract .qqt-tbox-pane-head-icon { background: rgba(16,185,129,0.15); color: #10b981; }
.qqt-tbox-pane--spot     .qqt-tbox-pane-head-icon { background: rgba(59,130,246,0.15); color: #3b82f6; }

.qqt-tbox-pane-head-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--qqt-text, #e6edf7);
}
.qqt-tbox-pane-head-sub {
	flex: 1;
	font-size: 10px;
	color: var(--qqt-text-muted, #8b97ab);
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.3px;
}
.qqt-tbox-pane-collapse {
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	font-family: inherit;
	padding: 0;
	line-height: 1;
	flex-shrink: 0;
}
.qqt-tbox-pane-collapse:hover {
	background: var(--qqt-panel-2, #1a2435);
	color: var(--qqt-text, #e6edf7);
}
.qqt-tbox-pane-collapse-glyph { font-size: 15px; font-weight: 700; line-height: 1; }
.qqt-tbox-pane.is-collapsed .qqt-tbox-pane-collapse-glyph::before { content: '+'; }
.qqt-tbox-pane.is-collapsed .qqt-tbox-pane-collapse-glyph { font-size: 0; }
.qqt-tbox-pane.is-collapsed .qqt-tbox-pane-body { display: none; }

.qqt-tbox-pane-body {
	flex: 1;
	padding: 10px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
}

/* Stacked Rise/Fall for Contract pane; Buy/Sell for Spot pane */
.qqt-tbox-contract-actions,
.qqt-tbox-spot-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin-top: auto;
}
.qqt-tbox-pane .qqt-avi-action-btn {
	padding: 10px 8px;
	font-size: 13px;
	border-radius: 8px;
}

/* Contract actions: green for Rise, red for Fall */
.qqt-tbox-pane--contract .qqt-avi-action-btn--buy  { background: #10b981; }
.qqt-tbox-pane--contract .qqt-avi-action-btn--sell { background: #ef4444; }
/* Spot actions: blue for Buy, orange for Sell */
.qqt-tbox-pane--spot     .qqt-avi-action-btn--buy  { background: #3b82f6; }
.qqt-tbox-pane--spot     .qqt-avi-action-btn--sell { background: #f59e0b; }

/* Subtitle next to the toolbox title */
.qqt-toolbox-subtitle {
	font-size: 9px;
	font-weight: 600;
	color: var(--qqt-text-muted, #8b97ab);
	margin-left: 8px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Disclaimer ribbon at the bottom of the toolbox */
.qqt-toolbox-disclaimer {
	margin: 0;
	padding: 6px 16px;
	background: var(--qqt-bg-2, #0f1724);
	border-top: 1px solid var(--qqt-border, #223044);
	font-size: 10px;
	font-style: italic;
	color: var(--qqt-text-muted, #8b97ab);
	text-align: center;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}
body[data-site-theme="light"] .qqt-toolbox-disclaimer {
	background: #f1f5f9;
	color: #475569;
	border-top-color: #cbd5e1;
}

/* Light-mode tweaks for new toolbox */
body[data-site-theme="light"] .qqt-tbox-pane {
	background: #ffffff;
	border-color: #d8dee7;
}
body[data-site-theme="light"] .qqt-tbox-pane-head {
	background: #f8fafc;
	border-bottom-color: #d8dee7;
}
body[data-site-theme="light"] .qqt-tbox-pane-head-label { color: #0f172a; }

/* ─── Mobile: stack panes vertically, smaller everything ─── */
@media (max-width: 820px) {
	.qqt-toolbox-panels--dual {
		grid-template-columns: 1fr;
		padding: 8px 10px;
		gap: 8px;
		overflow-y: auto;
	}
	.qqt-tbox-pane-body { gap: 6px; padding: 8px 10px; }
	.qqt-toolbox.qqt-aviator-panels {
		/* Give mobile users a taller toolbox because we're now stacked */
		--qqt-toolbox-h: 360px;
	}
	.qqt-avi-hotbtn { width: 28px; height: 28px; }
	.qqt-avi-hotbtn-num { font-size: 11px; }
	.qqt-avi-hotbtn-freq { font-size: 8px; }
	.qqt-tbox-pane .qqt-avi-action-btn { padding: 10px 6px; font-size: 12px; }
	.qqt-avi-chip { font-size: 10px; padding: 4px 0; }
}

/* ─── Transaction area resize handle — a small 4px bar between
 *     Market Watch and Positions that drags to resize the
 *     positions (transactions) panel height. */
.qqt-left-resizer {
	height: 6px;
	width: 100%;
	background: transparent;
	cursor: row-resize;
	position: relative;
	user-select: none;
	flex-shrink: 0;
}
.qqt-left-resizer::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 2px;
	transform: translateX(-50%);
	width: 28px; height: 2px;
	border-radius: 2px;
	background: var(--qqt-border-hi, #2c3c55);
	transition: background 0.12s;
}
.qqt-left-resizer:hover::after,
.qqt-left-resizer.is-dragging::after { background: #10b981; }

/* Make the left column a grid whose middle row is sized by a CSS var. */
.qqt-appshell-left {
	display: flex;
	flex-direction: column;
}
.qqt-appshell-positions {
	flex-basis: var(--qqt-positions-h, 40%);
	min-height: 120px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.qqt-appshell-market-watch { flex: 1; min-height: 120px; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.0 — Multi-chart tiling (up to 4 charts side-by-side or 2×2)
 * ═══════════════════════════════════════════════════════════════════ */

.qqt-chart-grid {
	flex: 1;
	min-height: 0;
	display: grid;
	gap: 4px;
	background: var(--qqt-bg, #0b111a);
	overflow: hidden;
	padding: 0;
}
.qqt-chart-grid[data-count="1"] { grid-template-columns: 1fr;               grid-template-rows: 1fr;       }
.qqt-chart-grid[data-count="2"] { grid-template-columns: 1fr 1fr;           grid-template-rows: 1fr;       }
.qqt-chart-grid[data-count="3"] { grid-template-columns: 1fr 1fr 1fr;       grid-template-rows: 1fr;       }
.qqt-chart-grid[data-count="4"] { grid-template-columns: 1fr 1fr;           grid-template-rows: 1fr 1fr;   }

@media (max-width: 820px) {
	/* On mobile, always stack vertically regardless of count */
	.qqt-chart-grid[data-count="2"],
	.qqt-chart-grid[data-count="3"],
	.qqt-chart-grid[data-count="4"] {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* Individual cell */
.qqt-chart-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--qqt-bg-2, #0f1724);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 6px;
	overflow: hidden;
	min-width: 0; min-height: 0;
	transition: border-color 0.12s;
}
.qqt-chart-cell.is-active {
	border-color: var(--qqt-accent, #10b981);
	box-shadow: 0 0 0 1px var(--qqt-accent, #10b981);
}
.qqt-chart-cell.is-minimised {
	/* Collapse to just the header */
	grid-row: auto;
	max-height: 34px;
}
.qqt-chart-cell.is-minimised .qqt-chart-stage { display: none; }
.qqt-chart-cell.is-maximised {
	/* Temporary full-grid takeover */
	grid-column: 1 / -1 !important;
	grid-row: 1 / -1 !important;
	z-index: 4;
}

.qqt-chart-cell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 10px;
	background: var(--qqt-panel, #131c2b);
	border-bottom: 1px solid var(--qqt-border, #223044);
	flex-shrink: 0;
	cursor: pointer; /* click header to activate chart */
	user-select: none;
}
.qqt-chart-cell-title {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 11px;
	color: var(--qqt-text-muted, #8b97ab);
}
.qqt-chart-cell-market {
	font-weight: 700;
	color: var(--qqt-text, #e6edf7);
	font-size: 12px;
}
.qqt-chart-cell.is-active .qqt-chart-cell-market { color: var(--qqt-accent, #10b981); }
.qqt-chart-cell-tf {
	font-family: 'JetBrains Mono', monospace;
	padding: 1px 5px;
	background: var(--qqt-bg-2, #0f1724);
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
}

.qqt-chart-cell-actions {
	display: inline-flex;
	gap: 2px;
}
.qqt-chart-cell-btn {
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.qqt-chart-cell-btn:hover {
	background: var(--qqt-panel-2, #1a2435);
	color: var(--qqt-text, #e6edf7);
	border-color: var(--qqt-border, #223044);
}
.qqt-chart-cell-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.qqt-chart-cell-btn--close:hover {
	background: var(--qqt-loss, #ef4444);
	color: #fff;
	border-color: var(--qqt-loss, #ef4444);
}
/* When there are 2+ cells, the close buttons become enabled (JS removes [disabled]) */

.qqt-chart-cell .qqt-chart-stage {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
}
.qqt-chart-cell .qqt-trader-chart { width: 100%; height: 100%; display: block; }

/* Re-home the digit strip inside each cell */
.qqt-chart-cell .qqt-chart-digits {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 15;
	display: flex;
	gap: 4px;
	align-items: center;
	pointer-events: auto;
}
/* When cell count >= 2, shrink the digit strip so it fits */
.qqt-chart-grid[data-count="2"] .qqt-chart-cell .qqt-chart-digit,
.qqt-chart-grid[data-count="3"] .qqt-chart-cell .qqt-chart-digit,
.qqt-chart-grid[data-count="4"] .qqt-chart-cell .qqt-chart-digit {
	width: 28px; height: 28px;
	font-size: 10px;
}
.qqt-chart-grid[data-count="2"] .qqt-chart-digit .digit-num,
.qqt-chart-grid[data-count="3"] .qqt-chart-digit .digit-num,
.qqt-chart-grid[data-count="4"] .qqt-chart-digit .digit-num { font-size: 11px; }
.qqt-chart-grid[data-count="2"] .qqt-chart-digit .digit-freq,
.qqt-chart-grid[data-count="3"] .qqt-chart-digit .digit-freq,
.qqt-chart-grid[data-count="4"] .qqt-chart-digit .digit-freq { font-size: 7px; }

/* Multi-chart toolbar (between chart grid and toolbox) */
.qqt-multichart-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 14px;
	background: var(--qqt-panel, #131c2b);
	border-top: 1px solid var(--qqt-border, #223044);
	border-bottom: 1px solid var(--qqt-border, #223044);
	flex-shrink: 0;
	font-size: 11px;
}
.qqt-mc-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	color: #10b981;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	font-size: 11px;
}
.qqt-mc-btn:hover { background: #10b981; color: #fff; }
.qqt-mc-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.qqt-mc-tile-group {
	display: inline-flex;
	background: var(--qqt-bg, #0b111a);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	padding: 2px;
}
.qqt-mc-tile-btn {
	width: 26px; height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	border-radius: 3px;
	padding: 0;
}
.qqt-mc-tile-btn:hover { background: var(--qqt-panel-2, #1a2435); color: var(--qqt-text, #e6edf7); }
.qqt-mc-tile-btn.active { background: var(--qqt-accent, #10b981); color: #fff; }

.qqt-mc-tile-glyph {
	display: inline-grid;
	gap: 1px;
	background: currentColor;
	padding: 2px;
	border-radius: 2px;
}
.qqt-mc-tile-glyph--1 { width: 12px; height: 10px; background: currentColor; }
.qqt-mc-tile-glyph--2 { width: 14px; height: 10px; grid-template-columns: 1fr 1fr; }
.qqt-mc-tile-glyph--2::before, .qqt-mc-tile-glyph--2::after { content: ''; background: var(--qqt-panel, #131c2b); }
.qqt-mc-tile-glyph--3 { width: 18px; height: 10px; grid-template-columns: 1fr 1fr 1fr; }
.qqt-mc-tile-glyph--3::before, .qqt-mc-tile-glyph--3::after { content: ''; background: var(--qqt-panel, #131c2b); }
.qqt-mc-tile-glyph--3 { position: relative; }
.qqt-mc-tile-glyph--3 .mid { background: var(--qqt-panel, #131c2b); }
.qqt-mc-tile-glyph--4 { width: 14px; height: 12px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.qqt-mc-tile-glyph--4::before, .qqt-mc-tile-glyph--4::after,
.qqt-mc-tile-btn.active .qqt-mc-tile-glyph--4::before { content: ''; background: var(--qqt-panel, #131c2b); }

.qqt-mc-active-hint {
	margin-left: auto;
	color: var(--qqt-text-muted, #8b97ab);
	font-size: 11px;
}
.qqt-mc-active-hint strong {
	color: var(--qqt-accent, #10b981);
	font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.0 — File menu, View toggles, Save template, Drawing tools,
 *  Indicator configurability, Free-drag Toolbox
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── File menu (top-left of app bar) ─── */
.qqt-file-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
}
.qqt-file-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid var(--qqt-border-hi, #2c3c55);
	border-radius: 6px;
	color: var(--qqt-text, #e6edf7);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.qqt-file-menu-trigger:hover {
	background: var(--qqt-panel-2, #1a2435);
	border-color: var(--qqt-accent, #10b981);
}
.qqt-file-menu-trigger[aria-expanded="true"] {
	background: var(--qqt-accent, #10b981);
	color: #fff;
	border-color: var(--qqt-accent, #10b981);
}
.qqt-file-menu-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 260px;
	padding: 6px;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	z-index: 2500;
}
.qqt-file-menu-dropdown[hidden] { display: none; }
.qqt-file-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	color: var(--qqt-text, #e6edf7);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 5px;
	text-align: left;
}
.qqt-file-menu-item:hover { background: var(--qqt-panel-2, #1a2435); }
.qqt-file-check {
	display: inline-flex;
	width: 14px;
	justify-content: center;
	color: var(--qqt-accent, #10b981);
	font-weight: 700;
	flex-shrink: 0;
}
.qqt-file-menu-item[aria-checked="false"] .qqt-file-check { visibility: hidden; }
.qqt-file-menu-sep {
	height: 1px;
	background: var(--qqt-border, #223044);
	margin: 4px 2px;
}

/* ─── Hidden-panel states ─── */
.qqt-appshell.is-hide-market-watch .qqt-appshell-market-watch { display: none !important; }
.qqt-appshell.is-hide-positions    .qqt-appshell-positions    { display: none !important; }
.qqt-appshell.is-hide-positions    .qqt-left-resizer          { display: none !important; }
.qqt-appshell.is-hide-toolbox      .qqt-toolbox               { display: none !important; }
.qqt-appshell.is-hide-toolbox      .qqt-resizer--v            { display: none !important; }
.qqt-appshell.is-hide-digit-strip  .qqt-chart-digits          { display: none !important; }

/* ─── Save Template modal ─── */
.qqt-save-template-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	animation: qqtStmIn 0.12s ease-out;
}
@keyframes qqtStmIn { from { opacity: 0; } to { opacity: 1; } }
.qqt-save-template-modal-inner {
	width: 440px;
	max-width: calc(100vw - 32px);
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 10px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.qqt-stm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-border, #223044);
	background: var(--qqt-panel-2, #1a2435);
}
.qqt-stm-head strong { font-size: 14px; color: var(--qqt-text, #e6edf7); }
.qqt-stm-close {
	width: 24px; height: 24px;
	background: transparent;
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	font-size: 14px;
}
.qqt-stm-close:hover { background: var(--qqt-loss, #ef4444); color: #fff; border-color: var(--qqt-loss, #ef4444); }
.qqt-stm-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.qqt-stm-field label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--qqt-text-muted, #8b97ab);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 4px;
}
.qqt-stm-field input,
.qqt-stm-field textarea {
	width: 100%;
	padding: 8px 10px;
	background: var(--qqt-bg-2, #0f1724);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 6px;
	color: var(--qqt-text, #e6edf7);
	font: inherit;
	font-size: 12px;
}
.qqt-stm-field input:focus,
.qqt-stm-field textarea:focus {
	outline: none;
	border-color: var(--qqt-accent, #10b981);
}
.qqt-stm-snapshot {
	padding: 10px 12px;
	background: var(--qqt-bg-2, #0f1724);
	border: 1px dashed var(--qqt-border, #223044);
	border-radius: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-text-muted, #8b97ab);
	line-height: 1.6;
}
.qqt-stm-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--qqt-border, #223044);
}
.qqt-stm-btn {
	padding: 8px 16px;
	border-radius: 6px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--qqt-border, #223044);
	background: transparent;
	color: var(--qqt-text, #e6edf7);
}
.qqt-stm-btn--primary {
	background: var(--qqt-accent, #10b981);
	border-color: var(--qqt-accent, #10b981);
	color: #fff;
}
.qqt-stm-btn--primary:hover { filter: brightness(1.08); }

/* ─── Indicator hover card + settings modal ─── */
.qqt-indicator-hover-card {
	position: fixed;
	background: rgba(15, 23, 42, 0.94);
	color: #fff;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 11px;
	font-family: 'Inter', sans-serif;
	pointer-events: none;
	z-index: 2500;
	max-width: 240px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	line-height: 1.5;
}
.qqt-indicator-hover-card strong {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
	color: var(--qqt-accent, #10b981);
}
.qqt-indicator-hover-card .qqt-ihc-params {
	font-family: 'JetBrains Mono', monospace;
	color: rgba(255, 255, 255, 0.7);
	font-size: 10px;
}
.qqt-indicator-hover-card .qqt-ihc-hint {
	margin-top: 4px;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}

/* ─── Drawing tools — crosshair cursor on chart when a tool is active ─── */
.qqt-chart-stage[data-drawing-tool] { cursor: crosshair; }
.qqt-chart-stage[data-drawing-tool="text"] { cursor: text; }
.qqt-drawing-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
}

/* Drawing-tool picker — tweak module modal for drawing mode */
.qqt-module-item--active {
	border-color: var(--qqt-accent, #10b981) !important;
	background: rgba(16, 185, 129, 0.08) !important;
}
.qqt-module-item--active strong::after {
	content: ' · Active';
	color: var(--qqt-accent, #10b981);
	font-size: 10px;
	font-weight: 700;
}

/* Cancel-drawing banner */
.qqt-drawing-banner {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--qqt-accent, #10b981);
	color: #fff;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	z-index: 25;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.qqt-drawing-banner-cancel {
	background: rgba(255, 255, 255, 0.2);
	border: 0;
	color: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
}

/* ─── Free-drag Toolbox (undocked floating mode) ─── */
.qqt-toolbox.is-floating {
	position: fixed !important;
	top: 80px;
	left: calc(50% - 340px);
	width: 680px !important;
	height: auto !important;
	min-height: 220px !important;
	max-height: 70vh !important;
	z-index: 1500;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	border: 1px solid var(--qqt-border, #223044);
}
.qqt-toolbox.is-floating .qqt-toolbox-header { cursor: move; user-select: none; }
.qqt-toolbox-dock-btn {
	margin-left: 4px;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	font-size: 11px;
	line-height: 1;
}
.qqt-toolbox-dock-btn:hover { background: var(--qqt-panel-2, #1a2435); color: var(--qqt-text, #e6edf7); }

/* Mobile — file menu squishes to icon only */
@media (max-width: 820px) {
	.qqt-file-menu-trigger span { display: none; }
	.qqt-file-menu-dropdown { left: -8px; min-width: 220px; }
	.qqt-toolbox.is-floating {
		left: 8px !important;
		width: calc(100vw - 16px) !important;
		top: 60px;
	}
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.1 — AI auto-trade toggle, footer visibility, panel polish
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── AI auto-trade toggle (replaces Manual/Auto tabs) ─── */
.qqt-ai-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	margin-top: 8px;
	background: transparent;
	border: 1px dashed var(--qqt-border-hi, #2c3c55);
	border-radius: 8px;
	color: var(--qqt-text-muted, #8b97ab);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qqt-ai-toggle:hover {
	background: rgba(99, 102, 241, 0.08);
	border-color: #818cf8;
	color: #a5b4fc;
	border-style: solid;
}
.qqt-ai-toggle.is-ai {
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	border: 1px solid #6366f1;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.qqt-ai-toggle.is-ai:hover {
	filter: brightness(1.1);
}
.qqt-ai-toggle svg {
	flex-shrink: 0;
	transition: transform 0.3s;
}
.qqt-ai-toggle.is-ai svg {
	transform: rotate(180deg);
}

body[data-site-theme="light"] .qqt-ai-toggle {
	border-color: #cbd5e1;
	color: #475569;
}
body[data-site-theme="light"] .qqt-ai-toggle:hover {
	background: rgba(99, 102, 241, 0.05);
	border-color: #6366f1;
	color: #4338ca;
}

/* ─── Ensure the website footer is visible below the toolbox ─── */
/* The appshell uses flex with `height: calc(100vh - appbar - appfooter)`.
 * On some themes where the theme's own footer is used, the appshell
 * could shrink the toolbox enough that the footer clips. Give the main
 * body content a non-zero min-height below the appshell. */
.qqt-trader-root + .site-footer,
.qqt-trader-root ~ footer,
footer.qqt-site-footer {
	display: block !important;
	visibility: visible !important;
	position: relative;
	z-index: 5;
}
body.qqt-has-trader .site-content { overflow-y: auto; }

/* ─── Polish: wider gap between action buttons and AI toggle ─── */
.qqt-tbox-contract-actions,
.qqt-tbox-spot-actions {
	margin-top: auto;  /* push action pair to bottom of panel body */
}

/* ─── Zoom buttons subtle grouping in chart tools row ─── */
#qqt-ctool-zoom-out,
#qqt-ctool-zoom-in,
#qqt-ctool-zoom-reset {
	position: relative;
}
#qqt-ctool-zoom-reset {
	margin-right: 6px;
}
#qqt-ctool-zoom-in + * {
	margin-left: 2px;
}

/* ─── Mobile: AI toggle smaller ─── */
@media (max-width: 820px) {
	.qqt-ai-toggle {
		padding: 8px 10px;
		font-size: 10px;
	}
	.qqt-ai-toggle svg { width: 11px; height: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.2 — Multi-chart: drag-drop, context menu, per-cell TF,
 *  live title-bar price, full-workspace maximize, toast variants
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Drag-drop visual feedback ─── */
.qqt-mw-row[draggable="true"] { cursor: grab; }
.qqt-mw-row[draggable="true"]:active { cursor: grabbing; }

.qqt-mw-drag-ghost {
	position: fixed;
	top: -1000px; left: -1000px;
	padding: 6px 12px;
	background: var(--qqt-accent, #10b981);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
	white-space: nowrap;
	pointer-events: none;
	font-family: 'Inter', sans-serif;
	z-index: 9999;
}

body.qqt-dragging-market .qqt-chart-grid { position: relative; }
body.qqt-dragging-market .qqt-chart-grid::before {
	content: 'Drop to open or replace chart';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 185, 129, 0.04);
	border: 2px dashed rgba(16, 185, 129, 0.4);
	color: #10b981;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	pointer-events: none;
	z-index: 20;
	border-radius: 6px;
	opacity: 0.7;
}
body.qqt-dragging-market .qqt-chart-cell { transition: transform 0.15s, box-shadow 0.15s; }
.qqt-chart-cell.is-drag-target {
	box-shadow: inset 0 0 0 2px var(--qqt-accent, #10b981) !important;
	background: rgba(16, 185, 129, 0.06) !important;
	transform: scale(0.99);
}
.qqt-chart-grid.is-drag-target { box-shadow: inset 0 0 0 3px var(--qqt-accent, #10b981); }

/* Hidden rows via right-click → "Hide from Market Watch" */
.qqt-mw-row.is-mw-hidden { display: none; }
/* Favourite rows get a subtle gold tick */
.qqt-mw-row.is-mw-fav .qqt-mw-symbol-mark::after {
	content: '★';
	position: absolute;
	top: -3px; right: -3px;
	font-size: 9px;
	color: #fbbf24;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
.qqt-mw-row.is-mw-fav .qqt-mw-symbol-mark { position: relative; }

/* ─── Right-click context menu ─── */
.qqt-mw-ctx {
	position: fixed;
	min-width: 220px;
	padding: 4px;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3);
	z-index: 3500;
	animation: qqtCtxIn 0.08s ease-out;
	font-family: 'Inter', sans-serif;
}
@keyframes qqtCtxIn {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
.qqt-mw-ctx-head {
	padding: 6px 10px 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--qqt-text-muted, #8b97ab);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-bottom: 1px solid var(--qqt-border, #223044);
	margin-bottom: 4px;
}
.qqt-mw-ctx-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	background: transparent;
	border: 0;
	color: var(--qqt-text, #e6edf7);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	border-radius: 4px;
	text-align: left;
}
.qqt-mw-ctx-item:hover { background: var(--qqt-accent, #10b981); color: #fff; }
.qqt-mw-ctx-item:hover svg { stroke: #fff; }
.qqt-mw-ctx-item svg { stroke: var(--qqt-text-muted, #8b97ab); flex-shrink: 0; }
.qqt-mw-ctx-sep { height: 1px; background: var(--qqt-border, #223044); margin: 4px 2px; }

/* Light mode polish for context menu */
body[data-site-theme="light"] .qqt-mw-ctx {
	background: #ffffff;
	border-color: #cbd5e1;
	box-shadow: 0 12px 32px rgba(15,23,42,0.18);
}
body[data-site-theme="light"] .qqt-mw-ctx-item { color: #0f172a; }
body[data-site-theme="light"] .qqt-mw-ctx-item svg { stroke: #64748b; }

/* ─── Per-cell timeframe bar + live price ─── */
.qqt-chart-cell-tfbar {
	display: inline-flex;
	gap: 2px;
	margin-left: 10px;
	padding: 2px;
	background: var(--qqt-bg-2, #0f1724);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 5px;
}
.qqt-cell-tfbtn {
	padding: 3px 7px;
	background: transparent;
	border: 0;
	color: var(--qqt-text-muted, #8b97ab);
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 600;
	border-radius: 3px;
	cursor: pointer;
	line-height: 1;
}
.qqt-cell-tfbtn:hover { background: rgba(255,255,255,0.05); color: var(--qqt-text, #e6edf7); }
.qqt-cell-tfbtn.active {
	background: var(--qqt-accent, #10b981);
	color: #fff;
}
body[data-site-theme="light"] .qqt-chart-cell-tfbar {
	background: #f1f5f9;
	border-color: #cbd5e1;
}
body[data-site-theme="light"] .qqt-cell-tfbtn { color: #475569; }
body[data-site-theme="light"] .qqt-cell-tfbtn:hover { background: #e2e8f0; color: #0f172a; }

.qqt-chart-cell-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--qqt-text, #e6edf7);
	margin-left: 6px;
	padding: 2px 6px;
	background: var(--qqt-bg-2, #0f1724);
	border-radius: 3px;
	min-width: 60px;
	display: inline-block;
	text-align: right;
	transition: color 0.25s, background 0.25s;
}
.qqt-chart-cell-price.is-up   { color: #10b981; }
.qqt-chart-cell-price.is-down { color: #ef4444; }

/* Hide tfbar on very small cells to avoid overflow */
.qqt-chart-grid[data-count="3"] .qqt-chart-cell-tfbar,
.qqt-chart-grid[data-count="4"] .qqt-chart-cell-tfbar {
	display: none;
}
@media (max-width: 820px) {
	.qqt-chart-cell-tfbar, .qqt-chart-cell-price { display: none; }
}

/* ─── Full-workspace maximize ─── */
.qqt-chart-grid.is-single-max {
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr !important;
}
.qqt-chart-cell.is-max-solo  { grid-column: 1 / -1; grid-row: 1 / -1; }
.qqt-chart-cell.is-max-hidden { display: none !important; }

.qqt-max-restore {
	position: fixed;
	top: 72px;
	right: 16px;
	z-index: 3200;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--qqt-accent, #10b981);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
	animation: qqtFadeIn 0.15s ease-out;
}
@keyframes qqtFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.qqt-max-restore:hover { filter: brightness(1.08); }

/* ─── Toast variants ─── */
.qqt-toast { pointer-events: none; }
.qqt-toast--warn {
	background: #f59e0b !important;
	color: #1a0f00 !important;
}
.qqt-toast--error {
	background: var(--qqt-loss, #ef4444) !important;
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.3 — Bubble, lock, trade details, MT5 one-click widget,
 *  tighter toolbox, cell minimise, tablet/mobile polish
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Collapsed-toolbox floating bubble (bottom-right) ─── */
.qqt-toolbox-bubble {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 54px; height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, #10b981, #059669);
	color: #fff;
	border: 0;
	box-shadow: 0 8px 24px rgba(16,185,129,0.45), 0 2px 6px rgba(0,0,0,0.25);
	cursor: pointer;
	z-index: 3400;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s, box-shadow 0.18s;
	animation: qqtBubbleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.qqt-toolbox-bubble[hidden] { display: none; }
.qqt-toolbox-bubble:hover { transform: scale(1.07); box-shadow: 0 12px 32px rgba(16,185,129,0.6); }
.qqt-toolbox-bubble-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid #10b981;
	opacity: 0.6;
	animation: qqtPulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes qqtPulse {
	0%   { transform: scale(0.9); opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}
@keyframes qqtBubbleIn {
	from { transform: scale(0) rotate(-90deg); }
	to   { transform: scale(1) rotate(0); }
}
/* When bubble is active, hide the toolbox entirely */
body.qqt-toolbox-bubbled .qqt-toolbox.qqt-aviator-panels { display: none !important; }
body.qqt-toolbox-bubbled .qqt-resizer--v { display: none !important; }

/* ─── Toolbox lock state ─── */
body.qqt-toolbox-locked .qqt-resizer--v { pointer-events: none; opacity: 0.2; }
body.qqt-toolbox-locked .qqt-toolbox.is-floating .qqt-toolbox-header { cursor: default !important; }
.qqt-toolbox.is-locked .qqt-toolbox-lock {
	background: var(--qqt-accent, #10b981) !important;
	color: #fff !important;
	border-color: var(--qqt-accent, #10b981) !important;
}

/* ─── Per-cell minimise actually works now ─── */
.qqt-chart-cell.is-minimised {
	grid-row: auto !important;
	min-height: 0 !important;
	max-height: 40px !important;
	overflow: hidden !important;
}
.qqt-chart-cell.is-minimised .qqt-chart-stage { display: none !important; }
.qqt-chart-cell.is-minimised .qqt-chart-cell-head {
	background: var(--qqt-panel-2, #1a2435);
	opacity: 0.8;
}

/* ─── MT5-style one-click Buy/Sell widget (per-chart top-right) ─── */
.qqt-oneclick {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 12;
	font-family: 'JetBrains Mono', monospace;
}
.qqt-oneclick-toggle {
	width: 26px; height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.85);
	color: #fbbf24;
	border: 1px solid rgba(251, 191, 36, 0.45);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s;
	backdrop-filter: blur(6px);
}
.qqt-oneclick-toggle:hover {
	background: #fbbf24;
	color: #1a0f00;
}
.qqt-oneclick.is-open .qqt-oneclick-toggle {
	background: #fbbf24;
	color: #1a0f00;
}
.qqt-oneclick-body {
	position: absolute;
	top: 30px;
	right: 0;
	width: 200px;
	background: rgba(15, 23, 42, 0.96);
	border: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: 6px;
	padding: 6px;
	box-shadow: 0 10px 28px rgba(0,0,0,0.55);
	backdrop-filter: blur(8px);
	animation: qqtOneClickIn 0.14s ease-out;
}
@keyframes qqtOneClickIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
.qqt-oneclick-prices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 5px;
}
.qqt-oneclick-bid, .qqt-oneclick-ask {
	padding: 4px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.3px;
}
.qqt-oneclick-bid { background: rgba(239,68,68,0.15); color: #fca5a5; }
.qqt-oneclick-ask { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.qqt-oneclick-row {
	display: grid;
	grid-template-columns: 1fr 56px 1fr;
	gap: 3px;
	align-items: stretch;
}
.qqt-oneclick-btn {
	padding: 8px 0;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.8px;
	color: #fff;
	cursor: pointer;
	transition: filter 0.12s, transform 0.08s;
}
.qqt-oneclick-btn--sell { background: #ef4444; }
.qqt-oneclick-btn--buy  { background: #10b981; }
.qqt-oneclick-btn:hover { filter: brightness(1.12); }
.qqt-oneclick-btn:active { transform: translateY(1px); }
.qqt-oneclick-btn.is-firing { animation: qqtFireFlash 0.45s ease-out; }
@keyframes qqtFireFlash { 0%,100% { filter: brightness(1.1); } 50% { filter: brightness(1.5) saturate(1.3); } }
.qqt-oneclick-lot {
	width: 100%;
	padding: 0 4px;
	background: rgba(15,23,42,0.9);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 3px;
	color: #e6edf7;
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}
.qqt-oneclick-lot:focus { outline: none; border-color: #fbbf24; }

/* Light theme tweaks */
body[data-site-theme="light"] .qqt-oneclick-toggle {
	background: rgba(255,255,255,0.95);
	border-color: #cbd5e1;
	color: #d97706;
}
body[data-site-theme="light"] .qqt-oneclick-body {
	background: #ffffff;
	border-color: #cbd5e1;
}

/* ─── Trade detail modal ─── */
.qqt-trade-detail-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3200;
	animation: qqtStmIn 0.12s ease-out;
}
.qqt-trade-detail-modal[hidden] { display: none; }
.qqt-trade-detail-inner {
	width: 520px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--qqt-panel, #131c2b);
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 10px;
	box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.qqt-trade-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--qqt-border, #223044);
	background: var(--qqt-panel-2, #1a2435);
}
.qqt-trade-detail-head strong { font-size: 14px; color: var(--qqt-text, #e6edf7); }
.qqt-trade-detail-body {
	padding: 16px;
	overflow-y: auto;
	color: var(--qqt-text, #e6edf7);
}
.qqt-trade-detail-loading {
	padding: 40px 20px;
	text-align: center;
	color: var(--qqt-text-muted, #8b97ab);
	font-style: italic;
}
.qqt-trade-detail-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 18px;
	margin-bottom: 16px;
}
.qqt-trade-detail-kv {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dotted var(--qqt-border, #223044);
	font-size: 12px;
}
.qqt-trade-detail-kv span { color: var(--qqt-text-muted, #8b97ab); }
.qqt-trade-detail-kv strong { color: var(--qqt-text, #e6edf7); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.qqt-trade-detail-status {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--qqt-bg-2, #0f1724);
	border-radius: 8px;
	margin-bottom: 10px;
}
.qqt-trade-detail-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	color: #fff !important;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
.qqt-trade-detail-pnl {
	font-family: 'JetBrains Mono', monospace;
	font-size: 18px;
	font-weight: 800;
}
.qqt-trade-detail-why {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--qqt-bg-2, #0f1724);
	border-radius: 6px;
	font-size: 11px;
}
.qqt-trade-detail-why p { margin: 4px 0 0; color: var(--qqt-text-muted, #8b97ab); line-height: 1.6; }

/* ─── Tighter, neater toolbox ─── */
.qqt-toolbox-header {
	padding: 6px 14px !important;
}
.qqt-toolbox-title {
	font-size: 11px !important;
}
.qqt-tbox-pane-head {
	padding: 6px 10px !important;
}
.qqt-tbox-pane-head-label {
	font-size: 11px !important;
}
.qqt-tbox-pane-body {
	padding: 8px 10px !important;
	gap: 6px !important;
}
.qqt-avi-duration, .qqt-avi-stake-control {
	padding: 4px 8px !important;
}
.qqt-avi-dur-readout {
	font-size: 11px !important;
}
.qqt-avi-stake-input {
	font-size: 16px !important;
	padding: 4px 0 !important;
}
.qqt-avi-chips {
	margin: 2px 0 !important;
}
.qqt-avi-chip {
	padding: 3px 0 !important;
	font-size: 11px !important;
}
.qqt-tbox-pane .qqt-avi-action-btn {
	padding: 8px 6px !important;
	font-size: 12px !important;
}
.qqt-ai-toggle {
	padding: 7px 10px !important;
	font-size: 10px !important;
}

/* Reduce default toolbox height so it feels smaller */
.qqt-appshell { --qqt-toolbox-h: 240px; }

/* ─── Tablet (821-1099 px): tighten further ─── */
@media (max-width: 1099px) and (min-width: 821px) {
	.qqt-appshell { --qqt-left-w: 240px; }
	.qqt-tbox-pane-body { gap: 5px !important; padding: 6px 8px !important; }
	.qqt-avi-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
	.qqt-toolbox-subtitle { display: none; }
	.qqt-chart-cell-tfbar {
		display: none !important;  /* hide on tablet — too cramped */
	}
}

/* ─── Mobile (< 821 px): stack, hide heavy elements ─── */
@media (max-width: 820px) {
	.qqt-appshell { --qqt-toolbox-h: 340px; }
	.qqt-toolbox-bubble { width: 46px; height: 46px; bottom: 14px; right: 14px; }
	.qqt-toolbox-bubble svg { width: 17px; height: 17px; }
	.qqt-oneclick-body { width: 170px; }
	.qqt-oneclick-row { grid-template-columns: 1fr 44px 1fr; }
	.qqt-trade-detail-summary { grid-template-columns: 1fr !important; gap: 2px 0 !important; }
	.qqt-chart-cell-tfbar { display: none !important; }
	.qqt-chart-cell-price { display: inline-block !important; font-size: 10px !important; }
	/* One-click widget is vital on mobile — keep visible */
}

/* Open-trade rows pointer cursor */
[data-contract-id] { cursor: pointer; }
[data-contract-id]:hover { background: rgba(16, 185, 129, 0.06); }

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.4 — Polished bubble with inline trade actions,
 *  always-visible MT5 widget, satellite digit strip fix
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Override v1.3.3 bubble styling — replace with richer design ─── */
.qqt-toolbox-bubble {
	position: fixed;
	bottom: 22px;
	right: 22px;
	width: 128px;
	height: 128px;
	z-index: 3400;
	display: flex !important;
	align-items: center;
	justify-content: center;
	animation: qqtBubbleIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
	border-radius: 50%;
	background: transparent;
	border: 0;
	padding: 0;
}
.qqt-toolbox-bubble[hidden] { display: none !important; }

/* Pulsing outer ring that alternates green/red */
.qqt-toolbox-bubble-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg,
			#10b981 0deg, #10b981 90deg,
			#ef4444 90deg, #ef4444 180deg,
			#10b981 180deg, #10b981 270deg,
			#ef4444 270deg, #ef4444 360deg);
	filter: blur(0.5px);
	opacity: 0.85;
	animation: qqtRingSpin 6s linear infinite, qqtRingBreath 2.4s ease-in-out infinite;
	-webkit-mask: radial-gradient(circle, transparent 38%, #000 41%, #000 50%, transparent 53%);
	        mask: radial-gradient(circle, transparent 38%, #000 41%, #000 50%, transparent 53%);
}
@keyframes qqtRingSpin   { to { transform: rotate(360deg); } }
@keyframes qqtRingBreath { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Central clickable core — toolbox icon, restores on click */
.qqt-toolbox-bubble-core {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #131c2b, #0f1724);
	box-shadow:
		inset 0 2px 4px rgba(255,255,255,0.08),
		inset 0 -2px 4px rgba(0,0,0,0.4),
		0 8px 20px rgba(0,0,0,0.45);
	color: #10b981;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.15s, color 0.6s;
	animation: qqtCoreHue 6s ease-in-out infinite;
}
.qqt-toolbox-bubble-core:hover { transform: scale(1.06); }
.qqt-toolbox-bubble-core:active { transform: scale(0.96); }
@keyframes qqtCoreHue {
	0%,100% { color: #10b981; }
	50%     { color: #ef4444; }
}

/* 4 mini action buttons orbiting the core */
.qqt-bubble-act {
	position: absolute;
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.15);
	background: var(--bg, #10b981);
	color: #fff;
	font: 700 9px/1 'Inter', sans-serif;
	letter-spacing: 0.5px;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 4px 12px rgba(0,0,0,0.35);
	transition: transform 0.15s, filter 0.12s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.qqt-bubble-act:hover { filter: brightness(1.15); transform: scale(1.12); }
.qqt-bubble-act.is-firing { animation: qqtFireFlash 0.45s ease-out; }
.qqt-bubble-act span { pointer-events: none; }

/* Position each satellite button around the core.
 * Bubble is 128px; core is 64px (centred); satellite buttons 32px each. */
.qqt-bubble-act--buy   { top: 4px;        left: 50%;    transform: translateX(-50%); --bg: #10b981; }
.qqt-bubble-act--sell  { bottom: 4px;     left: 50%;    transform: translateX(-50%); --bg: #ef4444; }
.qqt-bubble-act--rise  { top: 50%;        left: 4px;    transform: translateY(-50%); --bg: #3b82f6; }
.qqt-bubble-act--fall  { top: 50%;        right: 4px;   transform: translateY(-50%); --bg: #f59e0b; }
.qqt-bubble-act--buy:hover   { transform: translateX(-50%) scale(1.12); }
.qqt-bubble-act--sell:hover  { transform: translateX(-50%) scale(1.12); }
.qqt-bubble-act--rise:hover  { transform: translateY(-50%) scale(1.12); }
.qqt-bubble-act--fall:hover  { transform: translateY(-50%) scale(1.12); }

/* Keep the bubble out of the way of the appbar on top when restored */
body.qqt-toolbox-bubbled .qqt-toolbox.qqt-aviator-panels { display: none !important; }
body.qqt-toolbox-bubbled .qqt-resizer--v { display: none !important; }

/* ─── Floating toolbox: X close button ─── */
.qqt-toolbox-float-close {
	margin-left: 4px;
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--qqt-border, #223044);
	border-radius: 4px;
	color: var(--qqt-text-muted, #8b97ab);
	cursor: pointer;
	padding: 0;
}
.qqt-toolbox-float-close:hover {
	background: var(--qqt-loss, #ef4444);
	color: #fff;
	border-color: var(--qqt-loss, #ef4444);
}

/* ─── Always-visible MT5 widget (v1.3.4) ─── */
/* Remove the v1.3.3 toggle styling; use a compact inline SELL | lot | BUY layout */
.qqt-oneclick {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 12;
	font-family: 'JetBrains Mono', monospace;
}
.qqt-oneclick.is-open .qqt-oneclick-body { display: block; }
.qqt-oneclick-body {
	background: rgba(15, 23, 42, 0.92);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 6px;
	padding: 4px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
	backdrop-filter: blur(8px);
}
.qqt-oneclick-row {
	display: grid;
	grid-template-columns: 64px 52px 64px;
	gap: 3px;
	align-items: stretch;
}
.qqt-oneclick-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5px 0 3px;
	border: 0;
	border-radius: 4px;
	font: inherit;
	color: #fff;
	cursor: pointer;
	transition: filter 0.12s, transform 0.06s;
	line-height: 1;
}
.qqt-oneclick-btn-label {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
	margin-bottom: 2px;
}
.qqt-oneclick-bid, .qqt-oneclick-ask {
	font-size: 11px;
	font-weight: 700;
	font-family: 'JetBrains Mono', monospace;
	opacity: 0.96;
}
.qqt-oneclick-btn--sell { background: #ef4444; }
.qqt-oneclick-btn--buy  { background: #10b981; }
.qqt-oneclick-btn:hover { filter: brightness(1.12); }
.qqt-oneclick-btn:active { transform: translateY(1px); }

/* Satellite digit strip — inherits primary's .qqt-digit-cell styles, but
 * prevent overflow when chart cell is narrow (tiled 3/4 layouts). */
.qqt-chart-cell .qqt-chart-digits {
	justify-content: center;
	gap: 4px;
	pointer-events: none;
}
.qqt-chart-grid[data-count="3"] .qqt-chart-digits,
.qqt-chart-grid[data-count="4"] .qqt-chart-digits {
	display: none; /* too cramped on 3/4 tile layouts */
}
.qqt-chart-cell[data-cell-id="0"] .qqt-chart-digits { pointer-events: auto; }

/* One-click widget shrinks on tiled layouts so it doesn't cover the chart */
.qqt-chart-grid[data-count="2"] .qqt-oneclick-row { grid-template-columns: 54px 44px 54px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-row { grid-template-columns: 48px 38px 48px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-btn-label { font-size: 9px; letter-spacing: 0.6px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-bid,
.qqt-chart-grid[data-count="3"] .qqt-oneclick-ask { font-size: 10px; }
.qqt-chart-grid[data-count="4"] .qqt-oneclick { top: 4px; right: 4px; }
.qqt-chart-grid[data-count="4"] .qqt-oneclick-body { padding: 2px; }
.qqt-chart-grid[data-count="4"] .qqt-oneclick-row { grid-template-columns: 40px 32px 40px; gap: 2px; }
.qqt-chart-grid[data-count="4"] .qqt-oneclick-btn-label { font-size: 8px; }
.qqt-chart-grid[data-count="4"] .qqt-oneclick-bid,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-ask { font-size: 9px; }

/* Mobile tweaks for the new bubble */
@media (max-width: 820px) {
	.qqt-toolbox-bubble { width: 104px; height: 104px; bottom: 16px; right: 16px; }
	.qqt-toolbox-bubble-core { width: 52px; height: 52px; }
	.qqt-bubble-act { width: 26px; height: 26px; font-size: 8px; border-width: 1.5px; }
	.qqt-oneclick-row { grid-template-columns: 52px 40px 52px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.4 — One-click trade widget total redesign
 *  Top-LEFT, always-on by default, curtain-collapse upward,
 *  shimmering prices, attention pulse on buttons.
 * ═══════════════════════════════════════════════════════════════════ */

/* Kill the v1.3.3 top-right + small toggle button styles — we now
 * render from scratch as a LEFT-anchored, always-visible panel. */
.qqt-oneclick {
	position: absolute;
	top: 8px !important;
	left: 8px !important;
	right: auto !important;
	z-index: 14;
	font-family: 'Inter', sans-serif;
	min-width: 300px;
	max-width: calc(100% - 160px);   /* leave room for the cell header actions on the right */
	pointer-events: none;             /* children re-enable */
}
.qqt-oneclick > * { pointer-events: auto; }

/* Old toggle button — hide it; we have a new handle now */
.qqt-oneclick-toggle { display: none !important; }

/* ─── Body (the actual panel) ─── */
.qqt-oneclick-body {
	position: relative;
	background: linear-gradient(180deg, rgba(17, 24, 39, 0.97) 0%, rgba(15, 23, 42, 0.95) 100%);
	border: 1px solid rgba(251, 191, 36, 0.28);
	border-radius: 10px;
	padding: 8px 10px 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
	            0 0 0 1px rgba(255, 255, 255, 0.03) inset,
	            0 1px 0 rgba(255, 255, 255, 0.05) inset;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* Curtain collapse — clip from the top so it feels like a shade
	   being drawn upward. transform-origin sits at the bottom so the
	   panel visually "rolls up" from below to above. */
	transform-origin: top center;
	overflow: hidden;
	transition:
		max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
		padding    0.28s cubic-bezier(0.4, 0, 0.2, 1),
		opacity    0.22s ease,
		border-color 0.3s ease;
	max-height: 220px;
	opacity: 1;
}
/* Collapsed state — curtain pulled up */
.qqt-oneclick:not(.is-open) .qqt-oneclick-body {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	border-color: transparent;
}

/* ─── The LIVE feed strip at the top of the body ─── */
.qqt-oneclick-feedstrip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px 6px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
	margin-bottom: 7px;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-weight: 600;
}
.qqt-oneclick-livedot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 8px #10b981, 0 0 2px #10b981;
	animation: qqtLiveBlink 1.1s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes qqtLiveBlink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.75); }
}
.qqt-oneclick-market {
	flex: 1;
	color: rgba(255, 255, 255, 0.85);
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	letter-spacing: 0.2px;
}
.qqt-oneclick-live-label {
	padding: 1px 6px;
	background: rgba(16, 185, 129, 0.15);
	color: #6ee7b7;
	border-radius: 3px;
	font-size: 9px;
	letter-spacing: 1.2px;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ─── SELL + LOT + BUY row ─── */
.qqt-oneclick-row {
	display: grid;
	grid-template-columns: 1fr 62px 1fr;
	gap: 6px;
	align-items: stretch;
}

/* SELL / BUY buttons — big, shiny, with integrated price */
.qqt-oneclick-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 8px;
	border: 0;
	border-radius: 7px;
	color: #fff;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.08s, filter 0.12s;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow:
		0 2px 0 rgba(0, 0, 0, 0.15) inset,
		0 -2px 8px rgba(255, 255, 255, 0.06) inset,
		0 4px 12px rgba(0, 0, 0, 0.3);
}
.qqt-oneclick-btn--sell {
	background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}
.qqt-oneclick-btn--buy {
	background: linear-gradient(180deg, #34d399 0%, #059669 100%);
}
.qqt-oneclick-btn:hover    { filter: brightness(1.12); }
.qqt-oneclick-btn:active   { transform: translateY(1px); filter: brightness(0.95); }
.qqt-oneclick-btn.is-firing { animation: qqtFireFlash 0.45s ease-out; }
@keyframes qqtFireFlash { 0%,100% { filter: brightness(1.1); } 50% { filter: brightness(1.7) saturate(1.5); } }

/* Attention pulse — a subtle glow that cycles between buy/sell to
 * draw the eye. Kicks in continuously but is soft enough not to annoy. */
.qqt-oneclick-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.qqt-oneclick-btn--sell::before { box-shadow: 0 0 22px 4px rgba(239, 68, 68, 0.55); }
.qqt-oneclick-btn--buy::before  { box-shadow: 0 0 22px 4px rgba(16, 185, 129, 0.55); }
.qqt-oneclick.is-open .qqt-oneclick-btn--sell::before { animation: qqtBtnAttention 3.4s ease-in-out infinite; }
.qqt-oneclick.is-open .qqt-oneclick-btn--buy::before  { animation: qqtBtnAttention 3.4s ease-in-out infinite; animation-delay: 1.7s; }
@keyframes qqtBtnAttention {
	0%, 100% { opacity: 0; }
	50%      { opacity: 0.85; }
}

/* Shiny sweep across the button face */
.qqt-oneclick-btn::after {
	content: '';
	position: absolute;
	top: -50%; left: -60%;
	width: 40%; height: 200%;
	background: linear-gradient(100deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.18) 45%,
		rgba(255,255,255,0.35) 50%,
		rgba(255,255,255,0.18) 55%,
		rgba(255,255,255,0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
	opacity: 0;
}
.qqt-oneclick.is-open .qqt-oneclick-btn::after {
	animation: qqtBtnSweep 4.5s ease-in-out infinite;
}
.qqt-oneclick.is-open .qqt-oneclick-btn--buy::after { animation-delay: 2.25s; }
@keyframes qqtBtnSweep {
	0%   { left: -60%; opacity: 0; }
	30%  { opacity: 0.8; }
	100% { left: 160%; opacity: 0; }
}

.qqt-oneclick-btn-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.4px;
	line-height: 1;
	z-index: 1;
	position: relative;
}
.qqt-oneclick-bid, .qqt-oneclick-ask {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.2px;
	z-index: 1;
	position: relative;
	transition: transform 0.18s, color 0.2s, text-shadow 0.22s;
}
/* Flash on change */
.qqt-oneclick-bid.is-flash, .qqt-oneclick-ask.is-flash {
	animation: qqtPriceFlash 0.55s ease-out;
}
@keyframes qqtPriceFlash {
	0%   { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); }
	40%  { transform: scale(1.12); text-shadow: 0 0 10px rgba(255,255,255,0.9); }
	100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,255,255,0); }
}

/* ─── LOT input wrapper ─── */
.qqt-oneclick-lotwrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 4px 2px;
}
.qqt-oneclick-lotlabel {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
	margin-bottom: 3px;
}
.qqt-oneclick-lot {
	width: 100%;
	padding: 0 2px;
	background: transparent;
	border: 0;
	color: #ffffff;
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}
.qqt-oneclick-lot:focus { outline: none; color: #fbbf24; }
.qqt-oneclick-lot::-webkit-inner-spin-button,
.qqt-oneclick-lot::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ─── Curtain handle (bottom edge of widget) ─── */
.qqt-oneclick-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 3px 0;
	margin-top: -1px;
	background: linear-gradient(180deg, rgba(17,24,39,0.85) 0%, rgba(15,23,42,0.4) 100%);
	border: 1px solid rgba(251, 191, 36, 0.28);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}
.qqt-oneclick-handle:hover {
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
	color: #fbbf24;
}
.qqt-oneclick-handle-grip {
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	opacity: 0.6;
}
.qqt-oneclick-handle-caret {
	font-size: 10px;
	line-height: 1;
	transition: transform 0.3s;
}
/* When collapsed, handle sits directly against the top — no gap; also
 * show it in a "pill" shape so it's clearly an interactive handle. */
.qqt-oneclick:not(.is-open) .qqt-oneclick-handle {
	border-top: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: 6px;
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%);
	color: #fbbf24;
	padding: 5px 14px;
	width: auto;
	margin-top: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.qqt-oneclick:not(.is-open) .qqt-oneclick-handle-grip {
	width: 14px;
}

/* ─── Light theme ─── */
body[data-site-theme="light"] .qqt-oneclick-body {
	background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.95) 100%);
	border-color: rgba(217, 119, 6, 0.35);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
}
body[data-site-theme="light"] .qqt-oneclick-market,
body[data-site-theme="light"] .qqt-oneclick-feedstrip {
	color: #475569;
}
body[data-site-theme="light"] .qqt-oneclick-lotwrap {
	background: rgba(15, 23, 42, 0.04);
	border-color: rgba(15, 23, 42, 0.1);
}
body[data-site-theme="light"] .qqt-oneclick-lot { color: #0f172a; }
body[data-site-theme="light"] .qqt-oneclick-lotlabel { color: #64748b; }
body[data-site-theme="light"] .qqt-oneclick-handle {
	background: rgba(255,255,255,0.9);
	border-color: rgba(217, 119, 6, 0.35);
	color: #64748b;
}

/* ─── Size down on narrower tiles (3- and 4-chart grid) ─── */
.qqt-chart-grid[data-count="3"] .qqt-oneclick,
.qqt-chart-grid[data-count="4"] .qqt-oneclick {
	min-width: 240px;
	max-width: calc(100% - 120px);
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick-btn-label,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-btn-label { font-size: 10px; letter-spacing: 0.9px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-bid,
.qqt-chart-grid[data-count="3"] .qqt-oneclick-ask,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-bid,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-ask { font-size: 11px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-row,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-row { grid-template-columns: 1fr 50px 1fr; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lotlabel,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lotlabel { display: none; }

/* ─── Mobile ─── */
@media (max-width: 820px) {
	.qqt-oneclick { min-width: 220px; top: 4px !important; left: 4px !important; }
	.qqt-oneclick-btn { padding: 7px 4px; }
	.qqt-oneclick-btn-label { font-size: 10px; }
	.qqt-oneclick-bid, .qqt-oneclick-ask { font-size: 11px; }
	.qqt-oneclick-row { grid-template-columns: 1fr 46px 1fr; gap: 4px; }
	.qqt-oneclick-live-label { display: none; }
	.qqt-oneclick-feedstrip { padding-bottom: 4px; margin-bottom: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.5 — MT5-exact one-click widget + satellite chart consistency
 * ═══════════════════════════════════════════════════════════════════ */

/* Wider panel to accommodate the 3-column head + 2-column price row */
.qqt-oneclick { min-width: 260px; max-width: 320px; }

/* ─── Head row (SELL label · LOT editor · BUY label) ─── */
.qqt-oneclick-head-row {
	display: grid;
	grid-template-columns: 1fr 86px 1fr;
	gap: 4px;
	margin-bottom: 3px;
}
.qqt-oneclick-head {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 0;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.6px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.qqt-oneclick-head--sell { background: linear-gradient(180deg, rgba(248,113,113,0.95) 0%, rgba(220,38,38,0.95) 100%); }
.qqt-oneclick-head--buy  { background: linear-gradient(180deg, rgba(52,211,153,0.95) 0%, rgba(5,150,105,0.95) 100%); }

/* ─── Lot editor (▼ INPUT ▲) ─── */
.qqt-oneclick-lotbox {
	display: grid;
	grid-template-columns: 16px 1fr 16px;
	align-items: stretch;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	overflow: hidden;
}
.qqt-oneclick-lotstep {
	background: rgba(255, 255, 255, 0.04);
	border: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 9px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background 0.1s, color 0.1s;
}
.qqt-oneclick-lotstep:hover { background: #fbbf24; color: #1a0f00; }
.qqt-oneclick-lotstep:active { background: #f59e0b; }
.qqt-oneclick-lot {
	width: 100%;
	padding: 0 2px;
	background: transparent;
	border: 0;
	color: #ffffff;
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}
.qqt-oneclick-lot:focus { outline: none; color: #fbbf24; }
.qqt-oneclick-lot::-webkit-inner-spin-button,
.qqt-oneclick-lot::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qqt-oneclick-lot.is-flash { animation: qqtLotFlash 0.4s ease-out; }
@keyframes qqtLotFlash {
	0%,100% { color: #ffffff; }
	50%     { color: #fbbf24; transform: scale(1.06); }
}

/* ─── Price row (the actual clickable SELL + BUY) ─── */
.qqt-oneclick-price-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
.qqt-oneclick-price-row .qqt-oneclick-btn {
	padding: 10px 4px;
	min-height: 44px;
	flex-direction: row;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
}
.qqt-oneclick-price-row .qqt-oneclick-bid,
.qqt-oneclick-price-row .qqt-oneclick-ask {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.3px;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Kill the old .qqt-oneclick-row + label-stacked layout in case any
 * older cell still has it — only the new two-row markup should render. */
.qqt-oneclick-row, .qqt-oneclick-lotwrap, .qqt-oneclick-btn-label { display: none !important; }

/* ─── Compress on narrow tiles ─── */
.qqt-chart-grid[data-count="3"] .qqt-oneclick,
.qqt-chart-grid[data-count="4"] .qqt-oneclick { min-width: 220px; max-width: 260px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-head-row,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-head-row { grid-template-columns: 1fr 72px 1fr; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-price-row .qqt-oneclick-bid,
.qqt-chart-grid[data-count="3"] .qqt-oneclick-price-row .qqt-oneclick-ask,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-price-row .qqt-oneclick-bid,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-price-row .qqt-oneclick-ask {
	font-size: 15px;
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick-price-row .qqt-oneclick-btn,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-price-row .qqt-oneclick-btn {
	min-height: 38px;
	padding: 8px 2px;
}

/* ─── Mobile ─── */
@media (max-width: 820px) {
	.qqt-oneclick { min-width: 210px; max-width: 240px; }
	.qqt-oneclick-head-row { grid-template-columns: 1fr 64px 1fr; }
	.qqt-oneclick-head { font-size: 9px; letter-spacing: 1.2px; padding: 3px 0; }
	.qqt-oneclick-price-row .qqt-oneclick-bid,
	.qqt-oneclick-price-row .qqt-oneclick-ask { font-size: 13px; }
	.qqt-oneclick-price-row .qqt-oneclick-btn { min-height: 34px; padding: 7px 2px; }
	.qqt-oneclick-lot { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.5 — Satellite chart visual parity
 *  Satellites render a minimal line chart via renderSatellite();
 *  give them the same background + price axis styling as primary.
 * ═══════════════════════════════════════════════════════════════════ */
.qqt-chart-cell[data-cell-id] .qqt-chart-stage {
	background: var(--qqt-bg, #0a0e1a);
	position: relative;
}
.qqt-chart-cell:not(.is-active) .qqt-chart-stage { opacity: 0.96; }
.qqt-chart-cell.is-active .qqt-chart-stage {
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22) inset;
}
/* Satellite headers match primary */
.qqt-chart-cell .qqt-chart-cell-head {
	background: var(--qqt-bg-2, #0f1724);
	border-bottom: 1px solid var(--qqt-border, #223044);
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.6 — Always-visible tray handle + big-digits/superscript
 *  prices + BUY-left / SELL-right ordering
 * ═══════════════════════════════════════════════════════════════════ */

/* Nuke the v1.3.3/1.3.4 curtain handle styles — we use a tray now. */
.qqt-oneclick-handle,
.qqt-oneclick-handle-grip,
.qqt-oneclick-handle-caret { display: none !important; }

/* ─── Tray handle: always visible, outside the curtain body ─── */
.qqt-oneclick {
	padding-top: 22px;           /* make room for the tray above the body */
	position: absolute;
}
.qqt-oneclick-tray {
	position: absolute;
	top: 0;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 4px;
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.92) 100%);
	color: #1a0f00;
	border: 1px solid rgba(251, 191, 36, 0.55);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	font: inherit;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
	transition: filter 0.15s, transform 0.12s;
	z-index: 2;
}
.qqt-oneclick-tray:hover { filter: brightness(1.08); }
.qqt-oneclick-tray:active { transform: translateY(1px); }
.qqt-oneclick-tray-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px; height: 14px;
	background: rgba(26, 15, 0, 0.15);
	border-radius: 3px;
	font-size: 9px;
	line-height: 1;
	transition: transform 0.3s;
}
.qqt-oneclick-tray-caret { line-height: 1; }
.qqt-oneclick:not(.is-open) .qqt-oneclick-tray-caret { /* ▾ set via JS */ }
.qqt-oneclick-tray-label { line-height: 1; }

/* When collapsed, the body's gone but the tray remains as a floating pill */
.qqt-oneclick:not(.is-open) {
	padding-top: 0;
}
.qqt-oneclick:not(.is-open) .qqt-oneclick-tray {
	position: static;
	border: 1px solid rgba(251, 191, 36, 0.55);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ─── Big-digit price rendering ─── */
.qqt-oneclick-pricebig {
	display: inline-flex;
	align-items: baseline;
	line-height: 1;
	color: #ffffff;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 800;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.qqt-oneclick-pricebig-main {
	font-size: 22px;
	letter-spacing: -0.6px;
}
.qqt-oneclick-pricebig-sup {
	font-size: 11px;
	font-weight: 700;
	margin-left: 1px;
	opacity: 0.78;
	top: -0.8em;   /* lift like a proper superscript */
	position: relative;
}

/* Price flash — scale the whole pricebig together */
.qqt-oneclick-pricebig.is-flash {
	animation: qqtBigFlash 0.5s ease-out;
}
@keyframes qqtBigFlash {
	0%,100% { transform: scale(1); }
	40%     { transform: scale(1.08); text-shadow: 0 0 10px rgba(255,255,255,0.8); }
}

/* Price-row buttons: slightly taller for readability with big digits */
.qqt-oneclick-price-row .qqt-oneclick-btn {
	min-height: 52px;
	padding: 8px 6px;
}

/* Sizes on narrow tiles — smaller big-digit font */
.qqt-chart-grid[data-count="3"] .qqt-oneclick-pricebig-main,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-pricebig-main { font-size: 17px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-pricebig-sup,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-pricebig-sup { font-size: 9px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-price-row .qqt-oneclick-btn,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-price-row .qqt-oneclick-btn { min-height: 44px; }

/* Mobile */
@media (max-width: 820px) {
	.qqt-oneclick-pricebig-main { font-size: 15px; }
	.qqt-oneclick-pricebig-sup  { font-size: 8px; }
	.qqt-oneclick-price-row .qqt-oneclick-btn { min-height: 40px; }
	.qqt-oneclick-tray-label { display: none; }
	.qqt-oneclick-tray { left: 6px; padding: 3px 6px 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.7 — Quick-trade refined: dedicated LOT row, compact action
 *  buttons with tidy prices, tighter overall UI
 * ═══════════════════════════════════════════════════════════════════ */

/* Retire v1.3.5/1.3.6 layouts — only v1.3.7 markup should render */
.qqt-oneclick-head-row,
.qqt-oneclick-head,
.qqt-oneclick-price-row,
.qqt-oneclick-pricebig,
.qqt-oneclick-pricebig-main,
.qqt-oneclick-pricebig-sup { display: none !important; }

/* ─── Container sizing: tighter ─── */
.qqt-oneclick { min-width: 240px; max-width: 280px; }
.qqt-oneclick-body {
	padding: 6px 9px 8px !important;
	border-radius: 10px;
}

/* Feedstrip stays as-is but more compact */
.qqt-oneclick-feedstrip {
	padding: 2px 2px 4px !important;
	margin-bottom: 6px !important;
	font-size: 9px !important;
}
.qqt-oneclick-livedot { width: 6px; height: 6px; }
.qqt-oneclick-market { font-size: 10px !important; }
.qqt-oneclick-live-label { font-size: 8px !important; padding: 1px 5px !important; }

/* ─── LOT row: full width, prominent ─── */
.qqt-oneclick-lotrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px;
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
	border: 1px solid rgba(251, 191, 36, 0.3);
	border-radius: 7px;
	margin-bottom: 6px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.02) inset,
		0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.qqt-oneclick-lotrow-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	color: rgba(251, 191, 36, 0.95);
	flex-shrink: 0;
}
.qqt-oneclick-lotbox {
	display: grid;
	grid-template-columns: 24px 1fr 24px;
	align-items: stretch;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	overflow: hidden;
	flex: 1;
	max-width: 140px;
	height: 28px;
}
.qqt-oneclick-lotstep {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 0;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0;
	transition: background 0.1s, color 0.1s;
}
.qqt-oneclick-lotstep:hover { background: #fbbf24; color: #1a0f00; }
.qqt-oneclick-lotstep:active { background: #f59e0b; }
.qqt-oneclick-lotstep svg { pointer-events: none; }
.qqt-oneclick-lot {
	width: 100%;
	padding: 0 4px;
	background: transparent;
	border: 0;
	color: #ffffff;
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}
.qqt-oneclick-lot:focus { outline: none; color: #fbbf24; }
.qqt-oneclick-lot::-webkit-inner-spin-button,
.qqt-oneclick-lot::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qqt-oneclick-lot.is-flash { animation: qqtLotFlashV2 0.4s ease-out; }
@keyframes qqtLotFlashV2 {
	0%,100% { color: #ffffff; text-shadow: 0 0 0 rgba(251,191,36,0); }
	50%     { color: #fbbf24; text-shadow: 0 0 6px rgba(251,191,36,0.6); }
}

/* ─── Action row: BUY + SELL side-by-side, compact ─── */
.qqt-oneclick-action-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.qqt-oneclick-action-row .qqt-oneclick-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 7px 6px;
	min-height: 44px;
	border-radius: 6px;
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: transform 0.08s, filter 0.12s;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow:
		0 2px 0 rgba(0, 0, 0, 0.12) inset,
		0 -1px 4px rgba(255, 255, 255, 0.04) inset,
		0 3px 8px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
}
.qqt-oneclick-action-row .qqt-oneclick-btn--buy {
	background: linear-gradient(180deg, #34d399 0%, #059669 100%);
}
.qqt-oneclick-action-row .qqt-oneclick-btn--sell {
	background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}
.qqt-oneclick-action-row .qqt-oneclick-btn:hover { filter: brightness(1.1); }
.qqt-oneclick-action-row .qqt-oneclick-btn:active { transform: translateY(1px); }
.qqt-oneclick-action-row .qqt-oneclick-btn.is-firing { animation: qqtFireFlash 0.45s ease-out; }

/* Action button internal typography — tidy, small */
.qqt-oneclick-action-row .qqt-oneclick-btn-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	line-height: 1;
	opacity: 0.92;
}
.qqt-oneclick-action-row .qqt-oneclick-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.qqt-oneclick-action-row .qqt-oneclick-price.is-flash {
	animation: qqtPriceTidyFlash 0.4s ease-out;
}
@keyframes qqtPriceTidyFlash {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); text-shadow: 0 0 6px rgba(255,255,255,0.6); }
}

/* Light theme — amber accent still reads well */
body[data-site-theme="light"] .qqt-oneclick-lotrow {
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
	border-color: rgba(217, 119, 6, 0.35);
}
body[data-site-theme="light"] .qqt-oneclick-lotrow-label { color: #b45309; }
body[data-site-theme="light"] .qqt-oneclick-lotbox {
	background: #ffffff;
	border-color: #cbd5e1;
}
body[data-site-theme="light"] .qqt-oneclick-lot { color: #0f172a; }
body[data-site-theme="light"] .qqt-oneclick-lotstep { color: #475569; background: #f1f5f9; }

/* ─── Narrow tiles ─── */
.qqt-chart-grid[data-count="3"] .qqt-oneclick,
.qqt-chart-grid[data-count="4"] .qqt-oneclick { min-width: 210px; max-width: 240px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lotrow,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lotrow { padding: 5px 6px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lotrow-label,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lotrow-label { font-size: 9px; letter-spacing: 1px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lotbox,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lotbox { height: 24px; max-width: 110px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lot,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lot { font-size: 12px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-action-row .qqt-oneclick-price,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-action-row .qqt-oneclick-price { font-size: 11px; }
.qqt-chart-grid[data-count="3"] .qqt-oneclick-action-row .qqt-oneclick-btn,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-action-row .qqt-oneclick-btn { min-height: 38px; padding: 6px 4px; }

/* ─── Mobile ─── */
@media (max-width: 820px) {
	.qqt-oneclick { min-width: 200px; max-width: 230px; }
	.qqt-oneclick-lotrow { padding: 4px 6px; gap: 6px; }
	.qqt-oneclick-lotrow-label { font-size: 9px; letter-spacing: 0.9px; }
	.qqt-oneclick-lotbox { height: 22px; max-width: 100px; }
	.qqt-oneclick-lot { font-size: 11px; }
	.qqt-oneclick-action-row .qqt-oneclick-btn { min-height: 36px; padding: 6px 2px; }
	.qqt-oneclick-action-row .qqt-oneclick-btn-label { font-size: 9px; letter-spacing: 1px; }
	.qqt-oneclick-action-row .qqt-oneclick-price { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.8 — Quick-trade widget: flush-top-left, LOT input prominent
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Widget flush against top-left of its chart cell ─── */
/* Previous releases had 8px offset — user wants zero gap, widget
 * should feel welded to the chart's top-left corner. */
.qqt-oneclick {
	top: 0 !important;
	left: 0 !important;
	padding-top: 0 !important;  /* let the tray sit at the cell's top edge */
}

/* Tray: flush to the top-left corner, no left offset, sharp top-left */
.qqt-oneclick-tray {
	top: 0 !important;
	left: 0 !important;
	border-radius: 0 0 6px 0 !important;   /* welded to the cell corner */
	border-top: 0 !important;
	border-left: 0 !important;
	padding: 4px 12px 4px 12px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
/* Widget body: sits immediately below the tray, welded to the left edge */
.qqt-oneclick-body {
	margin-top: 22px;               /* height of the tray */
	border-radius: 0 10px 10px 0 !important;   /* sharp on the left */
	border-left: 0 !important;
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}
/* Collapsed: tray still flush to corner, same sharp top-left */
.qqt-oneclick:not(.is-open) .qqt-oneclick-tray {
	position: static !important;
	border: 1px solid rgba(251, 191, 36, 0.55) !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-radius: 0 0 6px 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ─── LOT row: bigger, clearer, unclipped ─── */
/* The v1.3.7 lot box had max-width:140px, which clipped values like
 * "55.00" or "100.00". Make it flex-grow so it always fits the number. */
.qqt-oneclick-lotrow {
	padding: 9px 10px !important;
	gap: 12px !important;
	border-radius: 8px !important;
	/* Stronger amber presence — this is the primary input */
	background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.12) 100%) !important;
	border: 1px solid rgba(251, 191, 36, 0.42) !important;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03) inset,
		0 2px 8px rgba(251, 191, 36, 0.12) !important;
}
.qqt-oneclick-lotrow-label {
	font-size: 10px !important;
	color: #fbbf24 !important;
	flex-shrink: 0;
}

/* The LOT input box — taller, wider, dominates the row */
.qqt-oneclick-lotbox {
	height: 36px !important;           /* was 28 */
	max-width: none !important;         /* was 140px — remove clip */
	flex: 1 !important;
	grid-template-columns: 32px 1fr 32px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	border: 1px solid rgba(251, 191, 36, 0.5) !important;
	border-radius: 6px !important;
	box-shadow:
		0 0 0 1px rgba(251, 191, 36, 0.12) inset !important;
}

/* ±  step buttons — bigger hit-target, more visible */
.qqt-oneclick-lotstep {
	min-width: 32px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fbbf24 !important;
}
.qqt-oneclick-lotstep:hover {
	background: #fbbf24 !important;
	color: #1a0f00 !important;
}
.qqt-oneclick-lotstep svg {
	width: 14px !important;
	height: 14px !important;
}

/* LOT input: big, bold, crystal clear — the star of the widget */
.qqt-oneclick-lot {
	font-size: 20px !important;       /* was 14 */
	font-weight: 800 !important;
	color: #ffffff !important;
	letter-spacing: -0.3px;
	padding: 0 8px !important;
	/* Subtle gold glow when focused so users see "this is editable" */
	transition: color 0.15s, text-shadow 0.15s;
}
.qqt-oneclick-lot:focus {
	color: #fbbf24 !important;
	text-shadow: 0 0 6px rgba(251, 191, 36, 0.45) !important;
}

/* Retire the v1.3.4 "LOT" tiny subscript label if any cached DOM
 * still renders it (only the v1.3.7 row-level label should show). */
.qqt-oneclick-lotlabel { display: none !important; }

/* Widen widget slightly so the now-larger LOT input doesn't squeeze
 * the action row. Still compact overall. */
.qqt-oneclick { min-width: 260px !important; max-width: 300px !important; }

/* ─── Narrow tiles: keep LOT readable ─── */
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lot,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lot {
	font-size: 16px !important;
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick-lotbox,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-lotbox {
	height: 30px !important;
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick,
.qqt-chart-grid[data-count="4"] .qqt-oneclick {
	min-width: 220px !important;
	max-width: 260px !important;
}

/* ─── Mobile: still-big lot input ─── */
@media (max-width: 820px) {
	.qqt-oneclick { min-width: 210px !important; max-width: 240px !important; }
	.qqt-oneclick-lot { font-size: 15px !important; }
	.qqt-oneclick-lotbox { height: 28px !important; grid-template-columns: 28px 1fr 28px !important; }
	.qqt-oneclick-lotstep { min-width: 28px !important; }
	.qqt-oneclick-lotstep svg { width: 12px !important; height: 12px !important; }
	.qqt-oneclick-lotrow-label { font-size: 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.3.9 — MT5-EXACT quick-trade panel.
 *  Matches MetaTrader 5's one-click trading panel: dark compact bar,
 *  single header row [SELL ▼ LOT ▲ BUY], two big price tiles below
 *  with pre/big/sup price split.
 * ═══════════════════════════════════════════════════════════════════ */

/* Retire ALL prior layouts (v1.3.3 through v1.3.8). Only v1.3.9
 * markup (qqt-oneclick-header / -prices / -pricetile) should render. */
.qqt-oneclick-feedstrip,
.qqt-oneclick-lotrow,
.qqt-oneclick-lotrow-label,
.qqt-oneclick-lotbox,
.qqt-oneclick-action-row,
.qqt-oneclick-btn,
.qqt-oneclick-btn-label,
.qqt-oneclick-price,
.qqt-oneclick-head-row,
.qqt-oneclick-head,
.qqt-oneclick-price-row,
.qqt-oneclick-pricebig,
.qqt-oneclick-pricebig-main,
.qqt-oneclick-pricebig-sup,
.qqt-oneclick-bid,
.qqt-oneclick-ask,
.qqt-oneclick-lotwrap,
.qqt-oneclick-lotlabel,
.qqt-oneclick-live-label,
.qqt-oneclick-tray-icon {
	display: none !important;
}

/* ─── Container — flush to top-left, compact ─── */
.qqt-oneclick {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	z-index: 14;
	min-width: 200px !important;
	max-width: 220px !important;
	padding: 0 !important;
	font-family: 'Segoe UI', Tahoma, system-ui, sans-serif;
	pointer-events: none;
}
.qqt-oneclick > * { pointer-events: auto; }

/* Tray tab pill — above the body, flush corner */
.qqt-oneclick-tray {
	position: static !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 8px !important;
	background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
	color: #e5e5e5;
	border: 1px solid #555 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	border-radius: 0 0 4px 0 !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.qqt-oneclick-tray:hover { background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%); }
.qqt-oneclick-tray-caret { font-size: 9px; opacity: 0.85; }
.qqt-oneclick-tray-label { line-height: 1; }

/* ─── Body — the MT5 dark bar itself ─── */
.qqt-oneclick-body {
	background: linear-gradient(180deg, #2d2d2d 0%, #1f1f1f 100%);
	border: 1px solid #000;
	border-left: 0;
	border-radius: 0 3px 3px 3px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.06),
		0 4px 12px rgba(0,0,0,0.45);
	overflow: hidden;
	transform-origin: top;
	transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1),
	            opacity 0.22s ease;
	max-height: 120px;
	opacity: 1;
}
.qqt-oneclick:not(.is-open) .qqt-oneclick-body {
	max-height: 0;
	opacity: 0;
	border-color: transparent;
}

/* ─── Header row: [SELL] [▼] [LOT] [▲] [BUY] single line ─── */
.qqt-oneclick-header {
	display: grid;
	grid-template-columns: 48px 16px 1fr 16px 48px;
	align-items: stretch;
	height: 22px;
	border-bottom: 1px solid #000;
}
.qqt-oneclick-label {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #505050 0%, #3a3a3a 100%);
	border: 0;
	border-right: 1px solid #000;
	color: #e8e8e8;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	cursor: pointer;
	padding: 0;
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.qqt-oneclick-label:hover { background: linear-gradient(180deg, #606060 0%, #464646 100%); }
.qqt-oneclick-label--buy { border-right: 0; border-left: 1px solid #000; }
.qqt-oneclick-lotstep {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #3d3d3d 0%, #2a2a2a 100%);
	border: 0;
	color: #c8c8c8;
	font-size: 8px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.qqt-oneclick-lotstep:hover { background: #5a5a5a; color: #fff; }
.qqt-oneclick-lot {
	background: #1a1a1a;
	border: 0;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	color: #ffffff;
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	padding: 0 2px;
	width: 100%;
	line-height: 22px;
	height: 22px;
}
.qqt-oneclick-lot:focus { outline: none; background: #0f1f0f; color: #7fd97f; }
.qqt-oneclick-lot::-webkit-inner-spin-button,
.qqt-oneclick-lot::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Price tiles row — the big money ─── */
.qqt-oneclick-prices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 54px;
}
.qqt-oneclick-pricetile {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1px;
	background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
	border: 0;
	cursor: pointer;
	padding: 0 4px;
	font-family: 'Consolas', 'Courier New', monospace;
	color: #ffffff;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	transition: filter 0.12s;
}
.qqt-oneclick-pricetile--sell {
	background: linear-gradient(180deg, #8a1f1f 0%, #5a0f0f 100%);
	border-right: 1px solid #000;
}
.qqt-oneclick-pricetile--buy {
	background: linear-gradient(180deg, #1f3f8a 0%, #0f2258 100%);
}
.qqt-oneclick-pricetile:hover { filter: brightness(1.15); }
.qqt-oneclick-pricetile:active { filter: brightness(0.85); }
.qqt-oneclick-pricetile.is-flash { animation: qqtMt5Flash 0.5s ease-out; }
@keyframes qqtMt5Flash {
	0%,100% { filter: brightness(1); }
	40%     { filter: brightness(1.6); }
}

/* Price part sizes — the key bit */
.qqt-oneclick-pricetile-pre {
	font-size: 10px;
	font-weight: 600;
	opacity: 0.72;
	letter-spacing: -0.3px;
}
.qqt-oneclick-pricetile-big {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1;
}
.qqt-oneclick-pricetile-sup {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.85;
	position: relative;
	top: -0.5em;
	letter-spacing: -0.2px;
}

/* Bottom caption (tiny symbol + LIVE dot, below prices) */
.qqt-oneclick-caption {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px;
	background: #0f0f0f;
	border-top: 1px solid #000;
	font-size: 9px;
	color: #9a9a9a;
	font-family: 'Segoe UI', system-ui, sans-serif;
	letter-spacing: 0.3px;
}
.qqt-oneclick-livedot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 4px rgba(34,197,94,0.8);
	animation: qqtLiveBlink 1.2s ease-in-out infinite;
	flex-shrink: 0;
}
.qqt-oneclick-market {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* ─── Narrow tiles / mobile: shrink without losing legibility ─── */
.qqt-chart-grid[data-count="3"] .qqt-oneclick,
.qqt-chart-grid[data-count="4"] .qqt-oneclick {
	min-width: 180px !important;
	max-width: 200px !important;
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick-pricetile-big,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-pricetile-big {
	font-size: 18px;
}
.qqt-chart-grid[data-count="3"] .qqt-oneclick-prices,
.qqt-chart-grid[data-count="4"] .qqt-oneclick-prices {
	height: 46px;
}

@media (max-width: 820px) {
	.qqt-oneclick { min-width: 170px !important; max-width: 190px !important; }
	.qqt-oneclick-header { grid-template-columns: 40px 14px 1fr 14px 40px; height: 20px; }
	.qqt-oneclick-label { font-size: 9px; letter-spacing: 0.8px; }
	.qqt-oneclick-lot { font-size: 10px; line-height: 20px; height: 20px; }
	.qqt-oneclick-pricetile-big { font-size: 17px; }
	.qqt-oneclick-pricetile-pre { font-size: 9px; }
	.qqt-oneclick-pricetile-sup { font-size: 9px; }
	.qqt-oneclick-prices { height: 42px; }
}

/* Light theme — keep MT5 dark (it's a trading panel, dark is correct)
 * but lighten the shadow so it doesn't look too heavy. */
body[data-site-theme="light"] .qqt-oneclick-body {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.1),
		0 4px 12px rgba(15, 23, 42, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.4.0 — MT5 One-Click Trading Panel (reference HTML port)
 *  Styles taken verbatim from user-supplied mt5-panel reference,
 *  scoped so they only apply when .mt5-panel is present.
 * ═══════════════════════════════════════════════════════════════════ */

/* Retire ALL v1.3.3-v1.3.9 widget internals — only the v1.4.0
 * .mt5-panel markup should render. */
.qqt-oneclick-header,
.qqt-oneclick-label,
.qqt-oneclick-lotstep,
.qqt-oneclick-lot,
.qqt-oneclick-prices,
.qqt-oneclick-pricetile,
.qqt-oneclick-pricetile-pre,
.qqt-oneclick-pricetile-big,
.qqt-oneclick-pricetile-sup,
.qqt-oneclick-caption,
.qqt-oneclick-livedot,
.qqt-oneclick-tray,
.qqt-oneclick-tray-caret,
.qqt-oneclick-tray-label,
.qqt-oneclick-col,
.qqt-oneclick-col--sell,
.qqt-oneclick-col--buy,
.qqt-oneclick-col--lot,
.qqt-oneclick-col-label,
.qqt-oneclick-col-label--lot,
.qqt-oneclick-col-price,
.qqt-oneclick-lotfield,
.qqt-oneclick-lotspin,
.qqt-oneclick-lotspin-btn,
.qqt-oneclick-topbar,
.qqt-oneclick-topbar-tf,
.qqt-oneclick-topbar-caret,
.qqt-oneclick-main {
	display: none !important;
}

/* ─── Panel container (positioned inside chart stage) ─── */
.mt5-panel {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 14;
	/* MT5 theme variables */
	--mt5-panel-bg: #3a1d1d;
	--mt5-panel-bg-2: #2b1515;
	--mt5-header-bg: #3f3f3f;
	--mt5-header-bg-2: #2e2e2e;
	--mt5-header-text: #e6e6e6;
	--mt5-sell-red: #c23a2b;
	--mt5-sell-red-dark: #8a2a20;
	--mt5-buy-green: #4a6b4a;
	--mt5-buy-green-dark: #2f4a2f;
	--mt5-price-bg: #5a1e1e;
	--mt5-price-bg-2: #3a0f0f;
	--mt5-volume-bg: #1b1b1b;
	--mt5-rising: #2f7bd6;
	--mt5-falling: #c23a2b;

	width: 300px;
	background: linear-gradient(180deg, var(--mt5-panel-bg) 0%, var(--mt5-panel-bg-2) 100%);
	border: 1px solid #0a0303;
	box-shadow:
		0 2px 8px rgba(0,0,0,0.6),
		inset 0 1px 0 rgba(255,255,255,0.04);
	user-select: none;
	-webkit-user-select: none;
	font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
	padding: 0 !important;  /* override v1.3.x padding that pushed body down */
	min-width: 0;
	max-width: none;
}

/* ─── Header ─── */
.mt5-panel .mt5-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 22px;
	padding: 0 8px;
	background: linear-gradient(180deg, var(--mt5-header-bg) 0%, var(--mt5-header-bg-2) 100%);
	border-bottom: 1px solid #111;
	font-size: 11px;
	color: var(--mt5-header-text);
	letter-spacing: 0.1px;
}
.mt5-panel .mt5-header .title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	flex: 1;
	min-width: 0;
}
.mt5-panel .mt5-header .title strong {
	font-weight: 600;
	margin-right: 4px;
}
.mt5-panel .mt5-header .controls {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	margin-left: 6px;
}
.mt5-panel .mt5-header .dropdown,
.mt5-panel .mt5-header .hdr-btn {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #4a4a4a 0%, #2e2e2e 100%);
	border: 1px solid #111;
	color: #d0d0d0;
	cursor: pointer;
	padding: 0;
	transition: filter 0.1s ease, background 0.15s ease;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.mt5-panel .mt5-header .hdr-btn:hover,
.mt5-panel .mt5-header .dropdown:hover {
	background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 100%);
	filter: brightness(1.1);
}
.mt5-panel .mt5-header .hdr-btn:active,
.mt5-panel .mt5-header .dropdown:active {
	background: #1f1f1f;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.mt5-panel .mt5-header .hdr-btn:disabled {
	opacity: 0.35;
	cursor: default;
	filter: none;
}
.mt5-panel .mt5-header .dropdown svg,
.mt5-panel .mt5-header .hdr-btn svg {
	width: 9px;
	height: 9px;
	fill: #e0e0e0;
}

/* ─── Collapsible body ─── */
.mt5-panel .mt5-body {
	overflow: hidden;
	max-height: 200px;
	opacity: 1;
	transition:
		max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.2s ease;
}
.mt5-panel.retracted .mt5-body {
	max-height: 0;
	opacity: 0;
}
.mt5-panel.retracted {
	box-shadow:
		0 1px 4px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── Action row (SELL | VOLUME | BUY) ─── */
.mt5-panel .action-row {
	display: grid;
	grid-template-columns: 1fr 92px 1fr;
	gap: 4px;
	padding: 5px 5px 3px 5px;
}
.mt5-panel .btn {
	height: 24px;
	border: 1px solid #000;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 0.5px;
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
	position: relative;
	transition: filter 0.1s ease;
	font-family: inherit;
}
.mt5-panel .btn:hover { filter: brightness(1.08); }
.mt5-panel .btn:active { filter: brightness(0.9); }
.mt5-panel .btn.sell {
	background: linear-gradient(180deg, #d84536 0%, var(--mt5-sell-red) 50%, var(--mt5-sell-red-dark) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.25),
		inset 0 -1px 0 rgba(0,0,0,0.4);
}
.mt5-panel .btn.buy {
	background: linear-gradient(180deg, #5c7f5c 0%, var(--mt5-buy-green) 50%, var(--mt5-buy-green-dark) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.2),
		inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* ─── Volume selector ─── */
.mt5-panel .volume {
	display: flex;
	align-items: stretch;
	height: 24px;
	background: var(--mt5-volume-bg);
	border: 1px solid #000;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.mt5-panel .volume .volume-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	font-family: inherit;
	padding: 0;
	min-width: 0;
}
.mt5-panel .volume .spin {
	display: flex;
	flex-direction: column;
	width: 14px;
	border-left: 1px solid #000;
}
.mt5-panel .volume .spin button {
	flex: 1;
	background: linear-gradient(180deg, #4a4a4a, #2a2a2a);
	border: none;
	border-bottom: 1px solid #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.mt5-panel .volume .spin button:last-child { border-bottom: none; }
.mt5-panel .volume .spin button:hover { background: linear-gradient(180deg, #5a5a5a, #3a3a3a); }
.mt5-panel .volume .spin button:active { background: #1f1f1f; }
.mt5-panel .volume .spin button svg {
	width: 7px;
	height: 5px;
	fill: #d0d0d0;
}

/* ─── Price row ─── */
.mt5-panel .price-row {
	display: grid;
	grid-template-columns: 1fr 92px 1fr;
	gap: 4px;
	padding: 0 5px 5px 5px;
}
.mt5-panel .price-spacer { /* invisible column aligning with volume above */ }
.mt5-panel .price {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	background: linear-gradient(180deg, #6a2525 0%, var(--mt5-price-bg) 55%, var(--mt5-price-bg-2) 100%);
	border: 1px solid #000;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.08),
		inset 0 -1px 2px rgba(0,0,0,0.4);
	color: #ffffff;
	padding: 0 6px;
	overflow: hidden;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.mt5-panel .price.rising {
	background: linear-gradient(180deg, #3a7dd6 0%, #2f6bc2 55%, #1e4a8a 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.15),
		inset 0 -1px 2px rgba(0,0,0,0.4),
		0 0 6px rgba(47, 123, 214, 0.3);
}
.mt5-panel .price.falling {
	background: linear-gradient(180deg, #d64a3a 0%, #b2352a 55%, #7a1f18 100%);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.15),
		inset 0 -1px 2px rgba(0,0,0,0.4),
		0 0 6px rgba(214, 74, 58, 0.3);
}
.mt5-panel .price .prefix {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin-right: 4px;
	opacity: 0.95;
	align-self: flex-end;
	padding-bottom: 4px;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.mt5-panel .price .big {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.5px;
	font-family: "Segoe UI", Tahoma, Arial, sans-serif;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.mt5-panel .price .sup {
	font-size: 14px;
	font-weight: 700;
	vertical-align: super;
	margin-left: 1px;
	line-height: 1;
	position: relative;
	top: -6px;
}

/* Focus/accessibility */
.mt5-panel .btn:focus-visible,
.mt5-panel .volume .volume-input:focus-visible,
.mt5-panel .volume .spin button:focus-visible,
.mt5-panel .mt5-header .dropdown:focus-visible {
	outline: 1px dashed #ffcc66;
	outline-offset: -2px;
}

/* ─── Narrow tiles — shrink width ─── */
.qqt-chart-grid[data-count="3"] .mt5-panel,
.qqt-chart-grid[data-count="4"] .mt5-panel {
	width: 240px;
}
.qqt-chart-grid[data-count="3"] .mt5-panel .action-row,
.qqt-chart-grid[data-count="3"] .mt5-panel .price-row,
.qqt-chart-grid[data-count="4"] .mt5-panel .action-row,
.qqt-chart-grid[data-count="4"] .mt5-panel .price-row {
	grid-template-columns: 1fr 72px 1fr;
}
.qqt-chart-grid[data-count="3"] .mt5-panel .price .big,
.qqt-chart-grid[data-count="4"] .mt5-panel .price .big {
	font-size: 24px;
}
.qqt-chart-grid[data-count="3"] .mt5-panel .price .sup,
.qqt-chart-grid[data-count="4"] .mt5-panel .price .sup {
	font-size: 12px;
	top: -4px;
}

/* ─── Mobile ─── */
@media (max-width: 820px) {
	.mt5-panel { width: 240px; top: 4px; left: 4px; }
	.mt5-panel .action-row,
	.mt5-panel .price-row { grid-template-columns: 1fr 72px 1fr; }
	.mt5-panel .price .big { font-size: 24px; }
	.mt5-panel .price .sup { font-size: 12px; top: -4px; }
	.mt5-panel .mt5-header .title { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v1.4.1 — MT5 widget sizing fixes + mobile polish
 *  Image 1 showed SELL/BUY text clipped to single letters ("C", "R")
 *  because container was too narrow + theme .btn styles were leaking.
 *  This section defends against both and makes the mobile layout real.
 * ═══════════════════════════════════════════════════════════════════ */

/* Container wider + forced — matches reference HTML's 430 px */
.mt5-panel {
	width: 430px !important;
	min-width: 0 !important;
	max-width: calc(100% - 12px) !important;  /* never overflow the cell */
}

/* SELL/BUY buttons — explicitly override any global theme .btn styles */
.mt5-panel .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 24px !important;
	line-height: 1 !important;
	padding: 0 8px !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-indent: 0 !important;
	text-transform: none !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
}

/* Grid: tighter action-row/price-row column math so both labels always fit */
.mt5-panel .action-row,
.mt5-panel .price-row {
	grid-template-columns: 1fr 100px 1fr !important;
	min-width: 0;
}

/* Volume input: prevent theme inheritance from breaking it */
.mt5-panel .volume {
	min-width: 0 !important;
}
.mt5-panel .volume .volume-input {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	border-radius: 0 !important;
	line-height: 1 !important;
}

/* Price tile: guarantee the prefix stays visible next to the big number */
.mt5-panel .price {
	min-width: 0;
	flex-wrap: nowrap;
	overflow: hidden;
}
.mt5-panel .price .prefix {
	flex-shrink: 0;
	white-space: nowrap;
}
.mt5-panel .price .big,
.mt5-panel .price .sup {
	white-space: nowrap;
}

/* Header title — allow truncation with ellipsis, never hide controls */
.mt5-panel .mt5-header .title {
	min-width: 0;
}
.mt5-panel .mt5-header .controls {
	flex-shrink: 0;
}

/* ─── Narrow tile layouts (3- and 4-chart) ─── */
.qqt-chart-grid[data-count="3"] .mt5-panel,
.qqt-chart-grid[data-count="4"] .mt5-panel {
	width: 320px !important;
}
.qqt-chart-grid[data-count="3"] .mt5-panel .action-row,
.qqt-chart-grid[data-count="3"] .mt5-panel .price-row,
.qqt-chart-grid[data-count="4"] .mt5-panel .action-row,
.qqt-chart-grid[data-count="4"] .mt5-panel .price-row {
	grid-template-columns: 1fr 80px 1fr !important;
}
.qqt-chart-grid[data-count="3"] .mt5-panel .price .big,
.qqt-chart-grid[data-count="4"] .mt5-panel .price .big { font-size: 22px !important; }
.qqt-chart-grid[data-count="3"] .mt5-panel .price .sup,
.qqt-chart-grid[data-count="4"] .mt5-panel .price .sup { font-size: 11px !important; top: -4px !important; }

/* ─── MOBILE (≤ 820 px) — proper treatment, not just a scale-down ─── */
@media (max-width: 820px) {
	.mt5-panel {
		width: calc(100vw - 24px) !important;  /* fills screen minus margin */
		max-width: 380px !important;            /* but cap it at 380 */
		top: 4px !important;
		left: 4px !important;
	}
	.mt5-panel .action-row,
	.mt5-panel .price-row {
		grid-template-columns: 1fr 80px 1fr !important;
		gap: 3px !important;
		padding: 4px !important;
	}
	.mt5-panel .btn { height: 26px !important; font-size: 11px !important; }
	.mt5-panel .volume { height: 26px !important; }
	.mt5-panel .volume .volume-input { font-size: 12px !important; }
	.mt5-panel .price { height: 38px !important; }
	.mt5-panel .price .big { font-size: 22px !important; }
	.mt5-panel .price .sup { font-size: 11px !important; top: -4px !important; }
	.mt5-panel .price .prefix { font-size: 10px !important; padding-bottom: 2px !important; }
	.mt5-panel .mt5-header { height: 20px !important; }
	.mt5-panel .mt5-header .title { font-size: 10px !important; }
	.mt5-panel .mt5-header .hdr-btn,
	.mt5-panel .mt5-header .dropdown { width: 18px !important; height: 16px !important; }  /* bigger touch targets */
}

/* ─── NARROW MOBILE (≤ 480 px) — stack vertically ─── */
@media (max-width: 480px) {
	.mt5-panel {
		width: calc(100vw - 16px) !important;
		max-width: none !important;
	}
	/* Action + price rows: keep horizontal but with smaller columns */
	.mt5-panel .action-row,
	.mt5-panel .price-row {
		grid-template-columns: 1fr 64px 1fr !important;
	}
	.mt5-panel .btn { font-size: 10px !important; letter-spacing: 0.3px !important; }
	.mt5-panel .volume .volume-input { font-size: 11px !important; }
	.mt5-panel .price .big { font-size: 20px !important; }
	.mt5-panel .price .sup { font-size: 10px !important; }
	.mt5-panel .price .prefix { font-size: 9px !important; }
	/* Header title truncates earlier so controls always show */
	.mt5-panel .mt5-header .title { font-size: 9px !important; }
}

/* Safety: if WP theme or another plugin sets .btn > * to hide text,
 * this undoes it within the panel. */
.mt5-panel .btn > *,
.mt5-panel .btn::before,
.mt5-panel .btn::after {
	display: revert !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.mt5-panel .btn {
	font: inherit !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif !important;
}