.monex-advanced-chart,
.monex-advanced-chart * { box-sizing: border-box; }
.monex-advanced-chart { --navy:#12314d; --blue:#3d839f; --border:#d4e2e9; --muted:#687e8e; width:100%; margin:0 auto 56px; color:var(--navy); font-family:"Open Sans",Arial,sans-serif; }
.monex-advanced-chart button { appearance:none; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.monex-advanced-chart__topbar { display:flex; align-items:stretch; flex-direction:column; gap:22px; margin-bottom:20px; }
.monex-advanced-chart__intro { max-width:820px; }
.monex-advanced-chart__intro h2 { margin:0!important; color:#102f49!important; font-family:inherit!important; font-size:clamp(28px,3vw,42px)!important; font-weight:700!important; line-height:1.12!important; letter-spacing:-.025em!important; text-transform:none!important; }
.monex-advanced-chart--bold-title .monex-advanced-chart__intro h2 { font-weight:800!important; }
.monex-advanced-chart__intro p { margin:10px 0 0!important; color:#647786!important; font-family:inherit!important; font-size:16px!important; font-weight:400!important; line-height:1.6!important; }
.monex-advanced-chart__controls { display:flex; width:100%; min-width:0; justify-content:space-between; align-items:center; gap:18px; }
.monex-advanced-chart__ranges,.monex-advanced-chart__modes,.monex-advanced-chart__averages,.monex-advanced-chart__intervals { display:inline-flex; min-width:0; min-height:0; gap:6px; padding:5px; border:1px solid rgba(63,122,150,.18); border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 10px 26px rgba(41,69,96,.07); }
.monex-advanced-chart__ranges button,.monex-advanced-chart__modes button,.monex-advanced-chart__averages button,.monex-advanced-chart__intervals button { min-width:58px; height:40px; padding:0 16px; border-radius:8px; color:#536777; font-size:13.44px; font-weight:700; line-height:1; white-space:nowrap; transition:.16s ease; }
.monex-advanced-chart__averages button { min-width:74px; }
.monex-advanced-chart__ranges button:hover,.monex-advanced-chart__modes button:hover,.monex-advanced-chart__averages button:hover,.monex-advanced-chart__intervals button:hover { background:#edf5f8; color:var(--navy); }
.monex-advanced-chart__ranges button.is-active,.monex-advanced-chart__modes button.is-active,.monex-advanced-chart__averages button.is-active,.monex-advanced-chart__intervals button.is-active { background:#3f7a96; color:#fff; box-shadow:0 7px 16px rgba(63,122,150,.22); }
.monex-advanced-chart__pdf { display:grid; min-width:48px!important; place-items:center; }
.monex-advanced-chart__pdf svg { width:25px; height:25px; }
.monex-advanced-chart__pdf:disabled { cursor:not-allowed; opacity:.42; }
.monex-advanced-chart__peak-toggle { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 18px!important; border:1px solid rgba(63,122,150,.18)!important; border-radius:12px; background:rgba(255,255,255,.72)!important; box-shadow:0 10px 26px rgba(41,69,96,.07); color:#536777!important; font-size:13.44px!important; font-weight:700!important; }
.monex-advanced-chart__peak-toggle span { position:relative; width:34px; height:19px; border-radius:10px; background:#c9d5dc; transition:.16s; }
.monex-advanced-chart__peak-toggle span:after { position:absolute; top:3px; left:3px; display:block; width:13px; height:13px; border-radius:50%; background:#fff; content:""; box-shadow:0 1px 4px rgba(41,69,96,.28); transition:.16s; }
.monex-advanced-chart__peak-toggle.is-active span { background:var(--blue); }
.monex-advanced-chart__peak-toggle.is-active { color:#294560!important; }
.monex-advanced-chart__peak-toggle.is-active span:after { transform:translateX(15px); }
.monex-advanced-chart__card { padding:12px 12px 18px; overflow:visible; border-radius:10px; background:#fbfcff; box-shadow:0 26px 54px rgba(151,147,184,.10),inset 0 1px 0 rgba(255,255,255,.72); }
.monex-advanced-chart__frame { position:relative; min-height:420px; overflow:visible; border-radius:24px; }
.monex-advanced-chart__state { display:grid; min-height:400px; place-items:center; color:var(--muted); font-size:15px; font-weight:700; }
.monex-advanced-chart__state[hidden] { display:none; }
.monex-advanced-chart__plot { position:relative; width:100%; min-height:400px; padding:58px 14px 0; outline:none; touch-action:pan-y; user-select:none; }
.monex-advanced-chart__plot svg { position:relative; z-index:2; display:block; width:100%; height:auto; overflow:visible; }
.monex-advanced-chart__grid line { stroke:#cfdee5; stroke-width:1; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__grid text { fill:#657d8f; font-size:13px; font-weight:700; }
.monex-advanced-chart__border { fill:none; stroke:#bfd4de; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__area { stroke:none; }
.monex-advanced-chart__price-line { fill:none; stroke:#a97b16; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__sma-line { fill:none; stroke:#3d839f; stroke-width:2.5; stroke-dasharray:8 6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__current-guide { stroke:rgba(63,122,150,.42); stroke-width:1; stroke-dasharray:6 7; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__guide { stroke:#7895a8; stroke-width:1.2; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
.monex-advanced-chart__dot { fill:var(--navy); stroke:#fff; stroke-width:4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 3px 5px rgba(18,49,77,.28)); }
.monex-advanced-chart__watermark { position:absolute; z-index:1; top:50%; left:50%; width:min(125px,16%); max-height:125px; object-fit:contain; opacity:.065; transform:translate(-50%,-46%); pointer-events:none; }
.monex-advanced-chart__tooltip { position:absolute; z-index:8; display:grid; gap:3px; min-width:132px; padding:10px 12px; border:1px solid rgba(41,69,96,.12); border-radius:6px; background:rgba(255,255,255,.96); color:var(--navy); box-shadow:0 12px 26px rgba(16,47,73,.16); backdrop-filter:blur(10px); pointer-events:none; }
.monex-advanced-chart__tooltip[hidden] { display:none; }
.monex-advanced-chart__tooltip small { color:#72818c; font-size:11.52px; font-weight:600; white-space:nowrap; }
.monex-advanced-chart__tooltip strong { color:#102f49; font-size:16px; line-height:1.25; white-space:nowrap; }
.monex-advanced-chart__peak-marker { position:absolute; z-index:7; width:0; height:0; pointer-events:none; }
.monex-advanced-chart__peak-card { position:absolute; left:50%; bottom:8px; width:264px; padding:20px 22px 16px; border-radius:0; background:rgba(255,255,255,.90); box-shadow:0 18px 32px rgba(117,124,148,.16),0 1px 0 rgba(255,255,255,.72) inset; backdrop-filter:blur(12px); transform:translateX(-50%); }
.monex-advanced-chart__peak-card:after { position:absolute; left:50%; bottom:-12px; width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:12px solid rgba(255,255,255,.92); content:""; transform:translateX(-50%); filter:drop-shadow(0 8px 10px rgba(117,124,148,.08)); }
.monex-advanced-chart__peak-marker.is-left .monex-advanced-chart__peak-card { transform:translateX(-12%); }
.monex-advanced-chart__peak-marker.is-left .monex-advanced-chart__peak-card:after { left:12%; }
.monex-advanced-chart__peak-marker.is-right .monex-advanced-chart__peak-card { transform:translateX(-88%); }
.monex-advanced-chart__peak-marker.is-right .monex-advanced-chart__peak-card:after { left:88%; }
.monex-advanced-chart__peak-card > span { display:block; margin-bottom:8px; color:#2f3945; font-size:12.48px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.monex-advanced-chart__peak-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:nowrap; }
.monex-advanced-chart__peak-row strong { color:#1f2b37; font-size:19.52px; letter-spacing:-.03em; white-space:nowrap; }
.monex-advanced-chart__peak-row em { color:#61b36e; font-size:14.72px; font-style:normal; font-weight:700; white-space:nowrap; }
.monex-advanced-chart__peak-card small { display:block; margin-top:8px; color:#7d8794; font-size:12.8px; font-weight:500; }
.monex-advanced-chart__footer { display:flex; justify-content:space-between; gap:16px; padding:0 18px; color:#8d93a2; font-size:14.4px; }
.monex-charts-error { padding:13px 16px; border-left:4px solid #c65348; background:#fff4f3; color:#7c3029; }
@media (max-width:1000px) {
  .monex-advanced-chart__intro { max-width:none; }
  .monex-advanced-chart__controls { flex-wrap:wrap; justify-content:flex-start; }
  .monex-advanced-chart__ranges { width:100%; }
  .monex-advanced-chart__peak-toggle { margin-left:auto; }
}
@media (max-width:700px) {
  .monex-advanced-chart { margin-bottom:36px; }
  .monex-advanced-chart__controls { gap:12px; }
  .monex-advanced-chart__peak-toggle,.monex-advanced-chart__peak-marker { display:none!important; }
  .monex-advanced-chart__ranges,.monex-advanced-chart__modes,.monex-advanced-chart__averages,.monex-advanced-chart__intervals { display:grid; width:100%; height:54px; padding:5px; overflow:hidden; }
  .monex-advanced-chart__ranges--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .monex-advanced-chart__ranges--6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .monex-advanced-chart__modes { grid-template-columns:1fr 1fr 44px; }
  .monex-advanced-chart__averages { grid-template-columns:repeat(3,minmax(0,1fr)) 44px; }
  .monex-advanced-chart__intervals { grid-template-columns:1fr 1fr; }
  .monex-advanced-chart__ranges button,.monex-advanced-chart__modes button,.monex-advanced-chart__averages button,.monex-advanced-chart__intervals button { display:flex; align-items:center; justify-content:center; min-width:0; height:44px; padding:0 5px; font-size:12.16px; }
  .monex-advanced-chart__card { padding:18px 8px 14px; }
  .monex-advanced-chart__frame,.monex-advanced-chart__plot { min-height:0; }
  .monex-advanced-chart__state { min-height:220px; }
  .monex-advanced-chart__plot { padding-top:44px; }
  .monex-advanced-chart__plot svg { height:auto; min-height:0; }
  .monex-advanced-chart__tooltip { min-width:132px; padding:10px 12px; }
  .monex-advanced-chart__peak-card { width:184px; padding:14px 14px 12px; }
  .monex-advanced-chart__peak-row strong { font-size:15.68px; }
  .monex-advanced-chart__peak-row em { font-size:12.8px; }
  .monex-advanced-chart__peak-card small { font-size:11.84px; }
  .monex-advanced-chart__footer { padding-left:28px; font-size:11px; }
  .monex-advanced-chart__footer span:nth-child(2),.monex-advanced-chart__footer span:nth-child(3) { display:none; }
}