/* ==========================================================================
   AURORA skin for the Analysis Terminal (indicators.html)
   Only restyles. Never touches the indicator engine, the chart drawing code,
   element ids or classes, so signals, alerts and the share images keep working.
   Kept html2canvas-friendly on purpose (no color-mix, no blend modes on the
   shared panels) because "Share chart/signal/history" screenshots the page.
   ========================================================================== */
:root {
  --blue-light: #e8eeff;
  --light-gray: #f1f4ff;
  --border: #dbe3ff;
  --gray: #5b6a99;
}
body { background: #f4f7ff; position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 90% -6%, rgba(48,79,254,.13), transparent 62%),
    radial-gradient(760px 520px at -8% 42%, rgba(116,143,255,.12), transparent 62%),
    #f4f7ff;
}

/* ---- scroll progress ---- */
#ind-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1000; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #304FFE, #748FFF); pointer-events: none; }

/* ---- nav: glass ---- */
nav { background: rgba(247,249,255,.82) !important; backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(48,79,254,.14) !important; transition: height .3s ease, box-shadow .3s ease; }
nav.is-scrolled { height: 60px; box-shadow: 0 8px 30px rgba(10,20,64,.12); }
@media (max-width: 1100px) { nav .nav-links, nav .nav-right { display: none; } nav .nav-mobile-btn { display: flex; } }

/* ---- hero: the "night" band with a live network ---- */
.page-hero { position: relative; overflow: hidden; margin-top: 72px; padding: 84px 2rem 70px;
  background: radial-gradient(900px 420px at 80% -20%, rgba(48,79,254,.55), transparent 60%), radial-gradient(700px 400px at 5% 110%, rgba(116,143,255,.28), transparent 60%), linear-gradient(160deg, #050a24 0%, #0a1440 60%, #10237f 100%); }
.page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(116,143,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(116,143,255,.12) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); }
#ind-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero .hero-badge { background: rgba(48,79,254,.22); color: #cdd8ff; border: 1px solid rgba(116,143,255,.4); }
.page-hero h1 { color: #fff; letter-spacing: -1px; }
.page-hero h1 em { background: linear-gradient(100deg, #8fa6ff 0%, #d4dcff 50%, #8fa6ff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: indShine 6s linear infinite; }
@keyframes indShine { to { background-position: -200% 0; } }
.page-hero p { color: #b9c6f5; }

/* ---- main terminal panel ---- */
.signal-section { padding-top: 38px; }
.panel { background: #ffffff; border: 1px solid rgba(48,79,254,.18); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(48,79,254,.14), 0 2px 0 rgba(255,255,255,.8) inset; position: relative; }
.panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, #304FFE, #748FFF, #304FFE); }
.panel-head { background: linear-gradient(180deg, #f6f8ff, #eef2ff); border-bottom: 1px solid var(--border); padding-top: 1.35rem; }
.seg { border-radius: 12px; border-color: var(--border); padding: 3px; gap: 2px; background: #fff; }
.seg button { border-radius: 9px; transition: all .2s; }
.seg button.on { background: linear-gradient(135deg, #304FFE, #1a3ae0); box-shadow: 0 4px 14px rgba(48,79,254,.35); }
.ind-dd-btn { border-radius: 12px; border-color: var(--border); box-shadow: 0 1px 2px rgba(10,20,64,.04); }
.ind-dd-btn:hover { border-color: #748FFF; box-shadow: 0 6px 18px rgba(48,79,254,.14); transform: translateY(-1px); }
.ind-dd-menu { border-color: rgba(48,79,254,.2); box-shadow: 0 24px 60px rgba(10,20,64,.18); border-radius: 16px; }
.share-btn-chart, .share-btn-signal, .share-btn-history, .sh-btn { background: linear-gradient(135deg, #304FFE, #1a3ae0); border-radius: 10px; box-shadow: 0 6px 16px rgba(48,79,254,.25); }
.share-btn-chart:hover, .share-btn-signal:hover, .share-btn-history:hover, .sh-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(48,79,254,.32); }
#aydsr-credit-badge { border-radius: 10px !important; background: linear-gradient(135deg, #304FFE, #1a3ae0) !important; box-shadow: 0 4px 12px rgba(48,79,254,.25); }
.live-badge.on { box-shadow: 0 0 0 3px rgba(16,185,129,.12); }

/* bias card: soft glow instead of flat blocks */
.bias-card { border-radius: 18px; position: relative; overflow: hidden; box-shadow: 0 10px 28px rgba(10,20,64,.06); }
.bias-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; opacity: .55; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9), transparent 70%); }
.bias-card.buy  { background: linear-gradient(135deg, #d9f7ea, #eefcf6); }
.bias-card.sell { background: linear-gradient(135deg, #fde2e2, #fff1f1); }
.bias-card.wait { background: linear-gradient(135deg, #fdf0cf, #fff8e6); }
.bias-value { letter-spacing: -.5px; }
.reason { border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.reason:hover { transform: translateX(2px); border-color: rgba(48,79,254,.35); box-shadow: 0 8px 20px rgba(48,79,254,.1); }
.kz-card, .side-card, .sq9-card, .kl-card { border-radius: 16px; background: linear-gradient(180deg, #f8faff, #f1f4ff); }

/* the chart itself stays white (it is drawn in light colours), framed like a screen */
.chart-box { border-radius: 18px; }
#ictCanvas { border: 1px solid rgba(48,79,254,.2); border-radius: 16px; box-shadow: 0 18px 44px rgba(48,79,254,.1); }
.ctb-group { background: #f1f4ff; border-color: var(--border); border-radius: 11px; }
.ctb-btn.on { background: linear-gradient(135deg, #304FFE, #1a3ae0); }

/* ---- signal history ---- */
.sh-sec { background: transparent; position: relative; }
.sh-head h2 em { background: linear-gradient(100deg, #304FFE, #748FFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-style: normal; }
.sh-filterbar, .sh-status, .sh-tablewrap, .sh-method, .sh-chip { border-radius: 14px; box-shadow: 0 8px 24px rgba(48,79,254,.06); }
.sh-chip { border-radius: 100px; box-shadow: none; }
.sh-tablewrap th { background: #f6f8ff; }
.sh-tablewrap tbody tr { transition: background .15s; }
.sh-tablewrap tbody tr:hover td { background: #f4f7ff; }

/* ---- win-rate, concepts, tradingview, cta ---- */
.wr-top-card { border-radius: 16px; box-shadow: 0 8px 22px rgba(48,79,254,.07); transition: transform .25s, box-shadow .25s; }
.wr-top-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(48,79,254,.14); }
.wr-table-wrap { border-radius: 16px; }
.tv-frame { border-radius: 22px; box-shadow: 0 30px 80px rgba(48,79,254,.14); }
.c-card { border-radius: 18px; background: #fff; }
.c-card:hover { box-shadow: 0 22px 48px rgba(48,79,254,.16); }
.c-card .ic { background: linear-gradient(135deg, #e8eeff, #dbe3ff); animation: indFloat 6s ease-in-out infinite; }
.c-card:nth-child(2) .ic { animation-delay: -1.5s; } .c-card:nth-child(3) .ic { animation-delay: -3s; } .c-card:nth-child(4) .ic { animation-delay: -4.5s; }
@keyframes indFloat { 50% { transform: translateY(-5px) rotate(3deg); } }
.section-tag { border: 1px solid rgba(48,79,254,.18); }
.cta-inner { background: linear-gradient(135deg, #0a1440 0%, #1a3ae0 55%, #304FFE 100%); box-shadow: 0 30px 70px rgba(48,79,254,.3); }
footer { background: #04081f; }

/* ---- reveal on scroll (applied only by JS, never to the shared/captured panels) ---- */
.ind-pre { opacity: 0; transform: translateY(26px); }
.ind-pre.ind-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }

@media (max-width: 768px) {
  .page-hero { padding: 64px 1.25rem 48px; }
  .panel { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero h1 em, .c-card .ic { animation: none !important; }
  .ind-pre { opacity: 1; transform: none; } .ind-pre.ind-in { transition: none; }
}

@media (max-width: 768px) {
  .ind-dd-menu, #toolDropdown .ind-dd-menu { min-width: 0 !important; width: min(300px, calc(100vw - 4.5rem)); }
}