@layer components {
  .im-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .im-logo img { display: block; inline-size: clamp(8rem,12vw,11rem); block-size: auto; }
  .im-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: .65rem 1rem; border: 1px solid var(--im-accent); border-radius: var(--im-radius-control); background: transparent; color: var(--im-accent); text-decoration: none; font-size: .9375rem; font-weight: 600; line-height: 1.35; text-align: center; transition: background-color var(--im-motion),border-color var(--im-motion); }
  .im-button--primary { background: var(--im-accent); color: var(--im-on-accent); }
  .im-button--primary:hover { background: var(--im-accent-hover); border-color: var(--im-accent-hover); }
  .im-button--secondary { background: var(--im-surface); }
  .im-button--secondary:hover { background: var(--im-soft); }
  .im-hero .im-button--primary { color: var(--im-hero); background: var(--im-highlight); border-color: var(--im-highlight); }
  .im-hero .im-button--primary:hover { color: var(--im-hero); background: var(--im-on-hero); border-color: var(--im-on-hero); }
  .im-hero .im-button--secondary { color: var(--im-on-hero); border-color: var(--im-on-hero); background: transparent; }
  .im-hero .im-button--secondary:hover { color: var(--im-hero); background: var(--im-on-hero); }
  .im-button--danger { color: var(--im-danger-fg); border-color: var(--im-danger-fg); background: var(--im-danger-bg); }
  .im-button:disabled,.im-button[aria-disabled="true"] { background: var(--im-neutral-bg); color: var(--im-muted); border-color: var(--im-control-border); cursor: not-allowed; }
  .im-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-12); }
  .im-icon { inline-size: 1.5rem; block-size: 1.5rem; flex: 0 0 1.5rem; stroke: currentColor; }
  .im-icon-disc { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; flex: 0 0 3rem; color: var(--im-accent); background: var(--im-soft); border-radius: 50%; }
  .im-card,.im-panel { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-panel); padding: var(--im-space-24); box-shadow: var(--im-shadow); min-inline-size: 0; }
  .im-card { display: flex; flex-direction: column; gap: var(--im-space-12); block-size: 100%; }
  .im-card > :where(h2,h3,p) { margin: 0; }
  .im-card__actions { margin-block-start: auto; padding-block-start: var(--im-space-12); }
  .im-card__media { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--im-radius-control); }
  .im-card--compact { padding: var(--im-space-16); }
  .im-panel__heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: var(--im-space-12); margin-block-end: var(--im-space-16); }
  .im-field { display: grid; gap: .4rem; align-content: start; }
  .im-field__label { font-weight: 600; color: var(--im-text); }
  .im-role-entry__search .im-field__label { color: var(--im-on-hero); }
  .im-field__help { color: var(--im-muted); font-size: .875rem; margin: 0; }
  .im-input,.im-select,.im-textarea { inline-size: 100%; min-block-size: 2.75rem; border: 1px solid var(--im-control-border); border-radius: var(--im-radius-control); background: var(--im-surface); color: var(--im-text); padding: .65rem .8rem; line-height: 1.5; }
  .im-textarea { min-block-size: 8rem; resize: vertical; }
  .im-input[aria-invalid="true"],.im-select[aria-invalid="true"],.im-textarea[aria-invalid="true"] { border: 2px solid var(--im-danger-fg); }
  .im-field__error { color: var(--im-danger-fg); font-size: .875rem; margin: 0; font-weight: 600; }
  .im-check { display: flex; align-items: start; gap: .65rem; min-block-size: 2.75rem; padding-block: .5rem; }
  .im-check input { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; accent-color: var(--im-accent); margin-block-start: .15rem; }
  .im-fieldset { border: 0; padding: 0; margin: 0; }
  .im-fieldset legend { font-weight: 700; margin-block-end: .75rem; }
  .im-notice,.im-error-summary { padding: var(--im-space-16); border-radius: var(--im-radius-control); border-inline-start: 4px solid var(--im-info-fg); background: var(--im-info-bg); color: var(--im-info-fg); }
  .im-error-summary { border-color: var(--im-danger-fg); background: var(--im-danger-bg); color: var(--im-danger-fg); }
  .im-error-summary a { color: inherit; }
  .im-notice--warning { color: var(--im-warning-fg); background: var(--im-warning-bg); border-color: var(--im-warning-fg); }
  .im-notice--success { color: var(--im-success-fg); background: var(--im-success-bg); border-color: var(--im-success-fg); }
  .im-status { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: .35rem; font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--im-neutral-fg); background: var(--im-neutral-bg); }
  .im-status[data-tone="success"] { color: var(--im-success-fg); background: var(--im-success-bg); }
  .im-status[data-tone="warning"] { color: var(--im-warning-fg); background: var(--im-warning-bg); }
  .im-status[data-tone="danger"] { color: var(--im-danger-fg); background: var(--im-danger-bg); }
  .im-status[data-tone="information"] { color: var(--im-info-fg); background: var(--im-info-bg); }
  .im-sidebar-nav { display: grid; gap: .25rem; }
  .im-sidebar-nav a { display: flex; gap: .75rem; align-items: center; min-block-size: 2.75rem; padding: .65rem .8rem; border-inline-start: 3px solid transparent; border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0; color: var(--im-muted); text-decoration: none; font-size: .875rem; }
  .im-sidebar-nav a[aria-current="page"] { background: var(--im-soft); color: var(--im-accent); border-inline-start-color: var(--im-accent); font-weight: 700; }
  .im-breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; font-size: .875rem; margin: 0; }
  .im-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: .75rem; list-style: none; padding: var(--im-space-16); background: var(--im-soft); border-radius: var(--im-radius-panel); }
  .im-stepper li { display: flex; align-items: center; gap: .75rem; }
  .im-stepper__number { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; flex: 0 0 2rem; border-radius: 50%; background: var(--im-neutral-bg); color: var(--im-neutral-fg); font-weight: 700; }
  .im-stepper [aria-current="step"] .im-stepper__number { background: var(--im-accent); color: var(--im-on-accent); }
  .im-stepper__mobile { display: none; }
  .im-table-region { overflow: auto; border: 1px solid var(--im-border); border-radius: var(--im-radius-control); }
  .im-table { border-collapse: collapse; inline-size: 100%; font-size: .875rem; }
  .im-table :where(th,td) { text-align: start; padding: .9rem 1rem; border-block-end: 1px solid var(--im-border); vertical-align: top; }
  .im-table th { color: var(--im-muted); background: var(--im-neutral-bg); font-weight: 600; }
  .im-record-list { display: grid; gap: var(--im-space-12); }
  .im-record { display: grid; gap: .75rem; padding: var(--im-space-16); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-control); }
  .im-record dl { display: grid; grid-template-columns: minmax(5rem,1fr) minmax(0,2fr); gap: .5rem; margin: 0; }
  .im-record dt { color: var(--im-muted); }
  .im-record dd { margin: 0; }
  .im-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--im-space-16); margin-block-end: var(--im-space-24); }
  .im-pagination { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block-start: var(--im-space-24); }
  .im-empty { padding: var(--im-space-32); border: 1px solid var(--im-border); border-radius: var(--im-radius-panel); background: var(--im-surface); }
  .im-dialog { inline-size: min(36rem,calc(100% - 2rem)); max-block-size: calc(100dvh - 2rem); overflow: auto; border: 1px solid var(--im-border); border-radius: var(--im-radius-panel); padding: var(--im-space-24); background: var(--im-surface); color: var(--im-text); }
  .im-dialog::backdrop { background: var(--im-backdrop); }
  .im-drawer { margin: 0 0 0 auto; block-size: 100dvh; max-block-size: 100dvh; inline-size: min(23rem,100%); border-radius: 0; }
  [dir="rtl"] .im-drawer { margin: 0 auto 0 0; }
  .im-drawer nav { display: grid; gap: .5rem; margin-block: var(--im-space-24); }
  .im-drawer nav a { display: flex; align-items: center; min-block-size: 2.75rem; padding: .5rem; }
  .im-mobile-records { display: none; }
  @media (max-width: 47.999rem) { .im-desktop-records { display: none; } .im-mobile-records { display: grid; } .im-actions > .im-button { flex: 1 1 12rem; } .im-card,.im-panel { padding: var(--im-space-16); } .im-stepper { display: none; } .im-stepper__mobile { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: var(--im-space-16); background: var(--im-soft); border-radius: var(--im-radius-control); margin-block-end: var(--im-space-16); } }
}

@layer components {
  .im-steps-disclosure > summary { min-block-size: 2.75rem; display: flex; align-items: center; padding: .75rem; gap: .5rem; cursor: pointer; background: var(--im-soft); border-radius: var(--im-radius-control); }
  .im-steps-disclosure[open] .im-stepper { display: grid; }
  .im-field-error { color: var(--im-danger-fg); font-weight: 600; }
  .im-error-summary { border: 2px solid var(--im-danger-fg); border-radius: var(--im-radius-control); padding: var(--im-space-16); margin-block-end: var(--im-space-24); }
  .im-error-summary a { color: var(--im-danger-fg); }
  .im-field [aria-invalid="true"] { border-color: var(--im-danger-fg); border-width: 2px; }
  .im-context-label { font-size: .875rem; color: var(--im-muted); }
  .im-save-status { min-block-size: 1.6em; }
  .im-version-label { font-variant-numeric: tabular-nums; }
  @media (max-width: 47.999rem) { .im-steps-disclosure .im-stepper { grid-auto-flow: row; } }
  @media (forced-colors: active) {
    .im-button,.im-card,.im-panel,.im-status { border: 1px solid CanvasText; }
    .iemoc :focus-visible { outline-color: Highlight; box-shadow: none; }
  }
  @media print {
    .im-header,.im-footer,.im-sidebar,.im-no-print { display: none !important; }
    .iemoc { background: white; color: black; }
    .im-certificate { border: 1px solid black; padding: 1.5rem; }
    .im-certificate a { color: black; text-decoration: underline; }
  }
}