@font-face {
  font-family: "Pacc Roboto";
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }
pacc-step-flow, pacc-field, pacc-alert, pacc-data-table, pacc-checklist, pacc-entity-selector, pacc-selection-context, pacc-text-input, pacc-textarea-input, pacc-check-input, pacc-radio-input, pacc-file-input { display: block; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font: 1rem/1.5 "Pacc Roboto", Roboto, system-ui, sans-serif;
}

button, input { font: inherit; }

button, input[type="submit"] { min-height: 2.75rem; }

button:focus-visible, input:focus-visible, a.primary-action:focus-visible {
  outline: 0.2rem solid var(--color-focus);
  outline-offset: 0.15rem;
}

.app-shell {
  display: grid;
  grid-template-rows: 5.25rem minmax(0, 1fr) auto;
  min-height: 100vh;
}

.top-nav, .bottom-nav {
  position: sticky;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  background: var(--color-surface);
}

.top-nav { top: 0; border-bottom: 1px solid var(--color-border); }
.bottom-nav { bottom: 0; border-top: 1px solid var(--color-border); }

.context-button {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.5rem;
  min-width: 13rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

.context-button:disabled { cursor: default; opacity: 1; }
.context-icon { grid-row: 1 / 3; align-self: center; width: 2rem; height: 2rem; color: var(--color-brand); }
.context-label { color: var(--color-text-muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.context-value { grid-column: 2; font-weight: 700; }
.top-spacer { flex: 1; }

.view-identity { display: grid; grid-template-columns: 2.75rem 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 0.75rem; min-width: 16rem; padding-left: 0.25rem; }
.portal-link { grid-row: 1 / 3; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius-control); color: var(--color-brand); }
.portal-link:hover { background: var(--color-surface-muted); }
.portal-link:focus-visible { outline: 0.2rem solid var(--color-focus); outline-offset: 0.15rem; }
.portal-link svg { width: 2rem; height: 2rem; }
.view-name { align-self: end; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.035em; }
.view-subtitle { align-self: start; color: var(--color-text-muted); font-size: 0.8rem; white-space: nowrap; }
.modal-view-identity { grid-template-columns: 3rem 1fr; width: 100%; min-width: 0; margin: -0.25rem 0 1.25rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
.modal-view-identity .portal-link { width: 3rem; height: 3rem; background: var(--color-surface); }
.modal-view-identity .portal-link:hover { background: #f6f8ff; }
.modal-view-identity .view-name { font-size: 0.82rem; }
.modal-view-identity .view-subtitle { white-space: normal; }

.top-action { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.4rem 0.65rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-brand); font-weight: 700; cursor: pointer; }
.top-action:hover { background: var(--color-surface-muted); }
.top-action svg { width: 1.6rem; height: 1.6rem; }
.lock-action { width: 2.75rem; justify-content: center; padding: 0; }
.user-greeting { display: flex; align-items: center; gap: 0.65rem; min-width: 10rem; }
.user-avatar, .account-avatar { object-fit: cover; border-radius: 50%; background: var(--color-surface-muted); }
.user-avatar { width: 2.75rem; height: 2.75rem; border: 2px solid var(--color-border); }
.greeting-copy { display: grid; line-height: 1.2; }
.greeting-copy small { color: var(--color-text-muted); }

.workspace {
  display: grid;
  grid-template-columns: minmax(11rem, 20%) minmax(26.25rem, 1fr);
  gap: 1rem;
  width: min(100%, 100rem);
  margin: 0 auto;
  padding: 1.5rem;
}

.steps, .operation {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}

.steps { padding: 1rem; }
.steps h2 { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.step { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: center; font-weight: 700; }
.step-number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-brand); color: white; }
.step-button { width: 100%; margin: 0.25rem 0; padding: 0.45rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; }
.step-button:hover { background: var(--color-surface-muted); }
.step-button[aria-current="step"], .step-button.is-active { background: color-mix(in srgb, var(--color-brand) 11%, white); color: var(--color-brand); box-shadow: inset 0.22rem 0 0 var(--color-brand); }
.step-button:not([aria-current="step"]) .step-number { background: var(--color-surface-muted); color: var(--color-text-muted); }

.operation { display: grid; min-height: 28rem; place-items: center; padding: clamp(2rem, 6vw, 5rem); text-align: center; }
.operation-content { max-width: 42rem; }
.selection-workspace:has(.selection-context:not([hidden])) { grid-template-columns: minmax(11rem, 17%) minmax(25rem, 1fr) minmax(19rem, 28%); width: min(100%, 112rem); }
.selection-context { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.selector-tabs { padding: 0.6rem; border-bottom: 1px solid var(--color-border); }
.selector-tabs button { padding: 0.4rem 0.75rem; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); font-weight: 800; }
.selector-tabs button[aria-selected="true"] { background: var(--color-brand); color: white; }
.selector-search { display: grid; gap: 0.3rem; padding: 0.9rem; border-bottom: 1px solid var(--color-border); }
.selector-search label { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; }
.search-box { display: grid; grid-template-columns: 1fr 2.75rem; }
.search-box input { min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-right: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); }
.search-box button { display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--color-surface-muted); color: var(--color-brand); cursor: pointer; }
.search-box svg { width: 1.25rem; }
.api-state { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text-muted); font-size: 0.76rem; }
.api-state i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #9aa2b1; }
.api-state.is-loading i { background: #e97d16; animation: session-breathe 1s ease-in-out infinite; }
.api-state.is-ready i { background: var(--color-success); }
.selector-results { display: grid; gap: 0.5rem; max-height: calc(100vh - 22rem); padding: 0.75rem; overflow-y: auto; }
.selector-result { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.6rem; align-items: center; width: 100%; padding: 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; }
.selector-result:hover { border-color: var(--color-brand); background: var(--color-surface-muted); }
.selector-result .value-avatar { width: 2.5rem; height: 2.5rem; }
.selector-count { margin: 0; padding: 0.65rem 0.9rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.78rem; }
.entity-fields { display: grid; gap: 1rem; margin-top: 1.5rem; }
.entity-field { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.entity-field.is-active { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 5%, white); box-shadow: inset 0.25rem 0 0 var(--color-brand); }
.entity-field.is-active .entity-field-heading strong { color: var(--color-brand); }
.entity-field-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
.entity-field-heading > span { display: grid; }
.entity-field-heading small { color: var(--color-text-muted); }
.entity-field-heading .icon-action { margin-left: auto; }
.select-entity-button { width: 100%; border: 1px dashed var(--color-brand); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-brand); font-weight: 800; cursor: pointer; }
.selected-entity-card { display: grid; grid-template-columns: 3rem 1fr 2.75rem; gap: 0.75rem; align-items: center; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.remove-selection { border: 0; border-radius: 50%; background: #fff0f1; color: var(--color-danger); font-size: 1.5rem; cursor: pointer; }
.component-entity-selector { display: block; }
.selector-domain { display: grid; gap: 0.15rem; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-brand) 7%, white); }
.selector-domain span { color: var(--color-text-muted); font-size: 0.72rem; text-transform: uppercase; }
.selector-domain strong { color: var(--color-brand); }
.selector-filter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.selector-filter select { min-width: 0; padding: 0.45rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.file-preview-compact { margin-top: 0.45rem; color: var(--color-text-muted); font-size: 0.84rem; }
.publish-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; }
.danger-action { background: var(--color-danger); }
.operation.form-operation { display: block; padding: clamp(1.25rem, 3vw, 2.5rem); text-align: left; }
.form-operation h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.controls-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.control-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.control-card.is-locked { background: var(--color-surface-muted); color: var(--color-text-muted); }
.control-card.has-error { border-color: #e5a0a6; background: #fff0f1; }
.control-card.has-error input, .control-card.has-error textarea, .control-card.has-error .radio-box { border-color: #d35b65; background: #fff8f8; }
.control-card.is-locked .control-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .control-card.is-locked .control-main textarea, .control-card.is-locked .radio-box { background: #e1e5ec; color: var(--color-text-muted); cursor: not-allowed; }
.control-main { display: grid; gap: 0.4rem; }
.control-main > label, .control-legend { font-weight: 800; }
.control-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .control-main textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }
.control-main textarea { min-height: 6rem; resize: vertical; }
.control-actions { display: flex; align-items: start; gap: 0.35rem; }
.icon-action { display: grid; width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-brand); cursor: pointer; }
.icon-action:hover { background: var(--color-surface-muted); }
.icon-action:disabled { border-color: transparent; background: transparent; color: #9aa2b1; cursor: not-allowed; opacity: 0.55; }
.icon-action.edit { color: #9a5b00; }
.reject-field svg { display: none; }
.reject-field::before { content: "✎"; font-size: 1.45rem; line-height: 1; }
.icon-action svg { width: 1.4rem; height: 1.4rem; }
.control-info { grid-column: 1 / -1; min-height: 1.4rem; color: var(--color-text-muted); font-size: 0.85rem; }
.control-info.success { color: var(--color-success); }
.control-info.warning { color: #9a5b00; }
.control-info.error { color: var(--color-danger); }
.radio-box { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.radio-box label { display: inline-flex; align-items: center; gap: 0.35rem; }
.check-control { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; }
.check-control input { width: 1.25rem; height: 1.25rem; }
.drop-zone { display: grid; min-height: 8rem; place-items: center; padding: 1rem; border: 2px dashed var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas); text-align: center; cursor: pointer; }
.drop-zone.is-dragging { border-color: var(--color-brand); background: #f2f5ff; }
.file-preview { display: grid; justify-items: center; gap: 0.55rem; }
.file-preview img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-control); }
.file-name { max-width: 24rem; overflow: hidden; color: var(--color-text-muted); font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.file-icon { display: grid; width: 5rem; height: 5rem; place-items: center; border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-brand); font-weight: 800; }
.file-icon.pdf { background: #fff0f3; color: crimson; }
.file-icon.sheet { background: #e3f3e9; color: #176b3a; }
.file-icon.zip { background: #fff0dc; color: #c56200; }
.file-icon.other { background: #e8ebf0; color: #687386; }
.file-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.small-action { min-height: 2.25rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-brand); cursor: pointer; }
.small-action.danger-outline { border-color: #d35b65; color: var(--color-danger); }
.small-action.danger-outline:hover { background: #fff0f1; }
.file-delete, #file-delete { order: -1; }
.alerts-grid { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.message-alert { --alert-bg: #f3f4f6; --alert-border: #b9bec8; --alert-title: #171a20; --alert-text: #4e5665; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; padding: 1rem; border: 1px solid var(--alert-border); border-left-width: 0.3rem; border-radius: var(--radius-panel); background: var(--alert-bg); color: var(--alert-text); }
.message-alert svg { width: 2rem; height: 2rem; color: var(--alert-title); }
.component-alert-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--alert-title); font-weight: 900; }
.message-alert strong { display: block; color: var(--alert-title); }
.message-alert p { margin: 0.2rem 0 0; }
.alert-normal { --alert-bg: #f5f6f8; --alert-border: #7c8492; --alert-title: #171a20; --alert-text: #505866; }
.alert-disabled { --alert-bg: #eef0f3; --alert-border: #c4c9d1; --alert-title: #707887; --alert-text: #8a92a0; }
.alert-information { --alert-bg: #e9f3ff; --alert-border: #5595dc; --alert-title: #165da7; --alert-text: #356caa; }
.alert-warning { --alert-bg: #fff4cf; --alert-border: #e3a51c; --alert-title: #9a5b00; --alert-text: #895f19; }
.alert-severity { --alert-bg: #ffedd8; --alert-border: #eb7c16; --alert-title: #b94a00; --alert-text: #914b18; }
.alert-error { --alert-bg: #fff0f3; --alert-border: #d85b6a; --alert-title: #b4233a; --alert-text: #963b4b; }
.alert-report { --alert-bg: #f3edff; --alert-border: #8b66d4; --alert-title: #6840b5; --alert-text: #7257a5; }
.alert-question { --alert-bg: #e8fbfc; --alert-border: #3bb8bd; --alert-title: #087c86; --alert-text: #347f85; }
.table-preview { margin-top: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); overflow: hidden; }
.table-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); }
.table-toolbar-search .table-search { margin-left: 0; }
.table-search-count { margin-left: auto; color: var(--color-text-muted); font-size: 0.82rem; }
.table-tabs { display: inline-flex; gap: 0.25rem; padding: 0.2rem; border-radius: var(--radius-control); background: var(--color-surface); }
.table-tab { min-height: 2.5rem; padding: 0.45rem 0.75rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.table-tab[aria-selected="true"] { background: var(--color-brand); color: white; font-weight: 800; }
.table-search { display: grid; gap: 0.2rem; min-width: min(100%, 18rem); margin-left: auto; }
.table-search label { color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; }
.table-search input { min-height: 2.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th { padding: 0.65rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-canvas); color: var(--color-text-muted); font-size: 0.75rem; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; }
.preview-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.preview-table tbody tr:last-child td { border-bottom: 0; }
.preview-table th:first-child, .preview-table td:first-child { width: 18%; }
.preview-table th:last-child, .preview-table td:last-child { width: 9rem; }
.row-key { font-weight: 800; white-space: nowrap; }
.value-card { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.65rem; align-items: center; }
.value-avatar { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-brand); font-weight: 800; }
.entity-media { position: relative; flex: 0 0 auto; overflow: hidden; isolation: isolate; border: 1px solid var(--color-border); }
.entity-media-fallback { display: grid; position: absolute; inset: 0; place-items: center; background: var(--color-surface-muted); color: var(--color-brand); font-weight: 800; }
.entity-media img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-surface); }
.entity-media.is-fallback img { display: none; }
.entity-media--person { border-radius: 50%; }
.entity-media--product { border-radius: .65rem; background: var(--color-surface); }
.entity-media--product img { object-fit: contain; padding: .12rem; box-sizing: border-box; }
.entity-identity { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .65rem; align-items: center; min-width: 0; }
.entity-identity > .entity-media { width: 2.75rem; height: 2.75rem; }
.entity-identity .value-copy { min-width: 0; }
.entity-identity .value-copy > * { overflow-wrap: anywhere; }
.value-copy { display: grid; min-width: 0; }
.value-copy strong, .value-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.value-copy span, .value-muted { color: var(--color-text-muted); font-size: 0.85rem; }
.boolean-value { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; }
.boolean-value::before { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-success); content: ""; }
.boolean-value.is-false::before { background: #9aa2b1; }
.datetime-value { display: grid; }
.datetime-value time:last-child { color: var(--color-text-muted); font-size: 0.85rem; }
.price-stack { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.price-stack span { display: grid; padding-right: 0.9rem; border-right: 1px solid var(--color-border); }
.price-stack span:last-child { padding-right: 0; border-right: 0; }
.price-stack small { color: var(--color-text-muted); }
.row-actions { display: grid; gap: 0.35rem; }
.table-action { min-height: 2.25rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-brand); cursor: pointer; white-space: nowrap; }
.table-action:hover { background: var(--color-surface-muted); }
.table-empty { padding: 2rem; color: var(--color-text-muted); text-align: center; }
.table-caption { padding: 0.65rem 1rem; border-top: 1px solid var(--color-border); background: var(--color-canvas); color: var(--color-text-muted); font-size: 0.82rem; }
.capture-checklist { margin-top: 1.5rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
.checklist-item { position: relative; display: grid; grid-template-columns: minmax(15rem, 0.9fr) minmax(18rem, 1.1fr); gap: 1.5rem; min-height: 6.25rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-verification { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: center; }
.checklist-verification::after { position: absolute; top: 3.8rem; bottom: -1.65rem; left: 2.45rem; width: 1px; background: var(--color-border); content: ""; }
.checklist-item:last-child .checklist-verification::after { display: none; }
.checklist-verification > span:last-child, .checklist-capture { display: grid; align-content: center; }
.checklist-verification small, .checklist-capture > span, .checklist-capture small { margin-top: 0.18rem; color: var(--color-text-muted); font-size: 0.84rem; }
.checklist-icon { z-index: 1; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: var(--color-surface); }
.checklist-icon svg { width: 1.35rem; height: 1.35rem; }
.is-valid .checklist-icon { color: var(--color-success); }
.is-invalid .checklist-icon { color: var(--color-danger); }
.is-invalid .checklist-verification strong { color: var(--color-danger); }
.missing-value { font-style: italic; }
.capture-card { grid-template-columns: 3rem 1fr; gap: 0.75rem; align-items: center; }
.file-type-mini { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 0.5rem; background: #fff0f3; color: crimson !important; font-size: 0.72rem !important; font-weight: 900; }
.capture-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.capture-summary > span { display: grid; padding-right: 1rem; border-right: 1px solid var(--color-border); }
.capture-summary > span:last-child { padding-right: 0; border-right: 0; }
.capture-summary small { margin: 0; }
@media (max-width: 900px) { .checklist-item { grid-template-columns: minmax(13rem, 0.85fr) minmax(15rem, 1.15fr); gap: 0.75rem; padding-inline: 0.9rem; } }
.eyebrow { margin: 0; color: var(--color-brand); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0.5rem 0 1rem; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; }
.greeting { margin: 0; color: var(--color-text-muted); font-size: 1.2rem; }

.bottom-nav { flex-wrap: wrap; min-height: 4.75rem; color: var(--color-text-muted); }
.activity-summary, .session-summary { display: grid; gap: 0.08rem; }
.activity-summary strong { color: var(--color-text); }
.activity-detail, .session-life { color: var(--color-text-muted); font-size: 0.82rem; }
.session-summary { justify-items: end; margin-left: auto; }
.session-line { display: flex; align-items: center; gap: 0.6rem; }
.local-time { min-width: 4.8rem; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; }
.status-badge { --badge-color: var(--color-success); --badge-bg: #dff5e9; display: grid; grid-template-columns: 0.55rem auto; grid-template-rows: auto auto; align-items: center; gap: 0 0.45rem; min-height: 3.2rem; padding: 0.35rem 0.8rem; border: 0; border-radius: 999px; background: var(--badge-bg); color: var(--badge-color); font: inherit; text-align: left; cursor: pointer; transition: color 350ms ease, background-color 350ms ease; }
.status-badge:hover { filter: saturate(1.08) brightness(0.98); }
.status-badge:focus-visible { outline: 0.2rem solid var(--color-focus); outline-offset: 0.15rem; }
.status-badge::before { grid-row: 1 / 3; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); animation: session-breathe 4s ease-in-out infinite; content: ""; }
.status-label { align-self: end; font-weight: 800; line-height: 1.15; }
.session-life { align-self: start; color: color-mix(in srgb, var(--badge-color) 72%, white); font-size: 0.76rem; font-weight: 700; line-height: 1.15; }
.status-success { --badge-color: var(--color-success); --badge-bg: #dff5e9; }
.status-warning { --badge-color: #9a5b00; --badge-bg: #fff0c9; }
.status-error { --badge-color: #c2410c; --badge-bg: #ffeadf; }
.status-disabled { --badge-color: #687386; --badge-bg: #e8ebf0; }
.status-badge.is-checking::before { animation: session-check 0.9s ease-in-out infinite; }

dialog {
  width: min(calc(100% - 2rem), 30rem);
  padding: 0;
  border: 0;
  border-radius: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
}

dialog::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(2px); }
.dialog-content { padding: 1.5rem; }
.dialog-content h2 { margin: 0 0 0.5rem; }
.dialog-description { margin: 0 0 1.25rem; color: var(--color-text-muted); }
.field { display: grid; gap: 0.35rem; margin-top: 1rem; text-align: left; }
.field label { font-weight: 700; }
.field input { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); }
.field-help { color: var(--color-text-muted); font-size: 0.85rem; }
.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
.dialog-actions.split { justify-content: space-between; gap: 0.75rem; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; text-decoration: none; padding: 0.6rem 1rem; border: 0; border-radius: var(--radius-control); background: var(--color-brand); color: white; font-weight: 800; cursor: pointer; }
.primary-action:hover { background: var(--color-brand-strong); }
.primary-action:disabled { cursor: wait; opacity: 0.7; }
.alert { margin-top: 1rem; padding: 0.75rem; border-left: 0.25rem solid var(--color-danger); background: #fff0f1; color: var(--color-danger); text-align: left; }
.validating { display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1.5rem; text-align: center; }
.spinner { width: 2.5rem; height: 2.5rem; border: 0.3rem solid var(--color-surface-muted); border-top-color: var(--color-brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
.text-action { min-height: 2.75rem; padding: 0.4rem 0.2rem; border: 0; background: transparent; color: var(--color-brand); font-weight: 700; cursor: pointer; }
.danger-text { color: var(--color-danger); }
.account-card { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.75rem; align-items: center; width: 100%; margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text); text-align: left; }
button.account-card { cursor: pointer; }
button.account-card:hover { border-color: var(--color-brand); background: #f6f8ff; }
.account-avatar { width: 3.5rem; height: 3.5rem; }
.account-copy { display: grid; min-width: 0; }
.account-copy strong, .account-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy span { color: var(--color-text-muted); font-size: 0.9rem; }
.session-state { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 700; }
.session-state::before { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--state-color, #697386); content: ""; }
.state-closed { --state-color: #15171a; }
.state-clean { --state-color: #7a8496; }
.state-expired { --state-color: #c52b35; }
.state-invalid { --state-color: #c52b35; }
.state-blocked { --state-color: #d97706; }
.state-pass { --state-color: #2261d1; }
.help-copy { max-height: min(65vh, 34rem); overflow: auto; }
.help-copy h3 { margin-bottom: 0.25rem; }
.icon-chevron { width: 1.25rem; height: 1.25rem; color: var(--color-text-muted); }
.unsupported { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes session-breathe { 0%, 70%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 30%, transparent); } 82% { opacity: 0.5; box-shadow: 0 0 0 0.3rem transparent; } }
@keyframes session-check { 50% { opacity: 0.3; transform: scale(0.75); } }

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .status-badge::before { animation: none; } }

@media (min-width: 1024px) and (max-width: 1199px) {
  .top-nav { gap: 0.5rem; }
  .context-button { min-width: 10.75rem; }
  .view-identity { min-width: 12.5rem; gap: 0 0.5rem; }
  .view-subtitle { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
  .user-greeting { min-width: auto; }
}

@media (max-width: 1023px) {
  .app-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* Shared table heading: title left, search right, count below. */
.table-toolbar-titled { position: relative; padding-bottom: 2.25rem; }
.table-title { margin: 0; align-self: center; font-size: 1.1rem; }
.table-toolbar-titled .table-search { margin-left: auto; }
.table-toolbar-titled .table-search-count { position: absolute; bottom: 0.55rem; left: 1rem; margin: 0; }
.users-query-workspace { grid-template-columns: minmax(0, 1fr); }
.users-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; }
.users-query-status { margin: 1rem 0; color: var(--color-text-muted); }
.user-detail-list { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 0.55rem 1rem; }
.user-detail-list dt { font-weight: 700; }
.user-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.selector-pagination { display: flex; gap: 0.5rem; justify-content: space-between; align-items: center; padding: 0.75rem; border-top: 1px solid var(--color-border); }

/* Typed read-only values for detail views. */
#user-detail-dialog { width: min(calc(100% - 2rem), 42rem); max-height: calc(100dvh - 3rem); }
#user-detail-dialog .user-detail-list { align-items: baseline; gap: 0.85rem 1.25rem; }
.detail-value-tag { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-muted); color: var(--color-text); font-size: 0.85rem; font-weight: 600; }
.detail-folio { font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-role { background: color-mix(in srgb, var(--color-brand) 8%, white); color: var(--color-brand); border-color: color-mix(in srgb, var(--color-brand) 25%, white); }
.detail-tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.detail-email { color: var(--color-brand); text-underline-offset: 0.2em; }
.detail-status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.detail-status::before { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-success); content: ""; }
.detail-status.is-negative::before { background: var(--color-danger); }
.user-detail-list .detail-section-title, .user-detail-list .detail-section-content { grid-column: 1 / -1; }
.detail-section-title { margin-top: 0.5rem; }
.detail-permissions { max-height: 15rem; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.detail-permission-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.detail-permission-table th { position: sticky; top: 0; padding: 0.55rem 0.75rem; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.75rem; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.detail-permission-table td { width: 50%; padding: 0.55rem 0.75rem; border-top: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.user-detail-actions > button { margin-left: auto; }
.user-detail-actions .edit-action { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 30%, white); background: color-mix(in srgb, var(--color-brand) 7%, white); color: var(--color-brand); }
.user-detail-actions .edit-action:hover { background: color-mix(in srgb, var(--color-brand) 14%, white); }
.detail-email:focus-visible, .detail-permissions:focus-visible { outline: 0.2rem solid var(--color-focus); outline-offset: 0.15rem; }

.activity-report-heading, .activity-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.activity-report-heading h1 { margin: 0.25rem 0 0.5rem; }
.activity-report-heading .greeting { margin: 0; }
.activity-report-heading > button { flex-shrink: 0; }
.activity-indicators { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.activity-indicator { display: grid; gap: 0.3rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; }
.activity-indicator strong { font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.activity-indicator > span:last-child { color: var(--color-text-muted); font-size: 0.85rem; }
.activity-indicator-label { font-weight: 700; }
.activity-indicator[aria-pressed="true"] { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 6%, white); box-shadow: inset 0 0.2rem var(--color-brand); }
.activity-indicator[aria-pressed="true"] strong { color: var(--color-brand); }
.activity-indicator:disabled { cursor: default; }
.activity-report-note { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.5; }
.activity-report-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.activity-report-grid > section { min-width: 0; }
.activity-section-heading h2 { margin: 0.2rem 0; font-size: 1.3rem; }
.activity-section-heading .eyebrow { margin: 0; }
.activity-section-description { color: var(--color-text-muted); font-size: 0.9rem; }
.activity-card-list { display: grid; gap: 0.75rem; }
.activity-user-card { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); overflow: hidden; }
.activity-card-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; padding: 1rem; cursor: pointer; list-style: none; }
.activity-card-summary::-webkit-details-marker { display: none; }
.activity-card-summary::after { content: "+"; grid-column: 2; grid-row: 1; align-self: center; color: var(--color-brand); font-size: 1.25rem; }
.activity-user-card[open] > summary::after { content: "−"; }
.activity-user-card[open] > summary { border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); }
.activity-card-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.activity-card-identity > strong { overflow-wrap: anywhere; }
.activity-card-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; grid-column: 1 / -1; color: var(--color-text-muted); font-size: 0.8rem; }
.activity-card-summary .detail-status { grid-column: 1 / -1; font-size: 0.8rem; }
.activity-card-content { padding: 1rem; }
.activity-card-content .user-detail-list { font-size: 0.85rem; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: 0.7rem; }
.activity-session-detail { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.activity-history-title { margin-bottom: 0.5rem; font-size: 0.95rem; }
.activity-history { display: grid; gap: 0.75rem; padding-left: 1.2rem; font-size: 0.85rem; }
.activity-history li > * { display: block; }
.activity-history li > span, .activity-date { color: var(--color-text-muted); }
.activity-edit-link { display: inline-flex; align-items: center; text-decoration: none; margin-top: 0.5rem; }
.activity-empty { padding: 1.25rem; border: 1px dashed var(--color-border); border-radius: var(--radius-panel); color: var(--color-text-muted); font-size: 0.9rem; }
.activity-card-summary:focus-visible, .activity-edit-link:focus-visible { outline: 0.2rem solid var(--color-focus); outline-offset: -0.2rem; }
@media (max-width: 1199px) { .activity-report-grid { grid-template-columns: minmax(0, 1fr); } }
.operation.activity-reports { place-items: normal; }
.activity-reports > .activity-report-heading, .activity-reports > .activity-indicators, .activity-reports > .activity-report-grid { width: 100%; }
.activity-report-heading .eyebrow { margin: 0; }
.activity-report-heading h1 { font-size: 1.9rem; }
.activity-report-heading .greeting { font-size: 1rem; }
.activity-reports > .users-query-status { margin: 0.75rem 0; }
.activity-reports .activity-indicator { padding: 1rem; }
.activity-reports .activity-indicator strong { font-size: 2rem; }
.activity-report-grid { margin-top: 1.25rem; }
.activity-report-grid > section > .activity-section-description { min-height: 2.7em; margin: 0.5rem 0 0.75rem; }
.user-access-notice { margin: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--color-border); border-left: 0.25rem solid var(--color-brand); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); }

.access-panel { display: grid; place-items: center; width: calc(100% - 3rem); max-width: 97rem; min-height: min(32rem, 65vh); margin: 1.5rem auto; padding: 3rem 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); text-align: center; }
.access-panel-content { display: grid; justify-items: center; gap: .85rem; max-width: 34rem; }
.access-panel-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: .4rem; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-brand); }
.access-panel-icon svg { width: 2.2rem; height: 2.2rem; }
.access-panel h2 { margin: 0; color: var(--color-text); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.access-panel p { margin: 0; color: var(--color-text-muted); font-size: 1rem; line-height: 1.65; }
.access-panel[compact] { min-height: auto; padding: 1.25rem; }
.access-panel[compact] .access-panel-icon { width: 2.75rem; height: 2.75rem; }
.access-panel[compact] .access-panel-icon svg { width: 1.5rem; height: 1.5rem; }
.access-panel[compact] h2 { font-size: 1.1rem; }

#login-dialog.login-with-branches { width: min(64rem, calc(100vw - 3rem)); max-width: calc(100vw - 3rem); }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.login-with-branches .login-layout { grid-template-columns: minmax(0, 1fr) minmax(19rem, 42%); }
.login-layout > .selection-context { border: 0; border-left: 1px solid var(--color-border); border-radius: 0; max-height: 80vh; overflow: auto; }
#login-dialog .component-entity-selector { margin: 1rem 0; }
#login-dialog .entity-field { width: 100%; }
@media (max-width: 720px) { .login-with-branches .login-layout { grid-template-columns: minmax(0, 1fr); } .login-layout > .selection-context { border-left: 0; border-top: 1px solid var(--color-border); max-height: 20rem; } }

/* Shared mobile layout. Keep permissions and DOM actions identical on every device. */
@media (max-width: 1023px) {
  body .app-shell { min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; }
  body .top-nav { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem; }
  html body .app-shell .top-nav .context-button { flex: 1 1 40%; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr); }
  html body .app-shell .top-nav .view-identity { order: -1; flex: 1 0 100%; min-width: 0; grid-template-columns: 2.75rem minmax(0, 1fr); }
  html body .app-shell .top-nav .view-subtitle { white-space: normal; max-width: none; }
  html body .app-shell .top-nav .top-spacer { display: none; }
  html body .app-shell .top-nav .user-greeting { min-width: 0; margin-left: auto; }
  .context-value, .greeting-copy { overflow-wrap: anywhere; min-width: 0; }
  body .workspace, body .workspace:has(.selection-context:not([hidden])) { grid-template-columns: minmax(0, 1fr); padding: .75rem; gap: .75rem; width: 100%; }
  body .workspace > * { min-width: 0; }
  body .steps { display: flex; align-items: center; gap: .5rem; padding: .5rem; overflow-x: auto; scroll-padding-inline: .5rem; }
  body .steps h2 { display: none; }
  body .steps .step-button { flex: 0 0 auto; width: auto; max-width: 17rem; margin: 0; padding: .5rem; gap: .5rem; }
  body .step-button[aria-current="step"] { box-shadow: inset 0 -.2rem var(--color-brand); }
  body .operation { min-width: 0; min-height: 20rem; padding: 1.25rem; }
  body .operation.form-operation { padding: 1rem; }
  body .sales-selecting > .selection-context { position: static; max-height: none; }
  .selector-results { max-height: 45dvh; min-height: 5rem; overscroll-behavior: contain; }
  body .bottom-nav { position: static; padding: .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); gap: .5rem; }
  .activity-summary { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
  .session-summary { margin-left: auto; }
  body .checklist-item { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  body .checklist-verification::after { display: none; }
  body .checklist-capture { padding-left: 3.25rem; min-width: 0; }
  body .report-stock, body .report-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog { max-height: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain; }
  .selection-return { display: inline-flex; margin: .5rem .75rem; }
}
.selection-return { display: none; }
@media (max-width: 1023px) { .selection-return { display: inline-flex; } }
@media (max-width: 640px) {
  body .operation { padding: 1rem; }
  body .sales-fields, body .sales-details, body .accessory-fields, body .accessory-details,
  body .accessory-hero-grid, body .accessory-indicators, body .sales-indicators,
  body .inventory-overview, body .activity-indicators, body .report-pending,
  body .report-event-details, body .review-details, body .inventory-detail-cards { grid-template-columns: minmax(0, 1fr); }
  .activity-report-heading, .activity-section-heading { flex-wrap: wrap; }
  body .control-card { padding: .75rem; gap: .5rem; }
  .control-main, .file-preview, .entity-field-heading > span { min-width: 0; }
  .file-name { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  input, select, textarea { font: inherit; font-size: 1rem; min-width: 0; max-width: 100%; }
  select, input:not([type="checkbox"]):not([type="radio"]), .small-action, .table-tab { min-height: 2.75rem; }
  .value-copy strong, .value-copy span { white-space: normal; overflow-wrap: anywhere; }
  .selected-entity-card { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; padding: .5rem; gap: .5rem; }
  .message-alert { grid-template-columns: 2rem minmax(0, 1fr); padding: .75rem; gap: .5rem; overflow-wrap: anywhere; }
  .table-toolbar { padding: .75rem; }
  .table-search, .table-toolbar-titled .table-search { width: 100%; min-width: 0; margin-left: 0; }
  .table-tabs { max-width: 100%; overflow-x: auto; }
  .table-tab { flex-shrink: 0; }
  pacc-data-table > .preview-table { display: block; width: 100%; max-width: 100%; }
  pacc-data-table > .preview-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  pacc-data-table > .preview-table tbody { display: block; width: 100%; max-width: 100%; }
  pacc-data-table > .preview-table tbody tr { display: grid; width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr); padding: .75rem; border-bottom: 1px solid var(--color-border); }
  body pacc-data-table.table-preview > .preview-table tbody tr > td,
  body pacc-data-table.table-preview > .preview-table tbody tr > td:first-child,
  body pacc-data-table.table-preview > .preview-table tbody tr > td:last-child { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; border: 0; padding: .5rem 0; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
  pacc-data-table > .preview-table tbody tr > td > * { max-width: 100%; min-width: 0; }
  pacc-data-table > .preview-table td::before { display: block; margin-bottom: .35rem; content: attr(data-label); color: var(--color-text-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
  .table-preview:not(pacc-data-table) { overflow-x: auto; }
  body .user-detail-list, body .activity-card-content .user-detail-list { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .user-detail-list dd { margin-bottom: .6rem; }
  body dialog, body #login-dialog.login-with-branches { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .dialog-content { padding: 1rem; }
  body .login-with-branches .login-layout { grid-template-columns: minmax(0, 1fr); }
  .dialog-actions, .publish-actions { flex-wrap: wrap; gap: .75rem; }
  .dialog-actions > *, .publish-actions > * { flex: 1 1 auto; }
  #sales-detail .dialog-content { max-height: calc(100dvh - 1rem); }
  .account-card { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .5rem; }
  .account-avatar { width: 2.75rem; height: 2.75rem; }
  .access-panel { width: calc(100% - 1.5rem); margin: .75rem auto; padding: 2rem 1rem; }
}
@media (max-width: 640px) {
  body .report-heading, body .report-section-heading, body .report-periods { flex-wrap: wrap; }
  body .report-panel { padding: .75rem; }
  .report-indicator, .report-stock-card, .report-event-summary { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  body .report-stock, body .report-indicators { grid-template-columns: minmax(0, 1fr); }
}

/* Operational routes enter their first working step; examples retain their welcome. */
[data-retired-welcome] { display:none !important; }
.workspace.direct-operation-workspace { grid-template-columns:minmax(0,1fr); }
.direct-operation-workspace > pacc-step-flow[data-single-operation] { display:none !important; }
.direct-operation-workspace.selection-workspace:has(.selection-context:not([hidden])) { grid-template-columns:minmax(0,1fr) minmax(19rem,30%); }
.dialog-actions { gap:.85rem; }
dialog > .dialog-actions { margin:0;padding:1.25rem 1.5rem;border-top:1px solid var(--color-border); }
@media(max-width:760px){.direct-operation-workspace.selection-workspace:has(.selection-context:not([hidden])){grid-template-columns:minmax(0,1fr)}}
dialog.operation-detail-dialog { overflow:hidden; }
.operation-dialog-shell { display:flex;flex-direction:column;max-height:calc(100dvh - 2rem); }
.operation-dialog-header { flex-shrink:0;padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border); }
.operation-dialog-header h2 { margin:0;font-size:1.3rem;line-height:1.4; }
.operation-dialog-subtitle { color:var(--color-text-muted);font-size:.9rem;margin:.45rem 0 0;overflow-wrap:anywhere; }
.operation-dialog-subtitle strong { color:#171b24;font-weight:750; }
.operation-dialog-body.dialog-content { min-height:0;overflow:auto;padding:1.5rem;overscroll-behavior:contain; }
.operation-dialog-footer.dialog-actions { flex-shrink:0;margin:0;padding:1.15rem 1.5rem;gap:.85rem;border-top:1px solid var(--color-border);background:var(--color-surface); }
@media(max-width:640px){.operation-dialog-header,.operation-dialog-body.dialog-content,.operation-dialog-footer.dialog-actions{padding:1rem}}
.operation-detail-dialog .sales-modal-body { overflow:visible;flex-shrink:0; }
.operation-dialog-shell > .operation-dialog-body { flex:1 1 auto; }

.api-state.is-error i { background: var(--color-danger, #c6283c); }