:root{
    --bg:#131722; --panel:#171b26; --grid:#1f2733; --border:#2a2e39;
    --txt:#d1d4dc; --txt2:#787b86; --up:#26a69a; --dn:#ef5350;
    --accent:#2962ff; --draw:#f5b942;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--bg); color:var(--txt); font:14px/1.5 -apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;}
  header{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding:12px 18px; border-bottom:1px solid var(--border);}
  .sym{font-size:18px; font-weight:700; letter-spacing:.3px;}
  .sym small{color:var(--txt2); font-weight:400; font-size:13px; margin-left:8px;}
  .px{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums;}
  .chg{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;}
  .ohlc{color:var(--txt2); font-size:12.5px; font-variant-numeric:tabular-nums; display:flex; gap:12px; flex-wrap:wrap;}
  .ohlc b{color:var(--txt); font-weight:500;}
  #liveDot{display:none; width:8px; height:8px; border-radius:50%; background:var(--up); animation:pulse 1.2s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .bar{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 18px; border-bottom:1px solid var(--border);}
  .bar .lbl{color:var(--txt2); font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; margin-right:2px;}
  .bar .sep{width:1px; height:20px; background:var(--border); margin:0 6px;}
  button{background:transparent; color:var(--txt2); border:1px solid transparent; border-radius:6px;
    padding:5px 10px; font:600 12.5px/1 inherit; cursor:pointer;}
  button:hover{background:var(--panel); color:var(--txt);}
  button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  button.on{background:#1e2534; color:#fff; border-color:var(--border);}
  button.tf.on{color:var(--accent);}
  button.mode.on{color:var(--draw);}
  select{background:var(--panel); color:var(--txt); border:1px solid var(--border); border-radius:6px;
    padding:5px 8px; font:600 12.5px/1 inherit; cursor:pointer;}
  .dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:1px;}
  .sw{width:18px; height:18px; border-radius:4px; padding:0; border:2px solid transparent;}
  .sw.on{border-color:#fff;}
  .flag{padding:3px 5px; line-height:0; border:2px solid transparent;}
  .flag.on{border-color:var(--accent); background:#1e2534;}
  .flag svg{display:block; border-radius:2px;}
  #hint{color:var(--draw); font-size:12.5px; margin-left:auto; min-height:1em;}
  #stage{position:relative; width:100%; background:var(--bg);}
  canvas{display:block; width:100%; cursor:crosshair;}
  #tip{position:absolute; display:none; pointer-events:none; background:var(--panel); border:1px solid var(--border);
    border-radius:6px; padding:8px 10px; font-size:12px; line-height:1.6; white-space:nowrap;
    font-variant-numeric:tabular-nums; z-index:5;}
  footer{padding:10px 18px; color:#565a66; font-size:11.5px; border-top:1px solid var(--border);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
  @media (max-width:640px){ .px{font-size:20px;} .ohlc{display:none;} }