/* ─────────────────────────────────────────────────────────────────────
   Theme tokens — algotier trading-terminal palette mapped onto the
   existing accounts variable names so every page picks up the new
   scheme without renaming. Mint accent, deep navy surfaces, monospace
   data feel.
   ───────────────────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
	--bg-0:#060A10; --bg-1:#0C121A; --bg-2:#0F1722; --bg-3:#141C28; --bg-4:#1A2434;
	--bg-elev: rgba(12,18,26,.75);
	--bg-bar: rgba(8,12,18,.72);

	--line-soft: rgba(255,255,255,.06);
	--line: rgba(255,255,255,.10);
	--line-strong: rgba(255,255,255,.18);

	--fg-0:#E8ECF1; --fg-1:#B8C2CC; --fg-2:#8895A5; --fg-3:#6B7785; --fg-4:#4A5663;

	--acc:#3FE0B7;
	--acc-soft: rgba(63,224,183,.16);
	--acc-line: rgba(63,224,183,.5);
	--acc-deep:#2FB394;
	--acc-glow: rgba(63,224,183,.22);

	--pos:#3FE0B7; --pos-soft: rgba(63,224,183,.14);
	--neg:#EF6B6B; --neg-soft: rgba(239,107,107,.16);
	--warn:#E8B14C;

	--grid: rgba(26,48,64,.45);
	--halo: radial-gradient(60% 60% at 50% 50%, rgba(63,224,183,.18), transparent 70%);
	--scan-line: rgba(63,224,183,.5);
	--particle: rgba(63,224,183,.55);
	--card-border: rgba(63,224,183,.28);
	--card-shadow: 0 30px 80px -20px rgba(0,0,0,.6),
	               0 0 0 .5px rgba(63,224,183,.18) inset;
	--input-bg: rgba(255,255,255,.025);
	--input-border: rgba(255,255,255,.08);
}

[data-theme="light"] {
	--bg-0:#F4F6F8; --bg-1:#FFFFFF; --bg-2:#EDF1F4; --bg-3:#E0E6EB; --bg-4:#D2DAE0;
	--bg-elev: rgba(255,255,255,.85);
	--bg-bar: rgba(255,255,255,.78);

	--line-soft: rgba(15,24,32,.08);
	--line: rgba(15,24,32,.14);
	--line-strong: rgba(15,24,32,.22);

	--fg-0:#0F1820; --fg-1:#2D3A47; --fg-2:#5A6876; --fg-3:#7E8B98; --fg-4:#94A0AD;

	--acc:#0E9971;
	--acc-soft: rgba(14,153,113,.10);
	--acc-line: rgba(14,153,113,.55);
	--acc-deep:#0B7C5C;
	--acc-glow: rgba(14,153,113,.18);

	--pos:#0E9971; --pos-soft: rgba(14,153,113,.10);
	--neg:#C73838; --neg-soft: rgba(199,56,56,.10);
	--warn:#9C6E1F;

	--grid: rgba(216,222,228,.7);
	--halo: radial-gradient(60% 60% at 50% 50%, rgba(14,153,113,.10), transparent 70%);
	--scan-line: rgba(14,153,113,.22);
	--particle: rgba(14,153,113,.45);
	--card-border: rgba(14,153,113,.25);
	--card-shadow: 0 24px 60px -18px rgba(15,24,32,.18),
	               0 2px 6px rgba(15,24,32,.05);
	--input-bg: rgba(255,255,255,.55);
	--input-border: rgba(15,24,32,.10);
}

html, body { background: var(--bg-0); color: var(--fg-1); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: "tnum","cv11"; }
.serif { font-family: Georgia, 'Times New Roman', serif; }
.label-up { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); font-weight: 500; }
.brand-glyph {
	width: 18px; height: 18px; border-radius: 5px;
	background: linear-gradient(135deg, var(--acc) 0%, var(--acc-deep) 100%);
	display: inline-flex; align-items: center; justify-content: center;
	color: #02181c; font-weight: 700; font-size: 11px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.theme-toggle {
	position: fixed; top: 16px; right: 16px;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 6px;
	background: var(--bg-1);
	border: 1px solid var(--line);
	color: var(--fg-1);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	z-index: 50;
}
.theme-toggle:hover { background: var(--bg-2); color: var(--fg-0); border-color: var(--line-strong); }
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.icon-btn {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: transparent;
	border: none;
	color: var(--fg-1);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	text-decoration: none;
}
.icon-btn:hover { background: var(--bg-2); color: var(--fg-0); }
.icon-btn svg { width: 15px; height: 15px; }
[data-theme="dark"] .icon-btn .icon-sun  { display: block; }
[data-theme="dark"] .icon-btn .icon-moon { display: none; }
[data-theme="light"] .icon-btn .icon-sun  { display: none; }
[data-theme="light"] .icon-btn .icon-moon { display: block; }

.avatar {
	width: 26px; height: 26px;
	border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 600;
	background: linear-gradient(135deg, var(--bg-4), var(--bg-3));
	color: var(--fg-0);
	border: 1px solid var(--line-strong);
	overflow: hidden;
	flex: none;
	text-decoration: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────────────────────────────────────────────────────────────
   Trading-terminal shell — used by login & register hero pages.
   The layers below are position:fixed so they sit behind the form
   without interfering with regular pages.
   ───────────────────────────────────────────────────────────────────── */
/* Allow normal scrolling on terminal pages so taller forms (register
   on short viewports) can be reached; the fixed background layers stay
   parked behind regardless. */
body.terminal-body { overflow-x: hidden; }

.tt-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.tt-grid {
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 32px 32px;
	opacity: .55;
	mask-image: radial-gradient(ellipse 120% 90% at 50% 50%, #000 35%, transparent 95%);
	-webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 50%, #000 35%, transparent 95%);
}
.tt-radial {
	background: radial-gradient(45% 45% at 50% 55%, var(--acc-glow), transparent 70%);
	filter: blur(2px);
}
.tt-scan {
	position: fixed; left:0; right:0; height:1.5px;
	background: linear-gradient(90deg, transparent, var(--scan-line), transparent);
	box-shadow: 0 0 24px var(--scan-line);
	animation: tt-scan-anim 6s linear infinite;
	opacity:.85;
	pointer-events: none;
	z-index: 1;
}
@keyframes tt-scan-anim {
	0%{ transform: translateY(-2vh); opacity:0 }
	8%{ opacity:.9 }
	92%{ opacity:.9 }
	100%{ transform: translateY(102vh); opacity:0 }
}
.tt-sparks { position: fixed; inset: 0; width: 100%; height: 100%; color: var(--acc); pointer-events:none; z-index: 0; }
.tt-sparks .area { fill: url(#tt-eqfill); opacity:.55; }
[data-theme="light"] .tt-sparks .area { opacity:.42; }
.tt-sparks .eq { fill:none; stroke: currentColor; stroke-linejoin:round; stroke-linecap:round; }
.tt-sparks .eq1 { stroke-width:1.5; opacity:.78; }
.tt-sparks .eq2 { stroke-width:1; opacity:.45; }
.tt-sparks .eq3 { stroke-width:1; opacity:.32; stroke-dasharray: 3 5; }
[data-theme="light"] .tt-sparks .eq1 { opacity:.62; }
[data-theme="light"] .tt-sparks .eq2 { opacity:.34; }
[data-theme="light"] .tt-sparks .eq3 { opacity:.26; }
.tt-sparks .eq-scan {
	stroke-width: 2; opacity:.95;
	stroke-dasharray: 70 3000;
	filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 14px currentColor);
	animation: tt-eqscan 9s linear infinite;
}
@keyframes tt-eqscan { from{ stroke-dashoffset: 3070; } to{ stroke-dashoffset: 0; } }

.tt-particles { position: fixed; inset: 0; pointer-events:none; z-index: 0; }
.tt-particles span {
	position:absolute; bottom:-10px; width:2px; height:2px; border-radius:50%;
	background: var(--particle);
	box-shadow: 0 0 6px var(--particle);
	animation: tt-rise linear infinite;
	opacity: 0;
}
@keyframes tt-rise {
	0%   { transform: translateY(0) translateX(0); opacity:0; }
	10%  { opacity:.9; }
	90%  { opacity:.6; }
	100% { transform: translateY(-105vh) translateX(var(--drift,0px)); opacity:0; }
}

/* Top + bottom status bars */
.tt-top, .tt-bot {
	position: fixed; left:0; right:0; z-index: 5;
	display:flex; align-items:center;
	background: var(--bg-bar);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: .5px solid var(--line-soft);
}
.tt-top { top:0; height:38px; padding: 0 16px; gap:18px; }
.tt-bot {
	bottom:0; height:32px; padding: 0 16px; gap:18px;
	font-size:10.5px; color: var(--fg-2);
	border-bottom:0; border-top:.5px solid var(--line-soft);
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tt-wordmark { display:flex; align-items:center; gap:10px; min-width:200px; }
.tt-wordmark .dot {
	width:7px; height:7px; border-radius:50%; background: var(--acc);
	box-shadow: 0 0 10px var(--acc), 0 0 0 0 var(--acc-glow);
	animation: tt-breathe 2s ease-in-out infinite;
}
@keyframes tt-breathe {
	0%,100%{ box-shadow: 0 0 8px var(--acc), 0 0 0 0 var(--acc-glow); transform: scale(1); }
	50%    { box-shadow: 0 0 14px var(--acc), 0 0 0 6px transparent;  transform: scale(1.15); }
}
.tt-wordmark b {
	font-weight:500; letter-spacing:.32em; font-size:11px;
	color: var(--fg-0); font-family: 'Inter', system-ui, sans-serif;
}
.tt-wordmark .sub {
	color: var(--fg-3); font-size:10px; letter-spacing:.18em; padding-left:10px;
	border-left:.5px solid var(--line);
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tt-ticker {
	flex:1; min-width:0; overflow:hidden;
	mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tt-ticker-track {
	display:inline-flex; gap:32px; padding-left:40px;
	animation: tt-tick 40s linear infinite;
	white-space:nowrap;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@keyframes tt-tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tt-ticker .item { display:inline-flex; gap:8px; align-items:baseline; font-size:11px; color: var(--fg-1); }
.tt-ticker .sym { color: var(--fg-2); letter-spacing:.08em; }
.tt-ticker .arr { font-size:9px; }
.tt-up { color: var(--acc); }
.tt-dn { color: var(--neg); }

.tt-live {
	display:inline-flex; align-items:center; gap:6px; font-size:10px;
	color: var(--fg-2); letter-spacing:.18em; text-transform:uppercase;
}
.tt-live .ldot {
	width:7px; height:7px; border-radius:50%; background: var(--neg);
	animation: tt-blink 1.4s steps(2,end) infinite;
	box-shadow: 0 0 8px var(--neg);
}
@keyframes tt-blink { 50%{opacity:.18} }

.tt-bot .grp { display:inline-flex; gap:6px; align-items:center; }
.tt-bot .lbl { color: var(--fg-3); letter-spacing:.18em; text-transform:uppercase; }
.tt-bot .val { color: var(--fg-1); }
.tt-bot .sep { width:.5px; height:14px; background: var(--line); }
.tt-bot .right { margin-left:auto; }
.tt-flicker { animation: tt-flicker-anim 5s linear infinite; }
@keyframes tt-flicker-anim {
	0%,92%,94%,95%,97%,100%{ opacity:1 }
	93%{ opacity:.55 } 96%{ opacity:.7 }
}

/* Edge cards (left: heat + risk, right: orderbook) */
.tt-edge { position: fixed; z-index:2; pointer-events:none; }
.tt-edge.left  { left:24px; top:50%; transform: translateY(-50%); width: 224px; display:flex; flex-direction:column; gap:14px; }
.tt-edge.right { right:24px; top:50%; transform: translateY(-50%); width: 224px; }
@media (max-width: 1100px) { .tt-edge { display:none; } }
.tt-edge-card {
	background: var(--bg-elev);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border:.5px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--fg-1);
}
.tt-edge-card h4 {
	margin:0 0 10px; font: 500 9.5px/1 'Inter', system-ui, sans-serif;
	letter-spacing:.22em; text-transform:uppercase;
	color: var(--fg-3);
	display:flex; justify-content:space-between; align-items:center;
}
.tt-edge-card h4 .tag { color: var(--acc); font-family:'JetBrains Mono',monospace; letter-spacing:.04em; }

.tt-heat { display:grid; grid-template-columns: repeat(5, 1fr); gap:3px; margin-bottom:12px; }
.tt-heat span {
	aspect-ratio:1/1; border-radius:2px; background: var(--acc-soft);
	border:.5px solid color-mix(in oklch, var(--acc) 30%, transparent);
}
.tt-heat span[data-h="0"]{ background: color-mix(in oklch, var(--acc) 8%, transparent); }
.tt-heat span[data-h="1"]{ background: color-mix(in oklch, var(--acc) 18%, transparent); }
.tt-heat span[data-h="2"]{ background: color-mix(in oklch, var(--acc) 32%, transparent); }
.tt-heat span[data-h="3"]{ background: color-mix(in oklch, var(--acc) 55%, transparent); }
.tt-heat span[data-h="4"]{ background: color-mix(in oklch, var(--acc) 80%, transparent); box-shadow: 0 0 8px var(--acc-glow); }
.tt-heat span.bad {
	background: color-mix(in oklch, var(--neg) 35%, transparent);
	border-color: color-mix(in oklch, var(--neg) 35%, transparent);
}
.tt-pnl { font-family:'JetBrains Mono',monospace; font-size:10.5px; line-height:1.7; }
.tt-pnl .row { display:flex; justify-content:space-between; }
.tt-pnl .row .k { color: var(--fg-3); }

.tt-ob { font-family:'JetBrains Mono',monospace; font-size:10.5px; line-height:1.65; }
.tt-ob .row { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; padding:1.5px 0; position:relative; }
.tt-ob .row .px  { text-align:left; }
.tt-ob .row .sz  { text-align:right; color: var(--fg-2); transition: color .25s ease; }
.tt-ob .row .tot { text-align:right; color: var(--fg-3); }
.tt-ob .row.ask .px { color: var(--neg); }
.tt-ob .row.bid .px { color: var(--acc); }
.tt-ob .row.ask::after {
	content:""; position:absolute; right:0; top:0; bottom:0;
	width: var(--w,30%); background: var(--neg-soft); border-radius:1px; z-index:-1;
}
.tt-ob .row.bid::after {
	content:""; position:absolute; right:0; top:0; bottom:0;
	width: var(--w,30%); background: var(--acc-soft); border-radius:1px; z-index:-1;
}
.tt-ob .mid {
	display:grid; grid-template-columns: 1fr auto 1fr; gap:8px;
	padding:6px 0; margin: 4px 0;
	border-top:.5px dashed var(--line);
	border-bottom:.5px dashed var(--line);
	color: var(--fg-0); align-items:baseline;
}
.tt-ob .mid .lp    { font-size:13px; letter-spacing:.04em; transition: color .25s ease; }
.tt-ob .mid .delta { font-size:10px; text-align:right; transition: color .25s ease; }
.tt-ob .mid .label { color: var(--fg-3); font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.tt-ob .row.flash-up { animation: tt-flashUp .55s ease-out; }
.tt-ob .row.flash-dn { animation: tt-flashDn .55s ease-out; }
@keyframes tt-flashUp { 0%{ background: var(--acc-soft); } 100%{ background: transparent; } }
@keyframes tt-flashDn { 0%{ background: var(--neg-soft); } 100%{ background: transparent; } }
.tt-ob .row.flash-up .sz { color: var(--acc); }
.tt-ob .row.flash-dn .sz { color: var(--neg); }
.tt-ob .mid .lp.tick-up { color: var(--acc); animation: tt-tickUp .55s ease-out; }
.tt-ob .mid .lp.tick-dn { color: var(--neg); animation: tt-tickDn .55s ease-out; }
@keyframes tt-tickUp { 0%{ text-shadow: 0 0 14px var(--acc); } 100%{ text-shadow: none; } }
@keyframes tt-tickDn { 0%{ text-shadow: 0 0 14px var(--neg); } 100%{ text-shadow: none; } }
.tt-ob .mid .lp .arr { font-size:10px; margin-left:6px; opacity:.7; }

/* Hero centerpiece */
.tt-hero-wrap { position: relative; min-height: 100vh; padding: 60px 16px 50px; display:grid; place-items:center; z-index:2; overflow: hidden; }
.tt-halo {
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width: 900px; height: 900px; max-width:100vw; max-height:100vh; pointer-events:none;
	background: var(--halo);
	animation: tt-halo 4s ease-in-out infinite;
	filter: blur(4px);
}
@keyframes tt-halo {
	0%,100%{ transform: translate(-50%,-50%) scale(.96); opacity:.85; }
	50%    { transform: translate(-50%,-50%) scale(1.04); opacity:1;   }
}
.tt-hero { position:relative; width: 400px; max-width: 100%; display:flex; flex-direction:column; align-items:center; }
.tt-hero.wide { width: 440px; }

.tt-radar { width:80px; height:80px; position:relative; }
.tt-radar .ring { position:absolute; inset:0; border-radius:50%; border:.5px solid var(--acc-line); opacity:.22; }
.tt-radar .ring.r2 { inset:14%; opacity:.34 }
.tt-radar .ring.r3 { inset:30%; opacity:.5 }
.tt-radar .ring.r4 { inset:46%; opacity:.7 }
.tt-radar .center {
	position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
	background: var(--acc); transform:translate(-50%,-50%);
	box-shadow: 0 0 10px var(--acc);
}
.tt-radar .sweep {
	position:absolute; inset:0; border-radius:50%;
	background: conic-gradient(from 0deg,
		color-mix(in oklch, var(--acc) 0%, transparent) 0deg,
		color-mix(in oklch, var(--acc) 0%, transparent) 280deg,
		color-mix(in oklch, var(--acc) 35%, transparent) 350deg,
		color-mix(in oklch, var(--acc) 60%, transparent) 359deg,
		color-mix(in oklch, var(--acc) 0%, transparent) 360deg);
	animation: tt-sweep 4s linear infinite;
	mask: radial-gradient(closest-side, transparent 12%, #000 14%, #000 100%);
	-webkit-mask: radial-gradient(closest-side, transparent 12%, #000 14%, #000 100%);
}
@keyframes tt-sweep { to{ transform: rotate(360deg); } }
.tt-radar .pulse {
	position:absolute; inset:50%; border-radius:50%;
	border:.5px solid var(--acc-line);
	transform: translate(-50%,-50%);
	animation: tt-pulse 3s ease-out infinite;
	opacity:0;
}
.tt-radar .pulse.p2 { animation-delay:1s; }
.tt-radar .pulse.p3 { animation-delay:2s; }
@keyframes tt-pulse {
	0%   { width:6px; height:6px; opacity:.7; }
	100% { width:90px; height:90px; opacity:0; }
}
.tt-radar .blip {
	position:absolute; width:4px; height:4px; border-radius:50%;
	background: var(--acc); box-shadow: 0 0 6px var(--acc);
	animation: tt-blink 1.4s steps(2,end) infinite;
}
.tt-radar .blip.b1 { left: 65%; top: 28%; animation-delay:.2s; }
.tt-radar .blip.b2 { left: 22%; top: 60%; animation-delay:.7s; }
.tt-radar .blip.b3 { left: 70%; top: 70%; animation-delay:1s; }

.tt-tagline {
	margin-top: 22px;
	font-size: 10px; letter-spacing: .36em; text-transform: uppercase;
	color: var(--fg-2);
	animation: tt-flicker-anim 5s linear infinite;
}
.tt-headline {
	margin-top: 14px;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	color: var(--fg-0);
	letter-spacing:-.005em;
	text-align:center;
}
.tt-headline em { font-style: italic; color: var(--acc); font-weight: 400; }
.tt-subtitle { margin-top: 8px; color: var(--fg-2); font-size: 13px; text-align:center; }

/* Hero card (form container) */
.tt-card {
	margin-top: 26px;
	width: 100%;
	background: var(--bg-elev);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border:.5px solid var(--card-border);
	border-radius: 12px;
	padding: 26px 26px 22px;
	position: relative;
	box-shadow: var(--card-shadow);
	animation: tt-card-breath 4s ease-in-out infinite;
}
@keyframes tt-card-breath {
	0%,100%{ box-shadow: var(--card-shadow), 0 0 0 0 var(--acc-glow); }
	50%    { box-shadow: var(--card-shadow), 0 0 36px 4px var(--acc-glow); }
}
.tt-card::before, .tt-card::after,
.tt-bracket {
	content:""; position:absolute; width:14px; height:14px;
	border:.5px solid var(--acc); opacity:.85;
}
.tt-card::before { top:-1px; left:-1px;  border-right:0; border-bottom:0; border-top-left-radius:8px; }
.tt-card::after  { top:-1px; right:-1px; border-left:0;  border-bottom:0; border-top-right-radius:8px; }
.tt-bracket.bl   { bottom:-1px; left:-1px;  border-right:0; border-top:0; border-bottom-left-radius:8px; }
.tt-bracket.br   { bottom:-1px; right:-1px; border-left:0;  border-top:0; border-bottom-right-radius:8px; }

/* Steps (register only) */
.tt-steps {
	display:flex; align-items:center; gap:8px;
	margin: -4px 0 18px;
	font: 500 9.5px/1 'Inter', system-ui, sans-serif;
	letter-spacing:.18em; text-transform:uppercase;
	color: var(--fg-3);
}
.tt-steps .step { display:inline-flex; align-items:center; gap:6px; }
.tt-steps .step i { font-style:normal; font-family:'JetBrains Mono', monospace; color: var(--fg-4); letter-spacing:0; }
.tt-steps .step.active { color: var(--acc); }
.tt-steps .step.active i { color: var(--acc); }
.tt-steps .step.done { color: color-mix(in oklch, var(--acc) 70%, var(--fg-3)); }
.tt-steps .step.done i { color: color-mix(in oklch, var(--acc) 70%, var(--fg-3)); }
.tt-steps .step-sep { flex:1; height:.5px; background: var(--line); }
.tt-steps .step-sep.done { background: var(--acc-line); }

/* Field rows */
.tt-field { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.tt-field label {
	font-size: 9.5px; letter-spacing:.22em; text-transform:uppercase;
	color: var(--fg-2); font-family: 'Inter', system-ui, sans-serif; font-weight:500;
}
.tt-field label::before { content:"› "; color: var(--acc); margin-right:1px; }
.tt-field input {
	appearance:none; outline:0;
	width:100%;
	background: var(--input-bg);
	border:.5px solid var(--input-border);
	border-radius: 8px;
	padding: 11px 13px;
	color: var(--fg-0);
	font: 400 13px/1.2 'JetBrains Mono','SF Mono',Menlo,monospace;
	letter-spacing:.02em;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tt-field input::placeholder { color: var(--fg-4); }
.tt-field input:focus {
	border-color: var(--acc);
	box-shadow: 0 0 0 3px var(--acc-soft), 0 0 12px var(--acc-glow);
	background: color-mix(in oklch, var(--acc) 4%, var(--input-bg));
}

/* Submit + secondary buttons */
.tt-submit {
	appearance:none; border:0;
	width:100%;
	padding: 13px 16px;
	background: var(--acc);
	color: #02181c;
	border-radius: 8px;
	font: 500 11.5px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
	margin-top: 4px;
	box-shadow: 0 8px 22px -10px var(--acc-glow), 0 0 0 .5px var(--acc) inset;
}
[data-theme="light"] .tt-submit { color:#fff; }
.tt-submit::after {
	content:""; position:absolute; inset:0;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform .8s ease;
}
.tt-submit:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 28px -10px var(--acc-glow), 0 0 0 .5px var(--acc) inset; }
.tt-submit:hover::after { transform: translateX(100%); }
.tt-submit[disabled] {
	background: var(--bg-3); color: var(--fg-3);
	cursor: not-allowed; box-shadow: none;
}
.tt-submit[disabled]:hover { transform:none; filter:none; }
.tt-submit[disabled]::after { display:none; }
.tt-submit .arr { margin-left:8px; }

.tt-meta {
	display:flex; justify-content:space-between; align-items:center; gap:12px;
	margin-top:12px;
	font-size: 10.5px;
	color: var(--fg-2);
}
.tt-meta a {
	color: var(--fg-1); text-decoration:none;
	border-bottom:.5px dashed var(--fg-4);
	padding-bottom: 1px;
	transition: color .2s ease, border-color .2s ease;
}
.tt-meta a:hover { color: var(--acc); border-color: var(--acc); }
.tt-meta .twofa { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; }
.tt-meta .twofa .dot {
	width:6px; height:6px; border-radius:50%; background: var(--acc);
	animation: tt-breathe 2s ease-in-out infinite;
	box-shadow: 0 0 8px var(--acc);
}

.tt-divider {
	display:flex; align-items:center; gap:10px;
	margin: 18px 0 14px;
	color: var(--fg-4);
	font: 400 9px/1 'JetBrains Mono', monospace;
	letter-spacing:.32em; text-transform:uppercase;
}
.tt-divider::before, .tt-divider::after { content:""; flex:1; height:.5px; background: var(--line); }

.tt-secondary {
	appearance:none; display:flex; align-items:center; justify-content:center; gap:8px;
	width:100%; padding: 11px 16px;
	background: transparent;
	color: var(--fg-1);
	border:.5px solid var(--acc-line);
	border-radius: 8px;
	font: 500 11px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.tt-secondary:hover { background: var(--acc-soft); color: var(--acc); border-color: var(--acc); transform: translateY(-1px); }
.tt-secondary .arr { font-family:'JetBrains Mono', monospace; }

.tt-footnote {
	margin-top: 20px;
	font: 400 10px/1 'JetBrains Mono', monospace;
	color: var(--fg-3);
	letter-spacing:.08em;
	text-align:center;
	display:flex; justify-content:center; gap:14px;
}
.tt-footnote .sep { color: var(--fg-4); }

/* Inline alert (error / success) inside the card */
.tt-alert { margin-bottom: 14px; padding: 9px 12px; border-radius: 8px; font-size: 11px; line-height: 1.45; }
.tt-alert.error { background: var(--neg-soft); color: var(--neg); border: .5px solid color-mix(in oklch, var(--neg) 40%, transparent); }
.tt-alert.success { background: var(--acc-soft); color: var(--acc); border: .5px solid var(--acc-line); }

/* Forgot-specific: optional label suffix, recovery channel selector,
   and accent-tinted notice/info banner. Pure presentation — the
   selector is cosmetic over a single backend recovery path (email). */
.tt-opt {
	color: var(--fg-4);
	font: 400 9px/1 'JetBrains Mono', monospace;
	letter-spacing: .08em; text-transform: none; margin-left: 6px;
}
.tt-channel { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.tt-channel-lbl {
	font: 500 9.5px/1 'Inter', system-ui, sans-serif;
	letter-spacing:.22em; text-transform:uppercase; color: var(--fg-2);
}
.tt-channel-lbl::before { content:"› "; color: var(--acc); margin-right:1px; }
.tt-channel-opts { display:flex; flex-direction:column; gap:6px; }
.tt-chan {
	appearance:none; cursor:pointer;
	display:grid; grid-template-columns: 22px 1fr auto; align-items:center; gap:10px;
	padding: 10px 12px;
	background: var(--input-bg);
	border:.5px solid var(--input-border);
	border-radius: 8px;
	color: var(--fg-1);
	text-align:left;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.tt-chan:hover { border-color: var(--acc-line); }
.tt-chan[aria-pressed="true"] {
	border-color: var(--acc);
	background: color-mix(in oklch, var(--acc) 6%, var(--input-bg));
	box-shadow: 0 0 0 3px var(--acc-soft);
}
.tt-chan[disabled], .tt-chan[aria-disabled="true"] {
	cursor: not-allowed; opacity: .55;
}
.tt-chan-ic {
	width:22px; height:22px; border-radius:6px;
	display:inline-grid; place-items:center;
	background: var(--acc-soft); color: var(--acc);
	font: 500 12px/1 'JetBrains Mono', monospace;
}
.tt-chan-name { font: 500 12px/1.1 'Inter', system-ui, sans-serif; color: var(--fg-0); }
.tt-chan-meta { font-size: 10px; color: var(--fg-3); font-family:'JetBrains Mono', monospace; }

.tt-notice {
	margin: 4px 0 14px;
	padding: 10px 12px;
	border:.5px dashed var(--acc-line);
	border-radius: 8px;
	background: var(--acc-soft);
	color: var(--fg-1);
	font-size: 11px; line-height: 1.5;
}
.tt-notice em { color: var(--acc); font-style: normal; font-weight: 500; }
.tt-notice-tag {
	display:inline-block; margin-right:8px;
	font: 500 9px/1 'JetBrains Mono', monospace;
	letter-spacing:.18em; color: var(--acc);
	padding: 3px 6px; border-radius: 4px;
	background: color-mix(in oklch, var(--acc) 14%, transparent);
}

/* Password strength rules (register/reset) — placed below the password input */
.tt-rules { margin-top: 8px; padding: 0; list-style: none; font: 400 10.5px/1.55 'JetBrains Mono', monospace; color: var(--fg-3); }
.tt-rules li { display:flex; align-items:center; gap:6px; }
.tt-rules li .mark { width:10px; display:inline-block; }
.tt-rules li.ok { color: var(--acc); }

/* Hide the floating theme toggle on terminal pages — the top bar is the chrome */
body.terminal-body .theme-toggle { display:none !important; }

/* Segmented theme toggle pill — sits just under the top status bar,
   matches the algotier design (DARK / LIGHT). Hooks into window.setTheme
   from theme-init.js so the cookie + cross-tab sync still work. */
.tt-pill {
	position: fixed; top: 48px; right: 16px; z-index: 6;
	display: inline-flex; align-items: center; gap: 0;
	background: var(--bg-elev);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: .5px solid var(--line);
	border-radius: 999px; padding: 3px;
	box-shadow: 0 8px 20px -10px rgba(0,0,0,.4);
}
.tt-pill button {
	appearance: none; border: 0; background: transparent;
	color: var(--fg-2);
	font: 500 10px/1 'Inter', system-ui, sans-serif;
	letter-spacing: .18em; text-transform: uppercase;
	padding: 7px 12px; border-radius: 999px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	transition: color .25s ease, background .25s ease;
}
.tt-pill button[aria-pressed="true"] {
	background: var(--acc-soft); color: var(--acc);
}
.tt-pill svg { width: 11px; height: 11px; }

/* Responsive: stack the hero a bit on small screens */
@media (max-width: 640px) {
	.tt-headline { font-size: 26px; }
	.tt-hero-wrap { padding: 52px 12px 44px; }
}