* { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #0b0e11; color: #eaecef; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; display: flex; flex-direction: column; min-height: 100vh; }
  header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #2b3139; flex-wrap: wrap; background: #0b0e11; }
  header h1 { font-size: 16px; font-weight: 700; }
  header h1 .y { color: #f0b90b; }
  #badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: #2b3139; color: #fff; }
  #price { font-size: 16px; font-weight: 700; display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
  #price.up { color: #2ebd85; } #price.down { color: #f6465d; }
  #price .st { height: 1.1em; line-height: 1.1em; }
  #price .rd { height: 1.1em; overflow: hidden; }
  #price .rd .strip { display: block; transition: transform .3s cubic-bezier(.45,0,.2,1); will-change: transform; }
  #price .rd .strip b { display: block; height: 1.1em; line-height: 1.1em; font-weight: 700; }
  .btn { background: #1e2329; color: #eaecef; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
  .btn.active, .btn:hover { background: #f0b90b; color: #0b0e11; }
  .btn.on { background: #2ebd85; color: #0b0e11; }
  .legend { display: flex; gap: 14px; padding: 8px 16px; font-size: 12px; color: #848e9c; flex-wrap: wrap; background: #0b0e11; }
  .legend span i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
  #wrap { position: relative; flex: 1; display: flex; min-height: 420px; }
  #chart { width: 100%; flex: 1; }
  .panelabel { padding: 6px 16px 0; font-size: 12px; font-weight: 700; color: #848e9c; background: #0b0e11; }
  #panel { position: absolute; top: 10px; left: 10px; background: rgba(18,22,28,0.94); border: 1px solid #2b3139; border-radius: 6px; font-size: 12px; min-width: 190px; z-index: 5; }
  #panel .prow { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px; border-bottom: 1px solid #2b3139; }
  #panel .prow:last-child { border-bottom: none; }
  #panel .k { color: #848e9c; } #panel .v { font-weight: 700; }
  .up { color: #2ebd85; } .dn { color: #f6465d; } .wr { color: #f0b90b; }
  #badge { cursor: pointer; }
  #mktpop {
    position: absolute; top: 56px; left: 12px; z-index: 20; width: 320px;
    background: #141a22; border: 1px solid #2b3139; border-radius: 12px;
    padding: 16px; font-size: 13px; line-height: 1.55; box-shadow: 0 16px 48px rgba(0,0,0,.55);
  }
  #mktpop .mrow { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
  #mktpop .dot { width: 10px; height: 10px; border-radius: 50%; background: #2ebd85; box-shadow: 0 0 8px #2ebd85; animation: pulse 1s infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
  #mktpop .msub { color: #aab4c4; margin-bottom: 10px; }
  #mktpop .tl { position: relative; height: 6px; background: #2b3139; border-radius: 3px; margin: 6px 0 4px; }
  #mktpop .tfill { position: absolute; left: 0; top: 0; bottom: 0; background: #2ebd85; border-radius: 3px; }
  #mktpop .tlabels { display: flex; justify-content: space-between; color: #848e9c; font-size: 11px; }
  #mktpop .tlabels #tclock { color: #eaecef; font-weight: 700; }
  #mktpop .tz { color: #848e9c; font-size: 11px; margin-bottom: 10px; }
  #mktpop hr { border: none; border-top: 1px solid #2b3139; margin: 10px 0; }
  #mktpop .updf { color: #f6465d; font-weight: 700; margin-bottom: 4px; }
  #mktpop .btnlink {
    display: inline-block; margin-top: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: #eaecef; background: #2b3139; border-radius: 8px; text-decoration: none;
  }
  #cfgpop {
    position: absolute; top: 56px; right: 12px; z-index: 20; width: 300px;
    background: #141a22; border: 1px solid #2b3139; border-radius: 12px;
    padding: 16px; font-size: 13px; box-shadow: 0 16px 48px rgba(0,0,0,.55);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  #cfgpop h3 { font-size: 14px; margin-bottom: 10px; }
  #cfgpop .sec { margin-bottom: 12px; }
  #cfgpop .sec h4 { font-size: 12px; color: #2dd4bf; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
  #cfgpop .frow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  #cfgpop .frow label { color: #aab4c4; }
  #cfgpop .frow input[type=number] {
    width: 76px; padding: 6px 8px; font-size: 13px; color: #eaecef;
    background: #0a111d; border: 1px solid #243145; border-radius: 8px; outline: none;
  }
  #cfgpop .frow input[type=number]:focus { border-color: #2dd4bf; }
  #cfgpop .frow select {
    width: 96px; padding: 6px 8px; font-size: 13px; color: #eaecef;
    background: #0a111d; border: 1px solid #243145; border-radius: 8px; outline: none;
  }
  #cfgpop .brow { display: flex; gap: 8px; margin-top: 4px; }
  #cfgpop .brow button {
    flex: 1; padding: 9px; font-size: 13px; font-weight: 700; border-radius: 8px; cursor: pointer; border: none;
  }
  #cfgpop #bCfgApply { background: #2dd4bf; color: #06201b; }
  #cfgpop #bCfgReset { background: #2b3139; color: #eaecef; }
  footer { padding: 12px 16px; font-size: 12px; color: #848e9c; border-top: 1px solid #2b3139; line-height: 1.7; background: #0b0e11; }
  footer b { color: #eaecef; } footer code { font-family: monospace; color: #c0c6cf; }