:root {
  --bg: #000000;
  --panel: rgba(16, 16, 19, .72); /* slightly see-through so the watermark shows behind cards */
  --panel-2: #18181b;
  --line: #26262b;
  --text: #f4f4f5;
  --muted: #8e8e96;
  --buy: #3b9eff;
  --sell: #ff4d4f;
  --exit: #9a9aa2;
  --alert: #ffd60a;
  --accent: #d4af37;
  --gold: #e3bc57;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }

/* Traxa emblem, large and faint, fixed behind every page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(/watermark.png) center 55% / min(78vw, 460px) no-repeat;
  opacity: .13;
}
main { position: relative; z-index: 1; }
h2 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); margin: 4px 0 0; }
.center { text-align: center; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(0, 0, 0, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.narrow { max-width: 420px; margin: 32px auto; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 10px 16px; border: 1px solid transparent;
  color: var(--text); background: var(--panel-2);
}
.btn.primary { background: var(--accent); color: #000; }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn:disabled { opacity: .6; cursor: default; }
.btn.wide { width: 100%; margin-top: 8px; }

.tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg); padding: 4px; border-radius: 10px; }
.tab { flex: 1; font: inherit; font-weight: 600; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.tab.active { background: var(--panel-2); color: var(--text); }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.error { color: var(--sell); min-height: 1.2em; margin: 4px 0; font-size: 14px; }

.notify { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.notify.on { border-color: rgba(59, 158, 255, .4); }
.notify-actions { display: flex; gap: 8px; flex-shrink: 0; }

.feed-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; }

.signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sig {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c);
  border-radius: var(--radius); padding: 12px 14px;
}
.sig.new { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--panel-2); } }
.sig.buy { --c: var(--buy); } .sig.sell { --c: var(--sell); }
.sig.exit { --c: var(--exit); } .sig.alert { --c: var(--alert); }
.badge { grid-row: span 2; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--c);
  border: 1px solid var(--c); border-radius: 8px; padding: 6px 8px; min-width: 56px; text-align: center; }
.sig .ticker { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; color: var(--gold); }
.sig .price { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.sig .meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.sig .time { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.sig .note { grid-column: 2 / -1; color: var(--text); font-size: 14px; opacity: .85; }

.disclaimer { color: var(--muted); font-size: 12px; text-align: center; margin-top: 24px; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--panel-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px;
  opacity: 0; pointer-events: none; transition: .25s; max-width: calc(100% - 32px); z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Page switch (Signals / Gold) ---------- */
.seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.seg-btn { flex: 1; font: inherit; font-weight: 700; padding: 9px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }
.seg-btn.active { background: var(--accent); color: #000; }

/* ---------- Gold page ---------- */
#pairPage, #newsPage { display: grid; gap: 12px; }
#pairPage[hidden], #newsPage[hidden] { display: none; }
#pairPage h2, #newsPage h2 { margin-bottom: 4px; }
.b-bullish { color: var(--buy); } .b-bearish { color: var(--sell); } .b-neutral { color: var(--muted); }
.gold-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bias { font-size: 30px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; margin-top: 4px; color: var(--muted); }
.bias.bullish { color: var(--buy); } .bias.bearish { color: var(--sell); }
.gold-price { text-align: right; }
.gold-price b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--gold); }
.gold-price .muted { font-size: 12px; }
.gold-price b { border-radius: 6px; padding: 0 4px; margin-right: -4px; }
/* Price flashes blue on an uptick, red on a downtick, then fades back to gold */
.gold-price b.tick-up { animation: tick-up .9s ease-out; }
.gold-price b.tick-down { animation: tick-down .9s ease-out; }
@keyframes tick-up { 0%, 35% { color: #fff; background: rgba(59, 158, 255, .45); } }
@keyframes tick-down { 0%, 35% { color: #fff; background: rgba(255, 77, 79, .45); } }
.live-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; }
.live-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.live-tag.on { color: #30d158; }
.live-tag.on i { background: var(--sell); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
.updated { font-size: 12px; margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .gold-price b.tick-up, .gold-price b.tick-down, .live-tag.on i { animation: none; }
}
.tf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; }
.tf { --c: var(--muted); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 10px; padding: 8px; text-align: center; background: var(--panel-2); }
.tf.bullish { --c: var(--buy); } .tf.bearish { --c: var(--sell); }
.tf span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.tf b { display: block; color: var(--c); font-size: 14px; }

.tech { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.tech th, .tech td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tech th { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
/* Buyer vs seller volume: blue share on the left, red on the right */
.vol { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; line-height: 1.1; min-width: 46px; }
.vol i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--buy) 0 var(--b), var(--sell) var(--b) 100%); }
.tf .vol { margin-top: 4px; align-items: stretch; text-align: center; font-size: 10px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv > div:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { text-align: right; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.kv i { font-style: normal; }

.fund { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fund-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fund-item span { display: block; color: var(--muted); font-size: 12px; }
.fund-item b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.fund-item small { font-size: 12px; color: var(--muted); }
/* Rising dollar/yields weigh on gold (red); falling ones support it (blue) */
.fund-item.up small { color: var(--sell); } .fund-item.down small { color: var(--buy); }
.fund-read { margin: 12px 0 0; font-weight: 600; }
.fund-read:empty { display: none; }

.news-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; }
.chip { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.chip.active { border-color: var(--accent); color: var(--accent); }
.news { margin-top: 8px; }
.news-day { color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 4px; }
.news-row { display: grid; grid-template-columns: 66px 10px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.news-row.past { opacity: .45; }
.news-row time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.news-title small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.impact { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; background: var(--muted); }
.impact.high { background: var(--sell); } .impact.medium { background: #ff9f0a; }
.impact.low { background: var(--alert); } .impact.holiday { background: #55555c; }
.soon { font-size: 11px; font-weight: 700; color: #000; background: var(--alert); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }

@media (max-width: 480px) {
  .tf { padding: 7px 2px; }
  .tf b { font-size: 12px; }
  .bias { font-size: 26px; }
  .notify { flex-direction: column; align-items: stretch; }
  .notify-actions .btn { flex: 1; }
}

/* ---------- Markets list ---------- */
.pairs { display: grid; gap: 10px; }
.pair-card {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name price chev" "meta meta chev";
  gap: 4px 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 14px;
}
.pair-card:hover { border-color: var(--gold); }
.pair-name { grid-area: name; display: flex; align-items: baseline; gap: 8px; }
.pair-name b { color: var(--gold); font-size: 18px; }
.pair-name small { color: var(--muted); font-size: 12px; }
.pair-price { grid-area: price; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.pair-meta { grid-area: meta; color: var(--muted); font-size: 13px; }
.chev { grid-area: chev; color: var(--muted); font-size: 24px; line-height: 1; }
#generalBox { margin-top: 18px; }

/* ---------- Market page ---------- */
.back { font: inherit; font-weight: 700; color: var(--gold); background: none; border: 0; padding: 2px 0; cursor: pointer; justify-self: start; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.stat-box b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.stat-box span { color: var(--muted); font-size: 12px; }
.stat-box.good b { color: var(--buy); } .stat-box.bad b { color: var(--sell); }
.stat-box.wide { grid-column: span 2; }
.small { font-size: 12px; margin-top: 10px; }
.sig .res { grid-column: 2 / -1; font-size: 13px; font-weight: 700; }
.res.win { color: var(--buy); } .res.loss { color: var(--sell); } .res.open { color: var(--alert); }

/* Today's signals: folded by default, tap the heading to open */
.fold { padding: 0; }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary h2 { margin: 0; }
.fold .count { color: var(--muted); font-weight: 600; }
.fold-hint { color: var(--gold); font-size: 13px; font-weight: 700; }
.fold-hint::before { content: "Show ▾"; }
.fold[open] .fold-hint::before { content: "Hide ▴"; }
.fold .signals, .fold #emptyMsg { margin: 0 12px 14px; }

/* Gold bias under high-impact news */
.bias-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.pill { font-size: 11px; font-weight: 800; letter-spacing: .03em; border-radius: 6px; padding: 2px 7px; border: 1px solid currentColor; }
.pill.buy { color: var(--buy); background: rgba(59, 158, 255, .12); }
.pill.sell { color: var(--sell); background: rgba(255, 77, 79, .12); }
.pill.wait { color: var(--muted); }

/* ---------- Landing: intro film + Enter ---------- */
/* The film fills as much of the screen as fits at 9:16; Enter sits underneath it, the sound
   toggle floats in the film's top-right corner. */
.intro { position: fixed; inset: 0; z-index: 50; background: #000; transition: opacity .45s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: env(safe-area-inset-top) 0 calc(16px + env(safe-area-inset-bottom)); }
.intro.leaving { opacity: 0; pointer-events: none; }
body.intro-open { overflow: hidden; }
.intro-stage { position: relative; height: min(calc(100svh - 120px), calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; max-width: 100vw; }
.intro video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.intro-fallback { display: none; position: absolute; inset: 0; place-content: center; justify-items: center; gap: 12px; }
.intro-fallback img { width: 160px; }
.intro-fallback b { font-size: 44px; letter-spacing: -.02em; color: var(--gold); }
.intro.no-video video { visibility: hidden; }
.intro.no-video .intro-fallback { display: grid; }
.intro-ui { flex-shrink: 0; display: flex; justify-content: center; padding: 0 16px; }
.intro-enter { min-width: 220px; padding: 15px 32px; font-size: 18px; border-radius: 99px; letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(227, 188, 87, .5), 0 10px 40px rgba(212, 175, 55, .35); }
.intro.ended .intro-enter { animation: enter-glow 1.8s ease-in-out infinite; }
@keyframes enter-glow { 50% { box-shadow: 0 0 0 1px rgba(227, 188, 87, .8), 0 10px 60px rgba(212, 175, 55, .6); } }
.intro-sound { position: absolute; top: 12px; right: 12px; z-index: 2;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; padding: 8px 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.intro.no-video .intro-sound { display: none; }
@media (prefers-reduced-motion: reduce) { .intro.ended .intro-enter { animation: none; } }

/* Account (change password) and terms links */
#accountFold { margin-top: 16px; }
.pw-form { padding: 0 18px 16px; }
.pw-form .btn { margin-top: 4px; }
.pw-form #pwStatus { min-height: 1.2em; }
.terms-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.terms-note a, .disclaimer a { color: var(--gold); }

/* Wide zones (> 50 pips) split into two entries */
.zone-split { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; }
.sig .zone-split { grid-column: 2 / -1; }
.kv .zone-split { justify-content: flex-end; margin-top: 4px; }
.zone-split i { font-style: normal; border-radius: 6px; padding: 2px 7px; border: 1px solid currentColor; }
.zone-split .risk-med { color: #ff9f0a; background: rgba(255, 159, 10, .1); }
.zone-split .risk-low { color: #30d158; background: rgba(48, 209, 88, .1); }

/* ---------- First-run setup guide ---------- */
body.guide-open { overflow: hidden; }
.guide { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 16px; }
.guide[hidden] { display: none; }
.guide-card { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box;
  background: #0d0d10; border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7); animation: guide-in .35s ease-out; }
@keyframes guide-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { .guide { align-items: center; } }
.guide-mark { width: 52px; height: 52px; border-radius: 12px; display: block; }
.guide-card h2 { margin: 12px 0 2px; font-size: 22px; }
.g-step { display: flex; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.g-step.done { border-color: rgba(48, 209, 88, .45); }
.g-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; background: rgba(212, 175, 55, .16); color: var(--gold); }
.g-step.done .g-num { background: rgba(48, 209, 88, .18); color: #30d158; }
.g-step h3 { margin: 3px 0 6px; font-size: 16px; }
.g-step p { margin: 0 0 10px; font-size: 14px; }
.g-step p:last-child { margin-bottom: 0; }
.g-step ol { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: #d6d6db; }
.g-step li + li { margin-top: 4px; }
.g-ico { display: inline-flex; vertical-align: -4px; color: #3b9eff; }
#openGuide { width: 100%; margin-bottom: 12px; }

/* ---------- Greeting ---------- */
.hello { margin: 6px 2px 14px; }
.hello h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
#nameForm { margin-bottom: 14px; }

/* ---------- Community chat ---------- */
.seg-btn { position: relative; }
.seg-dot { position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--sell); }
.seg-dot[hidden] { display: none; }
.chat-rules { font-size: 13px; margin: 4px 0 10px; }
.chat-list { list-style: none; margin: 0; padding: 6px 2px; height: min(58vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overscroll-behavior: contain; }
.chat-day { align-self: center; font-size: 12px; color: var(--muted); margin: 6px 0 2px; }
.chat-empty { margin: auto; text-align: center; padding: 0 20px; }
.chat-msg { align-self: flex-start; max-width: 82%; background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px; padding: 7px 11px 6px; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.mine { align-self: flex-end; background: rgba(212, 175, 55, .16); border-color: rgba(212, 175, 55, .35); border-radius: 16px 16px 4px 16px; }
.chat-msg.staff { border-color: rgba(212, 175, 55, .55); }
.chat-name { font-size: 12px; color: var(--gold); font-weight: 700; }
.chat-name i { font-style: normal; font-size: 10px; padding: 1px 5px; margin-left: 4px; border-radius: 6px; background: var(--accent); color: #000; }
.chat-body { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-msg time { align-self: flex-end; font-size: 11px; color: var(--muted); }
.chat-form, .chat-name { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.chat-form[hidden], .chat-name[hidden] { display: none; }
.chat-form input, .chat-name input { flex: 1; min-width: 0; }
.chat-name p { flex-basis: 100%; margin: 0; }
#chatError:empty { display: none; }

/* ---------- Chat channels ---------- */
.chat-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tabs .chip { position: relative; flex: 0 0 auto; }
.chip-add { border-style: dashed !important; }
.chip-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sell); }
.chat-join { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chat-join[hidden] { display: none; }
.chat-join input { flex: 1 1 160px; min-width: 0; }
.chat-leave { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; padding: 4px 0; margin-top: 6px; cursor: pointer; }
.chat-leave[hidden] { display: none; }

/* ---------- IB moderators ---------- */
.chat-msg { position: relative; }
.chat-name i.ib, .ib-tag { font-style: normal; font-size: 10px; padding: 1px 5px; margin-left: 4px; border-radius: 6px; background: #3b9eff; color: #000; }
.chat-del { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.chat-msg:has(.chat-del) { padding-right: 24px; }
.chat-foot { display: flex; gap: 16px; }
.chat-manage { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.chat-manage[hidden] { display: none; }
.chat-manage h3 { font-size: 15px; margin: 6px 0; }
.manage-link { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0 8px; overflow-wrap: anywhere; font-size: 13px; }
.manage-members { list-style: none; margin: 0; padding: 0; }
.manage-members li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.manage-members .row-btns { display: flex; gap: 6px; }
.manage-members .btn { padding: 6px 10px; font-size: 13px; }

/* ---------- Signal page ---------- */
.sig.tappable { cursor: pointer; position: relative; padding-right: 30px; }
.sig .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 22px; }
.str-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin-top: 4px; }
.str-tag.strong, .str-head .strong { color: #30d158; }
.str-tag.moderate, .str-head .moderate { color: var(--alert); }
.str-tag.risky, .str-head .risky { color: var(--sell); }
.str-tag.strong { background: rgba(48, 209, 88, .14); }
.str-tag.moderate { background: rgba(255, 214, 10, .14); }
.str-tag.risky { background: rgba(255, 77, 79, .14); }
.sig-hero { text-align: center; border-width: 1px; }
.sig-hero.buy { border-color: rgba(59, 158, 255, .5); background: linear-gradient(180deg, rgba(59, 158, 255, .14), var(--panel) 60%); }
.sig-hero.sell { border-color: rgba(255, 77, 79, .5); background: linear-gradient(180deg, rgba(255, 77, 79, .14), var(--panel) 60%); }
.sig-hero-top { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sig-side { font-weight: 900; font-size: 15px; letter-spacing: .12em; padding: 4px 12px; border-radius: 999px; color: #000; }
.sig-hero.buy .sig-side { background: var(--buy); }
.sig-hero.sell .sig-side { background: var(--sell); }
.sig-sub { font-weight: 600; }
.sig-when { color: var(--muted); font-size: 13px; }
.sig-zone-label { margin-top: 18px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.sig-zone { font-size: clamp(40px, 13vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.sig-zone i { font-style: normal; color: var(--muted); margin: 0 .15em; font-weight: 400; }
.sig-hero.buy .sig-zone { color: var(--buy); }
.sig-hero.sell .sig-zone { color: var(--sell); }
.sig-hero .zone-split { justify-content: center; }
.sig-live { margin-top: 10px; font-size: 14px; color: #d6d6db; }
.sig-status { margin-top: 8px; }
.sig-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lvl { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, .03); }
.lvl span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.lvl b { font-size: clamp(20px, 6.4vw, 30px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lvl small { color: var(--muted); font-size: 13px; }
.lvl.sl b { color: var(--sell); }
.lvl.tp b { color: var(--buy); }
.lvl.hit.tp { border-color: rgba(48, 209, 88, .55); background: rgba(48, 209, 88, .08); }
.lvl.hit.sl { border-color: rgba(255, 77, 79, .55); background: rgba(255, 77, 79, .08); }
.lvl.sl { grid-column: 1 / -1; }
.str-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.str-head h2 { margin: 0; }
.str-head b { font-size: 18px; }
.str-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 12px 0; }
.str-bar i { display: block; height: 100%; border-radius: 999px; }
.str-bar.strong i { background: #30d158; }
.str-bar.moderate i { background: var(--alert); }
.str-bar.risky i { background: var(--sell); }
.str-notes { list-style: none; margin: 0 0 8px; padding: 0; }
.str-notes li { padding: 5px 0 5px 22px; position: relative; font-size: 14px; }
.str-notes li::before { position: absolute; left: 0; font-weight: 800; }
.str-notes li.plus::before { content: "+"; color: #30d158; }
.str-notes li.minus::before { content: "−"; color: var(--sell); }
.sig-note { border-color: rgba(255, 214, 10, .45); background: rgba(255, 214, 10, .06); }

.res.be { color: var(--alert); }

/* ---------- Signal page: HUD look ---------- */
.sx { --n: var(--buy); --n-rgb: 59, 158, 255; position: relative; }
.sx.sell { --n: var(--sell); --n-rgb: 255, 77, 79; }
.sx #sigBody { display: flex; flex-direction: column; gap: 14px; }
.sx .back { color: rgb(var(--n-rgb)); }

.sx-hero, .sx-panel {
  position: relative; border-radius: 18px; padding: 18px;
  background:
    linear-gradient(rgba(var(--n-rgb), .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(var(--n-rgb), .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(14, 14, 18, .92), rgba(6, 6, 9, .92));
  border: 1px solid rgba(var(--n-rgb), .28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 0 24px rgba(var(--n-rgb), .10), 0 18px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.sx-hero { text-align: center; padding: 22px 18px 20px; border-color: rgba(var(--n-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--n-rgb), .15) inset, 0 0 40px rgba(var(--n-rgb), .22), 0 18px 50px rgba(0, 0, 0, .6); }
.sx-hero::before { /* glow behind the zone */
  content: ""; position: absolute; left: 50%; top: 58%; width: 120%; height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--n-rgb), .22), transparent); pointer-events: none; }
.sx-hero::after { /* slow scan line */
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--n-rgb), .10), transparent);
  animation: sx-scan 5s linear infinite; }
@keyframes sx-scan { to { top: 100%; } }
.sx-corner { position: absolute; width: 16px; height: 16px; border: 2px solid rgb(var(--n-rgb)); opacity: .9; filter: drop-shadow(0 0 4px rgba(var(--n-rgb), .8)); }
.sx-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.sx-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.sx-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.sx-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.sx-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sx-side { font-weight: 900; letter-spacing: .22em; font-size: 14px; padding: 6px 16px 6px 18px; border-radius: 999px;
  color: #000; background: rgb(var(--n-rgb)); box-shadow: 0 0 18px rgba(var(--n-rgb), .7), 0 0 2px #fff inset; }
.sx-meta { font-size: 13px; color: #c9c9cf; letter-spacing: .04em; }
.sx-meta i { font-style: normal; color: rgba(var(--n-rgb), .7); margin: 0 4px; }
.sx-label { position: relative; margin-top: 18px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(var(--n-rgb), .9); }
.sx-zone { position: relative; display: flex; justify-content: center; align-items: center; gap: .18em; margin: 6px 0 10px;
  font-size: clamp(42px, 14vw, 72px); font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 10px rgba(var(--n-rgb), .9), 0 0 28px rgba(var(--n-rgb), .55); }
.sx-zone i { font-style: normal; font-weight: 300; font-size: .5em; color: rgba(var(--n-rgb), .8); text-shadow: none; }
.sx-hero .zone-split { position: relative; justify-content: center; }
.sx-live { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 14px; }
.sx-live:empty { display: none; }
.sx-live b { font-variant-numeric: tabular-nums; font-size: 16px; }
.sx-live-label { color: #30d158; font-weight: 800; font-size: 11px; letter-spacing: .18em; }
.sx-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 8px #ff453a; animation: sx-blink 1.2s ease-in-out infinite; }
@keyframes sx-blink { 50% { opacity: .25; } }
.sx-where { color: #c9c9cf; }
.sx-where.in { color: rgb(var(--n-rgb)); font-weight: 700; text-shadow: 0 0 8px rgba(var(--n-rgb), .6); }
.sx-status { position: relative; margin-top: 10px; }
.sx-status .res { font-size: 14px; }

.sx-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sx-panel h2 { margin: 0; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #e6e6ea; }

/* Price map */
.sx-ladder { position: relative; height: 320px; margin: 6px 0 2px; }
.sx-ladder-in { position: absolute; left: 0; right: 0; top: 26px; bottom: 16px; }
.sx-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .18) 8%, rgba(255, 255, 255, .18) 92%, transparent); }
.sx-band { position: absolute; left: calc(50% - 26px); right: calc(50% - 26px); min-height: 6px; border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(var(--n-rgb), .28) 0 6px, rgba(var(--n-rgb), .12) 6px 12px);
  border: 1px solid rgba(var(--n-rgb), .7); box-shadow: 0 0 16px rgba(var(--n-rgb), .35); }
.sx-band span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--n-rgb)); white-space: nowrap; }
.sx-mark { position: absolute; left: 0; right: 0; height: 0; display: flex; align-items: center; }
.sx-mark i { position: absolute; left: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, 0); top: -6px; border: 2px solid; background: #0b0b0e; }
.sx-mark span { position: absolute; right: calc(50% + 38px); transform: translateY(-50%); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.sx-mark b { position: absolute; left: calc(50% + 38px); transform: translateY(-50%); font-size: 15px; font-variant-numeric: tabular-nums; }
.sx-mark.tp i, .sx-mark.tp span { border-color: var(--buy); color: var(--buy); }
.sx-mark.sl i, .sx-mark.sl span { border-color: var(--sell); color: var(--sell); }
.sx-mark.done.tp i { background: #30d158; border-color: #30d158; box-shadow: 0 0 10px #30d158; }
.sx-mark.done.tp span { color: #30d158; }
.sx-mark.done.sl i { background: var(--sell); box-shadow: 0 0 10px var(--sell); }
.sx-mark::before { content: ""; position: absolute; left: calc(50% - 34px); right: calc(50% - 34px); border-top: 1px dashed rgba(255, 255, 255, .25); }
.sx-mark { z-index: 1; }
.sx-now { position: absolute; left: 0; right: 0; height: 0; transition: top .6s cubic-bezier(.2, .8, .2, 1); z-index: 2; }
.sx-now i { position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15), 0 0 16px #fff, 0 0 30px rgba(var(--n-rgb), .9); animation: sx-pulse 1.6s ease-in-out infinite; }
.sx-now::before { content: ""; position: absolute; left: 6%; right: 6%; border-top: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 0 8px rgba(255, 255, 255, .5); }
.sx-now b { position: absolute; right: 2%; top: -11px; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: #fff; color: #000; font-variant-numeric: tabular-nums; }
.sx-now.edge i { opacity: .6; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, .05), 0 0 22px #fff, 0 0 40px rgba(var(--n-rgb), 1); } }

/* Level tiles */
.sx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.sx-tile { min-width: 0; border-radius: 12px; padding: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px; }
.sx-tile span { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sx-tile b { font-size: clamp(20px, 6.4vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sx-tile small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sx-tile.sl { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; border-color: rgba(255, 77, 79, .35); }
.sx-tile.sl b { color: var(--sell); text-shadow: 0 0 12px rgba(255, 77, 79, .5); }
.sx-tile.sl small { margin-left: auto; }
.sx-tile.tp { border-color: rgba(59, 158, 255, .3); }
.sx-tile.tp b { color: var(--buy); text-shadow: 0 0 12px rgba(59, 158, 255, .45); }
.sx-tile.done.tp { border-color: rgba(48, 209, 88, .6); background: rgba(48, 209, 88, .08); box-shadow: 0 0 14px rgba(48, 209, 88, .2); }
.sx-tile.done.tp span { color: #30d158; }
.sx-tile.done.sl { background: rgba(255, 77, 79, .1); box-shadow: 0 0 14px rgba(255, 77, 79, .25); }

/* Strength ring */
.sx-strength { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; --c: #30d158; --c-rgb: 48, 209, 88; }
.sx-strength.moderate { --c: var(--alert); --c-rgb: 255, 214, 10; }
.sx-strength.risky { --c: var(--sell); --c-rgb: 255, 77, 79; }
.sx-ring { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0);
  box-shadow: 0 0 22px rgba(var(--c-rgb), .35); animation: sx-ring-in .9s ease-out; }
.sx-ring > div { width: 86px; height: 86px; border-radius: 50%; background: #08080b; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(var(--c-rgb), .3) inset; }
.sx-ring b { font-size: 30px; font-weight: 900; line-height: 1; color: var(--c); text-shadow: 0 0 12px rgba(var(--c-rgb), .6); font-variant-numeric: tabular-nums; }
.sx-ring b small { font-size: 14px; }
.sx-ring span { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #e6e6ea; margin-top: 4px; }
@keyframes sx-ring-in { from { transform: scale(.85) rotate(-40deg); opacity: 0; } }
.sx-reasons ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-reasons li { font-size: 13px; padding: 6px 10px 6px 26px; border-radius: 8px; position: relative; background: rgba(255, 255, 255, .03); }
.sx-reasons li::before { position: absolute; left: 9px; font-weight: 900; }
.sx-reasons li.plus { box-shadow: inset 2px 0 0 #30d158; }
.sx-reasons li.plus::before { content: "+"; color: #30d158; }
.sx-reasons li.minus { box-shadow: inset 2px 0 0 var(--sell); }
.sx-reasons li.minus::before { content: "−"; color: var(--sell); }
.sx-foot { grid-column: 1 / -1; margin: 0; }
@media (max-width: 380px) { .sx-strength { grid-template-columns: 1fr; justify-items: center; } }

.sx-warn { border-color: rgba(255, 214, 10, .5); box-shadow: 0 0 20px rgba(255, 214, 10, .12); color: #ffe27a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .sx-hero::after, .sx-dot, .sx-now i, .sx-ring { animation: none; }
  .sx-now { transition: none; }
}

.sx-pnl { position: relative; display: flex; flex-direction: column; align-items: center; margin: 14px 0 2px; }
.sx-pnl[hidden] { display: none; }
.sx-pnl b { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sx-pnl span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.sx-pnl.up b { color: #30d158; text-shadow: 0 0 14px rgba(48, 209, 88, .65); }
.sx-pnl.down b { color: var(--sell); text-shadow: 0 0 14px rgba(255, 77, 79, .6); }

.tf-hint { display: inline-block; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; margin-top: 4px; white-space: nowrap; }
.tf-hint.buy { color: var(--buy); background: color-mix(in srgb, var(--buy) 14%, transparent); border: 1px solid color-mix(in srgb, var(--buy) 40%, transparent); }
.tf-hint.sell { color: #ff4d4f; background: rgba(255, 77, 79, .14); border: 1px solid rgba(255, 77, 79, .35); }
td .tf-hint { display: table; margin-top: 3px; }

/* Completed signals: green, so late traders don't jump in */
.sig.done { border-color: rgba(48, 209, 88, .55) !important; background: linear-gradient(90deg, rgba(48, 209, 88, .14), rgba(48, 209, 88, .04)) !important; }
.sig.done .badge { background: #30d158; color: #000; }
.res.done { font-weight: 800; }
.sx-closed { position: relative; margin-top: 12px; padding: 9px 14px; border-radius: 12px; font-weight: 800; font-size: 14px; letter-spacing: .02em;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .15); color: #e6e6ea; }
.sx-closed.done { color: #30d158; background: rgba(48, 209, 88, .1); border-color: rgba(48, 209, 88, .55); box-shadow: 0 0 18px rgba(48, 209, 88, .25); }
.sx-closed.be { color: var(--alert); background: rgba(255, 214, 10, .08); border-color: rgba(255, 214, 10, .45); }

/* Stopped-out signals: red */
.sig.stopped { border-color: rgba(255, 77, 79, .55) !important; background: linear-gradient(90deg, rgba(255, 77, 79, .14), rgba(255, 77, 79, .04)) !important; }
.sig.stopped .badge { background: var(--sell); color: #000; }
.res.stopped { font-weight: 800; }
.sx-closed.stopped { color: var(--sell); background: rgba(255, 77, 79, .1); border-color: rgba(255, 77, 79, .55); box-shadow: 0 0 18px rgba(255, 77, 79, .25); }

/* ---------- Results panel: HUD look ---------- */
.hud-results {
  background:
    linear-gradient(rgba(212, 175, 55, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(212, 175, 55, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(14, 14, 18, .94), rgba(6, 6, 9, .94));
  border-color: rgba(212, 175, 55, .35);
  box-shadow: 0 0 26px rgba(212, 175, 55, .10), 0 18px 40px rgba(0, 0, 0, .5);
}
.hud-results h2 { letter-spacing: .2em; text-transform: uppercase; font-size: 14px; }
.hud-results .stats-grid { display: block; }
.rs-top { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-top: 4px; }
.rs-pips { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.rs-pips span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rs-pips b { font-size: clamp(36px, 11vw, 52px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #e6e6ea; }
.rs-pips.up b { color: #30d158; text-shadow: 0 0 16px rgba(48, 209, 88, .55); }
.rs-pips.down b { color: var(--sell); text-shadow: 0 0 16px rgba(255, 77, 79, .5); }
.rs-ring { --c: #8e8e96; --c-rgb: 142, 142, 150; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); box-shadow: 0 0 20px rgba(var(--c-rgb), .3); }
.rs-ring.good { --c: #30d158; --c-rgb: 48, 209, 88; }
.rs-ring.bad { --c: var(--sell); --c-rgb: 255, 77, 79; }
.rs-ring > div { width: 80px; height: 80px; border-radius: 50%; background: #08080b; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rs-ring b { font-size: 26px; font-weight: 900; line-height: 1; color: var(--c); text-shadow: 0 0 10px rgba(var(--c-rgb), .55); }
.rs-ring b small { font-size: 13px; }
.rs-ring span { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #e6e6ea; margin-top: 4px; }
.rs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.rs-tile { min-width: 0; text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.rs-tile b { display: block; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rs-tile span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rs-tile.good { border-color: rgba(48, 209, 88, .35); } .rs-tile.good b { color: #30d158; text-shadow: 0 0 10px rgba(48, 209, 88, .45); }
.rs-tile.bad { border-color: rgba(255, 77, 79, .35); } .rs-tile.bad b { color: var(--sell); text-shadow: 0 0 10px rgba(255, 77, 79, .45); }
.rs-tile.be { border-color: rgba(255, 214, 10, .3); } .rs-tile.be b { color: var(--alert); }

/* ---------- Signal cards: big timeframe on the left ---------- */
.sig.hud { --c-rgb: 59, 158, 255; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: stretch;
  padding: 12px 32px 12px 12px; border: 1px solid rgba(var(--c-rgb), .35); border-left-width: 1px;
  background:
    linear-gradient(rgba(var(--c-rgb), .045) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(var(--c-rgb), .045) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(var(--c-rgb), .12), rgba(10, 10, 13, .92) 45%);
  box-shadow: 0 0 18px rgba(var(--c-rgb), .10); }
.sig.hud.sell { --c-rgb: 255, 77, 79; }
.sig.hud.done { --c-rgb: 48, 209, 88; }
.sig.hud.stopped { --c-rgb: 255, 77, 79; }
.sig.hud.done, .sig.hud.stopped { background:
    linear-gradient(rgba(var(--c-rgb), .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(var(--c-rgb), .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(var(--c-rgb), .2), rgba(10, 10, 13, .92) 60%) !important; border-color: rgba(var(--c-rgb), .6) !important; }
.sig-tfbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid rgba(var(--c-rgb), .3); padding-right: 10px; }
.sig-tfbox b { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1; color: #fff;
  text-shadow: 0 0 10px rgba(var(--c-rgb), .9), 0 0 22px rgba(var(--c-rgb), .5); }
.sig-dir { font-size: 10px; font-weight: 900; letter-spacing: .14em; padding: 3px 7px; border-radius: 999px; color: #000; background: rgb(var(--c-rgb)); box-shadow: 0 0 10px rgba(var(--c-rgb), .6); }
.sig.hud.buy .sig-dir { background: var(--buy); } .sig.hud.sell .sig-dir { background: var(--sell); }
.sig-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sig-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sig-zone-s { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sig-zone-s i { font-style: normal; color: var(--muted); font-weight: 400; margin: 0 2px; }
.sig.hud.buy .sig-zone-s { color: #9fd0ff; } .sig.hud.sell .sig-zone-s { color: #ffb3b4; }
.sig-sub2 { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.sig-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.sig.hud .note, .sig.hud .zone-split, .sig.hud .res { grid-column: auto; }
.sig.hud .str-tag { margin-top: 0; }
.sig.hud .chev { color: rgba(var(--c-rgb), .9); }

/* ---------- Compact signal rows (today's list) ---------- */
#signals { gap: 8px; }
.sig.hud.mini { grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 30px 9px 10px; border-radius: 12px; align-items: center; }
.sig.hud.mini .sig-tfbox { gap: 4px; padding-right: 8px; }
.sig.hud.mini .sig-tfbox b { font-size: 20px; }
.sig.hud.mini .sig-dir { font-size: 9px; padding: 2px 6px; letter-spacing: .1em; }
.sig.hud.mini .sig-main { gap: 3px; }
.sig.hud.mini .sig-zone-s { font-size: 17px; }
.sig.hud.mini .time { font-size: 11px; }
.sig.hud.mini .sig-tags { margin-top: 0; gap: 8px; }
.sig.hud.mini .res { font-size: 12px; }
.sig.hud.mini .live-tag { font-size: 11px; letter-spacing: .14em; }
.sig.hud.mini .chev { right: 10px; font-size: 18px; }
.sig.hud.mini.live { box-shadow: 0 0 0 1px rgba(48, 209, 88, .25), 0 0 16px rgba(var(--c-rgb), .14); }
.mini-warn { color: var(--alert); font-size: 13px; }

.quiet-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.sx-quiet { position: relative; margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Merged duplicate timeframes on a card */
.sig-also { font-style: normal; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .02em; text-align: center; line-height: 1.1; }
.sig.hud.mini .sig-also { font-size: 9px; }
/* Price map zone: a box with its prices, like a zone marked on a chart */
.sx-band { display: flex; align-items: center; justify-content: center; }
.sx-band .sx-band-label { position: static !important; transform: none !important; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.8); }
.sx-band-hi, .sx-band-lo { position: absolute; right: calc(100% + 10px); font-size: 13px; font-weight: 800; color: rgb(var(--n-rgb)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-band-hi { top: -9px; } .sx-band-lo { bottom: -9px; }
.sx-band { left: calc(50% - 70px) !important; right: calc(50% - 70px) !important; border-width: 2px !important; }

.sx-off { position: absolute; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--buy); letter-spacing: .04em; }
.sx-off.top { top: 0; } .sx-off.bottom { bottom: -4px; }
.sx-ladder-in { top: 30px !important; bottom: 22px !important; }

/* Wide zones: the medium-risk stop, softer than the main SL */
.sx-tile.sl.med { opacity: .85; border-style: dashed; }
.sx-mark.sl.med { opacity: .75; }
.sx-mark.sl.med i { border-top-style: dashed; }

/* ---------- At a key level ---------- */
.kl { margin: 16px 0 6px; }
.kl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kl-top h3 { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #fff; font-weight: 800; }
.kl-pulse { width: 8px; height: 8px; border-radius: 50%; background: #ffc107; animation: klPulse 1.8s infinite; }
.kl-pulse.idle { background: var(--muted); animation: none; }
@keyframes klPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
.kl-count { margin-left: auto; display: flex; gap: 6px; font-size: 11px; }
.kl-count em { font-style: normal; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kl-count em.buy { color: var(--buy); background: rgba(59, 158, 255, .12); }
.kl-count em.sell { color: var(--sell); background: rgba(255, 77, 79, .12); }
.kl-card { --c: 59, 158, 255; position: relative; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--c), .07), rgba(var(--c), .015)); border: 1px solid rgba(var(--c), .28); overflow: hidden; }
.kl-card.sell { --c: 255, 77, 79; }
.kl-card.between { --c: 142, 142, 150; }
.kl-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--c)); box-shadow: 0 0 12px rgb(var(--c)); }
.kl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kl-tf { font-size: 22px; font-weight: 900; color: rgb(var(--c)); letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 14px rgba(var(--c), .45); }
.kl-role { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.kl-range { margin-left: auto; font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kl-range i { font-style: normal; color: var(--muted); margin: 0 2px; }
.kl-gauge { position: relative; margin: 26px 2px 4px; }
.kl-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(var(--c), .35); }
.kl-bar i { flex: 1; }
.kl-one { background: repeating-linear-gradient(135deg, rgba(var(--c), .55) 0 6px, rgba(var(--c), .3) 6px 12px); }
.kl-med { background: rgba(255, 159, 10, .6); }
.kl-low { background: rgba(48, 209, 88, .55); }
.kl-gap { background: linear-gradient(90deg, rgba(59, 158, 255, .55), rgba(255, 255, 255, .06) 30% 70%, rgba(255, 77, 79, .55)); }
.kl-now { position: absolute; top: -4px; width: 2px; height: 18px; background: #fff; box-shadow: 0 0 8px #fff; transform: translateX(-1px); transition: left .6s ease; }
.kl-now b { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #000; background: #fff;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kl-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.kl-ends .kl-mid { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; align-self: center; }
.kl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .75); }
.kl-foot b { color: #fff; }
.kl-depth { flex: 0 0 90px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.kl-depth i { display: block; height: 100%; background: rgb(var(--c)); box-shadow: 0 0 6px rgb(var(--c)); }
.kl-ends { position: relative; }
.kl-half { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; line-height: 16px; }
.kl-half.l1 { left: 25%; } .kl-half.l2 { left: 75%; }
.kl-half.med { color: #ff9f0a; } .kl-half.low { color: #30d158; }

/* ---------- Trend panel (HUD) ---------- */
.hud-trend { --n-rgb: 142, 142, 150; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--n-rgb), .14), transparent 55%),
    linear-gradient(rgba(var(--n-rgb), .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(var(--n-rgb), .045) 1px, transparent 1px) 0 0 / 22px 22px, #0b0b0e;
  border: 1px solid rgba(var(--n-rgb), .3); box-shadow: 0 0 32px rgba(var(--n-rgb), .08) inset; }
.hud-trend[data-bias="bullish"] { --n-rgb: 59, 158, 255; }
.hud-trend[data-bias="bearish"] { --n-rgb: 255, 77, 79; }
.ht-corner { position: absolute; width: 14px; height: 14px; border: 2px solid rgba(var(--n-rgb), .8); pointer-events: none; }
.ht-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .ht-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.ht-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .ht-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.hud-trend .eyebrow { letter-spacing: .22em; font-size: 11px; }
.hud-trend .bias { font-size: 40px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1; margin-top: 8px;
  text-shadow: 0 0 22px rgba(var(--n-rgb), .55); }
.hud-trend .bias.neutral { color: #d8d8de; }
.ht-sub { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hud-trend .gold-price b { font-size: 28px; font-weight: 900; text-shadow: 0 0 18px rgba(255, 193, 7, .35); }
.hud-trend .live-tag { letter-spacing: .16em; }

.ht-meter { margin-top: 18px; padding: 12px 14px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .07); }
.ht-meter:empty { display: none; }
.ht-meter-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ht-label { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ht-score { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; color: #d8d8de; }
.ht-score.bullish { color: var(--buy); } .ht-score.bearish { color: var(--sell); }
.ht-score i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.ht-track { position: relative; display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; height: 14px; }
.ht-track i { border-radius: 2px; background: rgba(255, 255, 255, .07); }
.ht-track i.dn.on { background: var(--sell); box-shadow: 0 0 8px rgba(255, 77, 79, .7); }
.ht-track i.up.on { background: var(--buy); box-shadow: 0 0 8px rgba(59, 158, 255, .7); }
.ht-track i.mid { background: rgba(255, 255, 255, .25); }
.ht-needle { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; transition: left .8s ease; }
.ht-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ht-flow { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .08); font-size: 11px; font-weight: 800; white-space: nowrap; }
.ht-flow i { flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--buy) 0 var(--b), var(--sell) var(--b) 100%); box-shadow: 0 0 10px rgba(var(--n-rgb), .25); }

.hud-trend .tf-grid { gap: 8px; margin-top: 12px; }
.hud-trend .tf { --c: 142, 142, 150; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 10px; border-radius: 12px;
  border: 1px solid rgba(var(--c), .3); border-top: 1px solid rgba(var(--c), .3); background: linear-gradient(180deg, rgba(var(--c), .12), rgba(var(--c), .02) 60%), #0d0d11; overflow: hidden; }
.hud-trend .tf.bullish { --c: 59, 158, 255; } .hud-trend .tf.bearish { --c: 255, 77, 79; }
.hud-trend .tf::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: rgb(var(--c)); box-shadow: 0 0 10px rgb(var(--c)); border-radius: 0 0 2px 2px; }
.tf-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 2px; }
.hud-trend .tf-top span { font-size: 13px; font-weight: 900; color: #fff; letter-spacing: .02em; }
.tf-arrow { font-style: normal; font-size: 10px; color: rgb(var(--c)); text-shadow: 0 0 8px rgb(var(--c)); }
.hud-trend .tf b { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c)); }
.tf-ring { --b: 50; position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--buy) 0 calc(var(--b) * 1%), var(--sell) calc(var(--b) * 1%) 100%); }
.tf-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0d0d11; }
.tf-ring.none { background: rgba(255, 255, 255, .08); }
.tf-ring em, .tf-ring span { position: relative; font-style: normal; line-height: 1; }
.tf-ring em { font-size: 13px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.tf-ring em small { font-size: 8px; color: var(--muted); }
.tf-ring span { font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.tf-ring.buy span { color: var(--buy); } .tf-ring.sell span { color: var(--sell); } .tf-ring.even span { color: var(--muted); }
.tf-ring.buy { box-shadow: 0 0 14px rgba(59, 158, 255, .25); } .tf-ring.sell { box-shadow: 0 0 14px rgba(255, 77, 79, .25); }
.hud-trend .tf .tf-hint { margin-top: 0; font-size: 8px; padding: 2px 5px; letter-spacing: 0; }
.hud-trend .updated { margin-top: 12px; font-size: 11px; letter-spacing: .06em; }
@media (max-width: 420px) {
  .hud-trend .bias { font-size: 32px; }
  .hud-trend .tf-grid { gap: 5px; }
  .tf-ring { width: 42px; height: 42px; }
  .tf-ring em { font-size: 11px; }
  .hud-trend .tf b { font-size: 8px; letter-spacing: .06em; }
  .hud-trend .tf .tf-hint { font-size: 7px; white-space: normal; text-align: center; }
}

/* Seven timeframes: one row on wide screens, 4 + 3 on phones */
.hud-trend .tf-grid { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 560px) {
  .hud-trend .tf-grid { grid-template-columns: repeat(4, 1fr); }
  .tf-ring { width: 46px; height: 46px; }
}
@media (max-width: 560px) {
  .hud-trend .tf-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .hud-trend .tf { flex: 0 0 calc(25% - 6px); }
}


/* Wide zones: choose the medium or low risk entry */
.sx-picker { position: relative; margin: 14px 0 4px; }
.sx-picker-h { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 8px; }
.sx-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-pick { --k: 255, 159, 10; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: 12px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(var(--k), .06); border: 1px solid rgba(var(--k), .35); transition: background .2s, box-shadow .2s, transform .1s; }
.sx-pick.low { --k: 48, 209, 88; }
.sx-pick span { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--k)); }
.sx-pick b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sx-pick small { font-size: 11px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.sx-pick:active { transform: scale(.98); }
.sx-pick.on { background: rgba(var(--k), .2); border: 2px solid rgb(var(--k)); box-shadow: 0 0 18px rgba(var(--k), .45), inset 0 0 14px rgba(var(--k), .2); }
.sx-picks:has(.on) .sx-pick:not(.on) { opacity: .55; }
.sx-choose { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px; border-style: dashed !important; }
.sx-choose b { font-size: 14px; letter-spacing: .04em; }
.sx-choose span { font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- Performance (F1-style display font) ---------- */
.hud-results h2 { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 17px; letter-spacing: .16em; font-style: italic; }
.hud-results .rs-pips b, .hud-results .rs-ring b, .hud-results .rs-tile b { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; letter-spacing: .02em; }
.hud-results .rs-tile span, .hud-results .rs-pips span, .hud-results .rs-ring span { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 600; letter-spacing: .14em; }
.hud-results .chip { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .06em; }

/* ---------- Technical data behind a button ---------- */
.tech-card { padding: 0; overflow: hidden; }
.tech-toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; background: linear-gradient(90deg, rgba(59, 158, 255, .1), transparent 70%);
  border: 0; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.tech-toggle:active { background: linear-gradient(90deg, rgba(59, 158, 255, .2), transparent 70%); }
.tech-ico { display: flex; align-items: flex-end; gap: 3px; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(59, 158, 255, .14); border: 1px solid rgba(59, 158, 255, .4); box-shadow: 0 0 14px rgba(59, 158, 255, .25); }
.tech-ico i { flex: 1; border-radius: 2px; background: var(--buy); }
.tech-ico i:nth-child(1) { height: 45%; } .tech-ico i:nth-child(2) { height: 80%; } .tech-ico i:nth-child(3) { height: 60%; background: var(--sell); }
.tech-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tech-txt b { font-family: 'Orbitron', system-ui, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tech-txt small { font-size: 11px; color: var(--muted); }
.tech-arrow { font-size: 26px; line-height: 1; color: var(--buy); transition: transform .25s ease; }
.tech-card.open .tech-arrow { transform: rotate(90deg); }
.tech-body { padding: 4px 18px 16px; border-top: 1px solid var(--line); animation: techIn .25s ease; }
@keyframes techIn { from { opacity: 0; transform: translateY(-6px); } }

/* Today's signals: header like the Technical Data button */
.today-card { padding: 0; }
.today-card summary.tech-toggle { list-style: none; justify-content: flex-start; background: linear-gradient(90deg, rgba(48, 209, 88, .1), transparent 70%); }
.today-card summary.tech-toggle::-webkit-details-marker { display: none; }
.today-ico { align-items: center; justify-content: center; background: rgba(48, 209, 88, .12); border-color: rgba(48, 209, 88, .4); box-shadow: 0 0 14px rgba(48, 209, 88, .22); }
.today-ico i { flex: 0 0 12px; height: 12px !important; border-radius: 50%; background: #30d158 !important; }
.today-card.has-live .today-ico i { background: var(--sell) !important; animation: blink 1.4s ease-in-out infinite; }
.today-card .tech-arrow { color: #30d158; }
.today-card[open] .tech-arrow { transform: rotate(90deg); }
.today-card .count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font-size: 11px;
  background: rgba(48, 209, 88, .16); color: #30d158; letter-spacing: 0; vertical-align: 2px; }
.today-card .count:empty { display: none; }
.today-card[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* Trend meter inside Technical Data */
.tech-trend { margin: 12px 0 14px; padding: 18px 16px 14px; border-radius: 14px; }

/* ---------- Profile icon and sheet ---------- */
.avatar-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, rgba(255, 193, 7, .25), rgba(255, 193, 7, .05)); border: 1.5px solid rgba(255, 193, 7, .7);
  box-shadow: 0 0 12px rgba(255, 193, 7, .25); color: #ffc107; }
.avatar-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.avatar-btn b { display: none; font-size: 15px; font-weight: 900; }
.avatar-btn.has-initial svg { display: none; }
.avatar-btn.has-initial b { display: block; }
.avatar-btn:active { transform: scale(.94); }
.profile-sheet { position: fixed; inset: 0; z-index: 50; }
.profile-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); animation: pfFade .2s ease; }
.profile-panel { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; max-width: 440px; max-height: calc(100% - 24px - env(safe-area-inset-top)); overflow-y: auto;
  padding: 20px 18px 18px; border-radius: 18px; background: #0d0d11; border: 1px solid rgba(255, 193, 7, .35); box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 193, 7, .08);
  animation: pfIn .25s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; gap: 12px; }
@keyframes pfIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
@keyframes pfFade { from { opacity: 0; } }
.profile-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.profile-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.profile-avatar { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 50%; font-size: 22px; font-weight: 900; color: #ffc107;
  background: radial-gradient(circle at 30% 25%, rgba(255, 193, 7, .3), rgba(255, 193, 7, .06)); border: 2px solid rgba(255, 193, 7, .75); box-shadow: 0 0 16px rgba(255, 193, 7, .3); }
.profile-head b { display: block; font-size: 18px; }
.profile-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; word-break: break-all; }
.profile-panel #accountEmail { display: none; }
.profile-panel .pw-form { padding-top: 12px; border-top: 1px solid var(--line); }
.profile-out { color: var(--sell); border-color: rgba(255, 77, 79, .4); }
body.profile-open { overflow: hidden; }

/* ---------- Tutorials ---------- */
.learn-head { margin: 4px 2px 14px; }
.learn-head h2 { margin: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-style: italic; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
.learn-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.learn-card { overflow: hidden; margin-bottom: 14px; border-radius: 16px; background: #0d0d11; border: 1px solid rgba(255, 193, 7, .3); box-shadow: 0 0 24px rgba(255, 193, 7, .06); }
.learn-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.learn-thumb img, .learn-video { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }
.learn-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 193, 7, .92);
  box-shadow: 0 0 0 8px rgba(255, 193, 7, .2), 0 0 30px rgba(255, 193, 7, .5); }
.learn-play::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #000; }
.learn-thumb:active .learn-play { transform: scale(.94); }
.learn-len { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .75); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
.learn-info { padding: 14px 16px 16px; }
.learn-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(255, 193, 7, .15); color: #ffc107; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.learn-info h3 { margin: 8px 0 4px; font-size: 17px; }
.learn-info p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.learn-soon { text-align: center; color: var(--muted); font-size: 12px; margin: 6px 0 18px; }

/* Picked entry not reached yet */
.sx-pnl.wait b { font-size: 30px; color: #ffc107; text-shadow: 0 0 18px rgba(255, 193, 7, .45); letter-spacing: .02em; }
.sx-pnl.wait span { text-transform: none; letter-spacing: .04em; }

/* ---------- Traxa's Verdict ---------- */
.verdict { --v: 142, 142, 150; position: relative; overflow: hidden; border: 1px solid rgba(var(--v), .4);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--v), .16), transparent 60%), #0b0b0e; box-shadow: 0 0 30px rgba(var(--v), .1) inset; }
.verdict.buy { --v: 59, 158, 255; } .verdict.sell { --v: 255, 77, 79; }
.vd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vd-eyebrow { margin: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #e3bc57; }
.vd-scope { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.vd-call { margin: 10px 0 2px; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 38px; letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--v)); text-shadow: 0 0 24px rgba(var(--v), .5); }
.verdict.none .vd-call { color: #d8d8de; font-size: 28px; }
.vd-sub { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.vd-bar { position: relative; height: 8px; margin: 16px 0 6px; border-radius: 999px; background: rgba(255, 77, 79, .55); overflow: visible; }
.vd-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: #3b9eff; }
.vd-bar b { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.vd-ends { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vd-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.vd-list em { font-style: normal; font-weight: 900; width: 14px; text-align: center; color: var(--muted); }
.vd-list li.buy em { color: #3b9eff; } .vd-list li.sell em { color: #ff4d4f; }
.vd-list b { display: block; font-size: 13px; }
.vd-list small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.vd-foot { margin: 12px 0 0; font-size: 11px; color: var(--muted); }

/* =================== Premium HUD pass =================== */
.card { background: linear-gradient(180deg, rgba(24, 24, 29, .86), rgba(11, 11, 14, .9)); border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px rgba(0, 0, 0, .35); }
.feed-head h2, #newsPage .card h2, #chatPage .card h2, .fold summary h2 { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.feed-head h2 { color: #e3bc57; }

/* Tab bar: glass, icons, gold glow on the active tab; stays under the header while scrolling */
.seg { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 4; gap: 2px; padding: 5px; border-radius: 16px;
  background: rgba(14, 14, 18, .82); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.seg-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; border-radius: 12px; color: #8e8e96;
  font-family: 'Orbitron', system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: color .2s, background .2s; }
.seg-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.seg-btn.active { color: #e3bc57; background: radial-gradient(120% 100% at 50% 0%, rgba(227, 188, 87, .22), rgba(227, 188, 87, .04));
  box-shadow: inset 0 0 0 1px rgba(227, 188, 87, .45), 0 0 18px rgba(227, 188, 87, .18); }
.seg-btn.active svg { filter: drop-shadow(0 0 6px rgba(227, 188, 87, .7)); }
.seg-dot { top: 6px; right: 14px; box-shadow: 0 0 8px var(--sell); }

/* Markets: the gold card */
.pair-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "coin main price chev" "range range range range" "ends ends ends ends" "stats stats stats stats";
  gap: 6px 14px; padding: 18px; border: 1px solid rgba(227, 188, 87, .35); border-left: 1px solid rgba(227, 188, 87, .35); border-radius: 18px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(227, 188, 87, .16), transparent 55%), linear-gradient(180deg, #17161a, #0c0c0f);
  box-shadow: 0 0 28px rgba(227, 188, 87, .08), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pair-card:hover { border-color: rgba(227, 188, 87, .7); }
.pc-coin { grid-area: coin; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 15px; color: #1a1406;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #e3bc57 45%, #a87f22); box-shadow: 0 0 18px rgba(227, 188, 87, .45), inset 0 -3px 6px rgba(0, 0, 0, .25); }
.pc-main { grid-area: main; display: flex; flex-direction: column; justify-content: center; }
.pc-main b { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.pc-main small { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.pc-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pc-price > b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #e3bc57; text-shadow: 0 0 16px rgba(227, 188, 87, .35); }
.pc-price .live-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pair-card .chev { grid-area: chev; align-self: center; color: #e3bc57; }
.pc-range { grid-area: range; position: relative; height: 6px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.pc-range i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(227, 188, 87, .2), #e3bc57); }
.pc-range b { position: absolute; top: -4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.pc-ends { grid-area: ends; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-ends span:nth-child(2) { letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.pc-stats { grid-area: stats; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pc-stats span { font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.pc-stats b { color: #fff; }

/* Live price panel (a market's page) */
.px-hero { position: relative; overflow: hidden; margin-bottom: 14px; border: 1px solid rgba(227, 188, 87, .35);
  background: radial-gradient(120% 100% at 100% 0%, rgba(227, 188, 87, .18), transparent 55%),
    linear-gradient(rgba(227, 188, 87, .04) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(227, 188, 87, .04) 1px, transparent 1px) 0 0 / 22px 22px, #0b0b0e; }
.px-hero .ht-corner { border-color: rgba(227, 188, 87, .8); }
.px-top { display: flex; justify-content: space-between; align-items: center; }
.px-name { display: flex; align-items: center; gap: 12px; }
.px-name .px-coin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 13px; color: #1a1406;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #e3bc57 45%, #a87f22); box-shadow: 0 0 16px rgba(227, 188, 87, .45); }
.px-name b { display: block; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.px-name small { display: block; font-size: 11px; color: var(--muted); letter-spacing: .14em; }
.px-hero .live-tag { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.px-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.px-price b { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 50px; letter-spacing: .01em; color: #e3bc57; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(227, 188, 87, .35); border-radius: 10px; padding: 0 6px; margin-left: -6px; }
.px-price b.up { animation: pxUp .9s ease-out; } .px-price b.down { animation: pxDown .9s ease-out; }
@keyframes pxUp { 0%, 30% { color: #fff; background: rgba(59, 158, 255, .35); } }
@keyframes pxDown { 0%, 30% { color: #fff; background: rgba(255, 77, 79, .35); } }
.px-price em { font-style: normal; font-size: 20px; } .px-price em.up { color: var(--buy); } .px-price em.down { color: var(--sell); }
.px-quote { display: flex; flex-wrap: wrap; gap: 8px; }
.px-quote span { font-size: 12px; color: var(--muted); padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.px-quote span:empty { display: none; }
.px-quote b { color: #fff; font-variant-numeric: tabular-nums; }
.px-range { margin-top: 16px; }
.px-range-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.px-bar { position: relative; height: 8px; margin: 10px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.px-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(227, 188, 87, .15), #e3bc57); box-shadow: 0 0 12px rgba(227, 188, 87, .35); transition: width .6s ease; }
.px-bar b { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; transition: left .6s ease; }
.px-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.px-ends b { color: #fff; font-variant-numeric: tabular-nums; }

/* News */
#newsPage .card { border-color: rgba(255, 255, 255, .08); }
.news-day { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .2em; margin: 18px 0 8px; }
.news-row { grid-template-columns: 58px 10px 1fr; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.news-row time { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; color: #e3bc57; }
.impact { width: 9px; height: 9px; border-radius: 50%; }
.impact.high { box-shadow: 0 0 10px var(--sell); } .impact.medium { box-shadow: 0 0 8px #ff9f0a; }
.news-title { font-weight: 600; }
.fund-item { border-radius: 12px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.fund-item b { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; }
.chip { font-family: 'Orbitron', system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; }
.chip.active { background: rgba(227, 188, 87, .12); box-shadow: 0 0 12px rgba(227, 188, 87, .2); }

/* Chat */
.chat-card { border-color: rgba(227, 188, 87, .22); }
.chat-msg { background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .08); }
.chat-msg.mine { background: linear-gradient(180deg, rgba(227, 188, 87, .26), rgba(227, 188, 87, .1)); border-color: rgba(227, 188, 87, .45); box-shadow: 0 0 14px rgba(227, 188, 87, .1); }
.chat-day { font-family: 'Orbitron', system-ui, sans-serif; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.chat-form input { border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.chat-form .btn.primary { border-radius: 14px; box-shadow: 0 0 16px rgba(227, 188, 87, .3); }

/* Tutorials */
.learn-card { background: linear-gradient(180deg, #16151a, #0b0b0e); box-shadow: 0 0 30px rgba(227, 188, 87, .08); }
.news-row { grid-template-columns: 70px 10px 1fr; }
.news-row time { font-size: 11px; white-space: nowrap; letter-spacing: .02em; }
.pc-coin { font-size: 11px; letter-spacing: .04em; }
.px-name .px-coin { font-size: 10px; letter-spacing: .04em; }
/* Verdict, bigger and bolder */
.verdict { padding: 22px 20px; border-radius: 20px; }
.vd-head { align-items: flex-start; }
.vd-title { margin: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
  background: linear-gradient(90deg, #fff6d6, #e3bc57 55%, #b8892a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(227, 188, 87, .35)); }
.vd-title span { display: block; font-size: 30px; letter-spacing: .14em; }
.vd-scope { margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; }
.vd-stamp { display: flex; align-items: center; gap: 18px; margin: 20px 0 14px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(var(--v), .22), rgba(var(--v), .05) 70%); border: 1px solid rgba(var(--v), .55);
  box-shadow: 0 0 34px rgba(var(--v), .25), inset 0 1px 0 rgba(255, 255, 255, .08); }
.vd-orb { position: relative; flex: 0 0 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgb(var(--v)) 45%, rgba(var(--v), .6)); box-shadow: 0 0 26px rgba(var(--v), .8); }
.vd-orb b { position: relative; font-size: 26px; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, .35); }
.vd-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(var(--v), .7); animation: vdPulse 2s ease-out infinite; }
@keyframes vdPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.vd-words { display: flex; flex-direction: column; }
.vd-stamp .vd-call { margin: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 22px rgba(var(--v), .9), 0 0 2px rgba(var(--v), 1); }
.vd-asset { margin-top: 6px; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgb(var(--v)); }
.vd-sub b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .vd-orb i { animation: none; } }
/* Header wordmark: Traxa with the gold x */
.wordmark { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: #f4f4f5; }
.wordmark i { font-style: normal; color: #e3bc57; text-shadow: 0 0 12px rgba(227, 188, 87, .45); }
/* Header: profile icon on the left, logo and name centred */
.bar { position: sticky; display: grid; grid-template-columns: 44px 1fr 44px; justify-content: initial; }
.bar .avatar-btn { grid-column: 1; }
.bar .brand { grid-column: 2; justify-self: center; }
/* Sign-out icon, top right */
.exit-btn { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: #c9c9d1; transition: color .2s, border-color .2s, background .2s; }
.exit-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.exit-btn.armed { color: var(--sell); border-color: var(--sell); background: rgba(255, 77, 79, .14); box-shadow: 0 0 14px rgba(255, 77, 79, .4); }
.exit-btn[hidden] { display: none; }
/* Notifications, inside the profile panel */
.profile-notify { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.profile-notify.on { border-color: rgba(48, 209, 88, .35); background: rgba(48, 209, 88, .06); }
.profile-notify .muted { margin: 4px 0 0; font-size: 13px; }
.profile-notify .notify-actions { display: flex; gap: 8px; }
.avatar-btn.needs-alerts::after { content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--sell); box-shadow: 0 0 8px var(--sell); border: 2px solid #000; }
/* Release time stamp on every signal (for referring to it) */
.sig .time .stamp { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .42); font-variant-numeric: tabular-nums; text-align: right; }
.sx-stamp { display: block; margin-top: 6px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
#statsPeriod .chip { white-space: nowrap; flex: 1; padding-left: 6px; padding-right: 6px; }
/* Where price turned inside the zone (the live profit is measured from it) */
.sx-mark.turn { z-index: 2; }
.sx-mark.turn i { width: 10px; height: 10px; top: -5px; border-color: var(--gold, #e6b94a); background: var(--gold, #e6b94a); box-shadow: 0 0 10px rgba(230, 185, 74, .8); }
.sx-mark.turn span, .sx-mark.turn b { color: var(--gold, #e6b94a); }
.sx-mark.turn span { font-size: 10px; }
.sx-mark.turn b { font-size: 13px; }
.sx-mark.turn::before { border-top-color: rgba(230, 185, 74, .55); }
.sx-mark.turn b { left: calc(50% + 10px); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sx-mark.turn.down b { transform: translateY(4px); }
.sx-mark.turn.up b { transform: translateY(calc(-100% - 4px)); }
.sx-mark.turn::before { left: calc(50% - 30px); right: calc(50% - 30px); }

/* SL / TP strip above the price map: compact, one row; a big badge on a hit TP (✓) or the SL (✕) */
.sx-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; }
.sx-tile { position: relative; padding: 8px 8px 7px; border-radius: 10px; gap: 1px; overflow: visible; }
.sx-tile span { font-size: 9px; letter-spacing: .14em; }
.sx-tile b { font-size: clamp(15px, 4.6vw, 20px); }
.sx-tile small { font-size: 10px; }
.sx-tile.sl { grid-column: auto; flex-direction: column; align-items: stretch; gap: 1px; }
.sx-tile.sl small { margin-left: 0; }
.sx-badge { position: absolute; top: -9px; right: -7px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.sx-badge svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sx-tile.done.tp .sx-badge { background: #30d158; box-shadow: 0 0 0 3px #0b0b0e, 0 0 16px rgba(48, 209, 88, .7); }
.sx-tile.done.sl .sx-badge { background: var(--sell); box-shadow: 0 0 0 3px #0b0b0e, 0 0 16px rgba(255, 77, 79, .6); }
.sx-tile.done.tp b { color: #30d158; text-shadow: 0 0 12px rgba(48, 209, 88, .45); }
/* Best entry: a small pill centred inside the zone, on the inward side of the dot (a buy's best entry
   sits low in a support zone, so its pill goes below; a sell's above) */
.sx-mark.turn::before { left: calc(50% - 66px); right: calc(50% - 66px); border-top: 1px dashed rgba(227, 188, 87, .55); }
.sx-mark.turn b { left: 50%; right: auto; padding: 3px 8px; border-radius: 6px; background: rgba(11, 11, 14, .9); border: 1px solid rgba(227, 188, 87, .5);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; white-space: nowrap; box-shadow: 0 0 10px rgba(227, 188, 87, .18); z-index: 3; }
.sx-mark.turn.up b { transform: translate(-50%, 9px); }
.sx-mark.turn.down b { transform: translate(-50%, calc(-100% - 9px)); }
.sx-mark.turn.lbl-below b { transform: translate(-50%, 9px); }
.sx-mark.turn.lbl-above b { transform: translate(-50%, calc(-100% - 9px)); }

/* Share my win */
.sx-share { margin: 10px auto 0; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(227, 188, 87, .6);
  background: linear-gradient(180deg, rgba(227, 188, 87, .22), rgba(227, 188, 87, .08)); color: #e3bc57; font-weight: 800; font-size: 14px; letter-spacing: .04em;
  box-shadow: 0 0 18px rgba(227, 188, 87, .2); cursor: pointer; }
.sx-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.share-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.share-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; }
.share-card img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 16px; background: #0b0b0e; border: 1px solid rgba(227, 188, 87, .3); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.share-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.share-actions .btn { padding: 12px 8px; }

/* Hero result stack: slim live row + one result card (status, note, share) */
.sx-live { margin-top: 10px; padding: 6px 14px; font-size: 13px; gap: 8px; }
.sx-live b { font-size: 15px; }
.sx-result { margin: 14px 0 2px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 16px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); }
.sx-result-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sx-result-txt b { font-size: 16px; font-weight: 800; letter-spacing: .01em; line-height: 1.25; }
.sx-result-txt span { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.sx-result.win { border-color: rgba(48, 209, 88, .45); background: linear-gradient(90deg, rgba(48, 209, 88, .12), rgba(48, 209, 88, .03)); }
.sx-result.win b { color: #30d158; }
.sx-result.be { border-color: rgba(227, 188, 87, .45); background: rgba(227, 188, 87, .07); }
.sx-result.be b { color: #e3bc57; }
.sx-result.loss { border-color: rgba(255, 77, 79, .45); background: rgba(255, 77, 79, .08); }
.sx-result.loss b { color: #ff6b6d; }
.sx-result.muted b { color: var(--muted); }
.sx-share-ic { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; padding: 8px 0 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(227, 188, 87, .6); background: linear-gradient(180deg, rgba(227, 188, 87, .24), rgba(227, 188, 87, .08)); color: #e3bc57; box-shadow: 0 0 14px rgba(227, 188, 87, .18); }
.sx-share-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sx-share-ic span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* TP-hit result card in brand gold (green stays on the profit number and the TP checks) */
.sx-result.win { border-color: rgba(227, 188, 87, .5); background: linear-gradient(90deg, rgba(227, 188, 87, .14), rgba(227, 188, 87, .03)); box-shadow: 0 0 18px rgba(227, 188, 87, .08); }
.sx-result.win b { color: #f0cd6e; text-shadow: 0 0 12px rgba(227, 188, 87, .35); }
.sx-result.win span { color: rgba(240, 205, 110, .7); }
/* Against a higher-timeframe zone: high risk, scalp only */
.sx-risk { display: flex; flex-direction: column; gap: 4px; text-align: left; border-color: rgba(255, 159, 10, .6); background: rgba(255, 159, 10, .08); }
.sx-risk b { color: #ffb340; font-size: 15px; letter-spacing: .02em; }
.sx-risk span { color: #ffd59a; font-weight: 500; font-size: 13px; line-height: 1.45; }
.mini-warn.scalp { width: auto; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #ffb340; background: rgba(255, 159, 10, .12); border: 1px solid rgba(255, 159, 10, .45); white-space: nowrap; }
.sx-risk { margin: 12px 0 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255, 159, 10, .55); }

/* Three entries on wide zones: high risk (reached first), medium, low risk (next to the SL) */
.zone-split .risk-high { color: #ff6b5e; background: rgba(255, 107, 94, .1); }
.sx-pick.high { --k: 255, 107, 94; }
.sx-picks.n3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sx-picks.n3 .sx-pick { padding: 10px 4px; }
.sx-picks.n3 .sx-pick span { font-size: 9px; letter-spacing: .12em; }
.sx-picks.n3 .sx-pick b { font-size: 14px; }
.sx-picks.n3 .sx-pick small { font-size: 10px; }
/* Each entry's own result under it */
.sx-pick em { margin-top: 3px; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.sx-pick em.win { color: #30d158; background: rgba(48, 209, 88, .14); }
.sx-pick em.loss { color: #ff6b5e; background: rgba(255, 77, 79, .14); }
.sx-pick em.be { color: #ffd60a; background: rgba(255, 214, 10, .12); }
.sx-pick em.live { color: #7cc0ff; background: rgba(59, 158, 255, .14); }
.sx-pick em.muted { color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }

/* Compact Scalps Only bar and result card */
.sx-risk { margin: 8px 0 2px; padding: 7px 12px; border-radius: 12px; gap: 2px; }
.sx-risk b { font-size: 12px; letter-spacing: .03em; }
.sx-risk span { font-size: 11px; line-height: 1.35; }
.sx-result { margin: 10px 0 2px; padding: 9px 10px 9px 14px; border-radius: 14px; }
.sx-result-txt b { font-size: 14px; }
.sx-result-txt span { font-size: 11px; }

/* Live price: a small row right under the big zone */
.sx-live { margin-top: 4px; padding: 3px 10px; font-size: 11px; gap: 6px; }
.sx-live b { font-size: 12px; }
.sx-live .sx-live-label { font-size: 9px; }
.sig-warn { display: flex; margin: -1px 0 1px; }

/* Sign up: Terms & Risk Disclosure tick box */
.terms-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); margin: 2px 0 8px; line-height: 1.45; cursor: pointer; }
.terms-check[hidden] { display: none !important; }
.terms-check input { width: 18px !important; height: 18px; flex: 0 0 18px; margin: 1px 0 0 !important; padding: 0 !important; accent-color: #e3bc57; }
.terms-check a { color: var(--gold); }

/* Header right: language picker next to sign out */
.bar { grid-template-columns: 96px 1fr 96px; }
.bar-end { grid-column: 3; justify-self: end; position: relative; display: flex; align-items: center; gap: 8px; }
.bar-end .exit-btn { grid-column: auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 9px 0 8px; border-radius: 999px; cursor: pointer; font: inherit;
  color: #e3bc57; background: rgba(227, 188, 87, .08); border: 1px solid rgba(227, 188, 87, .4); }
.lang-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lang-btn b { font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.lang-menu { position: absolute; top: 44px; right: 0; z-index: 60; min-width: 190px; padding: 6px; border-radius: 14px;
  background: #121216; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: #f4f4f5; font: inherit; font-size: 14px; cursor: pointer; }
.lang-menu button:hover { background: rgba(255, 255, 255, .06); }
.lang-menu button[aria-checked=true] { color: #e3bc57; background: rgba(227, 188, 87, .1); font-weight: 700; }

/* Win rate label stays inside the ring in every language (two short centred lines at most) */
.rs-ring span, .hud-results .rs-ring span { max-width: 68px; text-align: center; line-height: 1.25; letter-spacing: .06em; overflow-wrap: anywhere; }

/* Performance: share the period as a poster */
.perf-share { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #e3bc57;
  background: linear-gradient(90deg, rgba(227, 188, 87, .14), rgba(227, 188, 87, .04)); border: 1px solid rgba(227, 188, 87, .45); }
.perf-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.perf-share:active { transform: scale(.98); }

/* ---------- Landing page (signed out): minimal. Headline, two buttons, the film in a phone, three points ---------- */
body.on-landing main { max-width: 1040px; }
.landing { padding: 4px 0 32px; }
.landing[hidden] { display: none; }
.ld-hero { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; padding: 26px 0 8px; }
.ld-copy { text-align: center; }
.ld-title { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: clamp(34px, 8.4vw, 58px); line-height: 1.06; margin: 0 0 14px; color: #fff; }
.ld-title span { color: #e3bc57; }
.ld-sub { font-size: 16px; line-height: 1.6; color: #9a9aa2; max-width: 420px; margin: 0 auto; }
.ld-ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.ld-ctas .ld-go { min-width: 210px; padding: 14px 26px; border-radius: 999px; font-size: 15px; }
.ld-in { border: 0; background: none; padding: 4px; font: inherit; font-size: 14px; color: #9a9aa2; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .25); }
.ld-in:hover { color: #e6e6ea; }
.ld-phone { display: grid; place-items: center; }
.ld-device { position: relative; width: min(260px, 66vw); aspect-ratio: 9 / 19.5; border-radius: 38px; padding: 8px; background: #141417;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px rgba(0, 0, 0, .6); }
.ld-device video { width: 100%; height: 100%; object-fit: cover; border-radius: 31px; background: #000; display: block; }
.ld-sound { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); white-space: nowrap; }
.ld-points { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: 1fr; gap: 16px; text-align: center; }
.ld-points b { display: block; font-size: 14px; font-weight: 700; color: #f4f4f5; }
.ld-points span { display: block; margin-top: 3px; font-size: 13px; color: #8e8e96; }
.ld-fine { margin: 28px 0 0; text-align: center; font-size: 12px; color: #6b6b73; }
.auth-back { display: inline-block; margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (min-width: 720px) { .ld-points { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .ld-hero { grid-template-columns: 1.15fr .85fr; padding: 54px 0 20px; }
  .ld-copy { text-align: left; }
  .ld-sub { margin: 0; }
  .ld-ctas { flex-direction: row; justify-content: flex-start; gap: 20px; }
}
body.on-landing::before { opacity: 0 !important; } /* the landing has its own glow; no watermark behind the headline */

/* ---------- Landing on a computer: a website layout (phones keep the minimal app-style page) ---------- */
.ld-nav, .ld-qr, .ld-pi { display: none; }
@media (min-width: 900px) {
  body.on-landing .bar { grid-template-columns: auto 1fr auto; padding-left: max(24px, calc((100vw - 1040px) / 2)); padding-right: max(24px, calc((100vw - 1040px) / 2)); }
  body.on-landing .bar .brand { grid-column: 1; justify-self: start; }
  body.on-landing .bar-end { grid-column: 3; }
  body.on-landing .ld-nav { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
  .ld-nav button { border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 9px 16px; }
  .ld-nav-in { background: none; color: #c9c9cf; }
  .ld-nav-in:hover { color: #fff; }
  .ld-nav-go { color: #0b0b0d; background: #e3bc57; font-weight: 700 !important; }
  .ld-nav-go:hover { background: #f0cd6e; }
  .landing { padding-top: 10px; }
  .ld-hero { grid-template-columns: 1.2fr .8fr; gap: 48px; padding: 70px 0 40px; }
  .ld-title { font-size: 64px; }
  .ld-sub { font-size: 18px; max-width: 460px; }
  .ld-device { width: 290px; }
  .ld-sound { display: none; } /* computers play with sound on click of the film itself */
  .ld-qr { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 14px 18px 14px 14px; max-width: 420px;
    border-radius: 18px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, .08); }
  .ld-qr img { flex: 0 0 96px; border-radius: 10px; background: #fff; }
  .ld-qr b { display: block; font-size: 14px; color: #f4f4f5; }
  .ld-qr span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: #8e8e96; }
  .ld-points { margin-top: 40px; padding-top: 36px; gap: 24px; text-align: left; }
  .ld-points li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; }
  .ld-pi { display: grid; place-items: center; grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; color: #e3bc57; background: rgba(227, 188, 87, .08); border: 1px solid rgba(227, 188, 87, .22); }
  .ld-pi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ld-points b { font-size: 15px; }
  .ld-fine { text-align: left; margin-top: 40px; }
}
@media (min-width: 900px) and (pointer: coarse) { .ld-qr { display: none !important; } .ld-sound { display: block; } } /* tablets in landscape: website layout, but no "scan with your phone" card */

/* Sign up: mobile number with a country code, and the email code screen */
.phone-field { display: block; margin-bottom: 14px; }
.phone-field[hidden] { display: none; }
.phone-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.phone-row { display: flex; gap: 8px; }
.cc-pick { position: relative; flex: 0 0 104px; margin: 0 !important; display: block; }
.cc-show { display: flex; align-items: center; justify-content: center; gap: 2px; height: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg, #000); box-sizing: border-box;
  color: #f4f4f5; font-size: 15px; font-weight: 600; pointer-events: none; }
.cc-show::after { content: '▾'; margin-left: 6px; font-size: 11px; color: var(--muted); }
.cc-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.phone-row input { flex: 1; min-width: 0; margin: 0; }
.verify-box { text-align: center; }
.verify-box[hidden] { display: none; }
.verify-ic { width: 54px; height: 54px; margin: 6px auto 12px; border-radius: 16px; display: grid; place-items: center; color: #e3bc57; background: rgba(227, 188, 87, .08); border: 1px solid rgba(227, 188, 87, .3); }
.verify-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.verify-box h2 { margin: 0 0 6px; }
.verify-box p.muted b { color: #e6e6ea; word-break: break-all; }
.verify-code { display: block; width: 100%; margin: 18px 0 6px; text-align: center; font-size: 30px !important; font-weight: 800; letter-spacing: .5em; padding: 12px 0 12px .5em !important; font-variant-numeric: tabular-nums; }
.verify-resend { margin-top: 12px; border: 0; background: none; color: var(--gold); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.verify-resend:disabled { color: var(--muted); cursor: default; font-weight: 500; }