* { box-sizing: border-box; }
/* Hide scrollbars: macOS overlay scrollbars fade in/out and flake screenshot tests. */
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e7ecf4; background: #0b0e14; font-size: 13px; color-scheme: dark; }
body { margin: 0; padding: 22px 28px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .4; }
button, input, select { border-radius: 6px; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #edb059; outline-offset: 3px; }
.lab { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lab-heading { display: grid; gap: 6px; }
.lab-heading strong { font-size: 10px; color: #edb059; letter-spacing: 2px; }
.lab-heading span { color: #a4afc1; font-size: 12px; }
.concepts { display: flex; gap: 6px; padding: 5px; background: #151a24; border: 1px solid #293142; border-radius: 9px; }
.concepts button { border: 0; background: transparent; color: #98a5b9; padding: 10px 12px; font-weight: 650; }
.concepts button span { margin-left: 7px; }
.concepts button[aria-pressed="true"] { color: #2a2008; background: #edb059; }
.scenario-label { display: flex; gap: 10px; align-items: center; color: #a4afc1; }
.scenario-label select { background: #151a24; color: #e7ecf4; border: 1px solid #354055; padding: 9px; }
.lab-button { background: #151a24; color: #e7ecf4; border: 1px solid #354055; padding: 9px 12px; font-weight: 650; }
/* Notices: full-width rows between the toolbar and the workspace (firmware / app
   update). One grid: icon · text · progress · actions, 11px/600 like .daq-status. */
.notices { display: grid; gap: 8px; padding: 0 22px; }
.notices:not(:empty) { padding-top: 12px; }
.notice { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--text); }
.notice svg { width: 16px; height: 16px; display: block; stroke: var(--muted); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.notice-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-detail { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 500; color: var(--muted); }
.notice-progress { display: inline-flex; align-items: center; gap: 10px; }
.notice-progress .track { display: block; width: 160px; height: 6px; border-radius: 3px; background: var(--field); border: 1px solid var(--border); overflow: hidden; }
.notice-progress .fill { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s linear; }
.notice-progress .pct { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 500; font-size: 10px; color: var(--muted); min-width: 64px; }
.notice-actions { display: inline-flex; align-items: center; gap: 8px; }
.notice-actions .primary { padding: 7px 14px; font-size: 11px; }
.notice-actions .secondary { padding: 6px 11px; font-size: 11px; font-weight: 600; }
.notice-actions .dismiss { width: 24px; height: 22px; padding: 0; display: inline-grid; place-items: center; }
.notice-actions .dismiss svg { width: 9px; height: 9px; stroke: var(--text); stroke-width: 1.3; }
.notice.accent { background: #33260f; border-color: #5e441f; color: #f0c79a; }
.notice.accent svg { stroke: var(--accent); }
.notice.accent .notice-detail { color: #c2a983; }
.notice.busy svg { stroke: var(--accent); }
.notice.ok { background: #15291f; border-color: #28503b; }
.notice.ok svg { stroke: var(--success); }
.notice.err { background: #33201a; border-color: #5e3421; }
.notice.err svg { stroke: #ee996d; }
.notice.err .notice-detail { color: #e9b39a; }
/* Modal (QR picker): scrim + 420px card in the panel vocabulary. */
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(11, 14, 20, .62); z-index: 20; }
.modal-card { width: 420px; max-width: calc(100vw - 48px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px 18px; box-shadow: 0 22px 60px #0007; display: grid; gap: 10px; }
.modal-card h3 { margin: 0; font-size: 14px; font-weight: 650; }
.modal-card .muted { margin: 0 0 4px; }
.qr-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.qr-choices li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--field); cursor: pointer; }
.qr-choices li:hover, .qr-choices li[aria-checked="true"] { border-color: var(--accent); }
.qr-choices .ring { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; display: grid; place-items: center; }
.qr-choices li[aria-checked="true"] .ring { border-color: var(--accent); background: var(--accent); }
.qr-choices li[aria-checked="true"] .ring::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2d2a26; }
.qr-choices .uri { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-choices .idx { font-size: 10px; color: var(--muted); flex: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.modal-actions .primary { padding: 9px 18px; font-size: 12px; }
.modal-actions .secondary { padding: 8px 14px; font-size: 12px; }
.simulation { margin-left: auto; font-size: 9px; letter-spacing: 1.3px; color: #c2a983; border: 1px solid #5a4932; border-radius: 4px; padding: 7px; }
.concept-description { color: #8c9aae; margin: 16px 0 20px; }
.app { --surface: #121720; --panel: #171e29; --field: #10151e; --border: #2a3444; --text: #e7ecf4; --muted: #9ba9bd; --accent: #edb059; --accent-h: #f2c880; --success: #80dbad; --hair: rgba(255,255,255,.06); --row-hover: #172234; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px #0005; }
.toolbar { min-height: 70px; display: flex; align-items: center; gap: 28px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand strong { font-size: 22px; letter-spacing: -.8px; }
.brand strong span { color: var(--accent); }
.brand-icon { width: 26px; height: 26px; border-radius: 6px; display: block; }
.version { color: var(--muted); font-size: 10px; margin-left: 5px; }
.workspace-title { border-left: 1px solid var(--border); padding-left: 25px; color: var(--muted); }
.panel-toggle { position: absolute; top: 50%; left: 300px; transform: translate(-50%, -50%); z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 48px; background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 7px; font-size: 14px; line-height: 1; font-weight: 700; box-shadow: 0 2px 10px #0004; }
.panel-toggle:hover { color: var(--accent); border-color: var(--accent); }
.app[data-sidebar="collapsed"] .panel-toggle { left: 0; transform: translate(0, -50%); border-radius: 0 7px 7px 0; border-left: 0; }
.app[data-concept="bench"] .panel-toggle { left: auto; right: 310px; transform: translate(50%, -50%); }
.app[data-concept="bench"][data-sidebar="collapsed"] .panel-toggle { right: 0; transform: translate(0, -50%); border-radius: 7px 0 0 7px; border-right: 0; }
.app[data-concept="console"] .panel-toggle { top: 32px; left: auto; right: 22px; transform: none; width: 32px; height: 32px; border-radius: 7px; }
.app[data-concept="console"][data-sidebar="collapsed"] .panel-toggle { top: 32px; left: auto; right: 22px; transform: none; border-radius: 7px; border: 1px solid var(--border); }
.toolbar-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
#connection-status { color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-right: 7px; }
.dot.live, .dot.ready { background: var(--success); }
.dot.error { background: #ee996d; }
.dot.connecting { background: var(--accent); }
.primary { background: var(--accent); color: #2d2a26; border: 0; padding: 10px 23px; font-weight: 700; }
.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 9px 12px; }
.workspace { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 630px; transition: grid-template-columns .2s ease; }
.app[data-sidebar="collapsed"] .setup { display: none; }
.app[data-sidebar="collapsed"] .workspace { grid-template-columns: minmax(0, 1fr); }
.setup { padding: 28px 22px; background: var(--panel); border-right: 1px solid var(--border); }
.section-title { display: flex; justify-content: space-between; align-items: center; }
h2 { font-size: 14px; margin: 0; font-weight: 650; }
.eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.section-title.stacked { flex-direction: column; align-items: flex-start; gap: 3px; }
.sub-label { font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.setup .sep-top { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 18px; }
.muted, .field-hint { color: var(--muted); font-size: 11px; line-height: 1.6; }
.setup-intro { margin: 7px 0 22px; }
.setup-sep { height: 1px; background: var(--border); margin: 13px 0 20px; }
.setup label:not(.check) { display: grid; gap: 8px; font-size: 11px; font-weight: 600; margin-bottom: 17px; }
.setup select, .setup input:not([type="checkbox"]) { width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 10px; }
.setup label.inline-field { display: flex; align-items: center; gap: 10px; }
.setup label.inline-field input { width: 96px; }
.setup label.inline-field .unit { font-size: 10px; font-weight: 400; color: var(--muted); }
.device-card { display: grid; gap: 9px; padding: 14px; margin: 0 0 19px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.device-card strong { font-size: 12px; }
.device-card button { text-align: center; font-size: 11px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 11px; margin: 12px 0; }
input[type="checkbox"] { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; }
.field-hint { margin: -5px 0 20px 22px; font-size: 10px; }
details { border-top: 1px solid var(--border); padding: 14px 0; }
summary { cursor: pointer; font-size: 12px; font-weight: 600; }
summary span { font-size: 10px; color: var(--muted); font-weight: 400; float: right; }
details[open] summary { margin-bottom: 16px; }
.recording { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.recording .section-title { margin-bottom: 15px; }
.file-input { display: flex; gap: 8px; }
.file-input input { flex: 1; min-width: 0; }
.file-input button { white-space: nowrap; }
.protocols .section-title { margin: 0 0 15px; }
.sidebar-note { margin-top: 16px; color: var(--muted); font-size: 10px; }
.file-list { display: grid; gap: 8px; margin-bottom: 12px; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; }
.file-node { color: var(--muted); font-size: 10px; }
.file-name { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.file-badge { margin-left: auto; font-size: 9px; letter-spacing: .6px; color: var(--accent); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.load-btn { width: 100%; text-align: center; font-size: 11px; margin-bottom: 14px; }
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tabs button { border: 0; background: transparent; color: var(--muted); font-weight: 650; padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.banner { background: #33260f; border: 1px solid #5e441f; color: #f0c79a; padding: 12px 14px; border-radius: 7px; font-size: 11px; margin-bottom: 20px; }
.tx-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.tx-form label { display: grid; gap: 8px; font-size: 11px; font-weight: 600; }
.tx-form label.wide { grid-column: 1 / -1; }
.tx-form label.num-field { max-width: 90px; }
.tx-form input, .tx-form select, .tx-source select { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 10px; border-radius: 6px; width: 100%; }
.tx-form input::placeholder { font-style: italic; font-weight: 300; }
.tx-layout { display: grid; grid-template-columns: auto 160px auto minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr; gap: 14px 10px; align-items: center; grid-template-areas: "slabel sfield . forms" "title title title forms" "single single single forms" "plabel pfield punit forms" "send send send forms" ". . . forms"; margin-bottom: 24px; }
.tx-flabel { grid-area: slabel; font-size: 11px; font-weight: 600; }
#tx-mode { grid-area: sfield; width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 10px; border-radius: 6px; }
.tx-forms { grid-area: forms; align-self: stretch; min-width: 0; margin-left: 14px; border-left: 1px solid var(--border); padding-left: 24px; }
.tx-timing-title { grid-area: title; font-size: 11px; font-weight: 600; }
.tx-single { grid-area: single; }
.tx-plabel { grid-area: plabel; display: flex; align-items: center; gap: 10px; }
.tx-ilabel { font-size: 11px; font-weight: 600; }
#tx-interval { grid-area: pfield; width: 100%; text-align: right; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 9px; border-radius: 6px; }
.tx-unit { grid-area: punit; font-size: 11px; color: var(--muted); }
.tx-send { grid-area: send; justify-self: center; display: grid; gap: 8px; justify-items: center; text-align: center; }
.tx-send button { width: 210px; white-space: nowrap; }
.tx-layout.period-off .tx-ilabel, .tx-layout.period-off .tx-unit, .tx-layout.period-off #tx-interval { opacity: .5; }
.tx-log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; max-height: 150px; overflow-y: auto; scrollbar-width: none; }
.tx-log::-webkit-scrollbar { display: none; }
.tx-log li { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; height: 30px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--hair); transition: opacity 2s linear; }
.tx-log li:last-child { border-bottom: 0; }
.tx-log li.fading { opacity: 0; }
.tx-log li.muted { font-family: inherit; }
.tx-log .tx-time { color: var(--muted); }
.radio { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); }
.radio input { accent-color: var(--accent); }
#tx-raw { display: flex; flex-direction: column; gap: 14px; }
#tx-pdo { display: flex; flex-direction: column; gap: 14px; }
#pdo-node { width: 190px; }
#pdo-sel { width: 180px; }
.tx-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.tx-form label.tx-inline { display: flex; align-items: center; gap: 10px; }
#tx-id { width: 150px; }
#tx-dlc { width: 70px; }
.job-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; max-height: 150px; overflow-y: auto; scrollbar-width: none; }
.job-list::-webkit-scrollbar { display: none; }
.job-list li { font-size: 11px; height: 30px; box-sizing: border-box; padding: 0 8px 0 12px; display: flex; align-items: center; border-bottom: 1px solid var(--hair); }
.job-list li:last-child { border-bottom: 0; }
.job-row { display: flex; align-items: center; gap: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.job-row span { flex: 1; }
.stop-btn { font-size: 10px; padding: 3px 10px; }
.pdo-map-editor { display: grid; gap: 10px; max-width: 600px; }
.pdo-map-label { font-size: 11px; font-weight: 600; }
.pdo-map-label small { font-weight: 400; margin-left: 6px; }
.pdo-mapping { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pdo-mapping li { font-size: 11px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.pdo-map-row { display: flex; align-items: center; gap: 12px; }
.pdo-map-obj { flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pdo-map-remove { width: 24px; height: 24px; font-size: 11px; }
.pdo-map-add { display: flex; gap: 10px; align-items: center; }
.pdo-map-add select { flex: 1; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 9px; border-radius: 6px; }
.daq-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; padding: 10px 12px; margin-bottom: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; white-space: nowrap; }
.daq-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.daq-conn { display: inline-flex; align-items: center; color: var(--muted); }
.daq-conn .dot { margin-right: 8px; }
.daq-conn.on { color: var(--text); }
.daq-sep { width: 1px; height: 18px; background: var(--border); }
.daq-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 500; color: var(--muted); }
.daq-mode { font-weight: 650; letter-spacing: .6px; padding: 4px 8px; }
.daq-mode.daq { color: var(--accent); border-color: var(--accent); }
.daq-mode.observed { color: #cfe38f; border-color: #51611f; }
.daq-stats.overrun { color: #ee996d; }
.daq-actions { display: inline-flex; gap: 8px; align-items: center; justify-self: end; }
.daq-actions .secondary { padding: 7px 11px; font-size: 11px; font-weight: 600; }
.daq-actions .primary { padding: 8px 14px; font-size: 11px; width: 150px; white-space: nowrap; }
.daq-actions .primary.running { background: var(--panel); color: var(--text); border: 1px solid var(--accent); }
.daq-header { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 20px; }
.daq-source { display: grid; gap: 8px; font-size: 11px; font-weight: 600; flex: 1; min-width: 200px; }
.daq-source select, .daq-event select { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 10px; border-radius: 6px; width: 100%; }
.daq-event { display: grid; gap: 8px; font-size: 11px; font-weight: 600; flex: 0 0 220px; min-width: 0; }
.daq-rate { display: grid; gap: 8px; font-size: 11px; font-weight: 600; flex: 0 0 110px; min-width: 0; }
.daq-rate input { width: 100%; min-width: 0; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 9px; border-radius: 6px; text-align: right; }
.daq-rate input:disabled { opacity: .5; }
/* Table: header + rows share one grid so painter-style fixed columns stay aligned. */
.daq-cols, .daq-list li.daq-row { display: grid; grid-template-columns: minmax(0, 1fr) 118px 112px 112px 56px 72px 72px 104px 58px; gap: 0 12px; align-items: center; }
.daq-cols { margin-top: 12px; padding: 0 8px 6px 12px; font-size: 9px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.daq-cols .num, .daq-row .daq-phys, .daq-row .daq-min { text-align: right; }
/* Min | Max: hairline divider centred in the 12px grid gap between the two cells. */
.daq-cols .daq-max, .daq-row .daq-max { text-align: left; border-left: 1px solid var(--border); margin-left: -6px; padding-left: 6px; }
.daq-list { margin-top: 0; max-height: 210px; }
.daq-list li.daq-row { font-family: inherit; gap: 0 12px; }
.daq-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daq-row .daq-name { font-weight: 650; }
.daq-file { color: var(--muted); font-size: 10px; margin-left: 6px; }
.daq-row .daq-event-cell, .daq-row .daq-raw, .daq-row .daq-phys, .daq-row .daq-min, .daq-row .daq-max { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.daq-row .daq-event-cell { color: var(--muted); }
.daq-row .daq-raw { color: var(--muted); }
.daq-row .daq-phys { color: var(--accent); font-weight: 700; }
.daq-row .daq-unit, .daq-row .daq-min, .daq-row .daq-max { color: var(--muted); font-size: 10px; }
.daq-row .daq-trend { display: flex; align-items: center; }
.daq-row .daq-trend svg { width: 96px; height: 18px; display: block; }
.daq-row .daq-trend polyline { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.daq-row.stale .daq-phys { color: var(--muted); font-weight: 500; }
.daq-row.stale .daq-trend polyline { stroke: var(--muted); }
.daq-row .daq-tools { display: inline-flex; gap: 4px; justify-content: flex-end; }
.daq-tools button { width: 24px; height: 22px; padding: 0; font-size: 11px; line-height: 1; }
.daq-log { margin-top: 12px; max-height: 180px; }
.daq-log .daq-dir { font-size: 9px; letter-spacing: .5px; font-weight: 650; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); min-width: 34px; text-align: center; }
.daq-log .daq-dir.cro { color: #9fb0c6; background: #1a2330; }
.daq-log .daq-dir.res { color: var(--success); background: #15291f; border-color: #28503b; }
.daq-log .daq-dir.err { color: #ee996d; background: #33201a; border-color: #5e3421; }
.daq-log .daq-dir.ev { color: #f0c79a; background: #33260f; border-color: #5e441f; }
.daq-log .daq-detail { color: var(--muted); }
.daq-log-tools { display: inline-flex; align-items: center; gap: 10px; }
.daq-log-tools .toggle[aria-pressed="true"] { border-color: var(--accent); }
.daq-log .daq-dir.daq { color: #cfe38f; background: #1a2330; border-color: #51611f; }
.daq-advanced { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 14px; }
.daq-advanced summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 650; color: var(--muted); }
.daq-advanced summary::-webkit-details-marker { display: none; }
.daq-advanced summary::before { content: '▸'; font-size: 10px; }
.daq-advanced[open] summary::before { content: '▾'; }
.daq-advanced summary span { font-weight: 400; }
.daq-adv { display: grid; gap: 10px; margin-top: 14px; }
.daq-adv-row { display: flex; align-items: center; gap: 10px; }
.daq-adv-label { width: 80px; font-size: 11px; font-weight: 600; }
.daq-adv input { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 7px 9px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.daq-adv input::placeholder { font-style: normal; color: var(--muted); opacity: .7; }
.daq-adv-addr { width: 130px; }
.daq-adv-num { width: 64px; }
.daq-adv-data { width: 260px; }
.daq-adv .secondary { padding: 6px 12px; font-size: 11px; font-weight: 600; }
.sniffer-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin-top: 10px; align-items: start; }
.sniffer-side { display: grid; grid-template-columns: 220px 210px; gap: 16px; align-items: stretch; }
.sniffer-inspector { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--panel); }
.sniffer-inspector .eyebrow { display: block; margin-bottom: 12px; }
.sniffer-decoder { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--panel); display: flex; flex-direction: column; }
.sniffer-decoder .eyebrow { display: block; margin-bottom: 10px; }
.decode-sep { height: 1px; background: var(--border); margin: 14px 0; }
.decode-list { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 11px; margin: 0; }
.decode-list dt { color: var(--muted); }
.decode-list dd { margin: 0; text-align: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text); }
.decode-list dd .mult-input { width: 84px; background: var(--field); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 11px; text-align: right; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.decode-list dd .mult-input:hover, .decode-list dd .mult-input:focus { border-color: var(--accent); outline: none; }
.decode-ascii { margin-top: 10px; }
.decode-ascii .sub-label { display: block; margin-bottom: 5px; }
.decode-ascii code { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; color: var(--accent); background: var(--field); border: 1px solid var(--border); border-radius: 5px; padding: 7px 8px; word-break: break-all; }
.decode-opt { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.inspect-head { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; margin-bottom: 12px; }
.bit-grid { display: grid; gap: 7px; }
.bit-byte { display: grid; grid-template-columns: 26px 26px 1fr; gap: 8px; align-items: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; cursor: pointer; padding: 2px 4px; margin: 0 -4px; border-radius: 5px; }
.bit-byte.selected { background: #172234; }
.bit-idx { color: var(--muted); font-size: 10px; }
.bit-hex { color: var(--accent); }
.bit-bits { display: flex; gap: 2px; }
.bit-bits i { width: 13px; text-align: center; font-style: normal; color: var(--muted); background: var(--field); border: 1px solid var(--border); border-radius: 3px; font-size: 10px; }
.bit-bits i.on { color: #2d2a26; background: var(--accent); border-color: var(--accent); }
#sniffer-table tbody tr { cursor: pointer; }
#sniffer-table tbody tr.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sniffer-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sniffer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.sniffer-head .sniffer-count { font-size: 11px; color: var(--muted); }
.sniffer-send .eyebrow { flex-basis: 100%; margin-bottom: 2px; }
.snf-field { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
.sniffer-send input { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 7px 8px; border-radius: 5px; font-size: 11px; }
.sniffer-bytes { display: flex; gap: 4px; }
.byte-input { width: 34px; text-align: center; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.sniffer-tx-scroll { flex-basis: 100%; max-height: 220px; scrollbar-width: none; }
.sniffer-tx-scroll::-webkit-scrollbar { display: none; }
#sniffer-tx-table { width: 100%; }
#sniffer-tx-table .tx-data { width: 100%; }
#sniffer-tx-table th, #sniffer-tx-table td { padding: 6px 8px; text-align: left; vertical-align: middle; }
#sniffer-tx-table th:not(:last-child), #sniffer-tx-table td:not(:last-child) { border-right: 1px solid var(--border); }
#sniffer-tx-table .tx-control { width: 1%; text-align: center; white-space: nowrap; }
#sniffer-tx-table .tx-actions { width: 1%; white-space: nowrap; text-align: right; }
.tx-act { border: none; background: none; color: var(--muted); font-size: 12px; line-height: 1; padding: 5px 7px; border-radius: 5px; cursor: pointer; }
.tx-act:hover { background: var(--field); color: var(--text); }
.tx-play:hover { color: var(--accent); }
.tx-del:hover { color: #f08aa0; }
#sniffer-tx-table tr.running .tx-play { color: #2d2a26; background: var(--accent); }
#sniffer-tx-table tr.running .tx-play:hover { background: var(--accent-h); }
#sniffer-tx-table .tx-no { color: var(--muted); }
#sniffer-tx-table input { background: var(--field); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 6px 7px; font-size: 11px; }
#sniffer-tx-table .tx-id { width: 72px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--accent); text-align: right; }
#sniffer-tx-table .tx-period { width: 80px; text-align: right; }
#sniffer-tx-table .tx-dlc { width: 40px; text-align: right; }
#sniffer-tx-add { flex: 0 0 auto; font-size: 11px; }
.plot-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.plot-tab { border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 11px; padding: 6px 12px; border-radius: 6px; }
.plot-tab[aria-selected="true"] { color: #2d2a26; background: var(--accent); border-color: var(--accent); }
#plots-panel { display: flex; flex-direction: column; min-height: 540px; }
.plots-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "toolbar ." "chart picker"; gap: 12px 16px; flex: 1; min-height: 0; }
.plot-chart { grid-area: chart; display: flex; flex-direction: column; min-width: 0; }
.plot-toolbar { grid-area: toolbar; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.plot-tool-sep { width: 1px; height: 20px; background: var(--border); }
.plot-zoom { padding: 6px 12px; font-size: 13px; line-height: 1; }
.plot-toolbar select { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 7px 8px; border-radius: 6px; font-size: 11px; }
.plot-canvas { position: relative; border: 1px solid var(--border); border-radius: 8px; background: var(--field); padding: 6px; flex: 1; min-height: 240px; touch-action: none; }
.plot-canvas.zoomed { cursor: grab; }
.plot-canvas.panning { cursor: grabbing; }
#plot-svg { display: block; width: 100%; height: 100%; }
.plot-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
#plot-svg .grid { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
#plot-svg .axis { fill: var(--muted); font-size: 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
#plot-svg .series { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
#plot-svg .threshold { stroke: #ee996d; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.plot-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.sig-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.plot-picker { grid-area: picker; border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.plot-picker .search { margin-bottom: 10px; flex: none; }
.plot-signals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; flex: 1; min-height: 0; overflow-y: auto; padding: 2px; align-content: start; }
.plot-signal { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); font-size: 11px; padding: 7px 8px; border-radius: 6px; }
.plot-signal:hover { background: var(--row-hover); }
.plot-signal[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.plot-signal .sig-label { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-signal .sig-unit { color: var(--muted); font-size: 10px; }
.objects-toolbar { display: flex; gap: 14px; align-items: end; margin-bottom: 18px; }
.objects-toolbar > label:first-child { display: grid; gap: 8px; font-size: 11px; font-weight: 600; }
.objects-toolbar select { background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 10px; border-radius: 6px; font-size: 12px; }
.objects-toolbar select:hover, .objects-toolbar select:focus { border-color: var(--accent); }
.obj-search { flex: 1; }
.obj-tree { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; max-height: 560px; overflow: auto; }
.obj-root-label { font-weight: 650; font-size: 12px; padding: 5px 6px; border-bottom: 1px solid var(--border); }
.obj-root-label, .obj-group-head { cursor: pointer; user-select: none; border-radius: 4px; }
.obj-root-label:hover, .obj-group-head:hover { background: var(--row-hover); }
.obj-root-label:hover .obj-caret, .obj-group-head:hover .obj-caret { color: var(--accent); }
.obj-caret { display: inline-block; width: 16px; margin-right: 2px; color: var(--muted); font-size: 15px; text-align: center; }
.obj-group-head { font-size: 11px; font-weight: 600; color: var(--text); padding: 4px 4px 3px; border-bottom: 1px solid var(--border); }
.obj-group-range { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; color: var(--text); }
.obj-group-name { font-style: italic; font-weight: 400; color: var(--muted); margin-left: 6px; }
.obj-leaf { display: grid; grid-template-columns: minmax(0, 1fr) 34px auto auto; gap: 14px; align-items: center; padding: 3px 6px; font-size: 11px; border-bottom: 1px solid var(--hair); }
.obj-leaf:hover { background: var(--row-hover); }
.obj-leaf.cyclic-active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.obj-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.obj-idx { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; font-size: 11px; color: var(--text); }
.obj-name { font-style: italic; font-weight: 400; color: var(--muted); font-size: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-value-cell { display: grid; grid-template-columns: 118px 34px; align-items: center; gap: 8px; }
.obj-value-input { width: 100%; background: var(--field); color: var(--accent); border: 1px solid var(--border); padding: 6px 8px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-align: right; }
.obj-value-input.text { text-align: left; font-family: inherit; font-style: italic; }
.obj-value-input:not(.invalid):hover, .obj-value-input:not(.invalid):focus, .cyc-ms:hover, .cyc-ms:focus { border-color: var(--accent); outline: none; }
.obj-value-input[readonly] { color: var(--muted); opacity: .85; }
.obj-value-input.dirty { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.obj-value-input.invalid { border-color: #e8836b; color: #e8836b; box-shadow: inset 2px 0 0 #e8836b; }
.obj-value-input.flash { animation: flashField .5s ease; }
.obj-unit { font-size: 10px; color: var(--muted); text-align: left; }
@keyframes flashField { 0% { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { border-color: var(--border); box-shadow: none; } }
.access { font-size: 8px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 0; border-radius: 4px; border: 1px solid var(--border); width: 34px; text-align: center; }
.access-ro { color: #9fb0c6; }
.access-rw { color: #8fe3c0; border-color: #1f5740; }
.access-wo { color: #f0c79a; border-color: #5e441f; }
.obj-actions { display: flex; gap: 5px; align-items: center; }
.cyc-field { display: flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--border); }
.cyc-ms { width: 48px; background: var(--field); color: var(--text); border: 1px solid var(--border); padding: 4px 5px; border-radius: 5px; font-size: 10px; text-align: right; }
.cyc-unit { font-size: 9px; color: var(--muted); }
.icon-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 26px; height: 26px; border-radius: 5px; font-size: 12px; display: grid; place-items: center; }
.icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cyc-btn[aria-pressed="true"] { background: var(--accent); color: #06232c; border-color: var(--accent); }
.monitor { padding: 28px 30px 16px; display: flex; flex-direction: column; min-width: 0; }
.monitor-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
h1 { margin: 7px 0 0; font-size: 25px; font-weight: 650; letter-spacing: -.6px; }
.tag { font-size: 10px; border: 1px solid var(--border); padding: 6px 9px; color: var(--muted); border-radius: 5px; }
.monitor-tools { display: flex; gap: 12px; }
.search { display: flex; align-items: center; gap: 12px; flex: 1; background: var(--field); border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; }
.search:hover, .search:focus-within { border-color: var(--accent); }
.search:hover span, .search:focus-within span { color: var(--accent); }
.search span { color: var(--muted); font-size: 22px; }
.search input { width: 100%; padding: 11px 0; border: 0; background: transparent; color: var(--text); font-size: 12px; }
input::placeholder { color: var(--muted); }
.view-label { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); margin-top: 25px; padding-bottom: 14px; }
.view-label span { font-size: 11px; color: var(--muted); }
.empty-state { text-align: center; margin: auto; padding: 60px 10px; max-width: 500px; }
.empty-icon { width: 72px; height: 72px; display: grid; place-items: center; font-size: 36px; color: var(--accent); background: var(--panel); border: 1px solid var(--border); border-radius: 20px; margin: 0 auto 24px; }
.empty-state h2 { font-size: 22px; margin-top: 12px; letter-spacing: -.4px; }
.empty-state p { color: var(--muted); line-height: 1.8; max-width: 350px; margin: 12px auto 22px; }
.empty-steps { display: flex; justify-content: center; gap: 20px; margin-top: 38px; font-size: 10px; color: var(--muted); }
.empty-steps b { border: 1px solid var(--border); border-radius: 50%; padding: 3px 6px; margin-right: 5px; font-size: 9px; }
.monitor-bottom { display: flex; justify-content: space-between; margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 10px; }
footer { border-top: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 10px; background: var(--panel); }
.footer-brand { display: inline-flex; flex-direction: column; gap: 2px; margin-right: 2px; line-height: 1.3; }
.kodezine-mark { height: 22px; width: auto; display: block; }
.footer-right { margin-left: auto; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.metrics > div { padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 7px; display: grid; gap: 12px; }
.metrics strong { font-size: 28px; font-weight: 600; }
.metrics small { font-size: 12px; color: var(--muted); }
.load-track { height: 4px; background: var(--border); border-radius: 3px; }
.load-track i { display: block; width: 12.4%; height: 4px; background: var(--accent); }
.legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 10px; }
.type-chip { font-size: 9px; letter-spacing: .6px; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; font-weight: 650; border: 1px solid transparent; cursor: pointer; }
.type-chip[aria-pressed="false"] { background: transparent; color: var(--muted); }
.type-heartbeat { color: #8fe3c0; background: #15372a; border-color: #1f5740; }
.type-pdo { color: #8fc9f0; background: #16293c; border-color: #244a6b; }
.type-sdo { color: #d7bdf3; background: #2a2140; border-color: #45376b; }
.type-nmt { color: #f0c79a; background: #3a2b18; border-color: #664626; }
.type-sync { color: #8fe0e3; background: #15333a; border-color: #1f5057; }
.type-time { color: #aeb4ef; background: #1c1e3a; border-color: #3a3f6b; }
.type-emcy { color: #f0a0a0; background: #3a1818; border-color: #6b2d2d; }
.type-xcp { color: #cfe38f; background: #28330f; border-color: #51611f; }
.table-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 11px; text-align: left; }
th { color: var(--muted); font-weight: 500; padding: 12px 12px; background: var(--panel); position: sticky; top: 0; border-bottom: 1px solid var(--border); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 13px 12px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #0e131c; }
tbody tr:hover { background: #172234; }
td.time, td.id, td.payload { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
td.id { color: var(--accent); }
td.node { color: var(--muted); }
.chip { display: inline-block; font-weight: 650; }
.chip.dir-rx, .chip.dir-tx { font-size: 9px; letter-spacing: .5px; padding: 3px 7px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.chip.dir-rx { color: #9fb0c6; background: #1a2330; border: 1px solid var(--border); }
.chip.dir-tx { color: #f0c79a; background: #33260f; border: 1px solid #5e441f; }
.chip.type-heartbeat, .chip.type-pdo, .chip.type-sdo, .chip.type-nmt { font-size: 9px; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; border: 1px solid transparent; }
td[data-density] { }
table[data-density="compact"] th { padding: 7px 12px; }
table[data-density="compact"] td { padding: 6px 12px; }
table[data-density="compact"] .chip.type-heartbeat, table[data-density="compact"] .chip.type-pdo, table[data-density="compact"] .chip.type-sdo, table[data-density="compact"] .chip.type-nmt, table[data-density="compact"] .chip.dir-rx, table[data-density="compact"] .chip.dir-tx { padding: 1px 6px; }
.sample-note { margin: 14px 0; color: var(--muted); font-size: 10px; }
[hidden] { display: none !important; }
.app[data-concept="bench"] { --surface: #faf8f5; --panel: #f3efe9; --field: #ffffff; --border: #ede9e4; --text: #2d2a26; --muted: #5a5450; --accent: #edb059; --accent-h: #f2c880; --success: #4e8c5a; --hair: rgba(0,0,0,.05); --row-hover: #f3efe9; color-scheme: light; }
.app[data-concept="bench"] .primary { color: #2d2a26; }
.app[data-concept="bench"] .obj-value-input { color: #9a6f15; }
.app[data-concept="bench"] td.id { color: #9a6f15; }
.app[data-concept="bench"] .workspace { grid-template-columns: minmax(0, 1fr) 310px; }
.app[data-concept="bench"][data-sidebar="collapsed"] .workspace { grid-template-columns: minmax(0, 1fr); }
.app[data-concept="bench"] .setup { grid-column: 2; grid-row: 1; border-right: 0; border-left: 1px solid var(--border); }
.app[data-concept="bench"] .monitor { grid-column: 1; grid-row: 1; }
.app[data-concept="console"] { --surface: #111719; --panel: #192225; --field: #101618; --border: #304045; --accent: #9bdd9f; --muted: #a1b5b6; }
.app[data-concept="console"] .workspace { display: flex; flex-direction: column; }
.app[data-concept="console"] .setup { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 22px; border-right: 0; border-bottom: 1px solid var(--border); padding: 18px 22px; }
.app[data-concept="console"][data-sidebar="collapsed"] .setup { display: none; }
.app[data-concept="console"] .setup > .section-title { grid-column: 1 / -1; }
.app[data-concept="console"] .setup-intro, .app[data-concept="console"] .sidebar-note { display: none; }
.app[data-concept="console"] .connection-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-content: start; }
.app[data-concept="console"] .device-card { grid-row: span 3; }
.app[data-concept="console"] .recording { border-top: 0; padding-top: 0; }
.app[data-concept="console"] .protocols .section-title { margin-top: 0; }
.app[data-concept="console"] .monitor { min-height: 500px; }
.app[data-concept="console"] .empty-state { padding: 32px 10px; }
@media (max-width: 900px) {
  body { padding: 14px; }
  .lab { gap: 12px; }
  .simulation { margin-left: 0; }
  .version, .workspace-title { display: none; }
  .workspace, .app[data-concept="bench"] .workspace { grid-template-columns: 250px minmax(0, 1fr); }
  .app[data-concept="bench"] .setup, .app[data-concept="bench"] .monitor { grid-column: auto; grid-row: auto; }
  .monitor { padding: 22px 16px; }
  .empty-steps { gap: 10px; flex-wrap: wrap; }
  .metrics { gap: 6px; }
  .metrics > div { padding: 10px; }
  .app[data-concept="console"] .setup { grid-template-columns: 1fr 1fr; }
  .app[data-concept="console"] .connection-fields { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .workspace, .app[data-concept="bench"] .workspace { display: flex; flex-direction: column; }
  .setup { border-right: 0; border-bottom: 1px solid var(--border); }
  .toolbar { padding: 12px; gap: 10px; }
  .brand strong { font-size: 18px; }
  .toolbar-actions { gap: 8px; }
  .toolbar-actions .primary { padding: 9px 12px; }
  .concepts { width: 100%; }
  .concepts button { flex: 1; padding: 8px 5px; }
  .concepts button span { margin-left: 3px; font-size: 11px; }
  .monitor { min-height: 500px; }
  footer { flex-wrap: wrap; gap: 10px; }
  .footer-right { margin-left: 0; }
  .tabs { flex-wrap: wrap; }
  .tx-layout { grid-template-columns: 1fr; grid-template-areas: "slabel" "sfield" "forms" "title" "single" "plabel" "pfield" "punit" "send"; }
  .tx-forms { border-left: 0; padding-left: 0; margin-left: 0; }
}