.rw-demo { display: grid; grid-template-columns: 320px 1fr; height: min(640px, 80vh); min-height: 460px; background: #0a101d; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; overflow: hidden; color: #e9eef8; font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: left; }
.rw-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-right: 1px solid rgba(255,255,255,.09); overflow: hidden; min-height: 0; }
.rw-map { position: relative; min-height: 0; }
.rw-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: rgba(255,255,255,.05); border-radius: 10px; }
.rw-modes button { padding: 8px 0; border: 0; border-radius: 7px; background: none; color: #9ca7bd; font: inherit; font-weight: 600; cursor: pointer; }
.rw-modes button[aria-selected="true"] { background: #b4f25e; color: #070b14; }
.rw-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rw-stops li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.04); border-radius: 8px; font: 12px/1.3 ui-monospace, Menlo, monospace; color: #9ca7bd; }
.rw-stops b, .rw-marker { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b4f25e; color: #070b14; font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; flex: none; }
.rw-stops li + li b, .rw-marker.end { background: #5cc8ff; }
.rw-marker { border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: grab; }
.rw-row { display: flex; justify-content: space-between; align-items: center; color: #9ca7bd; }
.rw-row label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.rw-row button { background: none; border: 1px solid rgba(255,255,255,.15); color: #e9eef8; border-radius: 7px; padding: 4px 12px; font: inherit; cursor: pointer; }
.rw-status { margin: 0; color: #b4f25e; min-height: 20px; }
.rw-routes { flex: 1; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.rw-summary { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; width: 100%; margin-bottom: 6px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: none; color: #9ca7bd; font: inherit; text-align: left; cursor: pointer; }
.rw-summary.active { border-color: #b4f25e; background: rgba(180,242,94,.08); color: #e9eef8; }
.rw-summary strong { color: #e9eef8; font-size: 16px; }
.rw-summary em { font-style: normal; }
.rw-steps { list-style: none; margin: 4px 0 12px; padding: 0; }
.rw-steps li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; border-radius: 6px; }
.rw-steps li:hover { background: rgba(255,255,255,.05); }
.rw-steps i { font-style: normal; color: #5cc8ff; text-align: center; }
.rw-steps small { color: #6b768c; white-space: nowrap; }
.rw-cache { margin: 0; font: 11px/1.4 ui-monospace, Menlo, monospace; color: #6b768c; }
@media (max-width: 760px) {
  .rw-demo { grid-template-columns: 1fr; grid-template-rows: 360px auto; height: auto; }
  .rw-side { order: 2; border-right: 0; border-top: 1px solid rgba(255,255,255,.09); }
  .rw-routes { max-height: 340px; }
}