/* TradingLounge shared components — used across Home / Trading / Signals / Broker / Start. */

/* ---------- panel / card primitives ---------- */
.panel{background:rgba(4,4,4,.9);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);position:relative;overflow:hidden;backdrop-filter:blur(20px) saturate(0);-webkit-backdrop-filter:blur(20px) saturate(0)}
.panel--glow::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 110%, rgba(255,255,255,.035), transparent 55%);pointer-events:none}
.card{background:rgba(4,4,4,.9);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:26px;backdrop-filter:blur(20px) saturate(0);-webkit-backdrop-filter:blur(20px) saturate(0);transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.card:hover{transform:translateY(-6px);border-color:var(--gold-line);box-shadow:var(--gold-glow-soft)}
.card .tag{font:10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--text-on-dark-dim);font-size:14px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.card-grid{grid-template-columns:1fr}}

/* ---------- generic CTA row (used inside hero sections and inline elsewhere) ---------- */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:24px}

/* ---------- eyebrow row w/ pulse ---------- */
.eyebrow.is-live::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent2-bright);animation:pulse-ring-teal 2s infinite;margin-left:auto}

/* ---------- ticker / marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;height:60px;display:flex;align-items:center}
.marquee-track{display:inline-flex;gap:40px;animation:marquee 34s linear infinite;will-change:transform}
.marquee,.marquee *{pointer-events:none}
.marquee-track span{font:10px var(--font-mono);color:var(--text-on-dark-faint);display:inline-flex;gap:8px;letter-spacing:.04em}
.marquee-track b{color:var(--gold-bright);font-weight:500;text-shadow:0 0 10px rgba(255,213,77,.4)}
.marquee-track i{font-style:normal;color:var(--accent2-bright)}

/* ---------- stat counters ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:var(--gap-lg);margin-top:var(--gap-md)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat strong{font:600 32px var(--font-mono);letter-spacing:-.01em;color:var(--text-on-dark)}
.stat strong span{color:var(--gold-bright);text-shadow:var(--gold-glow-soft)}
.stat small{font:10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-faint)}
.stat.partner{padding-left:var(--gap-md);border-left:1px solid var(--line-strong)}
.stat.partner b{display:block;font:600 15px var(--font-mono);color:var(--gold-bright);letter-spacing:.04em}

/* ---------- tabs (used by candle-anatomy, signal-breakdown, order types) ---------- */
.tab-list{display:flex;flex-direction:column;gap:10px}
.tab-btn{text-align:left;background:var(--ink-3);border:1px solid var(--line);color:var(--text-on-dark-dim);padding:14px 18px;border-radius:var(--radius-sm);cursor:pointer;font:14px var(--font-body);display:flex;justify-content:space-between;align-items:center;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.tab-btn strong{color:var(--text-on-dark);font-weight:500}
.tab-btn .k{font:11px var(--font-mono);color:var(--gold)}
.tab-btn:hover{border-color:var(--line-strong)}
.tab-btn.active{border-color:var(--gold);background:var(--ink-4);color:var(--text-on-dark)}
.tab-btn.active .k{color:var(--gold-bright)}

/* ---------- signal row (used in signals.html breakdown board) ---------- */
.signal-row{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 4px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;cursor:pointer;color:inherit;font-family:var(--font-body);transition:background var(--dur-fast) var(--ease)}
.signal-row b{font:12px var(--font-mono);color:var(--text-on-dark-faint)}
.signal-row span{font-size:15px}
.signal-row em{font:9px var(--font-mono);font-style:normal;color:var(--accent2-bright)}
.signal-row:hover,.signal-row.active{background:rgba(224,168,36,.07)}
.signal-row.active b{color:var(--gold)}

/* ---------- candle / chart panel ---------- */
.chart-panel{padding:22px}
.chart-panel-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.ticker-box{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 14px;background:rgba(0,0,0,.25)}
.ticker-box .label-row{display:flex;justify-content:space-between;gap:18px;font:10.5px var(--font-mono);letter-spacing:.08em;color:var(--text-on-dark-faint);margin-bottom:6px;text-transform:uppercase}
.ticker-box .price{font:27px var(--font-mono);font-weight:600;letter-spacing:-.01em}
.ticker-box .delta{font:12px var(--font-mono);margin-top:4px;display:flex;gap:5px;align-items:center}
.up{color:var(--gold-bright);text-shadow:0 0 10px rgba(255,213,77,.4)}
.down{color:var(--accent2-bright)}
.session-tag{font:10.5px var(--font-mono);letter-spacing:.08em;color:var(--text-on-dark-faint);text-align:right;text-transform:uppercase;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.session-tag .pulse-dot{animation:pulse-ring-teal 1.8s infinite}

/* ---------- session clock ---------- */
.session-clock{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.session-clock svg{width:120px;height:120px;flex:none}
.session-clock .arc{fill:none;stroke-width:10}
.session-clock .arc-track{stroke:rgba(255,255,255,.08)}
.session-clock .arc-asia{stroke:var(--accent2)}
.session-clock .arc-london{stroke:var(--gold);filter:drop-shadow(0 0 5px rgba(224,168,36,.55))}
.session-clock .arc-ny{stroke:var(--gold-bright);filter:drop-shadow(0 0 6px rgba(255,213,77,.65))}
.session-clock .now-marker{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
.session-legend{display:flex;flex-direction:column;gap:8px}
.session-legend li{list-style:none;display:flex;align-items:center;gap:10px;font:11px var(--font-mono);color:var(--text-on-dark-dim);letter-spacing:.04em}
.session-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;font-style:normal}
.session-legend .dot-asia{background:var(--accent2)}
.session-legend .dot-london{background:var(--gold)}
.session-legend .dot-ny{background:var(--gold-bright)}
.session-legend li.is-active{color:var(--text-on-dark)}
.session-legend li.is-active i{box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* ---------- telegram card ---------- */
.telegram-card{border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);background:rgba(4,4,4,.92);overflow:hidden;backdrop-filter:blur(20px) saturate(0);-webkit-backdrop-filter:blur(20px) saturate(0);box-shadow:18px 18px 0 rgba(0,0,0,.32)}
.telegram-cover{height:64px;background:linear-gradient(120deg,#2b8fc4,#3fa9dc 55%,#1c6f9c)}
.telegram-main{padding:0 26px 26px}
.telegram-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe680,#d99b12 58%,#875100);display:flex;align-items:center;justify-content:center;font:700 19px var(--font-mono);letter-spacing:-.08em;color:#1a1000;margin-top:-32px;border:4px solid var(--ink-3);box-shadow:0 0 0 1px rgba(255,229,117,.45),var(--gold-glow-soft)}
.telegram-identity{display:flex;align-items:center;gap:14px;margin-top:14px}
.telegram-identity h3{font-size:19px;display:flex;align-items:center;gap:8px}
.telegram-identity i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#ffe78a,#d99b12 62%,#875100);color:#191000;font:700 11px/1 var(--font-body);font-style:normal;box-shadow:0 0 10px rgba(255,213,77,.38)}
.telegram-handle{display:block;color:var(--text-on-dark-faint);font:12px var(--font-mono)}
.telegram-avatars{display:flex;margin:18px 0}
.telegram-avatars span{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink-3);margin-left:-10px;display:flex;align-items:center;justify-content:center;font:600 10px var(--font-mono);color:#fff;background:linear-gradient(135deg,var(--gold-bright),var(--gold));box-shadow:var(--gold-glow-soft)}
.telegram-avatars span:first-child{margin-left:0}
.telegram-avatars span:nth-child(2){background:linear-gradient(135deg,#3fa9dc,#1c6f9c)}
.telegram-avatars span:nth-child(3){background:linear-gradient(135deg,var(--accent2-bright),var(--accent2))}
.telegram-avatars span:nth-child(4){background:#41443a;font-size:9px}
.telegram-tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.telegram-tags span{border:1px solid var(--line-strong);border-radius:20px;padding:5px 12px;font:9.5px var(--font-mono);letter-spacing:.06em;color:var(--text-on-dark-dim)}
.chat-preview{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.chat-bubble{background:var(--ink-4);border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:10px 14px;font-size:12.5px;color:var(--text-on-dark-dim);max-width:88%;opacity:0;animation:bubble-in .6s var(--ease-soft) forwards;animation-delay:calc(var(--i, 0) * .35s)}
.chat-bubble b{color:var(--text-on-dark)}
.telegram-disclosure{margin:15px 2px 0;color:var(--text-on-dark-faint);font:10px/1.55 var(--font-mono)}
.telegram-disclosure a{color:var(--gold-bright);text-decoration:none}.telegram-disclosure a:hover{text-decoration:underline}

/* ---------- broker card / step tracker ---------- */
.broker-card{border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);background:rgba(4,4,4,.92);padding:28px;backdrop-filter:blur(20px) saturate(0);-webkit-backdrop-filter:blur(20px) saturate(0);box-shadow:18px 18px 0 rgba(0,0,0,.32)}
.broker-mark{min-width:132px;height:42px;display:flex;align-items:center;gap:8px;color:#fff;letter-spacing:.02em}
.broker-mark img{width:38px;height:38px;object-fit:cover;border-radius:5px;box-shadow:0 5px 14px rgba(0,0,0,.32)}
.broker-mark b{font:600 18px/1 var(--font-body);letter-spacing:-.055em}
.broker-kicker{display:block;font:10px var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--text-on-dark-faint)}

/* ---------- broker consent modal ---------- */
.broker-consent{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.74);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease),visibility var(--dur-fast)}
.broker-consent.is-open{opacity:1;visibility:visible}
.broker-consent__dialog{position:relative;width:min(100%,650px);max-height:min(720px,calc(100dvh - 40px));overflow:auto;padding:clamp(24px,5vw,44px);border:1px solid rgba(255,213,77,.34);border-radius:18px;background:linear-gradient(145deg,#11110d,#040404 74%);color:var(--text-on-dark);box-shadow:0 30px 90px rgba(0,0,0,.68),0 0 42px rgba(224,168,36,.09);transform:translateY(12px) scale(.985);transition:transform var(--dur-med) var(--ease-soft)}
.broker-consent.is-open .broker-consent__dialog{transform:translateY(0) scale(1)}
.broker-consent__close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;background:transparent;color:#34353a;font-size:25px;line-height:1;cursor:pointer}
.broker-consent__eyebrow{font:10px var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:16px}
.broker-consent h2{font-size:clamp(31px,5vw,48px);line-height:1.02;letter-spacing:-.05em;margin:0 0 22px}
.broker-consent p{font-size:16px;line-height:1.55;color:var(--text-on-dark-dim);margin:0 0 20px}.broker-consent p strong,.broker-consent__steps strong{color:var(--text-on-dark)}
.broker-consent__steps{display:grid;gap:13px;margin:0 0 22px;padding:0;list-style:none;counter-reset:step}.broker-consent__steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:11px;align-items:start;font-size:15px;line-height:1.5;color:var(--text-on-dark-dim)}.broker-consent__steps li::before{content:counter(step);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#1b1200;font:600 10px var(--font-mono);box-shadow:0 0 12px rgba(255,213,77,.24)}.broker-consent__steps li>span{min-width:0}
.broker-consent__note{font-size:12px!important;color:var(--text-on-dark-faint)!important;margin-top:16px!important}
.broker-consent__checks{display:grid;gap:14px;margin:28px 0 24px}
.broker-consent__check{display:grid;grid-template-columns:24px 1fr;gap:13px;align-items:start;font-size:14px;line-height:1.45;color:#292a2f;cursor:pointer}
.broker-consent__check input{appearance:none;width:23px;height:23px;margin:0;border:2px solid #74757b;border-radius:5px;background:#fff;display:grid;place-items:center;cursor:pointer}
.broker-consent__check input:checked{background:#17191e;border-color:#17191e}
.broker-consent__check input:checked::after{content:'✓';font-size:15px;color:#fff}
.broker-consent__next{width:100%;justify-content:center;border:0;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#1a1100;font:700 16px var(--font-body);padding:17px 22px;border-radius:999px;cursor:pointer;box-shadow:var(--gold-glow-soft);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.broker-consent__next:disabled{opacity:.42;cursor:not-allowed}.broker-consent__next:not(:disabled):hover{transform:translateY(-2px)}
body.has-broker-consent{overflow:hidden}

/* ---------- touch depth for mobile panels ---------- */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .mobile-depth{transform-style:preserve-3d;will-change:transform;transition:transform 380ms cubic-bezier(.2,.9,.3,1.15),box-shadow 380ms var(--ease)}
  .mobile-depth.is-touching{box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 0 1px rgba(255,213,77,.12)}
}
.broker-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.broker-head h3{font-size:20px;letter-spacing:.02em}
.broker-head span{display:block;color:var(--text-on-dark-faint);font:11px var(--font-mono);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}

.advantage-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.advantage-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-on-dark-dim)}
.advantage-list li::before{content:'✓';color:var(--gold-bright);font-weight:700;text-shadow:var(--gold-glow-soft);flex:none}

.step-tracker{display:flex;flex-direction:column;gap:0;margin:22px 0}
.step-node{display:grid;grid-template-columns:32px 1fr;gap:16px;padding-bottom:22px;position:relative}
.step-node::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:1px;background:var(--line)}
.step-node:last-child::before{display:none}
.step-node:last-child{padding-bottom:0}
.step-num{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font:11px var(--font-mono);color:var(--text-on-dark-faint);background:var(--ink-3);transition:border-color var(--dur-med) var(--ease),color var(--dur-med) var(--ease),background var(--dur-med) var(--ease);z-index:1}
.step-node.is-visible .step-num{border-color:var(--gold);color:var(--gold-bright);background:var(--ink-4);box-shadow:var(--gold-glow-soft)}
.step-node h3{font:600 14.5px var(--font-body);margin-bottom:4px;color:var(--text-on-dark)}
.step-node p{font-size:13px;color:var(--text-on-dark-dim)}
.step-node .step-tag{font:9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent2-bright);display:block;margin-bottom:4px}

/* ---------- ring / feature visual ---------- */

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:8px;font:10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright);border:1px solid var(--gold-line);border-radius:20px;padding:6px 14px;background:rgba(224,168,36,.06);box-shadow:var(--gold-glow-soft)}

/* ---------- risk grid (trading + broker pages) ---------- */
.risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media (max-width:860px){.risk-grid{grid-template-columns:1fr}}
.risk-item{border-left:2px solid var(--accent2);padding-left:18px}
.risk-item .num{font:12px var(--font-mono);letter-spacing:.1em;color:var(--accent2-bright)}
.risk-item h3{font-size:18px;margin:8px 0}
.risk-item p{color:var(--text-on-dark-dim);font-size:13.8px}

@media (max-width:760px){
  .stat-row{gap:16px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stat-row::-webkit-scrollbar{display:none}
  .stat{flex:none}
  .stat strong{font-size:19px}
  .stat small{font-size:8.5px;letter-spacing:.05em;white-space:nowrap}
  .stat.partner{padding-left:16px}
  .stat.partner b{font-size:12px}
  .broker-card,.telegram-card{box-shadow:none}
}

/* ---------- scroll rail (section wayfinding dots) ---------- */
.scroll-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:16px;z-index:60}
.scroll-rail::before{content:'';position:absolute;top:-20px;bottom:-20px;left:50%;width:1px;background:var(--line);z-index:-1}
.scroll-rail button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);border:none;padding:0;cursor:pointer;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.scroll-rail button:hover{background:var(--gold-bright)}
.scroll-rail button.is-active{background:var(--gold-bright);box-shadow:var(--gold-glow-soft);transform:scale(1.6)}
.scroll-rail button.is-next{animation:rail-pulse 1.7s ease-in-out infinite}
@keyframes rail-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,213,77,.55)}50%{box-shadow:0 0 0 7px rgba(255,213,77,0)}}
@media (max-width:1080px){.scroll-rail{display:none}}

/* ---------- hero scroll cue ---------- */
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gold-bright);opacity:.85;transition:opacity var(--dur-med) var(--ease);z-index:5}
.scroll-cue span{font:9.5px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-dark-faint)}
.scroll-cue i{width:14px;height:14px;border-right:1.5px solid var(--gold-bright);border-bottom:1.5px solid var(--gold-bright);transform:rotate(45deg);filter:drop-shadow(0 0 5px rgba(255,213,77,.6));animation:scroll-cue-bounce 1.8s ease-in-out infinite}
.scroll-cue.is-hidden{opacity:0;pointer-events:none}
@keyframes scroll-cue-bounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(5px,5px)}}

/* ---------- ambient sparkle ---------- */
.sparkle-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-bright);box-shadow:0 0 6px 1px rgba(255,213,77,.8);opacity:0;animation:sparkle-twinkle 4.5s ease-in-out infinite}
@keyframes sparkle-twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .scroll-cue i{animation:none}
  .scroll-rail button.is-next{animation:none}
  .sparkle{animation:none;opacity:.5}
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:20px var(--edge) 0;font:11px var(--font-mono);letter-spacing:.04em;color:var(--text-on-dark-faint)}
.breadcrumbs a{color:var(--text-on-dark-dim);text-decoration:none}
.breadcrumbs a:hover{color:var(--gold-bright)}
.breadcrumbs span[aria-current]{color:var(--gold-bright)}
.breadcrumbs i{font-style:normal;opacity:.5}

/* ---------- FAQ / response-time / cross-link chips reuse .disclosure, .badge ---------- */
.response-note{display:inline-flex;align-items:center;gap:8px;font:11px var(--font-mono);color:var(--text-on-dark-faint);letter-spacing:.02em}
.response-note i{width:6px;height:6px;border-radius:50%;background:var(--accent2-bright);flex:none;animation:pulse-ring-teal 2s infinite}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:12px 16px;background:rgba(6,5,4,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line-strong);transform:translateY(100%);transition:transform var(--dur-med) var(--ease-soft)}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta .button{flex:1;justify-content:center;padding:13px 16px}
@media (max-width:760px){.sticky-cta{display:flex}body{padding-bottom:0}}