:root { color-scheme:light; --background:#f5f6f8; --text:#202a36; --muted:#66717f; --line:#dce1e7; --green:#256347; --red:#af343e; --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--text); background:var(--background); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:1440px; margin:auto; padding:24px 28px 36px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:23px; font-weight:650; letter-spacing:-.5px; }
h2 { font-size:15px; font-weight:650; }
h3 { font-size:11px; font-weight:650; }
button,input,select { font:inherit; }
button,select { cursor:pointer; border:1px solid var(--line); border-radius:4px; padding:6px 11px; background:#fff; color:inherit; }
button:hover:not(:disabled) { background:#eef1f4; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,select:focus-visible,input:focus-visible,.log:focus-visible { outline:2px solid #4c82c5; outline-offset:2px; }

.page-header { margin-bottom:17px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:6px; }

.workflow { padding:16px 18px; margin-bottom:16px; }
.workflow > h2 { font-size:13px; margin-bottom:14px; }
.workflow-path { display:grid; grid-template-columns:.8fr 1fr 1.7fr; gap:30px; align-items:start; }
.workflow-step { position:relative; min-width:0; }
.workflow-step + .workflow-step::before { content:"→"; position:absolute; left:-23px; top:0; color:var(--muted); }
.workflow-step > h3 { font-size:12px; font-weight:600; }
.workflow-step > p { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.6; }
.workflow code { font:11px/1.5 var(--mono); overflow-wrap:anywhere; }
.workflow-outcomes { margin-top:8px; display:grid; gap:9px; border-left:1px solid var(--line); padding-left:12px; }
.outcome { position:relative; font-size:11px; line-height:1.6; }
.outcome::before { content:""; position:absolute; left:-13px; top:8px; width:7px; border-top:1px solid var(--line); }
.outcome-line { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:7px; }
.outcome-line > span { color:var(--muted); }
.outcome small { display:block; font-size:11px; color:var(--muted); }

.dashboard { display:grid; grid-template-columns:268px minmax(0,1fr); gap:16px; align-items:stretch; }
.sidebar { min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.mode-picker { display:flex; gap:5px; padding:8px 9px; border-bottom:1px solid var(--line); }
.mode-picker button { flex:1; font-size:12px; border-color:transparent; }
.mode-picker button[aria-pressed="true"] { background:#e9eef3; border-color:#d3dbe4; font-weight:600; }
.mode-panel { display:flex; flex-direction:column; flex:1; }
.manual-panel { padding:17px; }
.manual-panel h2 { font-size:13px; }
.resource-id { margin-top:6px; font:10px/1.6 var(--mono); color:var(--muted); overflow-wrap:anywhere; }
.manual-description { margin-top:8px; color:#526071; font-size:12px; line-height:1.65; }
.manual-group { margin-top:20px; border-top:1px solid var(--line); padding-top:15px; }
.manual-group h3 { margin-bottom:8px; }
.manual-group label { display:block; margin-bottom:4px; font-size:11px; color:var(--muted); }
.manual-group input { width:100%; min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:#fff; color:inherit; font-size:12px; }
.manual-actions { display:flex; gap:7px; margin-top:9px; }
.manual-actions button { flex:1; padding:7px 6px; font-size:11px; }
.purchase-action { display:flex; gap:8px; }
.purchase-action input { flex:1; }
.purchase-action button { min-width:68px; font-size:12px; background:#273342; border-color:#273342; color:#fff; }
#manual-order-status { display:block; margin-top:5px; font:11px var(--mono); }
#manual-connect { margin-top:10px; font-size:12px; }

.scenario-nav { padding:10px 9px; }
.scenario-nav button { display:block; width:100%; padding:8px 9px; border-color:transparent; background:transparent; text-align:left; font-size:12px; }
.scenario-nav button[aria-pressed="true"] { background:#e9eef3; border-color:#d3dbe4; font-weight:600; }
.scenario { border-top:1px solid var(--line); padding:17px 17px 16px; flex:1; display:flex; flex-direction:column; }
.scenario h2 { font-size:13px; }
.scenario-description { margin-top:8px; color:#4d5b6b; font-size:12px; line-height:1.7; }
.scenario-copy { margin-top:20px; margin-bottom:20px; }
.scenario-copy p { margin-top:6px; color:#526071; font-size:12px; line-height:1.7; }
.primary { width:100%; margin-top:auto; background:#273342; color:#fff; border-color:#273342; padding:9px 14px; font-size:12px; font-weight:600; }
.primary:hover:not(:disabled) { background:#3b4b5d; }

.terminal { min-width:0; min-height:590px; overflow:hidden; border:1px solid #2b3643; border-radius:6px; background:#141b23; color:#d5dde7; display:flex; flex-direction:column; }
.terminal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; background:#1e2732; min-height:39px; }
.terminal-header h2 { font:600 12px/16px var(--mono); }
#playback-state { font:10px/16px var(--mono); color:#a8b7c7; }
.inventory-bar { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 18px; padding:12px 15px; border-bottom:1px solid #2a3543; font:11px/1.5 var(--mono); color:#a8b7c7; }
.inventory-values { display:flex; flex-wrap:wrap; gap:6px 18px; }
.inventory-values strong { font-weight:500; color:#d5dde7; font-variant-numeric:tabular-nums; }
#stock-caption { font-size:10px; margin-left:auto; color:#91a2b6; }
.terminal-controls { min-height:42px; display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:8px 14px; border-bottom:1px solid #2a3543; }
.terminal-controls button,.terminal-controls select { background:#202a37; color:#d5dde7; border:1px solid #3b495b; font:10px var(--mono); padding:4px 7px; }
.terminal-controls button:hover:not(:disabled) { background:#354355; }
.terminal-controls label { font:10px var(--mono); display:flex; align-items:center; gap:5px; margin-left:4px; color:#a8b7c7; }
.terminal-controls .follow { margin-left:auto; }
#follow { margin:0; }
.log { height:410px; flex:1 1 410px; min-height:0; max-height:440px; overflow:auto; padding:12px 15px; font:11px/1.95 var(--mono); scrollbar-color:#455365 #141b23; overscroll-behavior:contain; overflow-anchor:none; }
#log-placeholder { color:#899bad; }
.log-line { white-space:pre; min-width:max-content; }
.log-time,.log-sequence { color:#91a2b6; }
.log-line[data-level="ok"] .log-level,.log-line[data-level="ok"] .log-code { color:#8fceaa; }
.log-line[data-level="rejected"] .log-level,.log-line[data-level="rejected"] .log-code { color:#f18f92; }
.log-line[data-level="info"] .log-level,.log-line[data-level="info"] .log-code { color:#e4c88d; }
.log-data { color:#a7b6c8; }
.terminal-footer { margin-top:auto; border-top:1px solid #2a3543; padding:9px 15px; color:#a9b8c8; font:10px/1.5 var(--mono); }
.log-summary { display:flex; justify-content:space-between; gap:5px 10px; flex-wrap:wrap; }

.results { margin-top:8px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#verification { font:11px var(--mono); color:#a9b8c8; }
#verification.pass { color:#8fceaa; }
#verification.fail { color:#f18f92; }
#check-details { margin-top:5px; font-size:11px; }
#check-details summary { cursor:pointer; color:#a9b8c8; }
#assertions { list-style:none; padding:0; margin:0; font-size:11px; }
#assertions li { margin:3px 0; color:#8fceaa; overflow-wrap:anywhere; }
#assertions .failed { color:#f18f92; }
.metadata { font:10px/1.6 var(--mono); color:#a9b8c8; }
.error { color:var(--red); font-size:12px; border:1px solid #ebbec3; background:#fff6f7; padding:12px 16px; margin-top:12px; border-radius:4px; }

@media (max-width:850px) {
  main { padding:18px 16px 28px; }
  .dashboard { grid-template-columns:240px minmax(0,1fr); }
  .workflow-path { grid-template-columns:.8fr 1fr 1.4fr; gap:25px; }
  .workflow-step + .workflow-step::before { left:-21px; }
  .terminal-controls .follow { margin-left:4px; }
  #stock-caption { margin-left:0; }
}
@media (max-width:680px) {
  h1 { font-size:21px; }
  .dashboard { grid-template-columns:1fr; }
  .workflow { padding:16px; }
  .workflow-path { grid-template-columns:1fr; gap:26px; }
  .workflow-step + .workflow-step::before { content:"↓"; left:0; top:-23px; }
  .terminal { min-height:480px; }
  .terminal-header { flex-wrap:wrap; gap:3px 12px; }
  .scenario-nav { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  .scenario-nav button { font-size:11px; min-height:40px; }
  .scenario-copy { margin-top:16px; }
  .log { flex:none; height:350px; }
}
@media (pointer:coarse) {
  .scenario-nav button,.terminal-controls button,.terminal-controls select,.manual-panel button,.mode-picker button { min-height:44px; }
  .terminal-controls select,.manual-group input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }