/*
 * QipQop Trader — Trader UI
 * Dark theme inspired by professional trading platforms.
 */

:root {
	--qqt-trader-bg: #0b111a;
	--qqt-trader-surface: #121826;
	--qqt-trader-surface-2: #1a2234;
	--qqt-trader-surface-3: #232d42;
	--qqt-trader-border: #2a3450;
	--qqt-trader-text: #e6eaf2;
	--qqt-trader-text-dim: #8b94a8;
	--qqt-trader-text-muted: #5d6378;
	--qqt-trader-accent: #3b82f6;
	--qqt-trader-accent-hover: #2563eb;
	--qqt-trader-green: #10b981;
	--qqt-trader-green-bg: rgba(16, 185, 129, 0.1);
	--qqt-trader-red: #ef4444;
	--qqt-trader-red-bg: rgba(239, 68, 68, 0.1);
	--qqt-trader-amber: #f59e0b;
}

.qqt-trader {
	background: var(--qqt-trader-bg);
	color: var(--qqt-trader-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh;
	padding: 16px;
	box-sizing: border-box;
}

.qqt-trader *, .qqt-trader *::before, .qqt-trader *::after {
	box-sizing: border-box;
}

.qqt-trader .qqt-muted {
	color: var(--qqt-trader-text-dim);
}

/* ──────────────────────────────────────────────────────────────────
 *  Header — market selector + price + balance
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-header {
	background: var(--qqt-trader-surface);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 10px;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 12px;
}
.qqt-trader-market { display: flex; align-items: center; gap: 24px; }
.qqt-trader-market-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.qqt-trader-market-select {
	background: var(--qqt-trader-surface-2);
	color: var(--qqt-trader-text);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	min-width: 220px;
	cursor: pointer;
}
.qqt-trader-market-select:focus {
	outline: none;
	border-color: var(--qqt-trader-accent);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.qqt-trader-price-block { display: flex; flex-direction: column; align-items: flex-start; }
.qqt-trader-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	transition: color 0.3s;
}
.qqt-trader-price.flash-up  { color: var(--qqt-trader-green); }
.qqt-trader-price.flash-down { color: var(--qqt-trader-red); }
.qqt-trader-change {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	margin-top: 4px;
}
.qqt-trader-change.up { color: var(--qqt-trader-green); }
.qqt-trader-change.down { color: var(--qqt-trader-red); }
.qqt-trader-balance {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.qqt-trader-balance strong {
	font-family: 'JetBrains Mono', monospace;
	font-size: 18px;
	color: var(--qqt-trader-text);
}
.qqt-trader-mode-badge {
	background: var(--qqt-trader-amber);
	color: #1c1917;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	border: none;
	cursor: pointer;
	transition: filter 0.15s;
}
.qqt-trader-mode-badge:hover { filter: brightness(1.1); }
.qqt-trader-mode-badge.live {
	background: var(--qqt-trader-green);
	color: #052e16;
}
.qqt-trader-reset-btn {
	background: var(--qqt-trader-surface-3);
	color: var(--qqt-trader-text-dim);
	border: 1px solid var(--qqt-trader-border);
	width: 22px; height: 22px;
	border-radius: 50%;
	padding: 0;
	font-size: 13px; line-height: 1;
	cursor: pointer;
	margin-left: 4px;
	transition: all 0.15s;
}
.qqt-trader-reset-btn:hover {
	background: var(--qqt-trader-amber);
	color: #1c1917;
	transform: rotate(90deg);
}
.qqt-trader-reset-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────────
 *  Chart
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-chart-wrap {
	background: var(--qqt-trader-surface);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 10px;
	padding: 16px;
	position: relative;
	height: 400px;
	margin-bottom: 12px;
	overflow: hidden;
}
.qqt-trader-chart {
	width: 100% !important;
	height: 100% !important;
	display: block;
}
.qqt-trader-chart-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qqt-trader-text-muted);
	font-size: 14px;
	pointer-events: none;
}
.qqt-trader-chart-placeholder[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────────
 *  Digit strip
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-digits {
	background: var(--qqt-trader-surface);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 10px;
	padding: 14px 20px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.qqt-trader-digits-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qqt-trader-text-dim);
	white-space: nowrap;
}
.qqt-trader-digits-strip {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.qqt-digit-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	background: var(--qqt-trader-surface-2);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	color: var(--qqt-trader-text);
	flex-shrink: 0;
	transition: background 0.3s, transform 0.2s;
}
.qqt-digit-cell.latest {
	background: var(--qqt-trader-accent);
	color: #fff;
	border-color: var(--qqt-trader-accent);
	transform: scale(1.08);
}
.qqt-digit-cell.even {
	background: var(--qqt-trader-green-bg);
	border-color: rgba(16, 185, 129, 0.4);
}
.qqt-digit-cell.odd {
	background: var(--qqt-trader-red-bg);
	border-color: rgba(239, 68, 68, 0.4);
}

.qqt-trader-digits-freq {
	margin-left: auto;
	display: flex;
	gap: 4px;
	align-items: flex-end;
	height: 34px;
}
.qqt-trader-digits-freq .freq-bar {
	width: 16px;
	background: var(--qqt-trader-surface-3);
	border-radius: 2px 2px 0 0;
	position: relative;
	transition: height 0.3s;
}
.qqt-trader-digits-freq .freq-bar::after {
	content: attr(data-digit);
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	color: var(--qqt-trader-text-muted);
	font-family: 'JetBrains Mono', monospace;
}

/* ──────────────────────────────────────────────────────────────────
 *  Main: trade panel + open contracts
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-main {
	display: grid;
	grid-template-columns: minmax(320px, 420px) 1fr;
	gap: 12px;
}
@media (max-width: 900px) {
	.qqt-trader-main { grid-template-columns: 1fr; }
	.qqt-trader-header { flex-direction: column; align-items: flex-start; }
	.qqt-trader-price { font-size: 24px; }
}

.qqt-trader-panel {
	background: var(--qqt-trader-surface);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 10px;
	padding: 20px;
}
.qqt-trader-panel-title {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qqt-trader-text-dim);
}

/* Trade panel fields */
.qqt-trader-field {
	margin-bottom: 14px;
}
.qqt-trader-field label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qqt-trader-text-dim);
	margin-bottom: 6px;
}
.qqt-trader-field select,
.qqt-trader-field input[type="number"],
.qqt-trader-field input[type="text"] {
	width: 100%;
	background: var(--qqt-trader-surface-2);
	color: var(--qqt-trader-text);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
}
.qqt-trader-field input[type="number"] {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
}
.qqt-trader-field select:focus,
.qqt-trader-field input:focus {
	outline: none;
	border-color: var(--qqt-trader-accent);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Prediction chips */
.qqt-trader-prediction-chips {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
}
.qqt-digit-chip {
	background: var(--qqt-trader-surface-2);
	color: var(--qqt-trader-text);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 8px 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}
.qqt-digit-chip:hover {
	border-color: var(--qqt-trader-accent);
	color: var(--qqt-trader-accent);
}
.qqt-digit-chip.active {
	background: var(--qqt-trader-accent);
	border-color: var(--qqt-trader-accent);
	color: #fff;
}

/* Stake chips */
.qqt-trader-stake-input {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.qqt-trader-stake-chips {
	display: flex;
	gap: 6px;
}
.qqt-trader-stake-chips button {
	flex: 1;
	background: var(--qqt-trader-surface-2);
	color: var(--qqt-trader-text);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 6px 0;
	font-size: 12px;
	cursor: pointer;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
}
.qqt-trader-stake-chips button:hover { border-color: var(--qqt-trader-accent); }

/* Duration chips */
.qqt-trader-duration-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
.qqt-trader-duration-chips button {
	background: var(--qqt-trader-surface-2);
	color: var(--qqt-trader-text);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 10px 0;
	font-size: 13px;
	cursor: pointer;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
}
.qqt-trader-duration-chips button:hover { border-color: var(--qqt-trader-accent); }
.qqt-trader-duration-chips button.active {
	background: var(--qqt-trader-accent);
	border-color: var(--qqt-trader-accent);
	color: #fff;
}

/* Payout preview */
.qqt-trader-payout-preview {
	background: var(--qqt-trader-surface-2);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 16px 0 12px;
}
.qqt-trader-payout-preview > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.qqt-trader-payout-preview span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.qqt-trader-payout-preview strong {
	font-family: 'JetBrains Mono', monospace;
	font-size: 16px;
	color: var(--qqt-trader-text);
}
.qqt-trader-payout-value {
	color: var(--qqt-trader-green) !important;
}

/* Buy button */
.qqt-trader-buy-btn {
	display: block;
	width: 100%;
	background: var(--qqt-trader-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	font-family: 'Inter', sans-serif;
	text-align: center;
	text-decoration: none;
}
.qqt-trader-buy-btn:hover { background: var(--qqt-trader-accent-hover); }
.qqt-trader-buy-btn:disabled {
	background: var(--qqt-trader-surface-3);
	color: var(--qqt-trader-text-muted);
	cursor: not-allowed;
}

/* Messages */
.qqt-trader-msg {
	margin: 12px 0;
	min-height: 18px;
	font-size: 12px;
	font-weight: 500;
}
.qqt-trader-msg.error { color: var(--qqt-trader-red); }
.qqt-trader-msg.success { color: var(--qqt-trader-green); }

.qqt-trader-footer-note {
	font-size: 11px;
	margin: 12px 0 0;
	text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
 *  Open contracts / history
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-panel-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--qqt-trader-border);
	margin: -20px -20px 16px;
	padding: 0 20px;
}
.qqt-trader-tab {
	background: transparent;
	border: none;
	color: var(--qqt-trader-text-dim);
	padding: 14px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: 'Inter', sans-serif;
}
.qqt-trader-tab.active {
	color: var(--qqt-trader-text);
	border-bottom-color: var(--qqt-trader-accent);
}

.qqt-trader-contracts-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 500px;
	overflow-y: auto;
}
.qqt-trader-empty {
	color: var(--qqt-trader-text-muted);
	font-size: 13px;
	padding: 32px 0;
	text-align: center;
}

.qqt-contract-row {
	background: var(--qqt-trader-surface-2);
	border: 1px solid var(--qqt-trader-border);
	border-radius: 6px;
	padding: 10px 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
}
.qqt-contract-row.won { border-left: 3px solid var(--qqt-trader-green); }
.qqt-contract-row.lost { border-left: 3px solid var(--qqt-trader-red); opacity: 0.75; }
.qqt-contract-row.open { border-left: 3px solid var(--qqt-trader-amber); }

.qqt-contract-main { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.qqt-contract-market { font-weight: 600; color: var(--qqt-trader-text); }
.qqt-contract-details {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--qqt-trader-text-dim);
}
.qqt-contract-stake {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}
.qqt-contract-status {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 6px;
	border-radius: 3px;
	background: var(--qqt-trader-surface-3);
	color: var(--qqt-trader-text-dim);
	display: inline-block;
	margin-top: 2px;
}
.qqt-contract-status.won { background: var(--qqt-trader-green-bg); color: var(--qqt-trader-green); }
.qqt-contract-status.lost { background: var(--qqt-trader-red-bg); color: var(--qqt-trader-red); }
.qqt-contract-status.open { background: rgba(245, 158, 11, 0.15); color: var(--qqt-trader-amber); }

/* ──────────────────────────────────────────────────────────────────
 *  Login gate
 * ────────────────────────────────────────────────────────────────── */
.qqt-trader-gate {
	background: var(--qqt-trader-bg);
	color: var(--qqt-trader-text);
	font-family: 'Inter', sans-serif;
	padding: 80px 40px;
	text-align: center;
	border-radius: 10px;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.qqt-trader-gate h2 { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.qqt-trader-gate p { margin: 0 0 24px; max-width: 480px; font-size: 14px; }
.qqt-trader-gate-actions { display: flex; gap: 12px; }
.qqt-trader-gate .qqt-trader-buy-btn { min-width: 160px; width: auto; display: inline-block; }
.qqt-trader-gate-register {
	color: var(--qqt-trader-text-dim);
	text-decoration: none;
	padding: 14px 24px;
	font-size: 14px;
}
.qqt-trader-gate-register:hover { color: var(--qqt-trader-text); }