:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #0d0f12; color: #e6e9ef;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display: flex; min-height: 100vh;
}

/* ---- sidebar ---- */
#sidebar {
  width: 290px; flex: 0 0 290px; background: #11151b;
  border-right: 1px solid #232a33; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.brand-sub { font-size: 12px; color: #7c8694; margin-top: -10px;
             text-transform: uppercase; letter-spacing: 1px; }

#panel { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ctl { background: #15191f; border: 1px solid #232a33; border-radius: 12px;
       padding: 12px 14px 16px; }
.ctl .row { display: flex; justify-content: space-between; align-items: baseline; }
.ctl .name { font-size: 13px; color: #c5ccd6; font-weight: 600; }
.ctl .val { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700;
            color: #7fd1ff; }
.ctl .sub { font-size: 11px; color: #7c8694; min-height: 13px; margin-top: 2px; }
input[type=range] { width: 100%; margin-top: 10px; accent-color: #4aa3ff;
                    height: 24px; cursor: pointer; }

#reset { background: #1c2230; color: #c5ccd6; border: 1px solid #2b3340;
         border-radius: 10px; padding: 9px; font-size: 13px; cursor: pointer; }
#reset:hover { background: #232b3a; }

.legend { background: #15191f; border: 1px solid #232a33; border-radius: 12px;
          padding: 12px 14px; font-size: 13px; color: #c5ccd6; }
.legend-title { font-size: 11px; color: #7c8694; text-transform: uppercase;
                letter-spacing: 1px; margin-bottom: 8px; }
.lg { display: flex; align-items: center; gap: 9px; margin: 5px 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid; }
.dot.safe { border-color: #00ff00; } .dot.cautious { border-color: #ffc800; }
.dot.danger { border-color: #ff0000; }
.sq { width: 14px; height: 14px; border: 3px solid #1e78ff; }
.traj { width: 20px; height: 0; border-top: 2px dashed #8cbee6; }

.rate { background: #15191f; border: 1px solid #232a33; border-radius: 12px;
        padding: 12px 14px; font-size: 13px; color: #c5ccd6; }
.rate-row { display: flex; justify-content: space-between; align-items: baseline;
            margin: 5px 0; }
.rate-row b { font-variant-numeric: tabular-nums; color: #7fd1ff; font-weight: 700; }

#status { margin-top: auto; font-size: 12px; color: #6f7783; }
#status.live { color: #57b894; }
#status.err { color: #d9737d; }

/* ---- main stage ---- */
#stage { flex: 1; padding: 20px; display: flex; flex-direction: column;
         gap: 20px; align-items: center; }
.view { width: 100%; max-width: 980px; }
#tx, #rx { width: 100%; height: auto; display: block; border-radius: 10px;
           background: #000; box-shadow: 0 8px 30px rgba(0,0,0,.55); }