:root {
  --wb-bg: #f5f6f3;
  --wb-panel: #fff;
  --wb-panel-soft: #f7f8f5;
  --wb-ink: #1a231e;
  --wb-muted: #657269;
  --wb-subtle: #92a097;
  --wb-line: #e1e6de;
  --wb-line-strong: #cbd4ca;
  --wb-accent: #d9571a;
  --wb-accent-soft: #fff0e7;
  --wb-good: #16803b;
  --wb-good-soft: #eaf8ef;
  --wb-warn: #a15c07;
  --wb-warn-soft: #fff6e8;
  --wb-danger: #b42318;
  --wb-danger-soft: #fef3f2;
  --wb-side-bg: #142019;
  --wb-side-ink: #fff;
  --wb-side-muted: #9eafa2;
}
body { background-image: radial-gradient(1000px 450px at 100% 0, rgba(217,87,26,.08), transparent 60%); }
.sg-view[hidden] { display: none !important; }
.sg-nav-count { min-width: 18px; margin-left: auto; padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 9px; text-align: center; }
.sg-recent { margin-top: 14px; }
.sg-lanes { min-height: 230px; }
.sg-lanes svg { width: 100%; height: auto; }
.sg-full-btn { width: 100%; margin-top: 12px; }
.sg-status-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; }
.sg-timeline { display: grid; gap: 0; margin: 18px 0; }
.sg-step { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--wb-line); font-size: 11px; }
.sg-step:last-child { border-bottom: 0; }
.sg-step-dot { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--wb-line-strong); color: var(--wb-subtle); font-size: 9px; }
.sg-step.is-done .sg-step-dot { border-color: var(--wb-good); background: var(--wb-good); color: #fff; }
.sg-step.is-current .sg-step-dot { border-color: var(--wb-accent); color: var(--wb-accent); }
.sg-step-copy strong { display: block; font-size: 11px; }
.sg-step-copy span { color: var(--wb-muted); font-size: 10px; }
.sg-step-time { color: var(--wb-muted); font-size: 9px; white-space: nowrap; }
.sg-drawer-actions { display: grid; gap: 8px; margin-top: 20px; }
.sg-exception-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) 310px; gap: 14px; }
.sg-ex-cards { display: grid; gap: 9px; }
.sg-ex-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--wb-danger) 24%, var(--wb-line)); border-radius: 10px; background: var(--wb-danger-soft); }
.sg-ex-card strong { display: block; font-size: 12px; }
.sg-ex-card p { margin-top: 2px; color: var(--wb-muted); font-size: 10px; }
.sg-ex-lane { margin: 2px 0 0; font-size: 11px; color: var(--wb-muted); }
.sg-ex-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sg-steps { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.sg-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; }
.sg-steps li > span { color: var(--wb-accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding-top: 2px; }
.sg-steps strong { display: block; font-size: 12px; }
.sg-steps p { margin-top: 2px; color: var(--wb-muted); font-size: 11px; line-height: 1.5; }
.sg-local { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid var(--wb-line); color: var(--wb-muted); font-size: 10px; }
.sg-local strong { color: var(--wb-ink); font-weight: 600; }
.sg-demo-note { margin-top: 22px; color: var(--wb-muted); font-size: 11px; }
.sg-demo-note a { color: var(--wb-accent); text-decoration: none; font-weight: 600; }
@media (max-width: 900px) { .sg-exception-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sg-lanes { min-height: 190px; } .sg-ex-card { flex-direction: column; } .sg-ex-card-actions { justify-content: flex-start; } }