/* ============ TRADINGVIEW CHART LAYER ============ */
.tvbar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)}
.tvbar .lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.tvseg{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:2px}
.tvseg button{padding:4px 11px;border-radius:6px;font-size:11.5px;font-weight:700;color:var(--text3)}
.tvseg button.on{background:var(--surface3);color:var(--text)}
.tvseg button:hover{color:var(--text)}
.tvhint{margin-left:auto;font-size:10.5px;color:var(--text3);display:inline-flex;align-items:center;gap:5px}
.tvhint svg{opacity:.7}
.tvhost{position:relative;width:100%;height:100%;min-height:220px}
.tvhost iframe{border:0!important;display:block;width:100%!important;height:100%!important}
.tvload{position:absolute;inset:0;display:grid;place-items:center;color:var(--text3);font-size:12px;gap:10px;text-align:center;padding:20px}
.tvload .sp{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--accent);animation:tvspin .8s linear infinite;margin:0 auto 10px}
@keyframes tvspin{to{transform:rotate(360deg)}}
.tvfail{color:var(--warn);font-size:11.5px;line-height:1.7}
/* charts get taller when TradingView is driving them */
.tv-on.xchart,.tv-on.tchart,.tv-on.cvchart,.tv-on.tapchart{height:520px}
@media(max-width:900px){.tv-on.xchart,.tv-on.tchart,.tv-on.cvchart,.tv-on.tapchart{height:400px}}
.tvsrc{font-size:10.5px;color:var(--text3);font-family:var(--ff-mono);margin-left:10px}
.tvbar .tvhint{margin-left:auto}

/* ============ MEGA HEADER MENUS ============ */
.ndd-menu{max-height:74vh;overflow-y:auto;overscroll-behavior:contain}
.ndd-menu.mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:min(860px,92vw);gap:0 6px}
.ndd-menu.mega .grp{grid-column:1/-1}
.ndd-menu.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:min(600px,92vw);gap:0 6px}
.ndd-menu.cols2 .grp{grid-column:1/-1}
/* keep the rightmost menus on screen */
.nav-links > .ndd:nth-last-child(-n+2) .ndd-menu{left:auto;right:-14px}
.ndd-menu a.sub{padding-left:26px;font-weight:500;font-size:12.5px;position:relative}
.ndd-menu a.sub::before{content:"";position:absolute;left:13px;top:50%;width:5px;height:1px;background:var(--text3);opacity:.5}
@media(max-width:1240px){
  .ndd-menu.mega,.ndd-menu.cols2{grid-template-columns:1fr;min-width:300px}
}

/* ============ HEADER FIT ============
   Two real problems, both from the core's nav CSS:
   1) .nav-in is capped at --maxw (1320px), so with 7 menus the links overflowed
      and 運営 sat outside the visible box entirely.
   2) .nav-links has overflow-x:auto, which computes overflow-y to auto and
      CLIPS the dropdown menus. */
.nav-in{max-width:min(1640px, calc(100vw - 28px))}
.nav-links{overflow:visible!important}
@media(max-width:1100px){
  /* narrow screens go back to a scrolling strip, menus drop below the bar */
  .nav-links{overflow-x:auto!important;overflow-y:visible!important}
}
/* ============ (compacting) ============
   7 menus + the action cluster overflowed and nav-act painted over 運営,
   making it unclickable. Give the links room and collapse the right-hand
   labels to icons before anything can overlap. */
.nav-in{gap:10px}
.nav-links{flex:1 1 auto;min-width:0;position:relative;z-index:2}
.nav-act{flex:0 0 auto;position:relative;z-index:1}
@media(max-width:1500px){
  .nav-links{gap:2px}
  .nav-links > a,.nav-links > .ndd > a{padding-left:9px;padding-right:9px;font-size:13.5px}
}
@media(max-width:1400px){
  .nav-act .nav-t{display:none}
  .chainbtn,.langbtn{padding:7px 8px}
  #wBtn{padding-left:11px;padding-right:11px}
}
@media(max-width:1300px){
  .nav-links > a,.nav-links > .ndd > a{padding-left:7px;padding-right:7px;font-size:13px}
  .nav-act .btn-ghost.hide-sm{display:none}
}