:root {
  color-scheme: light;
  --ink: #172536;
  --muted: #6b7786;
  --line: #dbe2e8;
  --surface: #ffffff;
  --canvas: #f4f7f9;
  --teal: #087b78;
  --teal-dark: #075e5c;
  --teal-soft: #e4f2f0;
  --orange: #bb681f;
  --orange-soft: #fff1e4;
  --red: #b44b49;
  --red-soft: #fbe9e8;
  --green: #2b7f5b;
  --green-soft: #e5f3eb;
  --shadow: 0 8px 22px rgba(27, 51, 71, .06);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.topbar { min-height: 74px; padding: 14px clamp(18px, 4vw, 52px); background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-lockup, .topbar-meta, .panel-heading, .event-controls, .secret-row, .request-actions, .notice, .device-summary, .selected-event-summary { display: flex; align-items: center; }
.brand-lockup { gap: 12px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 8px; background: var(--teal); color: white; font-weight: 800; letter-spacing: .03em; }
.eyebrow { margin: 0 0 4px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
h2 { margin-bottom: 0; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.topbar-meta { gap: 14px; color: var(--muted); font-size: 12px; }
.loopback-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #b7dfd9; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(8, 123, 120, .12); }
.connection-state { white-space: nowrap; }

.shell { max-width: 1480px; margin: 0 auto; padding: 22px clamp(18px, 4vw, 52px) 48px; }
.notice { gap: 12px; padding: 13px 16px; margin-bottom: 19px; border: 1px solid #bfddd9; border-left: 3px solid var(--teal); background: #fbfefd; border-radius: 7px; }
.notice-icon { width: 20px; height: 20px; border: 1px solid var(--teal); border-radius: 50%; display: grid; place-items: center; color: var(--teal); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.notice strong { display: block; font-size: 12px; }
.notice p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.notice code { margin-left: auto; padding: 5px 8px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 4px; font-size: 11px; white-space: nowrap; }
.workspace-grid { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 19px; align-items: start; }
.sidebar, .main-column { display: grid; gap: 19px; min-width: 0; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { padding: 18px 19px 15px; justify-content: space-between; gap: 12px; }
.setup-panel form, .quick-panel, .activity-panel { padding: 0 19px 19px; }
.setup-panel .panel-heading, .quick-panel .panel-heading, .activity-panel .panel-heading { padding-left: 0; padding-right: 0; }
label { display: block; margin: 0 0 6px; color: #435263; font-size: 11px; font-weight: 700; }
input, select { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #cbd5de; border-radius: 5px; color: var(--ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8, 123, 120, .12); }
form > label:not(:first-child), form > input + label { margin-top: 12px; }
.required { color: var(--red); }
.optional { color: #87929d; font-size: 10px; font-weight: 500; }
.button { min-height: 37px; border: 1px solid transparent; border-radius: 5px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 750; transition: background .15s, border-color .15s, transform .15s; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button-primary { background: var(--teal); color: white; }
.button-primary:hover:not(:disabled) { background: var(--teal-dark); }
.button-secondary { border-color: #bbd8d6; color: var(--teal-dark); background: #f6fcfb; }
.button-secondary:hover:not(:disabled) { background: var(--teal-soft); }
.button-quiet { width: 100%; border-color: var(--line); color: var(--muted); background: #fff; }
.button-quiet:hover:not(:disabled) { color: var(--ink); background: #f7f9fa; }
.setup-panel .button-primary { width: 100%; margin-top: 17px; }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 4px; font-size: 9px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.badge-muted { color: #657281; background: #edf1f4; }
.badge-approved { color: var(--green); background: var(--green-soft); }
.badge-detected { color: var(--teal-dark); background: var(--teal-soft); }
.badge-attention { color: var(--orange); background: var(--orange-soft); }
.badge-failed { color: var(--red); background: var(--red-soft); }
.device-summary { display: grid; gap: 10px; margin-top: 16px; padding: 10px; border: 1px solid #c5e1dc; border-radius: 5px; background: #f6fcfb; color: var(--teal-dark); font-size: 11px; line-height: 1.4; }
.device-summary strong { font-size: 12px; }
.setup-bundle { display: grid; gap: 6px; padding-top: 9px; border-top: 1px solid #cfe4e1; }
.setup-bundle-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.setup-bundle-heading strong { color: var(--ink); font-size: 11px; }
.setup-bundle textarea { width: 100%; min-height: 62px; resize: vertical; padding: 7px; border: 1px solid #cbd5de; border-radius: 5px; color: #536273; background: #fff; font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.setup-bundle p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.quick-panel { padding-bottom: 17px; }
.quick-panel .muted { margin: 0 0 11px; }
.muted, .form-hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.secret-row { gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 5px; background: #f8fafb; }
.secret-row code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #536273; font-size: 10px; }
.icon-button { margin-left: auto; border: 0; color: var(--teal); background: transparent; font-size: 10px; font-weight: 750; }
.icon-button:hover { text-decoration: underline; }
.lock-icon { color: var(--teal); font-size: 13px; }
.text-button { border: 0; padding: 3px 0; color: var(--teal); background: transparent; font-size: 11px; }
.text-button:hover { text-decoration: underline; }
.activity-log { max-height: 216px; margin: 0; padding: 0 0 0 16px; overflow: auto; color: var(--muted); font-size: 11px; }
.activity-log li { padding: 7px 0 7px 3px; border-bottom: 1px solid #eef1f3; line-height: 1.35; }
.activity-log li::marker { color: #9bb2b8; }
.activity-log time { display: block; color: #9aa5af; font-size: 10px; }
.empty-log { list-style: none; padding-left: 0 !important; }

.events-panel { min-height: 420px; }
.events-heading { align-items: flex-start; }
.event-controls { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.event-controls select { width: auto; min-height: 34px; padding-top: 6px; padding-bottom: 6px; font-size: 11px; }
.event-controls .button { min-height: 34px; }
.poll-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.poll-toggle input { width: 14px; min-height: 14px; accent-color: var(--teal); }
.event-stats { display: flex; align-items: flex-end; gap: 23px; padding: 0 19px 15px; border-bottom: 1px solid var(--line); }
.event-stats > div { display: flex; align-items: baseline; gap: 5px; }
.stat-value { font-size: 19px; font-weight: 780; letter-spacing: -.03em; }
.stat-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.stat-approved { color: var(--green); }
.stat-detected { color: var(--teal); }
.stat-attention { color: var(--orange); }
.last-polled { margin-left: auto; color: #98a2ac; font-size: 10px; }
.events-list { padding: 7px 19px 18px; }
.event-row { display: grid; grid-template-columns: 34px minmax(130px, 1.4fr) minmax(94px, .75fr) minmax(94px, .85fr) minmax(106px, 1fr) auto; gap: 10px; align-items: center; min-height: 69px; padding: 9px 10px; border-bottom: 1px solid #edf1f3; border-left: 3px solid transparent; border-radius: 3px; cursor: pointer; transition: background .15s, border-color .15s; }
.event-row:hover { background: #f7fafb; }
.event-row.selected { border-left-color: var(--teal); background: #f2f9f8; }
.event-number { color: #99a5af; font-size: 10px; text-align: center; }
.event-main strong, .event-main span, .event-cell strong, .event-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-main strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); font-size: 12px; }
.event-main span, .event-cell span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.event-cell strong { font-size: 12px; font-weight: 700; }
.event-cell .amount { color: var(--ink); }
.event-status { justify-self: end; }
.empty-state { display: grid; place-items: center; gap: 6px; min-height: 235px; color: var(--muted); text-align: center; font-size: 11px; }
.empty-state strong { color: #556474; font-size: 13px; }
.empty-glyph { color: #88b5b2; font-size: 27px; line-height: 1; }

.request-panel { padding-bottom: 19px; }
.selected-event-summary { gap: 10px; min-height: 47px; margin: 0 19px 16px; padding: 9px 11px; border: 1px dashed #bad4d1; border-radius: 5px; color: var(--teal-dark); background: #f8fdfc; font-size: 11px; }
.empty-selection { border-color: #d6dfe5; color: var(--muted); background: #fafbfc; }
.selection-mark { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font-weight: 700; }
.selected-event-summary strong { color: var(--ink); }
.request-form { padding: 0 19px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.wide-field { grid-column: 1 / -1; }
.input-with-suffix { display: flex; align-items: center; }
.input-with-suffix input { border-radius: 5px 0 0 5px; }
.input-with-suffix span { min-height: 37px; padding: 10px 9px; border: 1px solid #cbd5de; border-left: 0; border-radius: 0 5px 5px 0; color: var(--muted); background: #f5f7f8; font-size: 11px; }
.receipt-summary { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.request-actions { gap: 14px; margin-top: 17px; align-items: center; }
.form-hint { margin: 0; }
.result-banner { margin: 16px 19px 0; padding: 11px 12px; border: 1px solid #bddfd5; border-radius: 5px; color: var(--green); background: var(--green-soft); font-size: 11px; line-height: 1.45; }
.result-banner.error { border-color: #efc1be; color: var(--red); background: var(--red-soft); }
.result-banner code { color: inherit; font-size: 10px; }
.request-tracker { margin: 17px 19px 0; padding: 12px; border: 1px solid #c7dfdc; border-radius: 6px; background: #f8fdfc; }
.tracker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tracker-heading .eyebrow { margin: 0; }
.tracker-updated { color: #91a09f; font-size: 10px; }
.tracker-grid { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 9px; align-items: center; margin-top: 10px; }
.tracker-step { display: grid; gap: 5px; min-width: 0; padding: 10px; border: 1px solid #d9e7e5; border-radius: 5px; background: white; }
.tracker-step-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.tracker-step strong { overflow: hidden; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tracker-step .badge { justify-self: start; }
.tracker-connector { color: #8db6b1; font-size: 18px; text-align: center; }
.tracker-detail { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.hidden { display: none !important; }

@media (max-width: 1040px) {
  .workspace-grid { grid-template-columns: 285px minmax(0, 1fr); }
  .event-row { grid-template-columns: 26px minmax(118px, 1.3fr) minmax(88px, .75fr) auto; }
  .event-row .event-cell:nth-of-type(2), .event-row .event-cell:nth-of-type(3) { display: none; }
}
@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .topbar-meta { align-items: flex-end; flex-direction: column; gap: 7px; }
  .notice { align-items: flex-start; flex-wrap: wrap; }
  .notice code { margin-left: 32px; }
  .workspace-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .setup-panel { grid-row: span 2; }
  .activity-panel { grid-column: 2; }
  .event-stats { gap: 14px; flex-wrap: wrap; }
  .last-polled { width: 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  .shell { padding: 15px 12px 32px; }
  .topbar { padding: 13px 14px; }
  .topbar-meta { display: none; }
  .sidebar { display: grid; grid-template-columns: 1fr; }
  .setup-panel { grid-row: auto; }
  .activity-panel { grid-column: auto; }
  .panel-heading { padding: 15px 14px 13px; }
  .setup-panel form, .quick-panel, .activity-panel { padding-left: 14px; padding-right: 14px; }
  .events-heading { display: block; }
  .event-controls { margin-top: 13px; justify-content: flex-start; }
  .events-list { padding-left: 9px; padding-right: 9px; }
  .event-row { grid-template-columns: 23px minmax(0, 1fr) auto; gap: 8px; }
  .event-row .event-cell { display: none; }
  .event-status { grid-column: 3; }
  .event-stats { padding-left: 14px; padding-right: 14px; }
  .selected-event-summary, .request-form { margin-left: 14px; margin-right: 14px; }
  .request-form { padding: 0; }
  .request-tracker { margin-left: 14px; margin-right: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .request-actions { align-items: flex-start; flex-direction: column; }
  .request-actions .button { width: 100%; }
  .tracker-grid { grid-template-columns: 1fr; }
  .tracker-connector { transform: rotate(90deg); }
}