.chartwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.4);padding:14px 16px 12px;margin:24px 0 0}


.cw-head{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin-bottom:9px}

.cw-per{display:inline-flex;gap:2px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:2px;align-self:center}
.cw-per button{font:inherit;font-size:12px;color:var(--soft);border-radius:6px;padding:2px 8px;white-space:nowrap}
.cw-per button:hover{color:var(--ink)}
.cw-per button.on{color:#FFD3C9;background:rgba(255,92,66,.12)}
.cw-tk{font-family:var(--sans);font-weight:700;font-size:16px}
.cw-nm{font-size:13px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.cw-px{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-family:var(--sans)}
.cw-last{font-size:16px;font-weight:700}
.cw-chg{font-size:12px;font-weight:500;padding:2px 8px;border-radius:6px}
.cw-chg.up{color:var(--up);background:rgba(255,92,66,.12)}
.cw-chg.dn{color:var(--down);background:rgba(77,141,255,.1)}
.cw-legend{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-family:var(--sans);font-size:11px;color:var(--soft);margin-bottom:8px;min-height:17px}
.cw-key{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cw-sw{width:13px;height:3px;border-radius:2px;display:inline-block;flex-shrink:0}
.cw-legend i{font-style:normal;color:var(--ink);font-weight:500}
.cw-sep{width:1px;height:11px;background:var(--line);display:inline-block}
.cw-body{position:relative;height:540px}
.cw-chart{position:absolute;inset:0}
.cw-overlay{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:20px;background:rgba(8,10,16,.55);border-radius:10px}
.chartwrap[data-state="empty"] .cw-overlay,.chartwrap[data-state="loading"] .cw-overlay,.chartwrap[data-state="error"] .cw-overlay{display:grid}
.chartwrap[data-state="empty"] :is(.cw-legend,.cw-per),.chartwrap[data-state="loading"] .cw-legend{visibility:hidden}
.cw-overlay .cw-spin{display:none}
.chartwrap[data-state="loading"] .cw-spin{display:block}
.cw-ov-msg{color:var(--soft);font-size:14px;max-width:380px;line-height:1.65}
.cw-ov-msg .big{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:5px}
.cw-spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--up);border-radius:50%;animation:cwsp .8s linear infinite;margin:0 auto 13px}
@keyframes cwsp{to{transform:rotate(360deg)}}