/**
 * qq-deriv-panels.css — the home, dashboard and trade panels. R3. [DERIV]
 * Structure only. Every colour is an R1 token; a hex in this file is a bug.
 */

.qqd-p { padding: 12px 12px 20px; }
.qqd-sec {
	font: 600 10px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--qqd-muted-text); margin: 16px 0 8px;
	display: flex; align-items: center; gap: 7px;
}
.qqd-count {
	background: var(--qqd-accent-strong); color: var(--qqd-on-accent);
	border-radius: 99px; padding: 2px 7px; font-size: 9px;
}
.qqd-up { color: var(--qqd-up-text); }
.qqd-down { color: var(--qqd-down-text); }

/* home */
.qqd-bal {
	border: 1px solid var(--qqd-line); background: var(--qqd-card);
	border-radius: 12px; padding: 14px;
}
.qqd-bal-k {
	font: 600 9px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .12em; text-transform: uppercase; color: var(--qqd-muted-text);
}
.qqd-bal-v {
	display: block; margin: 6px 0 5px;
	font: 700 26px/1.2 ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-ink);
}
.qqd-bal-v i { font-style: normal; font-size: 12px; color: var(--qqd-muted-text); }
.qqd-bal-live { font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text); }
.qqd-dot {
	display: inline-block; width: 6px; height: 6px; border-radius: 99px;
	background: var(--qqd-up); margin-right: 5px;
}
.qqd-acts { display: flex; gap: 7px; margin-top: 10px; }
.qqd-act {
	flex: 1; text-align: center; text-decoration: none;
	background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-muted-text); border-radius: 9px; padding: 12px 0;
	font: 600 12px/1 inherit; min-height: 44px;
	display: flex; align-items: center; justify-content: center;
}
.qqd-act.is-on { border-color: var(--qqd-accent-strong); color: var(--qqd-ink); background: var(--qqd-card); }
.qqd-act-dep { background: var(--qqd-down); border-color: var(--qqd-down); color: var(--qqd-on-down); }

.qqd-mkts { border: 1px solid var(--qqd-line); border-radius: 12px; overflow: hidden; background: var(--qqd-card); }
.qqd-mkt {
	display: flex; align-items: center; gap: 10px; padding: 12px;
	border-bottom: 1px solid var(--qqd-line); text-decoration: none; color: inherit;
	min-height: 56px;
}
.qqd-mkt:last-child { border-bottom: 0; }
.qqd-mkt-n { flex: 1; min-width: 0; }
.qqd-mkt-n b { display: block; font-size: 13px; }
.qqd-mkt-n i {
	display: block; font-style: normal; font-size: 10px; color: var(--qqd-muted-text);
	font-family: ui-monospace, Menlo, Consolas, monospace; margin-top: 2px;
}
.qqd-mkt-p { text-align: right; }
.qqd-mkt-p b { display: block; font: 700 13px ui-monospace, Menlo, Consolas, monospace; }
.qqd-mkt-p i { display: block; font-style: normal; font-size: 10px; color: var(--qqd-muted-text); }

.qqd-recent { border: 1px solid var(--qqd-line); border-radius: 12px; overflow: hidden; background: var(--qqd-card); }
.qqd-r {
	display: flex; align-items: center; justify-content: space-between;
	padding: 11px 12px; border-bottom: 1px solid var(--qqd-line);
}
.qqd-r:last-child { border-bottom: 0; }
.qqd-r-l b { display: block; font-size: 12.5px; }
.qqd-r-l i { display: block; font-style: normal; font-size: 10.5px; color: var(--qqd-muted-text); margin-top: 2px; }
.qqd-r-p { font: 700 13px ui-monospace, Menlo, Consolas, monospace; }

/* dashboard */
.qqd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.qqd-stat { border: 1px solid var(--qqd-line); background: var(--qqd-card); border-radius: 10px; padding: 11px; }
.qqd-stat i {
	display: block; font-style: normal;
	font: 600 9px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .1em; text-transform: uppercase; color: var(--qqd-muted-text); margin-bottom: 5px;
}
.qqd-stat b { font: 700 17px ui-monospace, Menlo, Consolas, monospace; }
.qqd-pos { border: 1px solid var(--qqd-line); background: var(--qqd-card); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.qqd-pos-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.qqd-pos-h b { font-size: 12.5px; }
.qqd-tag {
	font: 600 8.5px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em;
	text-transform: uppercase; padding: 4px 7px; border-radius: 99px;
	background: var(--qqd-cream); color: var(--qqd-muted-text); border: 1px solid var(--qqd-line);
}
.qqd-pos-g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.qqd-pos-g span { font-size: 10px; color: var(--qqd-muted-text); }
.qqd-pos-g b { display: block; font: 700 12px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-ink); margin-top: 2px; }
.qqd-prog { height: 5px; background: var(--qqd-cream); border-radius: 99px; overflow: hidden; }
.qqd-prog i { display: block; height: 100%; }
.qqd-journal { display: flex; flex-direction: column; gap: 5px; }
.qqd-j {
	font: 500 10.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
	color: var(--qqd-muted-text); border-left: 2px solid var(--qqd-line); padding-left: 9px;
}
.qqd-j-up { border-color: var(--qqd-up); }
.qqd-j-down { border-color: var(--qqd-down); }
.qqd-runstrip {
	margin-top: 12px; text-align: center; padding: 12px;
	border: 1px solid var(--qqd-line); border-radius: 10px;
	background: var(--qqd-card); font: 600 12px/1 inherit; color: var(--qqd-muted-text);
}

/* trade */
.qqd-p-trade { padding-bottom: 8px; }
.qqd-mkt-card {
	display: flex; align-items: center; gap: 10px;
	border: 1px solid var(--qqd-line); background: var(--qqd-card);
	border-radius: 12px; padding: 10px 12px;
}
.qqd-mkt-badge {
	flex: none; background: var(--qqd-up); color: var(--qqd-on-up);
	border-radius: 8px; padding: 6px 8px;
	font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
}
.qqd-mkt-meta { flex: 1; min-width: 0; }
.qqd-mkt-meta b { display: block; font-size: 13.5px; }
.qqd-mkt-meta i {
	display: block; font-style: normal; margin-top: 2px;
	font: 500 11px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text);
}
.qqd-mkt-meta em { font-style: normal; }
.qqd-mkt-pick { background: none; border: 0; color: var(--qqd-muted-text); cursor: pointer; min-width: 36px; min-height: 36px; }
.qqd-mkt-pick svg { width: 18px; height: 18px; }

.qqd-chart {
	position: relative; margin-top: 9px; height: 190px;
	border: 1px solid var(--qqd-line); border-radius: 12px;
	background: var(--qqd-cream); display: flex; align-items: center; justify-content: center;
}
.qqd-chart-price {
	position: absolute; top: 10px; right: 10px;
	background: var(--qqd-up); color: var(--qqd-on-up);
	font: 700 11px ui-monospace, Menlo, Consolas, monospace;
	padding: 5px 9px; border-radius: 6px;
}
.qqd-chart-note { text-align: center; padding: 0 22px; }
.qqd-chart-note b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.qqd-chart-note span { font-size: 10.5px; line-height: 1.55; color: var(--qqd-muted-text); }

.qqd-seg {
	display: flex; gap: 4px; margin: 10px auto 0; width: fit-content;
	background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	border-radius: 99px; padding: 3px;
}
.qqd-seg-b {
	background: none; border: 0; color: var(--qqd-muted-text); cursor: pointer;
	border-radius: 99px; padding: 9px 18px; font: 600 12px/1 inherit; min-height: 38px;
}
.qqd-seg-b.is-on { background: var(--qqd-card); color: var(--qqd-ink); }

.qqd-digits { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 11px 0 6px; }
.qqd-dg {
	position: relative; overflow: hidden; text-align: center;
	border: 1px solid var(--qqd-line); border-radius: 7px;
	background: var(--qqd-card); padding: 13px 0 4px;
}
.qqd-dg-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: var(--qqd-accent-strong); opacity: .18;
}
.qqd-dg b { position: relative; display: block; font: 700 12px ui-monospace, Menlo, Consolas, monospace; }
.qqd-dg em {
	position: relative; display: block; font-style: normal;
	font: 500 7.5px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text);
}
.qqd-dg.is-hot { border-color: var(--qqd-accent-strong); }
.qqd-dg.is-hot b { color: var(--qqd-accent-strong); }
.qqd-digit-note { font-size: 10.5px; line-height: 1.55; color: var(--qqd-muted-text); margin: 0 0 11px; }
.qqd-digit-note b { color: var(--qqd-ink); }

.qqd-ticket {
	border: 1px solid var(--qqd-line); background: var(--qqd-card);
	border-radius: 16px 16px 0 0; padding: 8px 12px 12px; margin: 0 -12px -20px;
}
.qqd-ticket-grip {
	width: 46px; height: 4px; border-radius: 99px; background: var(--qqd-line);
	margin: 0 auto 11px;
}
.qqd-type-row { display: flex; gap: 8px; margin-bottom: 9px; }
.qqd-type {
	flex: 1; display: flex; align-items: center; justify-content: space-between;
	background: var(--qqd-accent-strong); color: var(--qqd-on-accent);
	border: 0; border-radius: 10px; padding: 13px 14px;
	font: 700 13px/1 inherit; cursor: pointer; min-height: 46px;
}
.qqd-type svg { width: 16px; height: 16px; }
.qqd-barrier {
	flex: none; background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-ink); border-radius: 10px; padding: 13px 15px;
	font: 600 12px/1 inherit; cursor: pointer; min-height: 46px;
}
.qqd-types { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.qqd-types::-webkit-scrollbar { display: none; }
.qqd-tt {
	flex: none; background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-muted-text); border-radius: 99px; padding: 9px 12px;
	font: 600 11px/1 inherit; cursor: pointer; min-height: 36px; white-space: nowrap;
}
.qqd-fields { display: flex; gap: 10px; margin-bottom: 10px; min-width: 0; }
.qqd-f {
	/* min-width:0 — without it a flex item is sized by its content, so the
	   stepper pushed this label to 263px inside a 480px screen and the "+"
	   button landed at x=549: off screen, invisible, unclickable. */
	flex: 1; min-width: 0;
	font: 600 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .1em; text-transform: uppercase; color: var(--qqd-muted-text);
}
.qqd-step { display: flex; align-items: center; gap: 5px; margin-top: 6px; min-width: 0; }
.qqd-step button {
	width: 34px; height: 38px; flex: none;
	background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-ink); border-radius: 8px; font-size: 15px; cursor: pointer;
}
.qqd-step input {
	flex: 1; min-width: 0; width: 100%; text-align: center; min-height: 38px;
	background: var(--qqd-paper); border: 1px solid var(--qqd-line);
	color: var(--qqd-ink); border-radius: 8px; padding: 8px;
	font: 700 12.5px ui-monospace, Menlo, Consolas, monospace;
}
.qqd-payout {
	display: flex; align-items: center; justify-content: space-between;
	border-top: 1px solid var(--qqd-line); padding-top: 10px; margin-bottom: 10px;
}
.qqd-payout span { font-size: 11.5px; color: var(--qqd-muted-text); }
.qqd-payout b { font: 700 15px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-up-text); }
.qqd-buy { display: flex; gap: 9px; }
.qqd-buy button {
	flex: 1; border: 0; border-radius: 11px; padding: 13px 0;
	cursor: pointer; min-height: 54px;
}
.qqd-buy b { display: block; font: 700 14px/1 inherit; }
.qqd-buy i {
	display: block; font-style: normal; margin-top: 3px;
	font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; opacity: .9;
}
.qqd-buy-note { font-size: 10px; line-height: 1.5; color: var(--qqd-muted-text); margin: 9px 0 0; text-align: center; }

@media (min-width: 900px) {
	.qqd-p { max-width: 720px; margin: 0 auto; }
	.qqd-ticket { border-radius: 16px; margin: 12px 0 0; }
}

/* bots */
.qqd-botbar {
	display: flex; align-items: center; gap: 8px;
	border: 1px solid var(--qqd-line); background: var(--qqd-card);
	border-radius: 12px; padding: 11px 12px;
}
.qqd-botname { flex: 1; min-width: 0; }
.qqd-botname b { display: block; font-size: 13.5px; }
.qqd-botname i {
	display: block; font-style: normal; margin-top: 2px;
	font: 500 10.5px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text);
}
.qqd-run {
	flex: none; background: var(--qqd-up); color: var(--qqd-on-up); border: 0;
	border-radius: 9px; padding: 11px 16px; font: 700 12px/1 inherit;
	cursor: pointer; min-height: 42px;
}
.qqd-stop {
	flex: none; background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-muted-text); border-radius: 9px; padding: 11px 16px;
	font: 700 12px/1 inherit; cursor: pointer; min-height: 42px;
}
.qqd-workspace {
	position: relative; margin-top: 10px; min-height: 168px;
	border: 1px dashed var(--qqd-line); border-radius: 12px;
	background: var(--qqd-cream); padding: 26px 12px 12px;
}
.qqd-ws-tag {
	position: absolute; top: 8px; left: 11px;
	font: 600 9px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .1em; text-transform: uppercase; color: var(--qqd-muted-text);
}
.qqd-blk {
	border-radius: 8px; padding: 10px 12px; margin-bottom: 7px;
	font: 600 11.5px/1.3 inherit;
}
.qqd-blk-1 { background: var(--qqd-amber); color: var(--qqd-on-amber); }
.qqd-blk-2 { background: var(--qqd-accent-strong); color: var(--qqd-on-accent); margin-left: 12px; }
.qqd-blk-3 { background: var(--qqd-up); color: var(--qqd-on-up); margin-left: 24px; }
.qqd-blk-4 {
	background: var(--qqd-card); color: var(--qqd-ink);
	border: 1px solid var(--qqd-line); margin-left: 24px;
}
.qqd-params { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qqd-param {
	font: 600 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .1em; text-transform: uppercase; color: var(--qqd-muted-text);
}
.qqd-param input {
	display: block; width: 100%; margin-top: 6px; min-height: 40px;
	background: var(--qqd-paper); border: 1px solid var(--qqd-line);
	color: var(--qqd-ink); border-radius: 8px; padding: 9px;
	font: 700 12.5px ui-monospace, Menlo, Consolas, monospace;
}
.qqd-cat { border: 1px solid var(--qqd-line); border-radius: 12px; overflow: hidden; background: var(--qqd-card); }
.qqd-cat-i {
	display: flex; align-items: center; gap: 10px; padding: 12px;
	border-bottom: 1px solid var(--qqd-line); min-height: 56px;
}
.qqd-cat-i:last-child { border-bottom: 0; }
.qqd-cat-n { flex: 1; min-width: 0; }
.qqd-cat-n b { display: block; font-size: 12.5px; }
.qqd-cat-n i { display: block; font-style: normal; font-size: 10.5px; color: var(--qqd-muted-text); margin-top: 2px; }
.qqd-cat-p { font: 700 11.5px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-accent-strong); }

/* the live chart */
.qqd-chart { overflow: hidden; }
.qqd-chart-canvas { position: absolute; inset: 0; }
.qqd-chart .qqd-chart-price { z-index: 3; }
.qqd-chart .qqd-chart-note { position: relative; z-index: 2; }
.qqd-chart[data-feed="live"] .qqd-chart-note { display: none; }

/* the chart badge — small, corner, never a blocker */
.qqd-chart-badge {
	position: absolute; left: 8px; bottom: 8px; z-index: 4;
	font: 600 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .03em;
	background: var(--qqd-card); color: var(--qqd-muted-text);
	border: 1px solid var(--qqd-line); border-radius: 99px;
	padding: 5px 9px; max-width: calc(100% - 16px);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qqd-chart-badge[data-kind="offline"],
.qqd-chart-badge[data-kind="refused"] { border-color: var(--qqd-down); color: var(--qqd-down-text); }
.qqd-chart-badge[data-kind="frozen"] { border-color: var(--qqd-amber); }
.qqd-chart[data-feed="live"] .qqd-chart-badge { display: none; }

/* the driver's own voice — a failed fetch says which call and why */
.qqd-error {
	margin: 12px; padding: 12px 13px;
	border: 1px solid var(--qqd-down); border-radius: 10px;
	background: var(--qqd-card);
}
.qqd-error b { display: block; font-size: 12.5px; color: var(--qqd-down-text); margin-bottom: 4px; }
.qqd-error span { display: block; font-size: 11.5px; line-height: 1.55; color: var(--qqd-muted-text); }
.qqd-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--qqd-muted-text); }

/* the review harness banner — always visible, never mistakable for the server */
#qqd-harness-banner {
	background: var(--qqd-amber); color: var(--qqd-on-amber);
	padding: 9px 12px; font: 500 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#qqd-harness-banner b { display: inline; font-weight: 700; }
#qqd-harness-banner span { display: block; margin-top: 2px; }
.qqd-runstrip[data-state="running"] { border-color: var(--qqd-up); color: var(--qqd-up-text); }
.qqd-runstrip[data-state="error"] { border-color: var(--qqd-down); color: var(--qqd-down-text); }
.qqd-cat-i { cursor: pointer; }
.qqd-cat-i:hover { background: var(--qqd-cream); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* options panel */
.qqd-opt-select {
	flex: none; max-width: 44%; background: var(--qqd-paper);
	border: 1px solid var(--qqd-line); color: var(--qqd-ink);
	border-radius: 8px; padding: 8px; font: 600 11.5px inherit; min-height: 38px;
}
.qqd-opt-fams { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.qqd-opt-fams::-webkit-scrollbar { display: none; }
.qqd-opt-fams button, .qqd-opt-fams .qqd-fam {
	flex: none; background: var(--qqd-cream); border: 1px solid var(--qqd-line);
	color: var(--qqd-muted-text); border-radius: 99px; padding: 9px 12px;
	font: 600 11px/1 inherit; cursor: pointer; min-height: 36px; white-space: nowrap;
}
.qqd-opt-fams button[aria-selected="true"], .qqd-opt-fams .qqd-fam.is-on {
	background: var(--qqd-accent-strong); border-color: var(--qqd-accent-strong);
	color: var(--qqd-on-accent);
}
.qqd-opt-loading { font: 500 11px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text); }
.qqd-opt-barrier { margin-bottom: 10px; }
.qqd-opt-barrier input {
	width: 100%; background: var(--qqd-paper); border: 1px solid var(--qqd-line);
	color: var(--qqd-ink); border-radius: 8px; padding: 10px; min-height: 40px;
	font: 700 12.5px ui-monospace, Menlo, Consolas, monospace;
}
.qqd-opt-quote {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	border-top: 1px solid var(--qqd-line); padding-top: 10px; margin-bottom: 10px;
}
.qqd-opt-q-l { font-size: 11.5px; color: var(--qqd-muted-text); }
.qqd-opt-quote b { font: 700 17px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-up-text); }
.qqd-opt-pct { font: 600 11px ui-monospace, Menlo, Consolas, monospace; color: var(--qqd-muted-text); }
.qqd-opt-ttl {
	margin-left: auto; font: 600 10px ui-monospace, Menlo, Consolas, monospace;
	color: var(--qqd-muted-text);
}
.qqd-opt-quote[data-stale="1"] b { color: var(--qqd-muted-text); }

/* the options mount — his module lands its own ticket in here */
.qqd-opt-shell { display: grid; grid-template-rows: auto; margin-top: 10px; min-height: 260px; }
.qqd-opt-main { min-height: 240px; }
.qqd-opt-shell:empty::after,
.qqd-opt-main:empty::after {
	content: "Waiting for the options client to mount…";
	display: block; padding: 22px 12px; text-align: center;
	font: 500 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
	color: var(--qqd-muted-text);
	border: 1px dashed var(--qqd-line); border-radius: 12px;
}

/* ── R7 · the Deriv terminal inside his appshell ──────────────────────
   His switcher sets a body class; these rules only decide which pane is
   visible. No layout is duplicated — the mount is a grid child of
   .qqt-appshell exactly like .qqt-appshell-main, so it inherits the
   placement his shell already computes. */
.qqd-terminal-mount { min-width: 0; overflow: hidden; }
.qqd-terminal-mount[hidden] { display: none; }
body.qqt-terminal-deriv .qqt-appshell-main,
body.qqt-terminal-deriv .qqt-appshell-left { display: none; }
body.qqt-terminal-deriv .qqd-terminal-mount { display: block; }

/* ── R9 · the doors ──────────────────────────────────────────────────
   Rendered inside HIS shell, so they take his surface tokens — a door into
   trading is part of the marketplace, not part of the terminal.

   The one thing they do NOT take is --sh-dim for body text. It resolves to
   #8A7D68, which reads 3.77:1 on paper and 4.03:1 on card — under AA. That is
   a pre-existing gap in the shell affecting 30 rules, and changing a token
   thirty rules depend on is his decision, not a side effect of adding doors.
   So these use the value R1 already computed to pass on every surface in the
   house, and the finding gets reported rather than silently patched over. */
.qq-screen-trading { padding: 12px; --qq-door-dim: #5D6350; }
[data-house="qipqop"] .qq-screen-trading { --qq-door-dim: #A59281; }
.qq-screen-trading .qq-screen-h {
	font: 600 11px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--qq-door-dim); margin: 0 0 10px;
}
.qq-node-list { display: flex; flex-direction: column; gap: 8px; }
.qq-node {
	display: flex; align-items: flex-start; gap: 11px; padding: 13px;
	border: 1px solid var(--sh-edge, #E4D7C0); background: var(--sh-card, #fff);
	border-radius: 12px; text-decoration: none; color: inherit; min-height: 56px;
}
.qq-node-i { font-size: 19px; line-height: 1.2; flex: none; }
.qq-node-t { flex: 1; min-width: 0; }
.qq-node-t b { display: block; font-size: 13.5px; color: var(--sh-text, #20402F); }
.qq-node-t i {
	display: block; font-style: normal; margin-top: 3px;
	font-size: 11.5px; line-height: 1.5; color: var(--qq-door-dim);
}
.qq-node-empty {
	margin: 10px 0 0; padding: 12px; border: 1px dashed var(--sh-edge, #E4D7C0);
	border-radius: 10px; font-size: 11.5px; line-height: 1.6;
	color: var(--qq-door-dim);
}
.qq-node-empty code {
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
	background: var(--sh-hover, #F2EDE0); padding: 1px 5px; border-radius: 5px;
	color: var(--sh-text, #20402F);
}
.qq-trading-link { color: var(--sh-accent, #A65F30); }

/* ── THE TERMINAL, LIVING INSIDE THE SHELL ───────────────────────────
   The Deriv panels were written to sit inside .qqd-shell, which sets the base
   text colour and the surface. Rendered as a shell SCREEN there is no
   .qqd-shell anywhere, so every panel inherited the browser default — black
   text on the night house's cards, measured at 1.08:1.

   A component that only looks right inside one specific wrapper is a component
   that breaks the first time it is reused. So the scope carries its own floor. */
.qqd-in-shell {
	color: var(--qqd-ink);
	background: transparent;
	min-width: 0;
}
.qqd-in-shell * { box-sizing: border-box; }
/* The shell already draws a header and a bottom bar. The panel must not bring
   a second set — it is a guest in this room. */
.qqd-in-shell .qqd-tabs,
.qqd-in-shell .qqd-bn,
.qqd-in-shell .qqd-acct { display: none; }

/* ── MARKET WATCH ────────────────────────────────────────────────────
   A long list on a phone. Rows are 44px minimum because a price you cannot
   reliably tap is a price you cannot trade. */
.qqd-watch-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.qqd-watch-head b { font: 700 13px/1 inherit; color: var(--qqd-ink); }
.qqd-watch-head i { font-style: normal; font-size: 10.5px; color: var(--qqd-muted-text); }
.qqd-watch-g { margin-bottom: 14px; }
.qqd-watch-g h4 {
	margin: 0 0 6px;
	font: 600 9px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--qqd-muted-text);
}
.qqd-watch-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; min-height: 44px; text-align: left; cursor: pointer;
	background: var(--qqd-card); border: 1px solid var(--qqd-line);
	border-radius: 9px; padding: 8px 10px; margin-bottom: 5px;
}
.qqd-watch-n { min-width: 0; }
.qqd-watch-n b {
	display: block; font: 600 12px/1.35 inherit; color: var(--qqd-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qqd-watch-n i {
	font-style: normal; font: 500 9.5px ui-monospace, Menlo, monospace;
	color: var(--qqd-muted-text);
}
.qqd-watch-p { text-align: right; flex: none; }
.qqd-watch-p b {
	display: block; font: 700 12.5px ui-monospace, Menlo, monospace;
	color: var(--qqd-ink);
	/* tabular so a changing last digit does not shuffle the column */
	font-variant-numeric: tabular-nums;
}
.qqd-watch-p i {
	font-style: normal; font: 500 9px ui-monospace, monospace;
	color: var(--qqd-muted-text);
}
.qqd-watch-p[data-dir="up"] b   { color: var(--qqd-up-text); }
.qqd-watch-p[data-dir="down"] b { color: var(--qqd-down-text); }
.qqd-watch-row.is-off { opacity: .55; }

/* What the house does not list, and why. Not an error — a statement. */
.qqd-watch-held {
	border: 1px solid var(--qqd-line); border-left: 3px solid var(--qqd-accent-strong);
	border-radius: 9px; padding: 10px 11px; margin-bottom: 12px;
	background: var(--qqd-card);
}
.qqd-watch-held b { display: block; font: 600 12px/1.4 inherit; color: var(--qqd-ink); }
.qqd-watch-held p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--qqd-muted-text); }

/* The market list the chevron opens. Rows are 44px because a market you
   cannot reliably tap is a market you cannot trade. */
.qqd-mkt-list {
	border: 1px solid var(--qqd-line); border-radius: 10px; margin: -4px 0 10px;
	background: var(--qqd-card);
	/* 58 markets do not fit a phone. A capped, scrollable list is the whole
	   point — and -webkit-overflow-scrolling keeps it from feeling stuck on
	   older iOS, where an un-momentumed scroller reads as a broken control. */
	max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;   /* the page must not scroll behind it */
}
.qqd-mkt-list[hidden] { display: none; }
.qqd-mkt-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	min-height: 44px; padding: 8px 11px; text-decoration: none;
	border-bottom: 1px solid var(--qqd-line);
}
.qqd-mkt-list a:last-child { border-bottom: 0; }
.qqd-mkt-list .qqd-mkt-n b {
	display: block; font: 600 12.5px/1.35 inherit; color: var(--qqd-ink);
}
.qqd-mkt-list .qqd-mkt-n i {
	font-style: normal; font: 500 9.5px ui-monospace, Menlo, monospace;
	color: var(--qqd-muted-text);
}
.qqd-mkt-list .qqd-mkt-p b {
	font: 700 12px ui-monospace, monospace; color: var(--qqd-ink);
	font-variant-numeric: tabular-nums;
}