/* Dashboard-style visual for indicator detail pages — inspired by the TradeX dashboard mock */
.dash-wrap{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(10,132,255,.16), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(212,175,103,.10), transparent 55%),
    linear-gradient(180deg, #0a0f18 0%, #0d1424 55%, #0a0f18 100%);
  border:1px solid rgba(255,255,255,.09);
  padding:22px;
}
.dash-topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  margin-bottom:18px;
}
.dash-title{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:#F5F5F7;
}
.dash-title .dash-dot{width:9px;height:9px;border-radius:50%;background:#30D158;box-shadow:0 0 8px rgba(48,209,88,.7);flex-shrink:0}
.dash-title .dash-en{color:#8E8E96;font-weight:600;font-size:13px}
.dash-tf{display:flex;gap:6px}
.dash-tf span{
  padding:6px 12px;border-radius:10px;font-size:12.5px;font-weight:700;color:#9AA1AE;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
}
.dash-tf span.active{color:#0a0f18;background:#E8ECF1}
.dash-value{font-weight:800;font-size:18px;color:#F5F5F7;font-variant-numeric:tabular-nums}
.dash-value .dash-change{font-size:13px;font-weight:800;margin-inline-start:8px}
.dash-value .dash-change.up{color:#30D158}
.dash-value .dash-change.down{color:#FF453A}

.dash-body{display:grid;grid-template-columns:1fr 190px;gap:16px}
@media (max-width:720px){.dash-body{grid-template-columns:1fr}}

.dash-chart{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);padding:14px;
}
.dash-chart svg{width:100%;height:auto;display:block}

.dash-side{display:flex;flex-direction:column;gap:14px}
.dash-panel{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);padding:14px;flex:1;
}
.dash-panel-title{font-size:12.5px;color:#9AA1AE;font-weight:700;margin-bottom:10px}
.dash-panel svg{width:100%;height:auto;display:block}
.dash-signal{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  font-size:13px;font-weight:800;
}
.dash-signal.bullish{background:rgba(48,209,88,.14);color:#30D158}
.dash-signal.bearish{background:rgba(255,69,58,.14);color:#FF453A}
.dash-signal.neutral{background:rgba(212,175,103,.16);color:#D4AF67}
.dash-signal-desc{margin-top:10px;font-size:12.5px;line-height:1.6;color:#9AA1AE}

/* chart svg colors */
.dgrid{stroke:rgba(255,255,255,.08);stroke-width:1}
.dprice{fill:none;stroke:#E8ECF1;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dline1{fill:none;stroke:#0A84FF;stroke-width:1.8;stroke-linecap:round}
.dline2{fill:none;stroke:#D4AF67;stroke-width:1.8;stroke-linecap:round}
.dband{fill:rgba(10,132,255,.12)}
.dfillg{fill:rgba(48,209,88,.16)}
.dfillr{fill:rgba(255,69,58,.14)}
.dbarup{fill:#30D158}
.dbardown{fill:#FF453A}
.ddotup{fill:#30D158}
.ddotdown{fill:#FF453A}
.dhistpos{fill:rgba(48,209,88,.55)}
.dhistneg{fill:rgba(255,69,58,.55)}
.dgauge-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.dgauge-val{fill:none;stroke:#0A84FF;stroke-width:10;stroke-linecap:round}

/* indicators listing (accordion, category filters) */
.ind-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.ind-filters button{
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:700;cursor:pointer;
  background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--ink-dim);
  font-family:inherit;transition:background .2s ease,color .2s ease;
}
.ind-filters button.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.ind-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ind-item{display:block;cursor:pointer}
.ind-item .faq-question{font-size:15px}
.ind-item .ind-cat-tag{
  font-size:11.5px;font-weight:800;color:var(--blue);background:var(--blue-soft);
  padding:3px 10px;border-radius:999px;margin-inline-start:10px;flex-shrink:0;
}
.ind-item .faq-answer p{margin-bottom:10px}
.ind-item .ind-more{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--blue);
}