.of-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.of-bar select{border:0;background:var(--card);color:var(--fg);box-shadow:var(--sh);padding:9px 12px;border-radius:12px;font:600 14px Inter,sans-serif}
.of-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:16px}
.of-side{display:flex;flex-direction:column;gap:16px;height:660px}
.of-wrap{position:relative;flex:1;min-height:0}.of-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.of-tl{display:flex;gap:10px;align-items:center;margin-top:10px}.of-tl input{flex:1;accent-color:var(--acc)}
.of-tl button{border:0;background:var(--acc);color:#fff;border-radius:10px;width:36px;height:32px;cursor:pointer;font-weight:800}
.of-tl .t{font:800 13px Inter;min-width:64px;text-align:right}
.of-meters{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.of-m{background:var(--soft);border-radius:14px;padding:6px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.of-m b{font-size:18px;font-weight:900}.of-m span{font-size:11.5px;color:var(--mut);font-weight:700}
.of-next{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:7px;font-size:13px;overflow:auto}
.of-next li{background:var(--soft);padding:8px 10px;border-radius:10px;line-height:1.35}
.of-hot{display:flex;flex-direction:column;gap:6px;margin-top:6px;overflow:auto}
.of-h{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:6px 10px;font-size:13px}
.of-h i{width:10px;height:10px;border-radius:50%;animation:ofp var(--sp,1.4s) ease-in-out infinite}
.of-h .r{margin-left:auto;font-weight:800}
@keyframes ofp{50%{transform:scale(1.9);opacity:.35}}
.of-conv{height:8px;background:var(--soft);border-radius:9px;overflow:hidden;margin-top:6px}.of-conv i{display:block;height:100%;background:var(--acc);transition:width 1s}
@media(max-width:900px){.of-grid{grid-template-columns:1fr}}