/* =============================================================================
 * crypto-screener.css — single consolidated stylesheet
 *
 * Replaces the previous 7-file split (stylesheet.css, stripes.css, modern.css,
 * modal-spinner.css, main-spinner.css, main-data-selector.css,
 * market-data-selector.css) with one ordered, deduplicated file.
 *
 * Visual target: the production look at symrank.com — dense, dark, uniform
 * rows with grey borders, lit accent icons, scrolling marquee bottom-right.
 *
 * Notes on JS interop:
 *   - client.js drives row colors via inline styles on table.contentTable,
 *     tr, th, td (see updateColorScheme). This file uses no !important on
 *     those selectors so inline styles can win.
 *   - invertIconColors() / resetIconColors() set .footerIcons filter +
 *     background-color inline. The base .footerIcons rule MUST NOT use
 *     !important on filter/background-color or the notification glow breaks.
 * ============================================================================= */


/* ========== 1. Roboto font-face ========== */

@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 100; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Thin.ttf')        format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 100; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-ThinItalic.ttf')  format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 300; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Light.ttf')       format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 300; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-LightItalic.ttf') format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 400; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Regular.ttf')     format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 400; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Italic.ttf')      format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 500; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Medium.ttf')      format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 500; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-MediumItalic.ttf') format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 700; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Bold.ttf')        format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 700; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-BoldItalic.ttf')  format("truetype"); }
@font-face { font-family: "Roboto"; font-style: normal;  font-weight: 900; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-Black.ttf')       format("truetype"); }
@font-face { font-family: "Roboto"; font-style: italic;  font-weight: 900; font-display: swap; src: url('/css/libs/fonts/Roboto/Roboto-BlackItalic.ttf') format("truetype"); }


/* ========== 2. CSS custom properties (dark-only) ==========
 *
 * Light mode was removed — the app has run dark-only for a long time and
 * the indirection added complexity without value. Variables below are the
 * actual values that were in [data-theme="dark"]. The body[data-theme]
 * attribute set by changeMode() in client.js is now inert but harmless. */

:root {
	--link-color: #74caf8;
	--table-content-color: #f7f3f3;
	--table-background-color: #353535;
	--table-background-hover-color: #585858;
	--table-border: 1px solid #424242;
	--selector-background-color: #282828;
	--content-box-color: #cccccc;
	--content-box-background-color: #252525;
	--dialog-background-color: #252525;

	/* Accent palette: the green that the alert pulse uses, plus a teal
	   highlight used for subtle hover glows and focus rings. */
	--accent: #b6f0a8;
	--accent-glow: rgba(0, 229, 199, 0.18);

	--surface-elevated: #0e1116;
	--surface-elevated-2: #1a1f25;
	--border-faint: rgba(255, 255, 255, 0.06);
	--border-soft: rgba(255, 255, 255, 0.10);

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========== 3. Base reset ========== */

* {
	outline: 0 !important;
	box-shadow: 0;
}

html {
	font-family: "Roboto", system-ui, -apple-system, sans-serif;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	image-rendering: -webkit-optimize-contrast;
	background-color: #000000;
	color: #ffffff;
}

body::-webkit-scrollbar {
	display: none;
}

/* Per-table font sizing happens at the contentTable / #marketTable level. */

input {
	border-radius: var(--radius-sm);
	transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 229, 199, 0.25);
}

select {
	border-radius: var(--radius-sm);
}

button {
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: transform 120ms var(--ease), filter 120ms var(--ease);
}

button:hover {
	filter: brightness(1.1);
}

button:active {
	transform: translateY(1px);
}

mark {
	background-color: #a9d5d6;
	border-radius: 3px;
	padding: 1px 2px;
}

a, a:link, a:visited, a:hover, a:active {
	color: #7aacf2;
	text-decoration: none;
}

/* Generic scrollbar styling (modals/panels override individually below). */
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}
*::-webkit-scrollbar-thumb {
	background: #3f3f3f;
	border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover {
	background: #525252;
}

/* Tabular figures everywhere numbers appear — keeps columns aligned. */
.contentTable td,
.contentTable th,
#btcPrice,
#clock,
[id*="cellPair"],
[id*="cellBought"],
[id*="cellPrice"] {
	font-variant-numeric: tabular-nums;
}


/* ========== 4. Flash overlay (used on certain keyboard combos) ========== */

.flash {
	z-index: 18000;
	opacity: 0;
	position: fixed;
	background-color: #000000;
	width: 100%;
	height: 100%;
}


/* ========== 5. Lock screen ========== */

.loginHeader {
	color: #000000;
	font-size: 2rem;
	background-color: #666666;
	text-shadow: 1px 1px 1px #868686;
	text-align: left;
	-webkit-background-clip: text;
	-moz-background-clip: text;
}

#lockScreen {
	z-index: 19000;
	position: fixed;
	display: none;
	background-color: #3b3b3b;
	width: 100%;
	height: 100%;
}

#lockScreenBG {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 93%, rgba(0,0,0,0) 99%);
}

#lockPassword {
	background-color: #dadada;
	border: 1px solid #a8a8a8;
}

#lockBoxContainerTop {
	position: relative;
	color: #000000;
	width: 400px;
	top: 35%;
	bottom: 50%;
	margin: 0 auto;
	height: 100px;
	padding-top: 5px;
	padding-bottom: 45px;
	font-size: 1.2rem;
	border-radius: 3px;
	background: linear-gradient(to bottom, rgba(218,232,208,1) 0%, rgba(241,250,234,1) 100%);
	box-shadow: 0 0 2px 2px #bad0c1;
}

#lockBoxContainer {
	position: relative;
	width: 80%;
	margin: 0 auto;
}

#lockBox {
	position: relative;
	margin: 0 auto;
	font-size: 1.2rem;
}

#lockBoxMessage {
	position: relative;
	top: 10px;
	display: none;
	text-align: left;
	font-size: 0.95rem;
	font-weight: 900;
}


/* ========== 6. Page layout (body / header / footer / container) ========== */

#bodyContainer {
	position: absolute;
	margin: 0 auto;
	top: 50px;
	left: 0;
	right: 0;
	width: 100%;
	height: auto !important;
}

#headerContainer {
	z-index: 8000;
	position: fixed;
	display: flex;
	align-items: center;
	gap: 0;
	text-align: left;
	left: 0;
	right: 0;
	top: 0;
	padding: 12px 20px 14px;
	width: 100%;
	background-color: #000000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	cursor: pointer;
}

#screenerSiteNav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85rem;
}

#screenerSiteNav a {
	color: var(--text-content-color, #b4bcc5);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	letter-spacing: 0.01em;
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

#screenerSiteNav a:link,
#screenerSiteNav a:visited {
	color: #b4bcc5;
}

#screenerSiteNav a:hover {
	color: #9be8e8;
	background-color: rgba(155, 232, 232, 0.10);
}

/* Back-to-site link on the left of the screener header.
 * The cyan badge logo is the primary "exit the screener" affordance —
 * click it to return to /. No text label; the brand mark stands alone. */
#screenerBackLink {
	display: flex;
	align-items: center;
	color: #ffffff;
	text-decoration: none;
	padding: 4px;
	border-radius: var(--radius-sm);
	margin-right: 16px;
	flex-shrink: 0;
	transition: background-color 150ms var(--ease);
}

#screenerBackLink:hover {
	background-color: rgba(155, 232, 232, 0.08);
}

.screener-back-badge {
	width: 32px;
	height: 32px;
	display: block;
	flex-shrink: 0;
}

#header {
	position: relative;
	display: inline-block;
	min-height: 100%;
	height: auto;
	width: auto;
	margin-left: 20px;
	color: #ffffff;
	letter-spacing: 0.01em;
}

.headerText {
	color: #b4b4a5;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Modal title — when .headerText appears inside a modal container, make it
 * read as a proper modal title (larger, brighter, more weight). */
#signalAlertsContainer .headerText,
#marketAlertsContainer .headerText,
#tvSettingsContainer .headerText,
#newsContainer .headerText,
#aboutContainer .headerText,
#infoContainer .headerText,
#logsContainer .headerText,
#logsMainContainer .headerText,
#sessionContainer .headerText,
#moreContainer .headerText,
#symbolContainer .headerText,
#keysContainer .headerText {
	color: #f5f5f5;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: 0;
	text-transform: none;
}

.headerSpace {
	color: #666666;
}

#clock {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	text-align: left;
	cursor: pointer;
	margin-left: 20px;
	color: #cdcdcd;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

#btcPrice {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	text-align: left;
	cursor: pointer;
	margin-left: 20px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

#refreshBox {
	z-index: 5300;
	margin-left: 15px;
}

#refreshText {
	cursor: pointer;
}

#accountsText {
	z-index: 5400;
	cursor: pointer;
}

#addFundsText {
	z-index: 5400;
}


/* The non-popup home container (used outside remoteClient mode). */
#container {
	position: absolute;
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 7px;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 98%;
	height: auto !important;
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 33%, rgba(0,0,0,0) 100%);
	background-color: #3f3f3f;
	border-radius: 5px;
}

#content {
	z-index: 5000;
	position: relative;
	overflow-x: auto;
	width: 98%;
	height: 500px;
	background-color: var(--table-background-color);
	border-radius: 5px;
}

#content::-webkit-scrollbar         { width: 0; height: 9px; }
#content::-webkit-scrollbar-track   { box-shadow: inset 0 0 4px rgba(0,0,0,0.3); border-radius: 10px; }
#content::-webkit-scrollbar-thumb   { border-radius: 10px; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
#content::-webkit-scrollbar-corner  { display: none; }


/* ========== 7. Footer + scrolling marquee ==========
 *
 * BUG-FIX: previous version hid the marquee via aggressive backdrop-filter +
 * fadeUp animation on #footer. Both removed here. Marquee is visible by
 * default; client.js documentReady() explicitly sets visibility:visible too. */

#footer {
	z-index: 7000;
	position: fixed;
	display: inline-block;
	text-align: left;
	left: 0;
	bottom: 0;
	width: 100%;
	margin-top: 15px;
	padding-bottom: 15px;
	background-color: #000000;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

#bodyFooter {
	position: relative;
	margin: 0 auto;
	min-height: 100%;
	padding: 10px 0;
}

.footerBox {
	position: relative;
	display: inline-block;
	background-color: #3f3f3f;
	padding: 7px;
	margin-top: -9px;
	margin-bottom: 5px;
	border-radius: 3px;
}

.footerIconsContainer {
	position: relative;
	display: inline-block;
	top: 9px;
	margin-left: 20px;
	background-color: #1a1f25;
	border: 1px solid rgba(255, 255, 255, 0.04);
	padding: 4px 12px;
	border-radius: 6px;
}

/* CRITICAL: no !important on filter or background-color.
 * client.js invertIconColors() sets these inline to flash the alert state;
 * resetIconColors() clears them. !important would block both. */
.footerIcons {
	position: relative;
	height: 21px;
	padding: 5px;
	filter: invert(85%);
	background-color: #f9f9f9;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 150ms var(--ease),
	            transform 150ms var(--ease),
	            box-shadow 150ms var(--ease);
}

.footerIcons:hover {
	background-color: #d8d8d8;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 229, 199, 0.15);
	cursor: pointer;
}

#footerTitle {
	position: relative;
	white-space: nowrap;
	float: left;
	padding-top: 10px;
	margin-left: 20px;
	color: #cccccc;
	font-size: 1rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: color 150ms var(--ease);
}

#footerTitle:hover {
	color: #00e5c7;
}

#footerTitleMessage {
	position: relative;
	white-space: nowrap;
	float: left;
	padding-top: 10px;
	margin-left: 20px;
	font-weight: 900;
	color: #ffffff;
	font-size: 1rem;
}

.footerMarqueeContainer {
	z-index: 6900;
	position: absolute;
	float: right;
	margin-right: 0;
	width: 725px;
	height: auto;
	overflow: hidden;
	padding-top: 10px;
	cursor: pointer;
	right: 0;
	bottom: 0;
	background-color: #000000;
	border-top-left-radius: 5px;
	/* Default to visible — documentReady() also sets visibility:visible
	   explicitly; making sure neither side is fighting the other. */
	visibility: visible;
}

.footerMarquee,
.footerMarqueeTop,
.footerMarqueeBottom,
.footerMarqueeBottom2 {
	position: relative;
	overflow: hidden;
	padding-bottom: 1px;
	font-size: 0.88rem;
	line-height: 1.25;
}

#footerTickerAll {
	position: relative;
	display: none;
	margin-left: 3px;
}

.footerTickerAllClass {
	position: relative;
	width: 100%;
	/* Slightly smaller font so longer symbols (BANANAS31, BUTTCOIN,
	 * VIRTUAL, 币安人生) fit alongside their float-right scores on a
	 * single line instead of wrapping the scores to a second line.
	 * Fixed layout enforces equal-width columns so one wide row can't
	 * push others around. */
	font-size: 0.88rem;
	table-layout: fixed;
}

#discord {
	position: fixed;
	left: 5px;
	bottom: 0;
	opacity: 0.85;
	transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}

#discord:hover {
	opacity: 1;
	transform: scale(1.04);
}


/* ========== 8. Loading indicator (modern shimmer sweep) ==========
 *
 * Same DOM as the legacy candy-stripe (.loadingStripes > .bgStripes), so the
 * JS toggling #xxxStripes visibility still works. The candy stripes are
 * replaced by a subtle gradient sweep that reads as "data loading" without
 * the dated barber-pole feel. */

@keyframes shimmer-sweep {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.loadingStripes {
	height: 3px;
	text-align: center;
	position: relative;
	overflow: hidden;
	padding: 0;
	width: 32%;
	max-width: 320px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 999px;
	box-shadow: none;
}

.bgStripes {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 229, 199, 0.55) 50%,
		transparent 100%
	);
	animation: shimmer-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#homeStripes,
#chartStripes,
#marketStripes,
#volumeStripes,
#volatilityStripes {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	font-size: 1.2rem;
}


/* ========== 9. Spinners ========== */

@keyframes sp-anime {
	100% {
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: rotate(360deg);
	}
}

@keyframes spmain-anime {
	100% {
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: rotate(360deg);
	}
}

.spinner {
	z-index: 1000;
	display: none;
	position: absolute;
	float: right;
	right: 20px;
}

.modspin-main-container {
	display: flex;
	float: right;
}

.mod-spinner-main {
	width: 15px;
	height: 15px;
	border: 2px #ddd solid;
	border-top: 2px #7c7c7c solid;
	border-radius: 50%;
	animation: spmain-anime 0.8s infinite linear;
}

.modspin-container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mod-spinner {
	width: 40px;
	height: 40px;
	border: 4px #ddd solid;
	border-top: 4px #424341 solid;
	border-radius: 50%;
	animation: sp-anime 0.8s infinite linear;
}

#modspin-overlay,
#modspinlogs-overlay,
#modspinnews-overlay,
#modspinsignals-overlay,
#modspinmarketalerts-overlay {
	position: fixed;
	top: 0;
	z-index: 6550;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.6);
}

.is-hide {
	display: none;
}


/* ========== 10. Tables — main contentTable used by tablesorter ==========
 *
 * No !important here. client.js updateColorScheme() sets background-color,
 * color, and border via inline styles on every td/th/tr from the dark_mode
 * config. We provide a sane fallback in case JS hasn't run yet, but stop
 * once JS takes over. */

table.contentTable {
	z-index: 5000;
	position: relative;
	color: var(--table-content-color);
	background-color: var(--table-background-color);
	padding: 0;
	width: 100%;
	border-spacing: 0;
}

.contentTable tr:hover {
	background-color: var(--table-background-hover-color);
	cursor: pointer;
}

table.contentTable th {
	z-index: 5700;
	position: sticky;
	top: 0;
	color: #e0e0e0;
	border: var(--table-border);
	background-color: var(--surface-elevated-2);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.7rem 0.55rem;
	text-align: left;
	letter-spacing: 0.01em;
}

table.contentTable td {
	height: auto;
	border: var(--table-border);
	padding: 8px 6px;
	text-align: left;
	vertical-align: middle;
	font-size: 0.92rem;
	transition: background-color 120ms var(--ease);
}

table.keys {
	height: auto;
	border: 0;
	border-collapse: separate;
	color: #cccccc;
	background-color: #000000;
	padding-left: 5px;
	text-align: left;
	vertical-align: middle;
}

table.keys td {
	border: 0;
	padding-bottom: 10px;
}

#colorBlock {
	border-radius: 3px;
	height: 15px;
	width: 95%;
	text-align: center;
}

#title {
	position: relative;
	font-size: 1rem;
	padding: 25px 0;
}


/* ========== 11. Tablesorter filter row ========== */

.tablesorter .filtered { display: none; }
.tablesorter thead .disabled { display: none; }

.tablesorter-filter {
	width: 95%;
	height: inherit;
	margin: 2px;
	padding: 6px 8px;
	background-color: #fff;
	border: 1px solid #444;
	color: #1a1a1a;
	font-size: 0.85rem;
	border-radius: var(--radius-sm);
	box-sizing: border-box;
	transition: height 0.1s ease, box-shadow 120ms var(--ease);
}

.tablesorter-filter:focus {
	box-shadow: 0 0 0 2px var(--accent-glow);
}

.tablesorter-selectMarketFilter {
	/* placeholder used by client.js for filter cell selection */
}


/* ========== 12. Tooltips ========== */

.tooltipPair {
	z-index: 5500;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltipPair .tooltiptextPair {
	visibility: hidden;
	width: auto;
	background-color: #000;
	color: #fff;
	text-align: left;
	padding: 7px;
	border-radius: 6px;
	position: absolute;
}

.tooltipPair:hover .tooltiptextPair { visibility: visible; }

.tooltipOptions {
	z-index: 5600;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltipOptions .tooltiptextOptions {
	visibility: hidden;
	width: 150px;
	background-color: #181818;
	color: #fff;
	text-align: left;
	padding: 7px;
	border-radius: 6px;
	left: 38px;
	top: -75px;
	position: absolute;
	box-shadow: 0 0 2px 2px rgba(52,52,52,0.75);
}

.tooltipOptions:hover .tooltiptextOptions { visibility: visible; }

.tooltipTop {
	z-index: 5600;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltipTop .tooltiptextTop {
	visibility: hidden;
	width: 250px;
	background-color: #181818;
	color: #fff;
	text-align: left;
	padding: 7px;
	border-radius: 6px;
	top: -100px;
	position: absolute;
	box-shadow: 0 0 2px 2px rgba(52,52,52,0.75);
}

.tooltipTop:hover .tooltiptextTop { visibility: visible; }

/* Generic .tooltip used throughout the app for pair info popups. */
.tooltip {
	z-index: 5500;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 300px;
	background-color: #000;
	color: #fff;
	text-align: left;
	top: -2px;
	padding: 7px;
	margin-left: 8px;
	border-radius: 6px;
	position: absolute;
}

.tooltip .tooltiptext::before {
	content: "";
	position: absolute;
	top: 1.1px;
	right: 100%;
	margin-right: -2px;
	margin-top: 0;
	border-width: 8px;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}

.tooltip:hover .tooltiptext { visibility: visible; }

/* Tooltip variant used in signal alerts modal — lighter background. */
.tooltipSignals {
	z-index: 5500;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.tooltipSignals .tooltiptextSignals {
	visibility: hidden;
	width: 350px;
	background-color: #cccccc;
	color: #000;
	text-align: left;
	top: -2px;
	padding: 7px;
	margin-left: 8px;
	border-radius: 6px;
	position: absolute;
}

.tooltipSignals .tooltiptextSignals::before {
	content: "";
	position: absolute;
	top: 1.1px;
	right: 100%;
	margin-right: -2px;
	margin-top: 0;
	border-width: 8px;
	border-style: solid;
	border-color: transparent #cccccc transparent transparent;
}

.tooltipSignals:hover .tooltiptextSignals { visibility: visible; }


/* ========== 13. jQuery UI dialog overrides ========== */

#dialog {
	background-color: #cccccc;
}

.ui-dialog {
	z-index: 20000 !important;
	top: 0;
	left: 0;
	padding: 0.2em;
	border: 0;
}

.dialogRound {
	border-radius: 8px;
	box-shadow: -1px 2px 15px -2px rgba(0,0,0,0.59);
}

.ui-button {
	margin-left: 25px !important;
}

.ui-dialog-titlebar-close {
	visibility: hidden;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	text-align: center;
	float: none !important;
}

.ui-dialog .ui-dialog-titlebar {
	border: 0;
	background-color: #3f3f3f;
}

.ui-dialog .ui-dialog-content {
	border: 0;
	font-size: 1.2rem;
	color: #000;
	background-color: #999999;
	overflow: auto;
	border-radius: 4px;
}

.ui-widget-overlay {
	opacity: 0.65 !important;
	background: rgb(45, 45, 45) !important;
}

.ui-datepicker-prev:before { content: "<"; float: left; }
.ui-datepicker-next:before { content: ">"; float: right; }


/* ========== 14. Row-hover backgrounds for alert lists ========== */

.marketAlertHover:hover,
.signalAlertHover:hover,
.profitAlertsHover:hover,
.logHeaderHover:hover {
	background-color: #393939;
	cursor: pointer;
}

.logMainHover:hover {
	background-color: #5f5f5f;
	cursor: pointer;
}


/* ========== 15. News view & news rows ========== */

.newsContainer {
	position: relative;
	display: inline-block;
	width: 100%;
	min-height: 160px;
}

.newsTitle {
	position: relative;
	display: inline-block;
	color: #7aacf2;
	font-weight: 600;
	margin-bottom: 3px;
}

.newsFooterCount {
	position: relative;
	display: inline-block;
	bottom: 0;
	right: 0;
	float: right;
	font-size: 0.9rem;
	color: #999999;
}

.newsFooterTime {
	position: relative;
	display: inline-block;
	bottom: 0;
	right: 0;
	float: left;
	font-size: 1rem;
	color: #d3d3d3;
}

.newsImg {
	width: 250px;
	text-align: left;
	border-radius: 5px;
	box-shadow: 0 5px 8px rgba(3, 0, 3, 0.8);
}

.newsRow {
	display: table;
	width: 98%;
	padding: 14px;
	margin-bottom: 12px;
	color: #f7f7f7;
	background-color: #1a1f25;
	border: 1px solid var(--border-faint);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}

.newsRow:hover {
	background-color: #232931;
	border-color: var(--border-soft);
	transform: translateY(-1px);
}

.newsQRCodeContainer {
	position: relative;
	display: none;
	margin-top: 10px;
}

.newsQRCode {
	position: relative;
	margin-top: 10px;
	background-color: #ffffff;
	padding: 5px;
	border-radius: 5px;
}

.newsQRCodeIcon {
	position: relative;
	height: 15px;
	padding: 2px;
	margin-left: 5px;
	margin-bottom: -2px;
	background-color: #676767;
	border-radius: 2px;
	cursor: pointer;
}

table.news {
	font-size: 1.1rem;
	border-collapse: separate;
	left: 0;
	width: 100%;
}

table.news td {
	height: auto;
	width: 100%;
	border: 0;
	left: 0;
	text-align: left;
	vertical-align: top;
}

.newsSearchInputContainer {
	position: relative;
}

.newsSearchInputContainer span {
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;
	line-height: 37px;
}

#newsSearchClear {
	font-size: 1.25rem;
	color: #acacac;
	cursor: pointer;
}

input#newsSearchInput {
	position: relative;
	top: 0;
	margin-top: 7px;
	float: left;
	height: 18px;
	width: 240px;
	border: 1px solid #2a2a2a;
	border-radius: var(--radius-sm);
	padding: 6px 22px 6px 28px;
	font-size: 0.92rem;
	color: #f5f5f5;
	background: #1a1f25 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%23888' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 8px center;
	transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

input#newsSearchInput:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-glow);
}


/* ========== 16. Key & credential inputs (settings panels) ========== */

input#apiKey,
input#secret,
input#threeCQSKey {
	font-size: 1.1rem;
	padding: 2px;
	border-radius: 5px;
}

input#marketAlertMinVolume,
input#marketAlertMinVolatility {
	color: #f5f5f5;
	border: 1px solid var(--border-soft);
	background-color: #1a1f25;
	border-radius: var(--radius-sm);
	padding: 5px 8px;
	font-size: 0.9rem;
	font-family: inherit;
	margin: 0 4px;
	transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}

input#marketAlertMinVolume:focus,
input#marketAlertMinVolatility:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-glow);
	outline: none;
}


/* ========== 17. Selectors (column toggle popovers) ========== */

.mainSelectorWrapper {
	z-index: 5100;
	position: fixed;
	top: 65px;
	left: 20px;
	display: none;
}

.marketSelectorWrapper {
	z-index: 6100;
	position: fixed;
	top: 10px;
	left: 20px;
	display: none;
}

.mainSelector,
.mainHiddenSelector,
.marketSelector,
.marketHiddenSelector {
	display: block;
}

.mainSelector,
.marketSelector {
	text-align: left;
	position: absolute;
	padding: 10px;
	background: var(--selector-background-color);
	color: var(--table-content-color);
	border: 1px solid #5d5d5d;
	border-radius: 5px;
}

.mainSelector  { width: 165px; }
.marketSelector { width: 150px; }

.mainSelector label,
.marketSelector label {
	display: block;
}

.mainSelector label:nth-child(1),
.marketSelector label:nth-child(1) {
	border-bottom: 1px solid #cccccc;
	margin-bottom: 5px;
}

.mainSelector input,
.marketSelector input {
	margin-right: 5px;
}

.mainSelector .disabled,
.marketSelector .disabled {
	color: #ddd;
}

#popover-main label,
#popover-markets label {
	margin: 0 5px;
	display: block;
}

#popover-main input,
#popover-markets input {
	margin-right: 5px;
}

#popover-main .disabled,
#popover-markets .disabled {
	color: #ddd;
}


/* ========== 18. Markets popup (the data grid in the screenshots) ==========
 *
 * The popup contains marketTable (tablesorter) plus the footer-style action
 * row at the bottom (clock, news, signals, volatility, columns, reset). */

#marketsContainer {
	z-index: 5800;
	display: none;
	position: absolute;
	margin: 0 auto;
	padding-top: 20px;
	width: 99%;
	height: 89%;
	background-color: #0e1116;
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 229, 199, 0.04), transparent 60%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* #marketsClose styled in shared modal close block below. */

#marketsPopOut {
	position: absolute;
	top: 14px;
	right: 56px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-faint);
	color: #cccccc;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
	z-index: 10;
}

#marketsPopOut:hover {
	background-color: var(--accent-glow);
	color: var(--accent);
}

.marketsBackgroundContainer {
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 93%, rgba(0,0,0,0) 99%);
	z-index: 6000;
	position: relative;
	top: 5px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 99%;
	height: 90%;
	border-radius: 10px 10px 0 0;
}

#marketDataContainerBG {
	z-index: 6000;
	position: absolute;
	overflow: auto;
	white-space: nowrap;
	width: 99%;
	height: 98%;
	top: 10px;
	left: 10px;
	right: 0;
	margin: 0 auto;
}

#marketDataContainer {
	z-index: 6000;
	position: relative;
	overflow: auto;
	white-space: nowrap;
	width: 98%;
	height: 90%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding-bottom: 10px;
}

#marketDataContainer::-webkit-scrollbar         { height: 10px; }
#marketDataContainer::-webkit-scrollbar-track   { box-shadow: inset 0 0 4px rgba(0,0,0,0.3); border-radius: 10px; }
#marketDataContainer::-webkit-scrollbar-thumb   { border-radius: 10px; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
#marketDataContainer::-webkit-scrollbar-corner  { display: none; }

/* Bottom-right action bar inside the markets popup. */
.marketFooter {
	position: relative;
	height: auto;
	margin-top: 20px;
	float: right;
	margin-right: 15px;
	margin-bottom: 10px;
	font-size: 1rem;
	color: #000000;
	cursor: pointer;
}

/* Bottom-left dial slot — mirrors .marketFooter on the opposite side
 * of the same row. Same margins as .marketFooter so floats align at
 * the same vertical position. The widget itself is sized to ~40px
 * tall (in symSenser.js) to match the icon row height. */
#symSenserFooter {
	position: relative;
	height: auto;
	margin-top: 20px;
	float: left;
	margin-left: 15px;
	margin-bottom: 10px;
}

table#marketTable th {
	font-size: 13px;
	padding: 9px 7px;
	font-weight: 500;
}

table#marketTable td {
	font-size: 13px;
	padding: 6px 5px;
	vertical-align: middle;
	word-wrap: break-word;
	white-space: pre-wrap;
}

table#marketTable select {
	font-size: 13px;
}


/* ========== 19. Journal (legacy) ========== */

#journalEditor {
	position: relative;
	color: #000000;
	text-align: left;
	width: 100%;
	height: 95%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

#journalContainer {
	z-index: 6000;
	display: none;
	position: absolute;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 50px;
	width: 99%;
	min-height: 95%;
	height: auto;
	background: linear-gradient(to bottom, rgba(9, 9, 9, 1) 0%, rgba(78, 78, 78, 1) 100%);
	border-radius: 5px;
}

/* #journalClose styled in shared modal close block. */

#journalContent {
	position: relative;
	text-align: left;
	width: 97%;
	height: 95%;
	margin-top: 20px;
}


/* ========== 20. Charts popup ========== */

#chartsContainer {
	z-index: 6000;
	display: none;
	position: absolute;
	margin: 0 auto;
	padding: 20px 0 50px;
	width: 99%;
	min-height: 95%;
	height: auto;
	background-color: var(--table-background-color);
	border-radius: 5px;
}

/* #chartsClose / #chartVolumeClose / #chartVolatilityClose styled in shared block. */

#chartDealsContainer {
	position: relative;
	float: left;
	padding: 90px 0 0 10px;
	height: 30vh;
	width: 45vw;
}

#chartPairsContainer {
	position: relative;
	float: right;
	padding: 90px 10px 0 0;
	height: 30vh;
	width: 45vw;
}

#chartPairsContainerMini {
	position: relative;
	height: 3vh;
	width: 10vw;
}

.hoverChartsDark {
	display: none;
	position: absolute;
	z-index: 7000;
	width: 280px;
	height: 110px;
	padding: 4px 5px 12px;
	border: 1px solid #404040;
	color: #cccccc;
	border-radius: 6px;
	background: linear-gradient(to bottom, rgba(5,5,5,1) 56%, rgba(50,50,50,1) 100%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.hoverChartsLight {
	background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(226,226,226,1) 64%, rgba(239,239,239,1) 100%);
}

.headerHoverCharts {
	width: 100%;
	color: #b4b4a5;
	padding: 1px 0;
	background-color: #212121;
	border-radius: 2px;
}

#chartDailyProfitContainer {
	clear: both;
	position: relative;
	text-align: center;
	height: 30vh;
	width: 95vw;
}

#chartHistoryContainer {
	clear: both;
	position: relative;
	text-align: center;
	padding-top: 90px;
	height: 40vh;
	width: 95vw;
}

#chartVolumeContainer,
#chartVolatilityContainer {
	z-index: 7000;
	display: none;
	position: absolute;
	margin: 0 auto;
	padding-top: 20px;
	width: 99%;
	min-height: 90%;
	background-color: #0e1116;
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 229, 199, 0.04), transparent 60%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

#chartMarketsContainer {
	clear: both;
	position: relative;
	text-align: center;
	height: 85vh;
	width: 98vw;
}

#chartVolatilityPercContainer {
	clear: both;
	position: relative;
	text-align: center;
	height: 84vh;
	width: 98vw;
}

.chartsHeader {
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 93%, rgba(0,0,0,0) 99%);
	position: relative;
	text-align: center;
	color: #cccccc;
	font-weight: 600;
	width: 100%;
	padding: 5px 0 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	cursor: pointer;
}

.dealSettings {
	position: relative;
	font-size: 0.92rem;
	float: left;
}


/* ========== 21. Shared modal popup style ==========
 *
 * The screener uses one consistent modal style for everything (tv, news,
 * signal alerts, market alerts, logs, etc). Aggregated here so each
 * individual modal only needs to declare size + z-index. */

.modalPopup {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px;
	text-align: left;
	position: fixed;
	display: none;
	color: #cccccc;
	background-color: #000000;
	border-radius: 5px;
	box-shadow: 0 0 2px 2px #2f2f2f;
}

/* ========== 21. Shared modal popup style ==========
 *
 * Every modal (signalAlerts, marketAlerts, tv, news, about, info, logs,
 * session, more, logsMain, tvSettings, symbol, keys) shares the same shell:
 * elevated dark surface, soft border, generous padding, rounded corners. */

#signalAlertsContainer,
#marketAlertsContainer,
#tvContainer,
#newsContainer,
#aboutContainer,
#infoContainer,
#logsContainer,
#sessionContainer,
#moreContainer,
#logsMainContainer,
#tvSettingsContainer,
#symbolContainer,
#keysContainer {
	/* Center horizontally; vertical offset reserves space for footer marquee. */
	top: calc(50% - 30px);
	left: 50%;
	width: 78%;
	max-width: 1400px;
	height: 76%;
	max-height: calc(100vh - 120px);
	padding: 24px 28px;
	text-align: left;
	position: fixed;
	display: none;
	color: #cccccc;
	background-color: var(--surface-elevated);
	border: 1px solid var(--border-faint);
	transform: translate(-50%, -50%);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}

/* Alert modals: the inner global wrapper uses flex column so the header
 * can wrap to multiple lines without clipping the body. The body fills
 * remaining vertical space. The outer container stays as-is so jQuery
 * slideToggle (which sets display: block) keeps working. */
#signalAlertsContainer,
#marketAlertsContainer { z-index: 6900; }

#marketAlertsContainer #marketAlertsGlobal,
#signalAlertsContainer #signalAlertsGlobal {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
}

#marketAlerts,
#signalAlerts {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
}

#tvContainer,
#newsContainer,
#aboutContainer,
#infoContainer,
#logsContainer,
#sessionContainer,
#moreContainer        { z-index: 7000; }

#logsMainContainer,
#tvSettingsContainer  { z-index: 7010; }

#symbolContainer      { z-index: 6500; font-size: 1.05rem; }
#aboutContainer       { z-index: 9000; font-size: 1.05rem; }
#keysContainer        { z-index: 9000; height: 54%; overflow: hidden; }
#moreContainer        { width: 46%; max-width: 700px; height: 56%; }

#symbolContainer a:link,
#symbolContainer a:visited,
#symbolContainer a:hover,
#symbolContainer a:active {
	color: var(--link-color);
}

#disclaimerContainer {
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	display: none;
	color: #000000;
	font-size: 1.05rem;
	background-color: #ffffff;
	border-radius: 0;
	box-shadow: none;
}

/* Shared close button for every modal — circular icon target, top-right.
 * The `<b>X</b>` text inside gets centered + sized via inner rules. */
#signalAlertsClose,
#marketAlertsClose,
#moreClose,
#sessionClose,
#newsClose,
#aboutClose,
#infoClose,
#logsClose,
#logsMainClose,
#tvClose,
#tvSettingsClose,
#disclaimerClose,
#symbolClose,
#keysClose,
#marketsClose,
#journalClose,
#chartsClose,
#chartVolumeClose,
#chartVolatilityClose {
	position: absolute;
	top: 14px;
	right: 16px;
	float: none;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-faint);
	color: #cccccc;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
	z-index: 10;
}

#signalAlertsClose:hover,
#marketAlertsClose:hover,
#moreClose:hover,
#sessionClose:hover,
#newsClose:hover,
#aboutClose:hover,
#infoClose:hover,
#logsClose:hover,
#logsMainClose:hover,
#tvClose:hover,
#tvSettingsClose:hover,
#disclaimerClose:hover,
#symbolClose:hover,
#keysClose:hover,
#marketsClose:hover,
#journalClose:hover,
#chartsClose:hover,
#chartVolumeClose:hover,
#chartVolatilityClose:hover {
	background-color: rgba(255, 77, 109, 0.18);
	border-color: rgba(255, 77, 109, 0.35);
	color: #ff8a9b;
}

/* The legacy `<b>X</b>` text inside each close button — neutralise <b> weight. */
#signalAlertsClose b,
#marketAlertsClose b,
#moreClose b,
#sessionClose b,
#newsClose b,
#aboutClose b,
#infoClose b,
#logsClose b,
#logsMainClose b,
#tvClose b,
#tvSettingsClose b,
#disclaimerClose b,
#symbolClose b,
#keysClose b,
#marketsClose b,
#journalClose b,
#chartsClose b,
#chartVolumeClose b,
#chartVolatilityClose b {
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1;
}

#disclaimerClose {
	background-color: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.15);
	color: #333;
}

#disclaimerClose:hover {
	background-color: rgba(220, 38, 38, 0.12);
	border-color: rgba(220, 38, 38, 0.3);
	color: #dc2626;
}

/* Shared body areas for each modal — text-align, overflow, sizing.
 * margin-top reserves space below the title bar / close button. */
#signalAlerts,
#marketAlerts,
#more,
#session,
#news,
#about,
#info,
#logs,
#logsMain,
#tv,
#disclaimer,
#symbol,
#keys {
	text-align: left;
	overflow: auto;
	white-space: wrap;
	position: relative;
	width: 100%;
	height: calc(100% - 56px);
	margin-top: 16px;
}

#info,
#logs,
#logsMain,
#tv,
#keys { white-space: nowrap; }

#tv { overflow: hidden; }

#news       { height: calc(100% - 70px); margin-top: 56px; }
#tvSettings { width: 100%; height: calc(100% - 40px); overflow: auto; white-space: nowrap; position: relative; text-align: left; margin-top: 16px; }

#newsHeader {
	position: absolute;
	display: inline-block;
	left: 28px;
	top: 22px;
}


/* ---- Modal scrollbars (most hide, some show 8px) ---- */

/* Alert modals carry wide tables (many exchange columns) — give them visible
 * vertical AND horizontal scrollbars so content can't be silently clipped. */
#signalAlerts::-webkit-scrollbar,
#marketAlerts::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#signalAlerts::-webkit-scrollbar-track,
#marketAlerts::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

#signalAlerts::-webkit-scrollbar-thumb,
#marketAlerts::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.18);
	border-radius: 10px;
}

#signalAlerts::-webkit-scrollbar-thumb:hover,
#marketAlerts::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.28);
}

#signalAlerts::-webkit-scrollbar-corner,
#marketAlerts::-webkit-scrollbar-corner {
	background-color: transparent;
}

#session::-webkit-scrollbar,
#news::-webkit-scrollbar,
#about::-webkit-scrollbar,
#info::-webkit-scrollbar,
#symbol::-webkit-scrollbar {
	width: 0;
	display: none;
	background: transparent;
}

#logs::-webkit-scrollbar,
#logsMain::-webkit-scrollbar,
#tvSettings::-webkit-scrollbar,
#keys::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#logs::-webkit-scrollbar-track,
#logsMain::-webkit-scrollbar-track,
#tvSettings::-webkit-scrollbar-track,
#keys::-webkit-scrollbar-track {
	background-color: #595959;
	box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	border-radius: 10px;
}

#logs::-webkit-scrollbar-thumb,
#logsMain::-webkit-scrollbar-thumb,
#tvSettings::-webkit-scrollbar-thumb,
#keys::-webkit-scrollbar-thumb {
	background-color: #3f3f3f;
	border-radius: 10px;
	box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

#logs::-webkit-scrollbar-corner,
#logsMain::-webkit-scrollbar-corner,
#tvSettings::-webkit-scrollbar-corner,
#keys::-webkit-scrollbar-corner {
	display: none;
}


/* ========== 22. Signal & market alert tables (inside the modals) ========== */

/* The HTML uses `<select multiple>` for these — natively this renders as
 * an expanded list box. We constrain the unfocused height so it reads as a
 * single-line pill, and let it grow tall on focus for selection. */
select#signalTypes,
select#signalKeys {
	z-index: 6950;
	position: relative;
	height: 34px;
	padding: 6px 8px;
	width: 100%;
	cursor: pointer;
	color: #f5f5f5;
	border: 1px solid var(--border-soft);
	background-color: #1a1f25;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	font-family: inherit;
	overflow: auto;
	transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease), height 180ms var(--ease);
}

select#signalTypes:hover,
select#signalKeys:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

select#signalTypes:focus,
select#signalKeys:focus {
	height: 200px;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-glow);
	outline: none;
}

select#signalTypes option,
select#signalKeys option {
	padding: 6px 8px;
	background-color: #1a1f25;
	color: #f5f5f5;
}

select#signalTypes option:checked,
select#signalKeys option:checked {
	background-color: var(--accent-glow);
	color: var(--accent);
}

#signalKeys::-webkit-scrollbar,
#signalTypes::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

#signalKeys::-webkit-scrollbar-track,
#signalTypes::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.02);
	border-radius: 10px;
}

#signalKeys::-webkit-scrollbar-thumb,
#signalTypes::-webkit-scrollbar-thumb {
	background-color: #3f3f3f;
	border-radius: 10px;
}

#signalKeys::-webkit-scrollbar-corner,
#signalTypes::-webkit-scrollbar-corner {
	display: none;
}

table.signalAlerts,
table.marketAlerts,
table.profitAlerts {
	color: #d5d5d5;
	text-align: left;
	/* Don't force 100% width — let columns size to their content. The parent
	 * modal body provides the scrollbar when the table exceeds modal width. */
	width: auto;
	min-width: 100%;
	font-size: 0.92rem;
	border-collapse: separate;
	border-spacing: 0;
	white-space: nowrap;
}

table.signalAlerts th,
table.marketAlerts th,
table.profitAlerts th {
	z-index: 6900;
	position: sticky;
	top: 0;
	color: #f5f5f5;
	background-color: var(--surface-elevated-2);
	padding: 12px 10px;
	font-weight: 500;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	border-bottom: 1px solid var(--border-faint);
	text-align: left;
}

table.signalAlerts th:first-child,
table.profitAlerts th:first-child {
	border-radius: var(--radius-sm) 0 0 0;
}

table.signalAlerts th:last-child,
table.profitAlerts th:last-child {
	border-radius: 0 var(--radius-sm) 0 0;
}

table.signalAlerts td,
table.marketAlerts td,
table.profitAlerts td {
	padding: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	vertical-align: middle;
}

table.signalAlerts tr:hover td,
table.marketAlerts tr:hover td,
table.profitAlerts tr:hover td {
	background-color: rgba(255, 255, 255, 0.02);
}

.marketAlertSeparator {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--border-faint);
	margin: 12px 0;
}


/* Alert modal header rows — use flexbox so the title text + inputs +
 * exchange checkboxes lay out as wrappable rows instead of overflowing
 * the modal width. Each label/input pair stays grouped together. */
#marketAlertsHeader {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	width: 100%;
	padding-right: 48px; /* keep clear of the close button */
}

#marketAlertsHeader b.headerText {
	white-space: nowrap;
}

#marketAlertsHeader input[type="checkbox"] {
	margin: 0 4px 0 0;
	vertical-align: middle;
}

#marketAlertsHeader input[type="text"],
#marketAlertsHeader input:not([type]) {
	margin: 0 2px;
	vertical-align: middle;
	background-color: rgba(255, 255, 255, 0.05);
	color: #f0f0f0;
	border: 1px solid var(--border-faint);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	font-size: 0.92rem;
	outline: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#marketAlertsHeader input[type="text"]:focus,
#marketAlertsHeader input:not([type]):focus {
	border-color: rgba(120, 170, 255, 0.55);
	background-color: rgba(255, 255, 255, 0.08);
}


/* ========== 23. addFunds visual states (legacy) ========== */

.addFundsWrapper {
	position: relative;
	display: none;
	float: left;
	left: 0;
}

.addFundsTextPos,
.addFundsTextNeg,
.addFundsTextCustom {
	float: left;
	position: relative;
	width: 96%;
	color: #000000;
	border: 1px solid #b2b2b2;
	margin: 5px 0 2px;
	padding: 4px;
	font-weight: 600;
	border-radius: 3px;
}

.addFundsTextPos    { background: linear-gradient(to bottom, rgba(227,237,189,1) 0%, rgba(191,197,185,1) 100%); }
.addFundsTextNeg    { background: linear-gradient(to bottom, rgba(240,187,186,1) 0%, rgba(208,184,174,1) 100%); }
.addFundsTextCustom { background: linear-gradient(to bottom, rgba(220,213,206,1) 0%, rgba(196,193,186,1) 100%); }


/* ========== 24. Symbol popup scrollbar (one-off) ========== */

#symbol::-webkit-scrollbar { display: none; }


/* ========== 25. Subtle modern entrance for popups ==========
 *
 * The marquee provides "app is alive" feedback continuously, so the heavy
 * candy-stripe loading animations were unnecessary. Popups now slide-fade
 * in gracefully. NEVER applied to #footer — that broke the marquee before. */

@keyframes screener-fadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes screener-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

#marketsContainer,
#chartVolumeContainer,
#chartVolatilityContainer,
#chartsContainer,
#journalContainer {
	animation: screener-fadeUp 320ms var(--ease) both;
}

/* Modals also fade in (translate kept at 0 — they're centered, no slide). */
#signalAlertsContainer,
#marketAlertsContainer,
#tvContainer,
#newsContainer,
#aboutContainer,
#infoContainer,
#logsContainer,
#sessionContainer,
#moreContainer,
#logsMainContainer,
#tvSettingsContainer,
#symbolContainer,
#keysContainer {
	animation: screener-fadeIn 220ms var(--ease) both;
}


/* ========== 26. Reduced-motion preference ========== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}