/* Shared UI layer for all three pages. Loaded last so it sets one consistent style for nav, badges, chips and buttons. */
body.light{--u-ink:#14161a;--u-mut:#6b6f78;--u-line:#e4e1d8;--u-card:#fff;--u-soft:#efede6;--u-hover:#f3f1ea;--u-on:#14161a;--u-on-txt:#fff;--u-acc:#0d6e5f;--u-ring:rgba(13,110,95,.35);--u-bar:rgba(245,244,239,.88)}
body.dark{--u-ink:#e7eaf2;--u-mut:#8b93a7;--u-line:#232a3a;--u-card:#121725;--u-soft:#1a2030;--u-hover:#1a2030;--u-on:#e7eaf2;--u-on-txt:#0b0e14;--u-acc:#34d399;--u-ring:rgba(52,211,153,.35);--u-bar:rgba(11,14,20,.88)}

/* top bar */
.ubar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px 32px;min-height:64px;background:var(--u-bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--u-line);flex-wrap:nowrap}
.ubar .ubrand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.ubar .ufor{color:var(--u-mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ubar .uright{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* status badge: quiet, not a button */
.ustatus{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 2px;font-size:12px;font-weight:500;color:var(--u-mut);white-space:nowrap;cursor:default;user-select:none}
.ustatus i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16);flex:none}
.ustatus.off i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}

/* segmented nav */
.useg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--u-line);border-radius:999px;background:var(--u-card);white-space:nowrap}
.useg a,.useg button{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--u-mut);font:500 13px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.useg a:hover,.useg button:hover{background:var(--u-hover);color:var(--u-ink)}
.useg a.on,.useg button.on{background:var(--u-on);color:var(--u-on-txt)}
.useg a:focus-visible,.useg button:focus-visible,.uchip:focus-visible,.ubtn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--u-ring)}

/* chips (filters, scenarios) */
.uchip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:1px solid var(--u-line);border-radius:999px;background:var(--u-card);color:var(--u-ink);font:500 13px/1 Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.uchip:hover{border-color:var(--u-mut)}
.uchip.on{background:var(--u-on);color:var(--u-on-txt);border-color:var(--u-on)}
.uchip.ghost{border-style:dashed;color:var(--u-mut)}

/* buttons */
.ubtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border:1px solid transparent;border-radius:10px;font:600 14px/1 Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s,border-color .15s}
.ubtn:hover{filter:brightness(.95)}.ubtn:active{filter:brightness(.9)}
.ubtn:disabled,.ubtn[aria-disabled=true]{opacity:.45;cursor:not-allowed;filter:none}
.ubtn.sm{height:34px;padding:0 14px;font-size:13px;border-radius:9px}

/* small pills and tags: one height, never wrap */
.pill,.tag,.badge{font-family:Inter,system-ui,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:0;display:inline-flex;align-items:center;height:22px;line-height:1;white-space:nowrap;vertical-align:middle}

/* mobile: brand row, then a scrollable nav row */
@media (max-width:820px){
  .ubar{flex-wrap:wrap;padding:10px 16px;gap:8px 12px}
  .ubar .ufor{display:none}
  .ubar .uright{width:100%;justify-content:space-between;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ubar .uright::-webkit-scrollbar{display:none}
  .useg{flex:none}
}
@media (max-width:520px){.ubar .ustatus{display:none}.ubar .mock,.ubar .badge.mock{display:none}}
@media (max-width:1180px){.ubar .ufor{display:none}}

/* walkthrough step controls: three equal buttons that fit the rail */
.ctrl{display:grid!important;grid-template-columns:auto 1fr auto;gap:8px;padding-left:0!important}
.ctrl .ubtn{height:38px;padding:0 14px;font-size:13.5px}