:root {
	--tlai-bg-0: #031018;
	--tlai-bg-1: #04131d;
	--tlai-bg-2: #061923;
	--tlai-bg-3: #071c27;
	--tlai-surface: rgba(8, 29, 39, 0.82);
	--tlai-surface-strong: rgba(10, 34, 44, 0.92);
	--tlai-border: rgba(78, 140, 151, 0.18);
	--tlai-border-strong: rgba(76, 197, 171, 0.32);
	--tlai-green: #19d97c;
	--tlai-green-bright: #38f29a;
	--tlai-gold: #ffaa00;
	--tlai-orange: #ff9800;
	--tlai-blue: #2f7dff;
	--tlai-purple: #7656d8;
	--tlai-teal: #0ec4a1;
	--tlai-red: #ff5263;
	--tlai-up: #21db86;
	--tlai-down: #ff5263;
	--tlai-text: #f5f7f8;
	--tlai-muted: #a9b6bd;
	--tlai-weak: #6f828c;
	--tlai-radius-xs: 6px;
	--tlai-radius-sm: 8px;
	--tlai-radius-md: 10px;
	--tlai-radius-lg: 16px;
	--tlai-container: 1280px;
	--tlai-container-wide: 1320px;
	--tlai-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
	--tlai-font: Inter, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

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

html {
	background: var(--tlai-bg-1);
	color: var(--tlai-text);
	font-family: var(--tlai-font);
	font-size: 16px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	background:
		radial-gradient(circle at 70% 4%, rgba(25, 217, 124, 0.12), transparent 36%),
		radial-gradient(circle at 20% 36%, rgba(47, 125, 255, 0.08), transparent 36%),
		linear-gradient(180deg, var(--tlai-bg-0), var(--tlai-bg-1) 40%, #031018);
	color: var(--tlai-text);
	font-family: var(--tlai-font);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
	min-height: 42px;
	border: 1px solid var(--tlai-border);
	border-radius: var(--tlai-radius-xs);
	background: rgba(2, 14, 22, 0.74);
	color: var(--tlai-text);
	padding: 10px 12px;
	outline: none;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tlai-green);
	box-shadow: 0 0 0 3px rgba(25, 217, 124, 0.12);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.tlai-container {
	width: min(100% - 48px, var(--tlai-container));
	margin-inline: auto;
}

.tlai-main {
	min-height: 70vh;
}

.tlai-section {
	padding: 24px 0;
}

.tlai-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.tlai-section__head h2,
.tlai-panel h2 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.2;
}

.tlai-more {
	color: var(--tlai-muted);
	font-size: 14px;
	transition: color 160ms ease;
}

.tlai-more:hover {
	color: var(--tlai-green);
}

.tlai-panel,
.tlai-content-panel {
	border: 1px solid var(--tlai-border);
	border-radius: var(--tlai-radius-md);
	background: linear-gradient(180deg, rgba(10, 34, 44, 0.84), rgba(5, 22, 31, 0.82));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), var(--tlai-shadow);
	padding: 22px;
}

.tlai-content-panel {
	color: #dbe6ea;
	line-height: 1.82;
}

.tlai-content-panel h2,
.tlai-content-panel h3 {
	color: var(--tlai-text);
}

.tlai-kicker {
	margin: 0 0 12px;
	color: var(--tlai-green);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.tlai-muted {
	color: var(--tlai-muted);
}

.tlai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--tlai-radius-xs);
	color: var(--tlai-text);
	font-weight: 700;
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tlai-btn:hover {
	transform: translateY(-1px);
}

.tlai-btn--lg {
	min-height: 54px;
	padding-inline: 26px;
	border-radius: var(--tlai-radius-sm);
}

.tlai-btn--block {
	width: 100%;
}

.tlai-btn--green {
	background: linear-gradient(135deg, #1edc80, #0ebf72);
	color: #04131d;
}

.tlai-btn--gold {
	background: linear-gradient(135deg, var(--tlai-gold), var(--tlai-orange));
	color: #15110a;
}

.tlai-btn--blue {
	background: linear-gradient(135deg, #3d83ff, #3157d8);
}

.tlai-btn--teal {
	background: linear-gradient(135deg, #0ec4a1, #0b927e);
}

.tlai-btn--gradient {
	background: linear-gradient(90deg, #28dc83, #2f7dff);
}

.tlai-btn--ghost,
.tlai-btn--soft {
	border-color: var(--tlai-border);
	background: rgba(4, 19, 29, 0.72);
	color: var(--tlai-text);
}

.tlai-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.tlai-pill--green {
	background: rgba(25, 217, 124, 0.16);
	color: var(--tlai-green-bright);
}

.tlai-pill--gold {
	background: rgba(255, 170, 0, 0.16);
	color: var(--tlai-gold);
}

.tlai-pill--red {
	background: rgba(255, 82, 99, 0.18);
	color: #ff8d99;
}

.tlai-symbol {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(25, 217, 124, 0.16);
	color: var(--tlai-green);
	font-size: 13px;
	font-weight: 800;
	flex: 0 0 auto;
}

.tlai-symbol--gold { background: rgba(255, 170, 0, 0.18); color: var(--tlai-gold); }
.tlai-symbol--silver { background: rgba(220, 230, 240, 0.14); color: #d6e2ea; }
.tlai-symbol--oil { background: rgba(255, 255, 255, 0.12); color: #aab4bb; }
.tlai-symbol--index { background: rgba(25, 217, 124, 0.16); color: var(--tlai-green); }
.tlai-symbol--fx { background: rgba(47, 125, 255, 0.16); color: #75a6ff; }

.tlai-sparkline {
	width: 100%;
	height: 36px;
	overflow: visible;
	filter: drop-shadow(0 0 8px rgba(33, 219, 134, 0.22));
}

.tlai-skip-link {
	position: fixed;
	left: 16px;
	top: -80px;
	z-index: 9999;
	background: var(--tlai-green);
	color: #061923;
	padding: 12px 16px;
	border-radius: var(--tlai-radius-xs);
}

.tlai-skip-link:focus {
	top: 16px;
}

@media (max-width: 768px) {
	.tlai-container {
		width: min(100% - 32px, var(--tlai-container));
	}

	.tlai-section {
		padding: 18px 0;
	}

	.tlai-panel,
	.tlai-content-panel {
		padding: 16px;
	}
}