.macro-workspace { container-type: inline-size; min-width: 0; color: #cbd9d3; background: #0c1210; border: 1px solid #263b32; border-radius: 8px; }
#macro-panel-container.macro-workspace { margin: 0; padding: 10px; box-sizing: border-box; }
#macro-panel-container.macro-workspace[data-dock="matrix"] { display: block; width: 100%; margin-bottom: 12px; }
.macro-workspace #macro-panel { padding: 0; border: 0; margin: 0; background: none; }
.macro-workspace #macro-panel-content { display: block; padding: 0; }
.macro-workspace-header, .macro-performance-head, .macro-performance-foot, .macro-pad-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.macro-workspace-header { margin-bottom: 10px; padding: 0; background: none; border: 0; }
.macro-workspace-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.macro-workspace-header > label { justify-self: end; min-width: 0; }
#macro-file-tools { display: contents; font-size: 11px; }
#macro-file-tools > summary { grid-column: 2; grid-row: 1; cursor: pointer; color: #b3d7c2; }
.macro-workspace-header > label { grid-column: 3; grid-row: 1; }
.macro-file-tools-body { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: 8px 0 2px; }
#macro-file-tools:not([open]) > .macro-file-tools-body { display: none; }
.macro-file-tools-body > select { width: 100%; }
.macro-file-tools-body > button { grid-column: 2; justify-self: start; }
.macro-file-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
@container (min-width: 600px) {
  .macro-file-tools-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .macro-file-tools-body > select { width: 160px; }
  .macro-file-actions { margin: 0; }
}
.macro-workspace-header > strong { color: #8ee6b9; font-size: 14px; }
.macro-workspace-header label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #9cb3a7; }
.macro-workspace button, .macro-workspace select, .macro-mapping-editor button:not(.transfer-curve-button), .macro-mapping-editor input, .macro-mapping-editor select { font: inherit; color: #d0e1d7; background: #17221c; border: 1px solid #344d40; border-radius: 4px; box-sizing: border-box; }
.macro-workspace button, .macro-mapping-editor button:not(.transfer-curve-button) { cursor: pointer; padding: 4px 7px; flex: 0 0 auto; width: auto; margin: 0; }
.macro-workspace button:hover, .macro-mapping-editor button:not(.transfer-curve-button):hover { border-color: #74cfa1; background: #23392d; }
.macro-workspace :focus-visible, .macro-mapping-editor :focus-visible { outline: 2px solid #72e6a7; outline-offset: 2px; }
.macro-workspace button:disabled, .macro-mapping-editor :disabled { opacity: .45; cursor: default; }
.macro-workspace select { min-width: 0; max-width: 100%; font-size: 11px; padding: 4px; }
.macro-workspace-preset { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 10px; }
.macro-workspace-preset .macro-preset-controls { display: flex; flex: 1; gap: 3px; min-width: 0; }
.macro-workspace-preset select { flex: 1; width: 0; }
.macro-workspace-preset > label { display: none; }
.macro-workspace #datamosh-macro-preset-scope[aria-pressed="true"] { color: #b6ffcf; border-color: #67bf90; background: #284835; }
.macro-preset-popover { position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; padding: 13px; border: 1px solid #578b69; border-radius: 7px; color: #d0e1d7; background: #101913; box-shadow: 0 12px 40px #0009; font: 12px system-ui, sans-serif; }
.macro-preset-popover > strong { display: block; color: #9ae6b7; font-size: 13px; }
.macro-preset-popover .macro-preset-profile-title { margin-top: 12px; font-size: 11px; color: #a9b6b9; }
.macro-preset-description { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #bccbc2; }
@container (max-width: 440px) {
  .macro-workspace-preset .macro-preset-controls { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; row-gap: 5px; }
  .macro-workspace-preset select { width: 100%; }
  #datamosh-macro-preset-scope { grid-column: 1 / 3; justify-self: start; }
}
.macro-workspace-performance { display: grid; gap: 10px; }
.macro-gamepad-editor { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 20px; border: 1px solid #496254; border-radius: 10px; background: #172019; color: #e1ece5; color-scheme: dark; }
.macro-gamepad-editor::backdrop { background: #000a; }
.macro-gamepad-editor form { display: grid; gap: 12px; }
.macro-gamepad-editor header, .macro-gamepad-editor footer, .macro-gamepad-directions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.macro-gamepad-editor h2 { margin: 0; font-size: 18px; }
.macro-gamepad-editor p { margin: 0; font-size: 12px; line-height: 1.5; color: #aec3b6; }
.macro-gamepad-editor label { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.macro-gamepad-editor select { min-width: 0; flex: 1; width: 100%; }
.macro-gamepad-editor button { width: auto; margin: 0; }
.macro-gamepad-axes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.macro-gamepad-preview { position: relative; width: 110px; height: 110px; border: 1px solid #56715f; background: linear-gradient(transparent 49.5%, #56715f 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #56715f 50%, transparent 50.5%); justify-self: center; }
.macro-gamepad-preview span { position: absolute; width: 10px; height: 10px; background: #7bf1b3; border-radius: 50%; transform: translate(-50%, -50%); }
.macro-gamepad-editor output { font-size: 12px; text-align: center; }
.macro-gamepad-editor [data-error] { color: #ffb6a6; }
.macro-workspace .macro-bank-selectors { display: grid; gap: 7px; width: 100%; max-width: none; }
.macro-bank-selector { min-width: 0; }
.macro-bank-heading { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 3px; }
.macro-bank-heading > label { color: #9cb3a7; font-size: 10px; flex-shrink: 0; }
.macro-workspace .macro-bank-heading select { min-width: 0; width: 0; flex: 1; padding: 2px; font-size: 10px; height: 23px; box-sizing: border-box; margin: 0; }
.macro-bank-controls { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px 22px; gap: 3px; }
.macro-workspace .macro-bank-controls select { width: 100%; }
.macro-workspace .macro-bank-controls button { padding: 3px; }
.macro-mapping-table .macro-mapping-bank th { padding-top: 16px; color: #8ee6b9; font-weight: 600; }
@container (min-width: 720px) {
  .macro-workspace .macro-bank-selectors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .macro-bank-heading { min-height: 23px; }
}
.macro-workspace #mod-matrix-macro-station { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 6px; }
.macro-performance-card { padding: 7px 9px; min-width: 0; border: 1px solid #293d32; border-radius: 5px; background: #121c16; }
.macro-performance-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; font-weight: 600 !important; text-align: left; border-color: transparent !important; background: none !important; padding: 0 !important; }
.macro-performance-value { font-size: 12px; font-variant-numeric: tabular-nums; color: #8ce4b6; }
.macro-value-live { text-align: right; }
.macro-editor-audition .macro-value-live { flex-shrink: 0; white-space: nowrap; }
.macro-performance-name { flex: 1; min-width: 0; }
.macro-workspace .macro-performance-routing { padding: 2px 4px; font-size: 10px; color: #9cb3a7; background: transparent; border-color: transparent; }
.macro-workspace .macro-performance-routing.has-routing-lock { color: #9ce9bb; border-color: #436e55; }
.macro-routing-dialog { position: fixed; inset: 76px 14px auto auto; margin: 0; width: min(500px, calc(100vw - 28px)); max-height: calc(100dvh - 92px); overflow: auto; box-sizing: border-box; padding: 16px; z-index: 10001; color: #d5e6dc; background: #111c16; border: 1px solid #577560; border-radius: 8px; box-shadow: 0 12px 40px #0009; font: 12px system-ui, sans-serif; color-scheme: dark; }
.macro-routing-dialog header, .macro-routing-dialog footer, .macro-routing-audition { display: flex; align-items: center; gap: 8px; }
.macro-routing-dialog header { justify-content: space-between; margin-bottom: 12px; }
.macro-routing-dialog h2 { margin: 0; font-size: 17px; }
.macro-routing-dialog h3 { margin: 14px 0 6px; color: #9ce9bb; font-size: 12px; }
.macro-routing-dialog p { margin: 9px 0; font-size: 12px; line-height: 1.5; color: #afc5b8; }
.macro-routing-dialog button, .macro-routing-dialog select { font: inherit; box-sizing: border-box; border: 1px solid #3a5143; border-radius: 4px; color: #d5e6dc; background: #19271e; padding: 5px 6px; margin: 0; }
.macro-routing-dialog button { width: auto; cursor: pointer; }
.macro-routing-dialog select { min-width: 0; width: 100%; }
.macro-routing-dialog > label { display: grid; gap: 5px; }
.macro-routing-dialog :focus-visible { outline: 2px solid #72e6a7; outline-offset: 2px; }
.macro-routing-audition { margin: 8px 0; }
.macro-routing-audition input { width: 100%; min-width: 0; accent-color: #65d99a; }
.macro-routing-dialog output { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.macro-routing-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(130px, 1.15fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #2a3b30; }
.macro-routing-row strong { display: block; overflow-wrap: anywhere; font-size: 11px; font-weight: 500; }
.macro-routing-row small { color: #9cb3a7; font-size: 10px; }
.macro-routing-row label { display: flex; align-items: center; gap: 3px; font-size: 10px; }
.macro-routing-row input { width: auto; margin: 0; accent-color: #65d99a; }
.macro-routing-dialog .macro-routing-error { color: #ffb9a6; }
.macro-routing-error:empty { display: none; }
.macro-routing-signals { display: grid; gap: 6px; margin: 14px 0; }
.macro-routing-signals > div { display: grid; grid-template-columns: minmax(0, 1fr) 70px 34px; align-items: center; gap: 7px; font-size: 10px; color: #a6bcaf; }
.macro-routing-signals meter { width: 100%; height: 8px; }
.macro-routing-signals button { padding: 0; border: 0; background: none; text-align: left; color: inherit; font-size: 10px; }
.macro-routing-signals button:hover { color: #9ce9bb; text-decoration: underline; }
.macro-routing-dialog footer { flex-wrap: wrap; border-top: 1px solid #2a3b30; padding-top: 12px; }
.macro-routing-info { margin: 10px 0; font-size: 11px; color: #afc5b8; }
.macro-routing-info summary { cursor: pointer; }
.macro-routing-defaults > label { display: flex; align-items: center; gap: 6px; margin: 10px 0 7px; color: #afc5b8; }
.macro-routing-defaults > label input { width: auto; margin: 0; accent-color: #65d99a; }
.macro-routing-branches { display: grid; gap: 6px; min-width: 0; }
.macro-routing-branches > button { justify-self: start; }
.macro-routing-branch { min-width: 0; padding: 7px 0; border-bottom: 1px solid #2a3b30; }
.macro-routing-branch-main { display: grid; grid-template-columns: minmax(0, 1fr) 78px auto; gap: 7px; align-items: end; }
.macro-routing-branch-main > select { height: 29px; }
.macro-routing-branch-main label { display: grid; gap: 3px; color: #afc5b8; font-size: 10px; }
.macro-routing-dialog input[type="number"] { min-width: 0; width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #3a5143; border-radius: 4px; color: #d5e6dc; background: #19271e; font: inherit; }
.macro-routing-shape { margin-top: 5px; font-size: 11px; color: #afc5b8; }
.macro-routing-shape summary { cursor: pointer; }
.macro-routing-shape-controls { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) auto minmax(82px, 1.3fr); align-items: end; gap: 8px; padding-top: 8px; }
.macro-routing-shape-controls > label { display: grid; gap: 4px; min-width: 0; font-size: 10px; }
.macro-routing-shape-controls input[type="checkbox"] { margin: 0; width: 16px; height: 28px; accent-color: #65d99a; }
.macro-routing-shape-controls .transfer-curve-button { width: 100%; }
.macro-routing-shape-controls .transfer-curve-button svg { width: 45px; height: 22px; }
.macro-routing-row { grid-template-columns: minmax(90px, 1fr) minmax(80px, 1fr) auto; }
.macro-routing-row button { font-size: 10px; white-space: normal; }
[data-routing-param] > .macro-routing-branches { margin: 4px 0 10px 6px; padding-left: 8px; border-left: 2px solid #436e55; }
@media (max-width: 540px) {
  .macro-routing-branch-main { grid-template-columns: minmax(0, 1fr) 70px auto; gap: 5px; }
  .macro-routing-shape-controls { grid-template-columns: 1fr 1fr; }
  .macro-routing-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 540px) {
  .macro-routing-dialog { inset: 8px 8px auto auto; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .macro-routing-row { grid-template-columns: minmax(0, 1fr) auto; }
  .macro-routing-row > div { grid-column: 1 / -1; }
}
.macro-workspace .mod-matrix-macro-slider, .macro-editor-audition .mod-matrix-macro-slider { width: 100%; min-width: 0; height: 20px; margin: 3px 0; accent-color: #65d99a; cursor: pointer; }
.macro-performance-foot button { padding: 2px 4px; font-size: 10px; border-color: transparent; background: transparent; color: #9cb3a7; }
.macro-performance-add { font-size: 11px !important; min-height: 26px; align-self: center; }
.macro-workspace-pads { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.macro-workspace-pad { min-width: 0; position: relative; }
.macro-pad-add { grid-column: 1 / -1; min-height: 28px; font-size: 11px !important; }
.macro-workspace-pad.is-unassigned .macro-xy-pad::after { content: 'Assign X / Y below'; position: absolute; inset: 0; display: grid; place-content: center; padding: 8px; text-align: center; font-size: 10px; color: #8da99a; pointer-events: none; }
.macro-workspace-pad.is-unassigned .macro-xy-pad-handle { visibility: hidden; }
.macro-pad-title { font-size: 11px; margin-bottom: 5px; color: #9cb3a7; gap: 4px; }
.macro-pad-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.macro-pad-title details { position: static; }
.macro-workspace summary { cursor: pointer; }
.macro-pad-title summary { list-style: none; color: #95caae; padding: 3px; }
.macro-pad-settings { position: absolute; right: 0; top: 23px; z-index: 12; width: min(217px, calc(200% + 8px)); box-sizing: border-box; padding: 10px; display: grid; gap: 8px; border: 1px solid #49775c; border-radius: 5px; background: #17221c; box-shadow: 0 8px 24px #0009; }
.macro-workspace-pad:nth-child(odd) .macro-pad-settings { right: auto; left: 0; }
.macro-pad-settings label { display: grid; grid-template-columns: 14px 1fr; align-items: center; }
.macro-pad-settings select { width: 100%; }
.macro-workspace .macro-xy-pad { --macro-xy-handle-inset: 6px; width: 100% !important; height: auto !important; aspect-ratio: 1; max-height: 140px; border: 1px solid #3c604b; border-radius: 5px; background: linear-gradient(transparent 49.5%, #31543b 50%, transparent 50.5%), linear-gradient(90deg, transparent 49.5%, #31543b 50%, transparent 50.5%), #111e16; touch-action: none; position: relative; }
.macro-workspace .macro-xy-pad-handle { width: 10px; height: 10px; border-radius: 50%; background: #8cf4b6; box-shadow: 0 0 6px #79ff9b55; position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.macro-pad-axis-labels { display: grid; gap: 2px; font-size: 10px; margin-top: 5px; }
.macro-pad-axis-labels > span { display: flex; gap: 4px; min-width: 0; }
.macro-pad-axis-labels strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; flex: 1; }
.macro-pad-axis-labels output { font-variant-numeric: tabular-nums; color: #9de2b8; }
.macro-pad-axis-labels > label { display: flex; align-items: center; gap: 3px; min-width: 0; }
.macro-pad-axis-labels select { flex: 1; width: 0; font-size: 10px; margin: 0; }
.macro-pad-title > button { font-size: 9px; padding: 2px 3px; margin-left: auto; }
.macro-bank-heading > button { margin-left: auto; padding: 2px 4px; font-size: 10px; }
.macro-recipe-labels { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 5px; }
.macro-recipe-labels button { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; font-size: 9px; }
.macro-recipe-labels .is-bypassed, .macro-editor-recipe.is-bypassed > strong { opacity: .5; }
.macro-editor-recipes { display: grid; gap: 5px; margin: 0 0 14px; }
.macro-editor-recipes > button { justify-self: start; }
.macro-editor-recipe { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 0; border-bottom: 1px solid #293d32; }
.macro-editor-recipe > :first-child { flex: 1; min-width: 150px; }
.macro-recipe-action-status:empty { display: none; }
.macro-mapping-recipe-name { display: block; color: #8fa79a; font-size: 10px; margin-bottom: 5px; }
.macro-recipe-browser { position: fixed; inset: 12px 12px 12px auto; margin: 0; z-index: 10020; color-scheme: dark; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; box-sizing: border-box; background: #101913; color: #d0e1d7; border: 1px solid #578b69; border-radius: 10px; padding: 16px; box-shadow: 0 12px 50px #0008; font: 12px system-ui, sans-serif; }
.macro-recipe-browser[open] { display: flex; flex-direction: column; gap: 12px; }
.macro-recipe-browser > header, .macro-recipe-destination { flex: none; }
.macro-recipe-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 1px 4px 4px 1px; }
.macro-recipe-browser header, .macro-recipe-browser footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0; background: none; border: 0; }
.macro-recipe-browser h2 { font-size: 18px; margin: 0; color: #9ae6b7; }
.macro-recipe-browser p { line-height: 1.5; margin: 6px 0; }
.macro-recipe-browser button, .macro-recipe-browser select, .macro-recipe-browser input { font: inherit; border: 1px solid #344d40; background: #17221c; color: #d0e1d7; border-radius: 4px; padding: 7px; box-sizing: border-box; min-width: 0; margin: 0; width: auto; }
.macro-recipe-browser button { cursor: pointer; }
.macro-recipe-browser button:hover, .macro-recipe-browser button[aria-pressed="true"] { background: #284835; border-color: #74cfa1; }
.macro-recipe-browser :disabled { opacity: .45; cursor: default; }
.macro-recipe-browser :focus-visible { outline: 2px solid #72e6a7; outline-offset: 2px; }
.macro-recipe-browser label { display: grid; gap: 4px; }
.macro-recipe-browser select, .macro-recipe-browser input { width: 100%; }
.macro-recipe-target-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.macro-recipe-audition { display: flex; gap: 10px; align-items: center; min-height: 30px; margin-top: 6px; }
.macro-recipe-audition output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: #9ae6b7; }
.macro-recipe-audition input[type="range"] { flex: 1; padding: 0; accent-color: #6ad99b; }
.macro-recipe-browser small { color: #a2b7a9; line-height: 1.4; }
.macro-recipe-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.macro-recipe-set { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 6px; }
.macro-recipe-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.macro-recipe-parts button { text-align: left; }
.macro-recipe-parts small { display: block; color: #a2b7a9; margin-top: 5px; }
.macro-recipe-browser details > summary { cursor: pointer; color: #a2b7a9; padding: 3px 0; }
.macro-recipe-replacing { display: flex; align-items: center; gap: 8px; color: #e1bf7c; }
.macro-recipe-replacing span { flex: 1; }
.macro-recipe-actions { display: grid; gap: 8px; }
.macro-recipe-actions [data-apply-recipe] { background: #244735; border-color: #65ab81; }
.macro-recipe-actions [role="status"]:empty { display: none; }
.macro-recipe-stack, .macro-recipe-set-tools { border-top: 1px solid #304c38; padding-top: 10px; }
.macro-recipe-stack-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 5px; padding: 6px 0; }
.macro-recipe-stack-row > span { overflow-wrap: anywhere; }
.macro-recipe-stack-row.is-bypassed > span { opacity: .5; }
.macro-recipe-stack-row > button { padding: 4px 6px; }
.macro-recipe-conflicts ul { padding-left: 20px; max-height: 150px; overflow: auto; overflow-wrap: anywhere; }
.macro-recipe-warning, .macro-recipe-browser [role="status"] { color: #e1bf7c; }
.macro-recipe-browser footer { margin-top: 16px; flex-wrap: wrap; }
.macro-recipe-browser [hidden] { display: none !important; }
@container (min-width: 600px) {
  .macro-workspace-performance { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .macro-workspace-performance:has(.has-many-pads) { grid-template-columns: minmax(0, 1fr); }
  .macro-workspace-pads.has-many-pads { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .macro-workspace-pads.has-many-pads .macro-pad-settings { width: 100%; }
  .macro-workspace-preset { max-width: 520px; }
}
.macro-mapping-editor { width: min(1140px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 18px; box-sizing: border-box; color: #d0dfd6; background: #101913; border: 1px solid #578b69; border-radius: 10px; box-shadow: 0 24px 100px #000b; font: 12px system-ui, sans-serif; overflow: auto; }
.macro-mapping-editor::backdrop { background: #020a06aa; }
.macro-editor-header { background: none; padding: 0; border: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.macro-editor-header h2 { margin: 0; color: #9ae6b7; font-size: 18px; }
.macro-editor-header p { margin: 4px 0 14px; font-size: 12px; color: #a2b7a9; }
.macro-editor-config { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.macro-editor-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #a7bdaf; }
.macro-editor-field input, .macro-editor-field select { padding: 5px; max-width: 180px; min-width: 0; }
.macro-editor-config input[type="number"] { width: 70px; }
.macro-editor-audition { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 8px 12px; border: 1px solid #304c38; border-radius: 5px; }
.macro-editor-value { min-width: 42px; text-align: right; color: #9de2b8; font-variant-numeric: tabular-nums; }
.macro-editor-add { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; margin-bottom: 14px; }
.macro-editor-add > label { display: grid; gap: 5px; font-size: 11px; }
.macro-editor-add input { width: 100%; padding: 7px; }
.macro-mapping-target select { padding: 7px; }
#macro-mapping-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px; grid-column: 1 / -1; }
#macro-mapping-results:empty { display: none; }
#macro-mapping-results button { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.macro-mapping-table-wrap { overflow: auto; }
.macro-mapping-table { width: 100%; min-width: 860px; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.macro-mapping-table th { text-align: left; font-size: 10px; color: #9bbca8; font-weight: 500; padding: 6px; }
.macro-mapping-table td { padding: 7px 6px; vertical-align: top; border-top: 1px solid #2b4734; }
.macro-mapping-table th:first-child { width: 22%; }
.macro-mapping-table th:nth-child(6) { width: 64px; }
.macro-mapping-table th:nth-child(7) { width: 100px; }
.macro-mapping-table th:nth-child(8) { width: 27px; }
.macro-mapping-table input[type="number"], .macro-mapping-table select { width: 100%; min-width: 0; padding: 5px; }
.macro-mapping-table input[type="checkbox"] { accent-color: #65d99a; margin: 6px 0; }
.macro-mapping-destination strong { display: block; overflow-wrap: anywhere; margin-bottom: 5px; font-size: 12px; font-weight: 500; color: #c5e3cf; }
.macro-mapping-destination select { width: auto; max-width: 100%; font-size: 10px; padding: 2px 4px; }
.macro-mapping-status { display: block; font-size: 10px; color: #8fa79a; margin-top: 4px; }
.macro-mapping-table .is-selected { background: #1b3223; }
.macro-mapping-table .is-overridden .macro-mapping-status { color: #e1bf7c; }
.macro-mapping-table tr[data-unavailable] .macro-mapping-status { color: #e1bf7c; }
.macro-mapping-live { color: #a2e4b8; font-variant-numeric: tabular-nums; padding-top: 14px !important; }
.macro-mapping-extra td { padding-top: 0; border-top: 0; }
.macro-mapping-extra summary { cursor: pointer; font-size: 10px; color: #96ae9e; }
.macro-mapping-extra-controls { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.macro-mapping-extra-controls input[type="number"] { width: 95px; }
.macro-mapping-extra-controls input[type="checkbox"] { align-self: start; }
.macro-editor-footer { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-top: 14px; border-top: 1px solid #2b4734; padding-top: 12px; font-size: 11px; color: #9eb4a6; }
.macro-editor-footer button { white-space: nowrap; }
@media (max-width: 600px) { .macro-mapping-editor { padding: 12px; } .macro-editor-footer { align-items: start; flex-direction: column; } }
.macro-search-context, .mod-matrix-destination-context {
  display: block;
  margin-top: 3px;
  color: #b9afa0;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.35;
}
.mod-matrix-destination-context[hidden] { display: none; }