:root{
  --bg:#06101d;--panel:#08192b;--line:#0b7bd8;--cyan:#00baff;
  --green:#11e56f;--yellow:#ffd51f;--red:#ff3b45;--text:#f5f8fc;--muted:#94a9bf
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(#040b13,#071321 70%,#07101c);color:var(--text);font-family:Segoe UI,Arial,sans-serif}
.hero{width:min(1600px,100%);margin:auto;background:#02070d}
.hero img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;object-position:center}

main{width:min(1580px,97vw);margin:auto}

.statusbar{
  margin:12px 0 18px;padding:12px 16px;border:1px solid var(--line);border-radius:13px;
  background:#061627;display:flex;justify-content:space-between;align-items:center;gap:18px;color:var(--muted)
}
.status-left,.status-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clock{color:var(--cyan);font-size:1.35rem}.live{color:var(--green)}.market-pill{padding:7px 12px;border-radius:999px;background:#0a3155;color:#dff3ff;font-weight:700}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{color:#d7e5f1;text-decoration:none;border:1px solid #3a5268;border-radius:9px;padding:8px 14px}
nav a.active,nav a:hover{border-color:var(--cyan);box-shadow:0 0 15px rgba(0,186,255,.15)}

.top-grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:18px;align-items:stretch}
.bottom-grid{display:grid;grid-template-columns:1.12fr 1fr 1.08fr;gap:18px;margin-top:18px;align-items:stretch}

.panel{
  min-width:0;background:linear-gradient(180deg,#071a2d,#061522);border:1px solid var(--line);
  border-radius:14px;padding:18px;box-shadow:0 12px 35px rgba(0,0,0,.22);overflow:hidden
}
.panel h2{font-size:1rem;margin:0 0 15px}.panel h1{overflow-wrap:anywhere}

.position-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pos{text-align:center;border:1px solid #0c88df;border-radius:10px;padding:12px 8px;background:#051321;min-width:0}
.pos b{font-size:.78rem}.pos .arrow{display:block;font-size:2.8rem;line-height:1;margin:4px 0}
.pos strong{display:block;font-size:2.55rem;line-height:1.05}
.pos small{display:block;color:#c8d2dc;margin-top:3px}
.pos i,.strength-bars i{display:block;height:10px;background:#173149;border-radius:999px;overflow:hidden;margin-top:8px}
.pos u,.strength-bars u{display:block;height:100%;width:0;text-decoration:none;transition:width .4s}
.long b,.long .arrow,.long strong{color:var(--green)}.long u,#bullStrength{background:var(--green)}
.neutral u,#neutralStrength{background:#cbd5df}
.short b,.short .arrow,.short strong{color:var(--red)}.short u,#bearStrength{background:var(--red)}
.total,.center{text-align:center}.muted{color:var(--muted)}

.consensus{text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
.consensus h1{font-size:clamp(1.45rem,2vw,2rem);font-style:italic;margin:0 0 10px;line-height:1.18}
.gauge{position:relative;width:min(470px,96%);aspect-ratio:2/1;margin:0 auto 2px;overflow:hidden}
.arc{position:absolute;left:5%;right:5%;top:5%;height:180%;border-radius:50%;background:conic-gradient(from 270deg at 50% 50%,var(--red) 0 33%,var(--yellow) 33% 66%,var(--green) 66% 100%)}
.arc:after{content:"";position:absolute;left:9%;right:9%;top:11%;height:150%;border-radius:50%;background:#061522}
.needle{position:absolute;left:50%;bottom:0;width:4px;height:78%;background:linear-gradient(#fff4a8,var(--yellow));transform-origin:50% 100%;transform:translateX(-50%) rotate(0deg);z-index:4;box-shadow:0 0 15px #f6dc35;transition:transform .5s}
.pivot{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#00182c;border:5px solid var(--yellow);z-index:5}
.signal{display:inline-block;align-self:center;margin-top:-14px;position:relative;z-index:6;border:2px solid var(--yellow);border-radius:14px;padding:9px 24px;font-size:1.8rem;font-weight:900}
.neutralSignal{color:var(--yellow)}.bullish{color:var(--green);border-color:var(--green)}.bearish{color:var(--red);border-color:var(--red)}
.score,.consensusText{color:var(--muted);font-weight:700;margin-top:6px}

.strength-grid{display:grid;grid-template-columns:138px minmax(0,1fr);gap:16px;align-items:center}
.donut{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--yellow) 0deg,#33485d 0deg);position:relative;margin:auto}
.donut:after{content:"";position:absolute;inset:20px;border-radius:50%;background:#071525}
.donut span,.donut small{z-index:2}.donut span{font-size:1.5rem;font-weight:900;color:var(--yellow);margin-top:16px}.donut small{font-size:.68rem;margin-top:-24px}
.strength-bars{display:grid;gap:10px;min-width:0}
.strength-bars>div{display:grid;grid-template-columns:58px minmax(0,1fr) 46px;gap:8px;align-items:center;font-size:.8rem}
.strength-bars b{text-align:right;white-space:nowrap}
.info{padding:10px;border:1px solid #0a79ca;border-radius:8px;color:#9fc5e8;font-size:.8rem;line-height:1.4;margin-bottom:0}

.panel-head,.price-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head span{font-size:.75rem;color:#c7d5e2}

.chart-wrap{display:grid;grid-template-columns:40px minmax(0,1fr);gap:7px}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;color:#8299ae;font-size:.7rem;padding:2px 0}
.chart{height:225px;position:relative;overflow:hidden;border:1px solid #214d6d;background:linear-gradient(180deg,rgba(0,95,50,.18) 0 49.5%,rgba(120,15,25,.18) 50.5% 100%)}
.zero-line{position:absolute;top:50%;left:0;right:0;border-top:1px dashed rgba(255,213,31,.45)}
.chart svg{position:absolute;inset:0;width:100%;height:100%;color:var(--yellow);filter:drop-shadow(0 0 5px rgba(255,213,31,.45))}

.dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:10px 0 16px}
.dot{width:18px;height:18px;border-radius:50%;justify-self:center}
.dot.long{background:var(--green)}.dot.neutral{background:#aab6c2}.dot.short{background:var(--red)}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.legend span{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.legend .dot{display:inline-block;width:14px;height:14px;flex:0 0 14px}
.longDot{background:var(--green)}.neutralDot{background:#aab6c2}.shortDot{background:var(--red)}
.detail-note{font-size:.78rem;line-height:1.45}

.price-head span{background:#0755a5;padding:5px 12px;border-radius:999px;color:#fff;font-size:.8rem}
.price-main{font-size:clamp(2.8rem,4vw,4.4rem);font-weight:900;line-height:1.05;margin-top:2px;white-space:nowrap}
.price-change{font-size:1.12rem;font-weight:800;margin:6px 0 10px;min-height:1.4em}
.price-change.up{color:var(--green)}.price-change.down{color:var(--red)}
.spark{height:170px;border-bottom:1px solid #24425c}
.spark svg{width:100%;height:100%;color:var(--cyan);filter:drop-shadow(0 0 5px rgba(0,186,255,.45))}
.ohlc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;color:#b9c7d4;font-size:.78rem;margin-top:10px}
.ohlc span{min-width:0;overflow-wrap:anywhere}.ohlc b{color:#eef7ff}

.quote{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:1.45rem;color:#c8d7e4;padding:24px 10px}
.quote strong{display:block;font-family:Segoe UI,Arial,sans-serif;font-style:normal;letter-spacing:.35em;font-size:.8rem;margin-top:8px}
.disclaimer{text-align:center;color:#8299af;font-size:.78rem;margin:12px 0 18px;border-top:1px solid #17354f;padding-top:14px}

footer{width:min(1580px,97vw);margin:auto;padding:14px 0 28px;display:flex;justify-content:space-between;gap:12px;color:#8da4ba;font-size:.8rem}
footer strong{letter-spacing:.3em;color:#c5d4e2}

@media(max-width:1280px){
  .top-grid{grid-template-columns:1fr 1.15fr}
  .strength{grid-column:1/3}
  .bottom-grid{grid-template-columns:1fr 1fr}
  .price{grid-column:1/3}
}
@media(max-width:860px){
  .statusbar{flex-direction:column;align-items:flex-start}
  .status-right{width:100%;justify-content:space-between}
  .top-grid,.bottom-grid{grid-template-columns:1fr}
  .strength,.price{grid-column:auto}
  .position-grid{grid-template-columns:repeat(3,1fr)}
  .strength-grid{grid-template-columns:1fr}
  .ohlc{grid-template-columns:1fr}
  .legend{grid-template-columns:1fr}
  .hero img{min-height:145px;object-fit:cover;object-position:center}
  footer{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .position-grid{grid-template-columns:1fr}
  .dots{grid-template-columns:repeat(5,1fr)}
  nav a{padding:7px 10px}
}