:root { --bg:#f4f6f5; --surface:#fff; --ink:#14201d; --muted:#586763; --line:#d6dedb; --accent:#0d6b57; --accent-soft:#dff0ea; --warn:#8a5a00; --warn-soft:#fbefd0; --bad:#a1301f; --bad-soft:#f8e1dc; --info:#1f5a8a; --info-soft:#dfecf7;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color-scheme:light }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1816; --surface:#16231f; --ink:#e6eeeb; --muted:#9db0aa; --line:#2a3b36; --accent:#4fc4a6; --accent-soft:#143229; --warn:#e5b44f; --warn-soft:#352a10; --bad:#f08a78; --bad-soft:#3a1d18; --info:#7db6e6; --info-soft:#14293a; color-scheme:dark } }
[hidden] { display:none !important }
* { box-sizing:border-box } html,body { margin:0 } body { background:var(--bg); color:var(--ink); font:15px/1.5 var(--sans) }
button,input,select { font:inherit; color:inherit } button { background:var(--surface); border:1px solid var(--line); padding:6px 12px; cursor:pointer } button:hover { border-color:var(--accent) } button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
input,select { background:var(--surface); border:1px solid var(--line); padding:7px 9px; min-width:0 }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px max(16px,3vw); background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap }
.brand b { font-size:1.05rem; margin-right:10px } .brand span { color:var(--muted); font:500 .78rem var(--mono); text-transform:uppercase; letter-spacing:.07em }
.live { display:flex; align-items:center; gap:10px; font:500 .8rem var(--mono); color:var(--muted) } .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite } .live.paused .dot { background:var(--warn); animation:none }
@keyframes pulse { 50% { opacity:.25 } } @media (prefers-reduced-motion: reduce) { .dot { animation:none } }
.envbar { padding:10px max(16px,3vw); font-weight:600; border-bottom:2px solid; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline }
.envbar small { font-weight:400; opacity:.9 } .env-SIMULATION,.env-RAILS_OFF { background:var(--warn-soft); border-color:var(--warn); color:var(--warn) } .env-MTN_SANDBOX { background:var(--info-soft); border-color:var(--info); color:var(--info) } .env-MTN_PRODUCTION { background:var(--bad-soft); border-color:var(--bad); color:var(--bad) }
main { padding:20px max(16px,3vw) 60px; max-width:1240px; margin:0 auto } .gate { max-width:520px } .gate form { display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); padding:24px }
h1 { margin:0 0 4px; font-size:1.5rem } h2 { margin:0 0 10px; font-size:1.1rem } h3 { margin:18px 0 8px; font-size:.95rem } p { margin:0; max-width:75ch } .fine { color:var(--muted); font-size:.85rem } .error { color:var(--bad) }
label { font:500 .78rem var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
nav[role=tablist] { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:16px } nav button { border:0; border-bottom:3px solid transparent; background:none; padding:9px 14px } nav button[aria-selected=true] { border-bottom-color:var(--accent); font-weight:600 }
.panel { display:flex; flex-direction:column; gap:14px; min-width:0 }
.counters { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px } .counters button { text-align:left; padding:10px 12px; display:flex; flex-direction:column; gap:2px } .counters b { font:600 1.5rem/1.1 var(--mono) } .counters span { font:500 .7rem var(--mono); color:var(--muted); letter-spacing:.06em } .counters button[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft) }
.scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--line) } table { border-collapse:collapse; width:100%; font-size:.88rem } th,td { padding:7px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap } td.wrap { white-space:normal; min-width:220px }
th { font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--muted) } td.n,th.n { text-align:right; font-variant-numeric:tabular-nums } td.mono,.mono { font-family:var(--mono); font-size:.82rem } tbody tr[data-id] { cursor:pointer } tbody tr[data-id]:hover { background:var(--accent-soft) }
@keyframes flash { from { background:var(--warn-soft) } } tr.changed { animation:flash 2.5s } @media (prefers-reduced-motion: reduce) { tr.changed { animation:none } }
.pill { font:500 .7rem var(--mono); padding:3px 7px; letter-spacing:.04em; display:inline-block } .s-SUCCESSFUL,.ok { background:var(--accent-soft); color:var(--accent) } .s-SUBMITTED,.s-PENDING { background:var(--info-soft); color:var(--info) } .s-RETRY_WAIT,.warn { background:var(--warn-soft); color:var(--warn) } .s-ON_HOLD,.s-EXPIRED,.s-CANCELLED,.bad { background:var(--bad-soft); color:var(--bad) }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:end } .row > div { display:flex; flex-direction:column; gap:3px }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px } .card { background:var(--surface); border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0 } .card h3 { margin:0 } .card p { color:var(--muted); font-size:.88rem }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:.9rem } .kv dt { color:var(--muted) } .kv dd { margin:0; word-break:break-all }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--surface); border-left:1px solid var(--line); padding:18px; overflow:auto; box-shadow:-8px 0 24px rgba(0,0,0,.18); z-index:5 }
.timeline { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:10px; border-left:2px solid var(--line); margin-left:6px } .timeline li { padding-left:14px; position:relative } .timeline li::before { content:''; position:absolute; left:-6px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--accent) }
.empty { color:var(--muted); padding:18px; background:var(--surface); border:1px dashed var(--line) }
@media (max-width:560px) { .drawer { width:100% } }