/* Lealez Unified UI Runtime (LZUI). Normative source: specs/ui/. */
:root {
  --lz-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lz-font-xs: 12px; --lz-font-sm: 13px; --lz-font-md: 14px; --lz-font-lg: 16px;
  --lz-font-xl: 18px; --lz-font-2xl: 20px; --lz-font-3xl: 24px; --lz-font-4xl: 30px; --lz-font-5xl: 36px;

  --lz-color-brand-primary: #3782c4; --lz-color-brand-primary-strong: #245f91; --lz-color-brand-primary-soft: #eaf3fb;
  --lz-color-brand-ink: #172033; --lz-color-brand-control: #172831; --lz-color-brand-control-deep: #0e1f28;
  --lz-color-bg: #f6f7f8; --lz-color-surface: #fff; --lz-color-surface-subtle: #fafbfc; --lz-color-surface-muted: #f1f5f8;
  --lz-color-border: #dce3ec; --lz-color-border-strong: #c8d3df; --lz-color-text: #172033; --lz-color-text-secondary: #657084;
  --lz-color-text-muted: #8390a1; --lz-color-text-disabled: #a8b2bf; --lz-color-text-inverse: #fff;
  --lz-color-success: #15803d; --lz-color-success-soft: #e9f7ee; --lz-color-success-text: #126b35;
  --lz-color-warning: #b45309; --lz-color-warning-soft: #fff5df; --lz-color-warning-text: #8a4b08;
  --lz-color-danger: #b42318; --lz-color-danger-soft: #fff0ef; --lz-color-danger-text: #92251d;
  --lz-color-info: #245f91; --lz-color-info-soft: #eaf3fb; --lz-color-info-text: #245f91;

  --lz-space-0: 0; --lz-space-0-5: 2px; --lz-space-1: 4px; --lz-space-1-5: 6px; --lz-space-2: 8px; --lz-space-3: 12px;
  --lz-space-4: 16px; --lz-space-5: 20px; --lz-space-6: 24px; --lz-space-8: 32px; --lz-space-10: 40px; --lz-space-12: 48px;
  --lz-space-16: 64px; --lz-space-20: 80px;
  --lz-radius-xs: 4px; --lz-radius-sm: 6px; --lz-radius-md: 8px; --lz-radius-lg: 12px; --lz-radius-xl: 16px; --lz-radius-full: 999px;
  --lz-shadow-none: none; --lz-shadow-xs: 0 1px 2px rgba(23,32,51,.05); --lz-shadow-sm: 0 2px 8px rgba(23,32,51,.07);
  --lz-shadow-md: 0 8px 24px rgba(23,32,51,.10); --lz-shadow-lg: 0 16px 40px rgba(23,32,51,.16);
  --lz-control-sm: 32px; --lz-control-md: 40px; --lz-control-lg: 44px;
  --lz-motion-fast: 120ms; --lz-motion-base: 180ms; --lz-motion-slow: 240ms; --lz-motion-shell: 300ms;
  --lz-ease-standard: cubic-bezier(.2,0,0,1); --lz-focus-border: #245f91; --lz-focus-ring: 0 0 0 3px rgba(55,130,196,.22);
  --lz-z-dropdown: 200; --lz-z-drawer-backdrop: 290; --lz-z-drawer: 300; --lz-z-modal-backdrop: 490; --lz-z-modal: 500;
  --lz-z-toast: 600; --lz-z-tooltip: 700;

  /* Legacy aliases live here only as a controlled migration bridge. */
  --primary: var(--lz-color-brand-primary); --primary-dark: var(--lz-color-brand-primary-strong); --ink: var(--lz-color-text);
  --muted: var(--lz-color-text-secondary); --bg: var(--lz-color-bg); --surface: var(--lz-color-surface); --border: var(--lz-color-border);
  --success: var(--lz-color-success); --warning: var(--lz-color-warning); --danger: var(--lz-color-danger);
  --control: var(--lz-color-brand-control); --control-deep: var(--lz-color-brand-control-deep); --shadow: var(--lz-shadow-lg);
}

html, body, button, input, select, textarea { font-family: var(--lz-font-family); }
body { color: var(--lz-color-text); background: var(--lz-color-bg); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: none; box-shadow: var(--lz-focus-ring); }

/* Button API + bridges */
.lz-button,.btn {
  min-height: var(--lz-control-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--lz-space-2);
  padding: 0 var(--lz-space-4); border: 1px solid transparent; border-radius: var(--lz-radius-md); font-size: var(--lz-font-md);
  line-height: 20px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color var(--lz-motion-fast) var(--lz-ease-standard), border-color var(--lz-motion-fast) var(--lz-ease-standard), color var(--lz-motion-fast) var(--lz-ease-standard), box-shadow var(--lz-motion-fast) var(--lz-ease-standard);
}
.lz-button--primary,.btn-primary { background: var(--lz-color-brand-primary-strong); border-color: var(--lz-color-brand-primary-strong); color: var(--lz-color-text-inverse); }
.lz-button--primary:hover,.btn-primary:hover { background: var(--lz-color-brand-primary); border-color: var(--lz-color-brand-primary); color: var(--lz-color-text-inverse); }
.lz-button--secondary,.btn-secondary { background: var(--lz-color-surface); border-color: var(--lz-color-border); color: var(--lz-color-text); }
.lz-button--secondary:hover,.btn-secondary:hover { background: var(--lz-color-surface-muted); border-color: var(--lz-color-border-strong); }
.lz-button--tertiary { background: transparent; border-color: transparent; color: var(--lz-color-text-secondary); }
.lz-button--tertiary:hover { background: var(--lz-color-surface-muted); color: var(--lz-color-text); }
.lz-button--utility { min-height: var(--lz-control-sm); padding: 0 var(--lz-space-3); background: var(--lz-color-surface-muted); color: var(--lz-color-text); font-size: var(--lz-font-xs); line-height: 16px; }
.lz-button--danger,.btn-danger { background: var(--lz-color-surface); border-color: var(--lz-color-danger); color: var(--lz-color-danger-text); }
.lz-button--danger:hover,.btn-danger:hover { background: var(--lz-color-danger-soft); }
.lz-button--sm,.btn-small { min-height: var(--lz-control-sm); padding: 0 var(--lz-space-3); font-size: var(--lz-font-xs); line-height: 16px; }
.lz-button--lg { min-height: var(--lz-control-lg); padding: 0 var(--lz-space-5); }
.lz-button[disabled],.btn[disabled],.lz-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.lz-icon-button,.icon-button {
  width: var(--lz-control-sm); height: var(--lz-control-sm); min-width: var(--lz-control-sm); display: inline-grid; place-items: center; padding: 0;
  border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-md); background: var(--lz-color-surface); color: var(--lz-color-text-secondary); cursor: pointer;
}
.lz-icon-button:hover,.icon-button:hover { background: var(--lz-color-surface-muted); border-color: var(--lz-color-border-strong); color: var(--lz-color-text); }

/* Field API + bridges */
.lz-field { display: flex; flex-direction: column; gap: var(--lz-space-1-5); }
.lz-field>label,.form-field>label { color: var(--lz-color-text); font-size: var(--lz-font-sm); line-height: 18px; font-weight: 600; }
.lz-input,.lz-select,.lz-textarea,.form-control,.company-switcher select {
  width: 100%; min-height: var(--lz-control-md); border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-md);
  padding: 9px var(--lz-space-3); background: var(--lz-color-surface-muted); color: var(--lz-color-text); font-size: var(--lz-font-md); line-height: 20px;
  transition: background-color var(--lz-motion-fast) var(--lz-ease-standard), border-color var(--lz-motion-fast) var(--lz-ease-standard), box-shadow var(--lz-motion-fast) var(--lz-ease-standard);
}
.lz-input:hover,.lz-select:hover,.lz-textarea:hover,.form-control:hover,.company-switcher select:hover { border-color: var(--lz-color-border-strong); }
.lz-input:focus,.lz-select:focus,.lz-textarea:focus,.form-control:focus,.company-switcher select:focus { outline: none; border-color: var(--lz-focus-border); box-shadow: var(--lz-focus-ring); }
.lz-textarea,textarea.form-control { min-height: 96px; resize: vertical; }
.lz-input:disabled,.lz-select:disabled,.lz-textarea:disabled,.form-control:disabled,.company-switcher select:disabled { background: var(--lz-color-surface-subtle); color: var(--lz-color-text-disabled); cursor: not-allowed; }
.lz-input[readonly],.lz-textarea[readonly],.form-control[readonly] { background: var(--lz-color-surface-subtle); color: var(--lz-color-text-secondary); }
.lz-input[aria-invalid="true"],.lz-select[aria-invalid="true"],.lz-textarea[aria-invalid="true"],.form-control[aria-invalid="true"] { border-color: var(--lz-color-danger); }
.form-field small,.lz-field__help { color: var(--lz-color-text-muted); font-size: var(--lz-font-xs); line-height: 16px; }
.form-field .field-error,.errorlist,.lz-field__error { color: var(--lz-color-danger-text); font-size: var(--lz-font-xs); line-height: 16px; }

/* Card / Choice Card */
.lz-card,.card,.form-card,.metric-card { background: var(--lz-color-surface); border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-lg); box-shadow: var(--lz-shadow-xs); }
.lz-card { padding: var(--lz-space-6); } .lz-card--compact { padding: var(--lz-space-4); }
.lz-choice-card { display: flex; gap: var(--lz-space-3); width: 100%; padding: var(--lz-space-4); border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-lg); background: var(--lz-color-surface); color: var(--lz-color-text); cursor: pointer; text-align: left; }
.lz-choice-card:hover { border-color: var(--lz-color-border-strong); background: var(--lz-color-surface-subtle); }
.lz-choice-card.is-selected,.lz-choice-card[aria-checked="true"] { border-color: var(--lz-color-brand-primary-strong); box-shadow: inset 0 0 0 1px var(--lz-color-brand-primary-strong); background: var(--lz-color-brand-primary-soft); }
.lz-choice-card:disabled,.lz-choice-card[aria-disabled="true"] { color: var(--lz-color-text-disabled); background: var(--lz-color-surface-subtle); cursor: not-allowed; }

/* Tabs */
.lz-tabs,.tabs { display: flex; gap: var(--lz-space-6); overflow-x: auto; border-bottom: 1px solid var(--lz-color-border); }
.lz-tabs a,.tabs a { min-height: var(--lz-control-md); display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--lz-color-text-secondary); font-size: var(--lz-font-sm); line-height: 18px; font-weight: 600; }
.lz-tabs a:hover,.tabs a:hover { color: var(--lz-color-text); background: transparent; }
.lz-tabs a.is-active,.tabs a.is-active,.lz-tabs a[aria-current="page"] { border-bottom-color: var(--lz-color-brand-primary-strong); background: transparent; color: var(--lz-color-brand-primary-strong); }

/* Badge / Status */
.lz-badge,.status { min-height: 22px; display: inline-flex; align-items: center; gap: var(--lz-space-1-5); padding: 2px var(--lz-space-2); border-radius: var(--lz-radius-full); background: var(--lz-color-surface-muted); color: var(--lz-color-text-secondary); font-size: var(--lz-font-xs); line-height: 16px; font-weight: 600; }
.lz-badge--success,.status.success { background: var(--lz-color-success-soft); color: var(--lz-color-success-text); }
.lz-badge--warning,.status.warning { background: var(--lz-color-warning-soft); color: var(--lz-color-warning-text); }
.lz-badge--danger,.status.error { background: var(--lz-color-danger-soft); color: var(--lz-color-danger-text); }
.lz-badge--info,.status.info { background: var(--lz-color-info-soft); color: var(--lz-color-info-text); }

/* Table */
.lz-table-wrap,.table-wrap { overflow: auto; border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-lg); background: var(--lz-color-surface); }
.lz-table,.table-wrap table { width: 100%; border-collapse: collapse; color: var(--lz-color-text); font-size: var(--lz-font-sm); line-height: 18px; }
.lz-table th,.lz-table td,.table-wrap th,.table-wrap td { padding: var(--lz-space-3) var(--lz-space-4); border-bottom: 1px solid var(--lz-color-border); vertical-align: middle; }
.lz-table th,.table-wrap th { background: var(--lz-color-surface-subtle); color: var(--lz-color-text-secondary); font-size: var(--lz-font-xs); line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Feedback */
.lz-message,.message { padding: var(--lz-space-3) var(--lz-space-4); border: 1px solid var(--lz-color-border); border-radius: var(--lz-radius-md); background: var(--lz-color-surface); color: var(--lz-color-text); font-size: var(--lz-font-sm); line-height: 18px; }
.lz-message--success,.message.success { border-color: var(--lz-color-success); background: var(--lz-color-success-soft); color: var(--lz-color-success-text); }
.lz-message--warning,.message.warning { border-color: var(--lz-color-warning); background: var(--lz-color-warning-soft); color: var(--lz-color-warning-text); }
.lz-message--danger,.message.error { border-color: var(--lz-color-danger); background: var(--lz-color-danger-soft); color: var(--lz-color-danger-text); }

/* Resource Header */
.lz-resource-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lz-space-6);
  margin-bottom: var(--lz-space-6);
}
.lz-resource-header__main { min-width: 0; }
.lz-resource-header__eyebrow {
  margin: 0 0 var(--lz-space-2);
  color: var(--lz-color-brand-primary-strong);
  font-size: var(--lz-font-xs);
  line-height: 16px;
  font-weight: 700;
}
.lz-resource-header__title-row {
  display: flex;
  align-items: center;
  gap: var(--lz-space-3);
  flex-wrap: wrap;
}
.lz-resource-header__title {
  margin: 0;
  color: var(--lz-color-text);
  font-size: var(--lz-font-4xl);
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lz-resource-header__description {
  max-width: 760px;
  margin: var(--lz-space-2) 0 0;
  color: var(--lz-color-text-secondary);
  font-size: var(--lz-font-md);
  line-height: 20px;
}
.lz-resource-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  flex-wrap: wrap;
}

/* Empty State */
.lz-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--lz-space-2);
  padding: var(--lz-space-8) 0;
  color: var(--lz-color-text-secondary);
}
.lz-empty-state strong {
  color: var(--lz-color-text);
  font-size: var(--lz-font-md);
  line-height: 20px;
}
.lz-empty-state p {
  max-width: 560px;
  margin: 0;
  font-size: var(--lz-font-sm);
  line-height: 18px;
}
.lz-empty-state--compact { padding: var(--lz-space-4) 0; }

/* Overlay ownership and global stacking. Geometry is composed by approved patterns. */
.lz-drawer-backdrop,.lz-modal-backdrop { position: fixed; inset: 0; background: var(--lz-color-brand-control-deep); opacity: .55; }
.lz-drawer-backdrop { z-index: var(--lz-z-drawer-backdrop); } .lz-drawer { z-index: var(--lz-z-drawer); }
.lz-modal-backdrop { z-index: var(--lz-z-modal-backdrop); } .lz-modal { z-index: var(--lz-z-modal); }
.lz-drawer,.lz-modal { background: var(--lz-color-surface); color: var(--lz-color-text); border: 1px solid var(--lz-color-border); box-shadow: var(--lz-shadow-lg); }

@media (max-width: 767px) {
  .lz-resource-header { flex-direction: column; }
  .lz-resource-header__title { font-size: var(--lz-font-3xl); line-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Scanner Surface — UI-CMP-SCN-001 */
.lz-scanner {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-4);
}
.lz-scanner__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--lz-color-border);
  border-radius: var(--lz-radius-lg);
  background: var(--lz-color-brand-control-deep);
}
.lz-scanner__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.lz-scanner__guide {
  position: absolute;
  inset: 18%;
  border: 2px solid var(--lz-color-surface);
  border-radius: var(--lz-radius-lg);
  box-shadow: var(--lz-shadow-sm);
  pointer-events: none;
}
.lz-scanner__status {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  min-height: var(--lz-control-sm);
  color: var(--lz-color-text-secondary);
  font-size: var(--lz-font-sm);
  line-height: 18px;
}
.lz-scanner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lz-space-2);
}
.lz-scanner__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-3);
  padding-top: var(--lz-space-3);
  border-top: 1px solid var(--lz-color-border);
}
.lz-scanner[data-state="found"] .lz-scanner__status {
  color: var(--lz-color-success-text);
}
.lz-scanner[data-state="denied"] .lz-scanner__status,
.lz-scanner[data-state="error"] .lz-scanner__status {
  color: var(--lz-color-danger-text);
}
.lz-scanner[data-state="unavailable"] .lz-scanner__status,
.lz-scanner[data-state="expired"] .lz-scanner__status {
  color: var(--lz-color-warning-text);
}