@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-height: 100%; }
  body { min-height: 100vh; margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, select { cursor: pointer; }
  h1, h2, h3, p, figure, dl, dd { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
}

@layer tokens {
  :root {
    color-scheme: light;
    --color-canvas: #f4f7f5;
    --color-surface: #ffffff;
    --color-surface-soft: #edf4f0;
    --color-surface-strong: #dceae3;
    --color-ink: #12211c;
    --color-muted: #52635c;
    --color-line: #d2ddd7;
    --color-line-strong: #aabbb2;
    --color-brand: #0d624a;
    --color-brand-strong: #084936;
    --color-brand-soft: #e2f3eb;
    --color-info: #175d8f;
    --color-info-soft: #e8f3fb;
    --color-success: #257044;
    --color-success-soft: #e8f6ed;
    --color-warning: #82550e;
    --color-warning-soft: #fff4d5;
    --color-danger: #a73333;
    --color-danger-strong: #842626;
    --color-danger-soft: #fff0ef;
    --color-focus: #1769aa;
    --shadow-sm: 0 1px 2px rgb(18 33 28 / 6%);
    --shadow-md: 0 10px 30px rgb(18 33 28 / 8%);
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --touch: 3rem;
    --header-height: 4.5rem;
    --nav-height: 4.75rem;
    --content-width: 92rem;
  }
}

@layer base {
  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 { line-height: 1.18; letter-spacing: -.025em; }
  h1 { font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 760; }
  h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 720; }
  h3 { font-size: 1.05rem; }
  a { color: var(--color-brand); text-underline-offset: .2em; }
  strong { font-weight: 700; }
  small { font-size: .84rem; }

  :focus-visible {
    outline: .2rem solid var(--color-focus);
    outline-offset: .18rem;
  }

  ::selection { background: var(--color-surface-strong); }
}

@layer layout {
  .app-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--color-line);
    background: rgb(255 255 255 / 96%);
  }

  .app-main {
    width: min(100%, var(--content-width));
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 2rem;
  }

  .primary-nav {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: var(--nav-height);
    align-items: stretch;
    overflow-x: auto;
    border-top: 1px solid var(--color-line);
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 -6px 20px rgb(18 33 28 / 7%);
    overscroll-behavior-x: contain;
  }

  .primary-nav a {
    display: flex;
    min-width: 6rem;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: .2rem solid transparent;
    color: var(--color-muted);
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
  }

  .primary-nav a > span:first-child { font-size: 1.15rem; line-height: 1; }
  .primary-nav a[aria-current="page"] { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-strong); }

  .page-heading { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); }
  .page-heading--actions { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); }
  .page-heading__subtitle { max-width: 52rem; margin-top: var(--space-2); color: var(--color-muted); font-size: 1.04rem; }

  .dashboard-grid, .detail-layout, .work-layout { display: grid; gap: var(--space-6); }
  .dashboard-grid { margin-top: var(--space-6); }
  .stack { display: grid; align-content: start; gap: var(--space-5); }
  .narrow-page { width: min(100%, 48rem); margin-inline: auto; }

  .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); }
  .card-list { display: grid; gap: var(--space-4); }

  @media (min-width: 54rem) {
    .app-main { padding-bottom: var(--space-10); }
  }

  @media (min-width: 70rem) {
    .dashboard-grid { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .8fr); }
    .detail-layout { grid-template-columns: minmax(0, 1.7fr) minmax(20rem, .75fr); }
    .work-layout { grid-template-columns: minmax(0, 1.4fr) minmax(23rem, .8fr); align-items: start; }
    .quality-panel { position: sticky; top: 9rem; }
  }
}

@layer layout {
  .app-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-block: .45rem;
  }
  .app-header .primary-nav {
    position: static;
    z-index: auto;
    min-height: 0;
    justify-content: center;
    overflow-x: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-header .primary-nav a {
    min-width: auto;
    flex: 0 0 auto;
    padding: .65rem .72rem;
    border: 0;
    border-radius: .55rem;
    font-size: .8rem;
  }
  .app-header .primary-nav a[aria-current="page"] { border: 0; }

  @media (max-width: 72rem) {
    .app-header { grid-template-columns: auto minmax(0, 1fr) auto; }
    .app-header .user-summary__identity { display: none; }
    .app-header .primary-nav { justify-content: flex-end; }
    .app-header .primary-nav a { padding-inline: .55rem; }
  }

  @media (max-width: 53.99rem) {
    :root { --header-height: 7.9rem; }
    .app-header { grid-template-columns: 1fr; gap: .3rem; align-content: center; padding: .35rem .6rem; }
    .app-header .brand { justify-self: center; }
    .app-header .brand small { display: none; }
    .app-header .user-summary { position: absolute; top: .38rem; right: .45rem; }
    .app-header .user-summary .button { min-height: 2.25rem; padding-inline: .45rem; font-size: .68rem; }
    .app-header .primary-nav { width: 100%; justify-content: flex-start; }
    .app-header .primary-nav a { min-width: 4.4rem; padding: .38rem .48rem; flex-direction: column; gap: .1rem; font-size: .68rem; }
    .app-header .primary-nav a > span:first-child { font-size: 1rem; }
  }
}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 100;
    top: var(--space-3);
    left: var(--space-3);
    translate: 0 -200%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: #fff;
  }
  .skip-link:focus { translate: 0; }

  .brand, .auth-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-ink); text-decoration: none; }
  .brand__mark {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .7rem;
    background: var(--color-brand);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
  }
  .brand strong, .brand small, .auth-brand strong, .auth-brand small { display: block; line-height: 1.2; }
  .brand small, .auth-brand small { color: var(--color-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

  .user-summary { display: flex; align-items: center; gap: var(--space-4); }
  .user-summary__identity { display: none; text-align: right; }
  .user-summary__identity strong, .user-summary__identity small { display: block; line-height: 1.3; }
  .user-summary__identity small { color: var(--color-muted); }

  .eyebrow { color: var(--color-brand); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  .muted { color: var(--color-muted); }
  .text-link { font-weight: 700; white-space: nowrap; }

  .panel, .instruction-card, .catalog-card {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
  .panel { padding: clamp(1.15rem, 3vw, 1.75rem); }
  .panel--accent { border-color: #acd2c2; background: linear-gradient(145deg, #fff 58%, var(--color-brand-soft)); }
  .panel--soft { background: var(--color-surface-soft); }
  .panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
  .panel__header h2 { margin-top: var(--space-1); }
  .panel__actions { display: flex; justify-content: flex-end; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }

  .button {
    display: inline-flex;
    min-height: var(--touch);
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .68rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 720;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }
  .button--primary { border-color: var(--color-brand); background: var(--color-brand); color: #fff; }
  .button--primary:hover { border-color: var(--color-brand-strong); background: var(--color-brand-strong); }
  .button--secondary { border-color: var(--color-line-strong); background: var(--color-surface); color: var(--color-ink); }
  .button--secondary:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .button--quiet { background: transparent; color: var(--color-muted); }
  .button--quiet:hover { background: var(--color-surface-soft); color: var(--color-ink); }
  .button--danger { border-color: var(--color-danger); background: var(--color-danger); color: #fff; }
  .button--danger:hover { background: var(--color-danger-strong); }
  .button--danger-quiet { border-color: #e5b5b5; background: var(--color-danger-soft); color: var(--color-danger); }
  .button--small { min-height: 2.55rem; padding: .5rem .8rem; font-size: .88rem; }
  .button--large { min-height: 3.35rem; padding-inline: 1.35rem; }
  .button--full { width: 100%; }
  .button:disabled { cursor: not-allowed; opacity: .38; }

  .metric-card { min-height: 7rem; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .metric-card span { display: block; color: var(--color-muted); font-size: .88rem; font-weight: 650; }
  .metric-card strong { display: block; margin-top: var(--space-2); font-size: 2rem; line-height: 1; }
  .metric-card--danger { border-left: .3rem solid var(--color-danger); }
  .metric-card--warning { border-left: .3rem solid var(--color-warning); }
  .metric-card--success { border-left: .3rem solid var(--color-success); }

  .status { display: inline-flex; min-height: 1.9rem; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: 99rem; background: #edf1ef; color: #405049; font-size: .77rem; font-weight: 750; line-height: 1.1; white-space: nowrap; }
  .status__dot { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
  .status--in_progress, .status--active { background: var(--color-info-soft); color: var(--color-info); }
  .status--blocked { background: var(--color-danger-soft); color: var(--color-danger); }
  .status--awaiting_approval, .status--review { background: var(--color-warning-soft); color: var(--color-warning); }
  .status--completed, .status--done, .status--approved, .status--ready, .status--in_service { background: var(--color-success-soft); color: var(--color-success); }
  .status--cancelled, .status--retired, .status--scrapped, .status--skipped { background: #ecefed; color: #5d6964; }
  .status--draft, .status--planned, .status--pending, .status--open { background: #edf1ef; color: #405049; }

  progress { width: 100%; height: .7rem; overflow: hidden; border: 0; border-radius: 99rem; background: var(--color-surface-strong); }
  progress::-webkit-progress-bar { background: var(--color-surface-strong); }
  progress::-webkit-progress-value { border-radius: 99rem; background: var(--color-brand); }
  progress::-moz-progress-bar { border-radius: 99rem; background: var(--color-brand); }
  .progress-block { display: grid; gap: var(--space-2); }
  .progress-block__labels { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-muted); font-size: .88rem; }
  .progress-block__labels strong { color: var(--color-ink); }

  .active-build { display: grid; gap: var(--space-6); }
  .active-build > div:first-child { display: grid; gap: var(--space-1); }
  .active-build__name { font-size: clamp(1.3rem, 3vw, 1.8rem); }
  .active-build > div:first-child span { color: var(--color-muted); }

  .compact-list, .row-list { list-style: none; }
  .compact-list li, .row-list li { border-top: 1px solid var(--color-line); }
  .compact-list li:first-child, .row-list li:first-child { border-top: 0; }
  .compact-list li, .compact-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .compact-list li { min-height: 3.7rem; padding-block: var(--space-2); }
  .compact-list a { width: 100%; color: var(--color-ink); text-decoration: none; }
  .compact-list span, .compact-list strong, .compact-list small { display: block; }
  .compact-list small { color: var(--color-muted); }
  .row-list li { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
  .row-list li > div, .row-list li > a > div { display: grid; gap: .15rem; }
  .row-list span { color: var(--color-muted); font-size: .9rem; }
  .row-list--interactive li { display: block; padding: 0; }
  .row-list--interactive a { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); color: var(--color-ink); text-decoration: none; }
  .numbered-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding-left: 1.35rem; }

  .notice-stack { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
  .notice { padding: var(--space-3) var(--space-4); border: 1px solid #a9c7b9; border-radius: var(--radius-sm); background: var(--color-brand-soft); color: var(--color-brand-strong); font-weight: 600; }
  .notice--error { border-color: #e4b1b1; background: var(--color-danger-soft); color: var(--color-danger-strong); }
  .notice--warning { border-color: #e7cb82; background: var(--color-warning-soft); color: var(--color-warning); }
  .notice--success { border-color: #acd6bb; background: var(--color-success-soft); color: var(--color-success); }

  .filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-bottom: var(--space-6); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .filter-bar .field { min-width: 12rem; margin: 0; }
  .filter-bar .field--search { min-width: min(100%, 18rem); flex: 1 1 22rem; }
  .filter-bar--compact { max-width: 50rem; }

  .field { display: grid; gap: .4rem; }
  .field label { font-size: .88rem; font-weight: 700; }
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .inline-form input {
    width: 100%;
    min-height: var(--touch);
    padding: .68rem .8rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
  }
  .field textarea { min-height: 8rem; resize: vertical; }
  .field input[type="file"] { padding: .55rem; }
  .field input:focus, .field select:focus, .field textarea:focus, .inline-form input:focus { border-color: var(--color-focus); outline: .18rem solid rgb(23 105 170 / 20%); }
  .field__help { color: var(--color-muted); font-size: .82rem; }
  .field__errors, .errorlist { list-style: none; color: var(--color-danger); font-size: .86rem; font-weight: 650; }
  .field--error input, .field--error select, .field--error textarea { border-color: var(--color-danger); }
  .required { color: var(--color-danger); }
  .form-stack { display: grid; gap: var(--space-5); }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-3); }
  .check-filter { display: flex; min-height: var(--touch); align-items: center; gap: var(--space-2); padding-inline: var(--space-2); font-weight: 650; }
  .check-filter input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-brand); }
  .inline-form { display: flex; min-width: min(100%, 30rem); flex-wrap: wrap; gap: var(--space-3); }
  .inline-form input { flex: 1 1 15rem; }

  .table-wrap { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th { padding: .8rem 1rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
  .data-table td { padding: .9rem 1rem; border-top: 1px solid var(--color-line); vertical-align: middle; }
  .data-table td strong, .data-table td small { display: block; }
  .data-table td small { margin-top: .12rem; color: var(--color-muted); }
  .data-table tbody tr:hover { background: #f9fbfa; }
  .data-table .row--danger { background: var(--color-danger-soft); }
  .data-table .row--warning { background: var(--color-warning-soft); }
  .table-action { text-align: right; }
  .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); color: var(--color-muted); }

  .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); color: var(--color-muted); font-size: .9rem; }
  .breadcrumbs a { font-weight: 650; }

  .callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .callout--danger { border-left: .35rem solid var(--color-danger); background: var(--color-danger-soft); }
  .callout p { margin-top: var(--space-1); }
  .callout small { display: block; margin-top: var(--space-2); color: var(--color-muted); }

  .definition-list { display: grid; margin-top: var(--space-4); }
  .definition-list > div { display: grid; grid-template-columns: minmax(6rem, .8fr) 1.2fr; gap: var(--space-3); padding-block: .65rem; border-top: 1px solid var(--color-line); }
  .definition-list dt { color: var(--color-muted); }
  .definition-list dd { font-weight: 650; overflow-wrap: anywhere; }
  .definition-list--compact { font-size: .9rem; }

  .step-list { display: grid; margin-top: var(--space-5); list-style: none; }
  .step-list__item { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 4.25rem; padding: var(--space-2) 0; }
  .step-list__item:not(:last-child)::after { position: absolute; top: 3.25rem; bottom: -.9rem; left: 1.08rem; width: 2px; background: var(--color-line); content: ""; }
  .step-list__index { position: relative; z-index: 1; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 2px solid var(--color-line-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-muted); font-weight: 800; }
  .step-list__item--done .step-list__index { border-color: var(--color-success); background: var(--color-success); color: #fff; }
  .step-list__item--active .step-list__index { border-color: var(--color-brand); color: var(--color-brand); }
  .step-list__item--blocked .step-list__index { border-color: var(--color-danger); color: var(--color-danger); }
  .step-list__item div { display: grid; gap: .1rem; }
  .step-list__item small { color: var(--color-muted); }

  .work-header { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
  .work-header__progress { display: flex; justify-content: space-between; color: var(--color-muted); font-size: .88rem; }
  .work-header__progress strong { color: var(--color-brand); }
  .work-header__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
  .work-header__title h1 { margin-top: var(--space-1); }
  .instruction-card { overflow: hidden; }
  .instruction-visual { display: grid; min-height: 14rem; max-height: 34rem; place-items: center; overflow: hidden; border-bottom: 1px solid var(--color-line); background: #e7eeea; }
  .instruction-visual img { width: 100%; height: 100%; object-fit: contain; }
  .instruction-copy { padding: clamp(1.2rem, 3vw, 2rem); font-size: 1.08rem; }
  .instruction-copy p + p { margin-top: var(--space-4); }
  .parts-strip { padding: var(--space-5); border-top: 1px solid var(--color-line); background: var(--color-surface-soft); }
  .parts-strip h2 { margin-bottom: var(--space-4); font-size: 1rem; }
  .parts-strip ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); list-style: none; }
  .parts-strip li { display: grid; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
  .parts-strip small { color: var(--color-muted); }
  .quality-panel { overflow: visible; }
  .work-actions { position: sticky; z-index: 20; bottom: calc(var(--nav-height) + .5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-4); border-top: 1px solid var(--color-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: rgb(255 255 255 / 96%); box-shadow: 0 -8px 20px rgb(18 33 28 / 6%); }
  .work-actions > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .context-card { display: grid; gap: .15rem; margin-bottom: var(--space-4); padding: var(--space-4); border-left: .3rem solid var(--color-brand); border-radius: var(--radius-sm); background: var(--color-brand-soft); }
  .context-card span { color: var(--color-brand); font-size: .8rem; font-weight: 750; text-transform: uppercase; }

  .build-actions { flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }
  .action-form { display: flex; flex: 1 1 24rem; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: var(--space-3); }
  .action-form .field { min-width: min(100%, 17rem); flex: 1 1 17rem; }
  .ready-callout { display: flex; align-items: center; gap: var(--space-3); color: var(--color-success); }
  .ready-callout > span { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-success-soft); font-weight: 800; }
  .ready-callout strong, .ready-callout small { display: block; }
  .ready-callout small { color: var(--color-muted); }

  .blockage-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid #e4b1b1; border-left: .35rem solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-soft); }
  .blockage-summary h2 { margin-top: var(--space-3); }
  .blockage-summary p, .blockage-summary small { display: block; margin-top: var(--space-2); color: var(--color-muted); }
  .evidence-link { flex: 0 0 auto; font-weight: 700; }

  .approval-list { display: grid; gap: var(--space-4); }
  .approval-card { padding: var(--space-5); border: 1px solid var(--color-line); border-left: .3rem solid var(--color-warning); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .approval-card > header, .approval-card > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .approval-card > header h2 { margin-top: var(--space-1); }
  .approval-card > footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

  .production-board { display: grid; grid-auto-columns: minmax(16rem, 1fr); grid-auto-flow: column; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-3); scroll-snap-type: x proximity; }
  .production-column { min-height: 28rem; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #eaf0ed; scroll-snap-align: start; }
  .production-column > header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-1) var(--space-3); }
  .production-column > header h2 { font-size: 1rem; }
  .production-column > header > span { display: grid; min-width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: var(--color-surface); font-size: .8rem; font-weight: 750; }
  .production-column__items { display: grid; align-content: start; gap: var(--space-3); }
  .production-card { display: grid; gap: .28rem; padding: var(--space-4); border: 1px solid var(--color-line); border-left: .25rem solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); text-decoration: none; }
  .production-card--in_progress { border-left-color: var(--color-info); }
  .production-card--blocked { border-left-color: var(--color-danger); }
  .production-card--awaiting_approval { border-left-color: var(--color-warning); }
  .production-card--completed { border-left-color: var(--color-success); }
  .production-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
  .production-card__name { margin-top: var(--space-2); font-weight: 680; }
  .production-card__meta { color: var(--color-muted); font-size: .84rem; }
  .production-card__step { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-line); color: var(--color-brand); font-size: .82rem; font-weight: 650; }
  .production-column__empty { padding: var(--space-5) var(--space-2); color: var(--color-muted); text-align: center; }

  .task-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-line); border-left: .3rem solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface); }
  .task-card--danger { border-left-color: var(--color-danger); }
  .task-card--warning { border-left-color: var(--color-warning); }
  .task-card__date { display: grid; gap: .15rem; }
  .task-card__date span { color: var(--color-muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; }
  .task-card__body { display: grid; gap: .2rem; }
  .task-card__body h2 { font-size: 1.12rem; }
  .task-card__body > p:last-child { color: var(--color-muted); font-size: .9rem; }
  .task-card__meta { display: grid; justify-items: end; gap: var(--space-2); color: var(--color-muted); font-size: .82rem; }

  .tabs { display: flex; gap: var(--space-2); max-width: 100%; overflow-x: auto; margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); }
  .tabs a { min-height: var(--touch); padding: .75rem 1rem; border-bottom: .2rem solid transparent; color: var(--color-muted); font-weight: 700; text-decoration: none; }
  .tabs a[aria-current="page"] { border-color: var(--color-brand); color: var(--color-brand); }
  .catalog-view-switch { display: flex; width: fit-content; gap: .25rem; margin: calc(var(--space-3) * -1) 0 var(--space-3) auto; padding: .22rem; border: 1px solid var(--color-line); border-radius: 99rem; background: var(--color-surface-soft); }
  .catalog-view-switch a { display: inline-flex; align-items: center; gap: .42rem; min-height: 2.15rem; padding: .35rem .7rem; border-radius: 99rem; color: var(--color-muted); font-size: .78rem; font-weight: 720; text-decoration: none; }
  .catalog-view-switch a[aria-current="page"] { background: var(--color-surface); color: var(--color-brand); box-shadow: var(--shadow-sm); }
  .catalog-view-switch span { display: grid; min-width: 1.45rem; min-height: 1.45rem; place-items: center; padding-inline: .28rem; border-radius: 99rem; background: var(--color-surface-strong); font-size: .7rem; }
  .catalog-card { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); }
  .catalog-card--interactive { transition: border-color .16s ease, box-shadow .16s ease, translate .16s ease; }
  .catalog-card--interactive:hover, .catalog-card--interactive:focus-within { border-color: #9fc5b5; box-shadow: var(--shadow-md); translate: 0 -.12rem; }
  .catalog-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .catalog-card__link { color: var(--color-ink); text-decoration: none; }
  .catalog-card__link::after { position: absolute; inset: 0; content: ""; }
  .catalog-card__link:focus-visible { outline: 0; }
  .catalog-card > p { color: var(--color-muted); }
  .code-chip { display: inline-block; width: fit-content; padding: .2rem .5rem; border-radius: .3rem; background: var(--color-surface-soft); color: var(--color-brand-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; font-weight: 750; }
  .serial-pattern { display: inline-flex; width: fit-content; padding: .14rem .38rem; border: 1px solid rgb(9 88 69 / 15%); border-radius: .3rem; background: rgb(255 255 255 / 58%); color: var(--color-brand-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem; font-weight: 780; letter-spacing: .02em; white-space: nowrap; }
  .catalog-subassembly-list { display: grid; gap: .45rem; padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
  .catalog-subassembly { position: relative; z-index: 2; display: grid; grid-template-columns: .5rem minmax(0, 1fr); align-items: start; gap: .5rem; padding: .5rem .58rem; border-radius: .55rem; color: inherit; text-decoration: none; }
  .catalog-subassembly:hover { filter: brightness(.975); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%); }
  .catalog-subassembly .notice-state__dot { margin-top: .33rem; }
  .catalog-subassembly__body { display: grid; gap: .34rem; min-width: 0; }
  .catalog-subassembly__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .55rem; font-size: .8rem; }
  .functional-scope-list { display: flex; flex-wrap: wrap; gap: .24rem; }
  .functional-scope-list > span { padding: .12rem .34rem; border: 1px solid rgb(20 72 59 / 9%); border-radius: 99rem; background: rgb(255 255 255 / 52%); color: var(--color-muted); font-size: .64rem; line-height: 1.3; }
  .reference-functional-scopes { display: grid; gap: .4rem; padding: .6rem .68rem; border: 1px solid var(--color-line); border-radius: .55rem; background: var(--color-surface-soft); }
  .reference-functional-scopes > small { color: var(--color-muted); font-size: .67rem; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
  .chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
  .chip-list span, .chip-list a { padding: .25rem .55rem; border-radius: 99rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .78rem; text-decoration: none; }
  .chip-list a { position: relative; z-index: 2; }
  .chip-list a:hover { background: var(--color-brand-soft); color: var(--color-brand); }
  .notice-state-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; margin: -.35rem 0 .85rem; }
  .notice-state-legend__item, .chip-list a.notice-state { display: inline-flex; align-items: center; gap: .38rem; }
  .notice-state-legend__item { padding: .22rem .48rem; border-radius: 99rem; font-size: .7rem; font-weight: 740; }
  .notice-state-legend__item::before, .notice-state__dot { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: currentcolor; content: ""; }
  .notice-state--absent { background: #edf1ef !important; color: #617069 !important; }
  .notice-state--draft, .notice-state--preparation { background: #e3f0ff !important; color: #2362a2 !important; }
  .notice-state--review { background: var(--color-warning-soft) !important; color: var(--color-warning) !important; }
  .notice-state--approved, .notice-state--available { background: var(--color-success-soft) !important; color: var(--color-success) !important; }
  .notice-state--retired, .notice-state--archived { background: #f1eeee !important; color: #746565 !important; }

  .reference-progress { margin-top: var(--space-5); }
  .reference-checklist { display: grid; margin-top: var(--space-5); list-style: none; }
  .reference-checklist__item { border-top: 1px solid var(--color-line); }
  .reference-checklist__link { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 4.75rem; margin-inline: calc(var(--space-3) * -1); padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; transition: background .15s ease, translate .15s ease; }
  .reference-checklist__link:hover { background: rgb(255 255 255 / 75%); translate: .2rem 0; }
  .reference-checklist__link:focus-visible { outline: .18rem solid rgb(23 105 170 / 25%); outline-offset: -.18rem; }
  .reference-checklist__mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 2px solid var(--color-line-strong); border-radius: 50%; color: var(--color-muted); font-weight: 800; }
  .reference-checklist__mark--done { border-color: var(--color-success); background: var(--color-success); color: #fff; }
  .reference-checklist__copy { display: grid; gap: .18rem; }
  .reference-checklist small { color: var(--color-muted); }
  .reference-checklist__status { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
  .reference-checklist__arrow { color: var(--color-brand); font-size: 1.6rem; line-height: 1; }
  .reference-actions { flex-wrap: wrap; gap: var(--space-3); }
  .reference-actions form { display: contents; }

  .preparation-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }
  .preparation-nav__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--space-2); min-height: 4.35rem; padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
  .preparation-nav__item:hover { border-color: #9fc5b5; background: var(--color-brand-soft); }
  .preparation-nav__item--active { border-color: var(--color-brand); box-shadow: inset 0 -.2rem 0 var(--color-brand); }
  .preparation-nav__item > span:nth-child(2) { display: grid; min-width: 0; }
  .preparation-nav__item small { color: var(--color-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
  .preparation-nav__item strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
  .preparation-nav__item > .status { grid-column: 1 / -1; width: fit-content; margin-left: 2.5rem; font-size: .7rem; }
  .preparation-nav__index { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 2px solid var(--color-line-strong); border-radius: 50%; color: var(--color-muted); font-size: .8rem; font-weight: 800; }
  .preparation-nav__index--done { border-color: var(--color-success); background: var(--color-success); color: #fff; }

  .narrow-page--flow { margin-top: var(--space-6); }
  .flow-layout { display: grid; gap: var(--space-5); }
  .flow-panel { padding-top: var(--space-4); }
  .flow-panel--validation { border-color: #acd2c2; }
  .flow-panel__heading { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
  .flow-panel__heading h2 { margin-top: .1rem; }
  .flow-panel__number { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 50%; background: var(--color-brand); color: #fff; font-weight: 850; }
  .reference-info-page { width: min(100%, 58rem); margin: var(--space-5) auto 0; }
  .reference-info-panel { display: grid; gap: var(--space-5); }
  .reference-info-fixed { display: flex; flex-wrap: wrap; gap: .55rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
  .reference-info-fixed span { display: flex; align-items: baseline; gap: .4rem; padding: .32rem .55rem; border-radius: .45rem; background: var(--color-surface-soft); }
  .reference-info-fixed small { color: var(--color-muted); font-size: .72rem; font-weight: 720; text-transform: uppercase; }
  .reference-info-fixed strong { font-size: .86rem; }
  .reference-info-form { gap: var(--space-3); }
  .reference-info-form .field { gap: .25rem; }
  .reference-info-form .field input, .reference-info-form .field textarea { min-height: 2.65rem; padding: .48rem .62rem; }
  .reference-info-form .field textarea { min-height: 4.5rem; }
  .reference-info-form__description { grid-column: 1 / -1; }

  .bom-preparation-page { width: min(100%, 78rem); margin: var(--space-5) auto 0; }
  .bom-preparation-panel { display: grid; gap: var(--space-4); padding: var(--space-4); }
  .bom-preparation-toolbar, .bom-validation-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .bom-preparation-toolbar > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
  .bom-preparation-toolbar__status { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); font-size: .85rem; }
  .bom-source-editor { margin: 0; }
  .bom-source-editor[open] { padding-bottom: var(--space-3); }
  .bom-source-form { gap: var(--space-3); padding-top: var(--space-3); }
  .bom-source-form .field { gap: .25rem; }
  .bom-source-form .field input { min-height: 2.55rem; padding: .45rem .6rem; }
  .bom-source-form .field__help { font-size: .72rem; }
  .bom-preparation-table .data-table th { padding-block: .55rem; }
  .bom-preparation-table .data-table td { padding-block: .58rem; }
  .bom-preparation-add { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .bom-preparation-add > details { flex: 1 1 22rem; margin: 0; }
  .bom-validation-bar { min-height: 3.5rem; padding-top: var(--space-3); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .88rem; }
  .bom-validation-bar form { margin: 0; }
  .flow-form { margin-top: var(--space-5); }
  .form-grid { display: grid; gap: var(--space-4); }
  .form-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--three { grid-template-columns: minmax(12rem, 1fr) repeat(2, minmax(8rem, .45fr)); }
  .form-grid--two > .field:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .editor-step-list { display: grid; list-style: none; }
  .editor-step-list > li { display: grid; grid-template-columns: 2.1rem 7rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); }
  .editor-step-list__index { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-surface-strong); color: var(--color-brand); font-weight: 800; }
  .editor-step-list__visual { width: 7rem; aspect-ratio: 16 / 9; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-soft); object-fit: contain; }
  .editor-step-list__visual--empty { display: grid; place-items: center; color: var(--color-muted); font-size: .72rem; }
  .editor-step-list__content { display: grid; gap: .2rem; }
  .editor-step-list small, .editor-step-list p { color: var(--color-muted); }
  .editor-step-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  .editor-step-list__actions form { display: contents; }
  .step-order-actions { display: flex; gap: var(--space-1); }
  .button--icon { min-width: 2.25rem; padding-inline: .55rem; font-size: 1rem; }
  .import-panel { display: grid; gap: var(--space-4); }
  .import-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .import-guide > div { display: grid; gap: .25rem; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
  .import-guide span { color: var(--color-muted); font-size: .86rem; }
  .source-archive-link { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-soft); color: var(--color-muted); font-size: .86rem; }
  .step-editor-preview { display: block; width: min(100%, 48rem); max-height: 30rem; margin: 0 auto var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-soft); object-fit: contain; }
  .control-list { display: grid; list-style: none; }
  .control-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
  .control-list li > div:first-child { display: grid; gap: .2rem; }
  .control-list small { color: var(--color-muted); }
  .control-list__actions { display: flex; gap: var(--space-2); }
  .control-list__actions form { display: contents; }
  .inline-editor { margin-top: var(--space-4); border-top: 1px solid var(--color-line); }
  .inline-editor summary { padding: var(--space-4) 0; color: var(--color-brand); cursor: pointer; font-weight: 750; }
  .inline-editor[open] summary { margin-bottom: var(--space-3); }
  .tolerance-fields { padding-bottom: var(--space-2); }

  .requirement-list { display: grid; gap: var(--space-3); list-style: none; }
  .requirement-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); }
  .requirement-list li > span:first-child { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border: 2px solid var(--color-line-strong); border-radius: 50%; font-weight: 800; }
  .requirement-list__done { color: var(--color-ink) !important; }
  .requirement-list__done > span:first-child { border-color: var(--color-success) !important; background: var(--color-success); color: #fff; }
  .requirement-list--large li { align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
  .requirement-list--large li > div { display: grid; gap: .15rem; }
  .requirement-list--large small { color: var(--color-muted); }
  .table-wrap--flat { border-radius: var(--radius-sm); box-shadow: none; }
  .release-list { display: grid; list-style: none; }
  .release-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
  .release-list li > div { display: grid; gap: .15rem; }
  .release-list small { color: var(--color-muted); }
  .empty-state--compact { padding-block: var(--space-5); }

  .empty-state { display: grid; justify-items: center; gap: var(--space-2); max-width: 34rem; margin-inline: auto; padding: var(--space-8) var(--space-4); color: var(--color-muted); text-align: center; }
  .empty-state h2 { color: var(--color-ink); }
  .empty-state__icon { display: grid; width: 3rem; height: 3rem; place-items: center; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-surface-strong); color: var(--color-brand); font-size: 1.3rem; font-weight: 800; }

  .auth-body { background: linear-gradient(145deg, var(--color-surface-soft), var(--color-canvas) 45%, #dcebe4); }
  .auth-body .app-main { width: 100%; min-height: 100vh; padding: var(--space-5); }
  .auth-shell { display: grid; min-height: calc(100vh - 2.5rem); place-items: center; }
  .auth-card { width: min(100%, 28rem); padding: clamp(1.5rem, 6vw, 2.5rem); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
  .auth-card__heading { display: grid; gap: var(--space-2); margin: var(--space-8) 0 var(--space-6); }
  .auth-card__heading p:last-child { color: var(--color-muted); }

  @media (min-width: 34rem) { .user-summary__identity { display: inline; } }

  @media (min-width: 54rem) {
    .work-actions { bottom: var(--space-4); }
  }

  @media (max-width: 46rem) {
    .page-heading--actions { grid-template-columns: 1fr; align-items: start; }
    .page-heading--actions > .button { width: 100%; }
    .panel__header--actions { align-items: stretch; flex-direction: column; }
    .panel__header--actions > .button { width: 100%; }
    .filter-bar > .button { flex: 1 1 auto; }
    .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
    .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .responsive-table tbody { display: grid; gap: var(--space-3); }
    .responsive-table tr { padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
    .responsive-table td { display: grid; grid-template-columns: minmax(6rem, .7fr) 1.3fr; gap: var(--space-3); padding: .55rem 0; border-top: 1px solid var(--color-line); text-align: right; }
    .responsive-table td:first-child { border-top: 0; }
    .responsive-table td::before { color: var(--color-muted); content: attr(data-label); font-size: .78rem; font-weight: 750; text-align: left; text-transform: uppercase; }
    .responsive-table .table-action { display: block; }
    .responsive-table .table-action::before { display: none; }
    .responsive-table .table-action .button { width: 100%; margin-top: var(--space-2); }
    .callout { align-items: stretch; flex-direction: column; }
    .blockage-summary { flex-direction: column; }
    .inline-form { min-width: 0; }
    .task-card { grid-template-columns: 1fr; gap: var(--space-3); }
    .task-card__meta { justify-items: start; }
    .reference-checklist__link { grid-template-columns: 2rem minmax(0, 1fr); }
    .reference-checklist__status { grid-column: 2; justify-content: space-between; }
    .preparation-nav { grid-template-columns: 1fr 1fr; }
    .form-grid--two, .form-grid--three { grid-template-columns: 1fr; }
    .form-grid--two > .field:last-child:nth-child(odd) { grid-column: auto; }
    .editor-step-list > li { grid-template-columns: 2.1rem minmax(0, 1fr); }
    .editor-step-list__visual, .editor-step-list__content, .editor-step-list__actions { grid-column: 2; }
    .editor-step-list__actions { justify-content: flex-start; }
    .import-guide { grid-template-columns: 1fr; }
    .control-list li { align-items: flex-start; flex-direction: column; }
    .work-header__title { align-items: flex-start; flex-direction: column; }
    .work-actions { align-items: stretch; flex-direction: column-reverse; }
    .work-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
    .work-actions > .button { width: 100%; }
    .form-actions { align-items: stretch; flex-direction: column-reverse; }
    .form-actions .button { width: 100%; }
  }
}

@layer components {
  /* Éditeur de notice structuré : navigation, canevas et propriétés. */
  .notice-editor-page { display: grid; gap: var(--space-5); }
  .notice-editor-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
  .notice-editor-header__identity { display: grid; gap: var(--space-1); }
  .notice-editor-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: .86rem; }
  .notice-editor-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  .notice-editor-shell { display: grid; min-width: 0; align-items: start; gap: var(--space-4); }
  .notice-editor-main { display: grid; min-width: 0; gap: var(--space-4); }
  .notice-editor-sidebar { display: grid; min-width: 0; align-content: start; gap: var(--space-4); }
  .notice-editor-sidebar--properties { order: 3; }
  .notice-editor-panel { padding: var(--space-4); }
  .notice-editor-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
  .notice-editor-panel__heading > div { display: grid; gap: .1rem; }
  .notice-editor-panel__heading p { color: var(--color-muted); font-size: .84rem; }
  .notice-editor-status { min-height: 1.4rem; color: var(--color-muted); font-size: .82rem; }

  .notice-tree { padding: .45rem; }
  .notice-tree__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); }
  .notice-tree__header > div:first-child { display: grid; gap: .1rem; }
  .notice-tree__header small { color: var(--color-muted); }
  .notice-tree__header-actions { display: flex; align-items: center; gap: var(--space-1); }
  .notice-tree__toggle { display: none; align-items: center; gap: .35rem; }
  .notice-tree__sections { display: grid; gap: var(--space-2); list-style: none; }
  .notice-tree__section { overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-md); }
  .notice-tree__section:has(.notice-tree__step[aria-current="page"]) { border-color: #a9c9bb; background: #f8fbf9; }
  .notice-tree__section summary { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: 2.9rem; padding: .5rem .65rem; border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
  .notice-tree__section summary::-webkit-details-marker { display: none; }
  .notice-tree__section summary::after { color: var(--color-muted); content: "›"; font-size: 1.25rem; line-height: 1; rotate: 90deg; }
  .notice-tree__section:not([open]) summary::after { rotate: 0deg; }
  .notice-tree__section summary:hover { background: var(--color-surface-soft); }
  .notice-tree__section-index { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: .45rem; background: var(--color-surface-strong); color: var(--color-brand-strong); font-size: .75rem; font-weight: 800; }
  .notice-tree__section-title { min-width: 0; overflow: hidden; font-size: .85rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
  .notice-tree__steps { display: grid; padding: 0 .45rem .45rem 2.6rem; list-style: none; }
  .notice-tree__step { position: relative; display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); align-items: center; gap: .45rem; min-height: 2.65rem; padding: .35rem .5rem; border-radius: .42rem; color: var(--color-muted); font-size: .8rem; text-decoration: none; }
  .notice-tree__step:hover { background: var(--color-surface-soft); color: var(--color-ink); }
  .notice-tree__step[aria-current="page"] { background: var(--color-brand); color: #fff; }
  .notice-tree__step-index { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .68rem; font-weight: 800; }
  .notice-tree__step-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notice-tree__empty { padding: var(--space-3); color: var(--color-muted); font-size: .8rem; }
  .notice-tree__section-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 .6rem .45rem 2.75rem; }
  .notice-tree__section-actions form { display: contents; }
  .notice-tree__add { display: flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .4rem .55rem; border-radius: .42rem; font-size: .78rem; font-weight: 720; text-decoration: none; }
  .notice-tree__add:hover { background: var(--color-brand-soft); }

  .notice-overview { display: grid; gap: var(--space-4); list-style: none; }
  .notice-overview__section { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .notice-overview__section > header { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-soft); }
  .notice-overview__section > header > div { display: grid; gap: .18rem; }
  .notice-overview__section > header p { color: var(--color-muted); font-size: .86rem; }
  .notice-overview__index { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .55rem; background: var(--color-brand); color: #fff; font-weight: 850; }
  .notice-overview__steps { display: grid; list-style: none; }
  .notice-overview__steps li { border-top: 1px solid var(--color-line); }
  .notice-overview__steps a, .notice-overview__step-static { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 4.3rem; padding: var(--space-3) var(--space-4); color: var(--color-ink); text-decoration: none; }
  .notice-overview__steps a:hover { background: #fafcfb; }
  .notice-overview__steps a > span:nth-child(2), .notice-overview__step-static > span:nth-child(2) { display: grid; gap: .12rem; }
  .notice-overview__steps small { color: var(--color-muted); }
  .notice-overview__steps a > span:last-child { color: var(--color-brand); font-size: 1.6rem; }
  .notice-overview__step-index { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--color-line-strong); border-radius: 50%; color: var(--color-muted); font-size: .75rem; font-weight: 800; }
  .notice-overview__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .86rem; }

  .readiness-disclosure { overflow: hidden; border: 1px solid #e6c98d; border-radius: var(--radius-sm); background: var(--color-warning-soft); }
  .readiness-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); color: #73500d; cursor: pointer; font-size: .84rem; font-weight: 800; list-style: none; }
  .readiness-disclosure summary::-webkit-details-marker { display: none; }
  .readiness-disclosure summary span:last-child { font-size: 1.2rem; line-height: 1; rotate: 90deg; }
  .readiness-disclosure:not([open]) summary span:last-child { rotate: 0deg; }
  .readiness-disclosure ul { display: grid; gap: var(--space-2); max-height: 18rem; margin: 0; padding: 0 var(--space-3) var(--space-3) 2rem; overflow: auto; color: var(--color-muted); font-size: .8rem; }

  .editor-view-tabs { display: inline-flex; width: fit-content; padding: .25rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
  .editor-view-tabs button { min-height: 2.35rem; padding: .4rem .75rem; border: 0; border-radius: .38rem; background: transparent; color: var(--color-muted); font-size: .82rem; font-weight: 750; }
  .editor-view-tabs button[aria-selected="true"] { background: var(--color-surface); color: var(--color-brand-strong); box-shadow: var(--shadow-sm); }
  [data-editor-panel][hidden] { display: none !important; }

  .editor-canvas { display: grid; gap: var(--space-4); }
  .editor-canvas__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .editor-canvas__surface { overflow: hidden; border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 14px 32px rgb(18 33 28 / 10%); }
  .editor-canvas__surface .guided-step { border: 0; border-radius: 0; box-shadow: none; }

  .step-properties { display: grid; gap: var(--space-4); }
  .step-properties .field textarea { min-height: 5.5rem; }
  .layout-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .layout-picker__card { display: grid; min-height: 4.8rem; align-content: space-between; gap: .3rem; padding: .65rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-muted); text-align: left; }
  .layout-picker__card::before { display: block; width: 100%; height: 1.5rem; border-radius: .25rem; background: linear-gradient(90deg, var(--color-surface-strong) 0 58%, var(--color-brand-soft) 58%); content: ""; }
  .layout-picker__card[data-layout-card="preparation"]::before { background: linear-gradient(90deg, var(--color-brand-soft) 0 31%, transparent 31% 34%, var(--color-surface-strong) 34% 65%, transparent 65% 68%, var(--color-warning-soft) 68%); }
  .layout-picker__card[data-layout-card="multi_media"]::before { background: linear-gradient(90deg, var(--color-surface-strong) 0 31%, transparent 31% 34%, var(--color-surface-strong) 34% 65%, transparent 65% 68%, var(--color-surface-strong) 68%); }
  .layout-picker__card[data-layout-card="technical"]::before { background: var(--color-info-soft); box-shadow: inset 0 0 0 1px #bdd9ec; }
  .layout-picker__card[data-layout-card="quality"]::before { background: var(--color-success-soft); box-shadow: inset 0 0 0 1px #acd6bb; }
  .layout-picker__card strong { color: var(--color-ink); font-size: .76rem; }
  .layout-picker__card[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-strong); box-shadow: inset 0 0 0 1px var(--color-brand); }

  .editor-blocks { display: grid; gap: var(--space-3); }
  .editor-block { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .editor-block > summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 4rem; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
  .editor-block > summary::-webkit-details-marker { display: none; }
  .editor-block > summary:hover { background: var(--color-surface-soft); }
  .editor-block[open] > summary { border-bottom: 1px solid var(--color-line); background: #fafcfb; }
  .editor-block__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .5rem; background: var(--color-brand-soft); color: var(--color-brand); font-size: .8rem; font-weight: 850; }
  .editor-block__heading { display: grid; gap: .1rem; }
  .editor-block__heading small { color: var(--color-muted); }
  .editor-block__count { min-width: 1.7rem; padding: .2rem .45rem; border-radius: 99rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .74rem; font-weight: 800; text-align: center; }
  .editor-block__body { display: grid; gap: var(--space-4); padding: var(--space-4); }
  .editor-block__form { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-soft); }
  .editor-block__form h3 { font-size: .95rem; }

  .structured-list { display: grid; gap: var(--space-2); list-style: none; }
  .structured-list__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); }
  .structured-list__item.is-dragging { opacity: .55; box-shadow: var(--shadow-md); }
  .structured-list__handle { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .4rem; background: var(--color-surface-soft); color: var(--color-muted); cursor: grab; font-size: 1rem; }
  .structured-list__copy { display: grid; gap: .18rem; }
  .structured-list__copy small { color: var(--color-muted); }
  .structured-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1); }
  .structured-list__actions form { display: contents; }

  .media-editor-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
  .media-editor-card { display: grid; grid-column: span 12; align-content: start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .media-editor-card[data-width="1"], .step-media[data-width="1"] { grid-column: span 1; }
  .media-editor-card[data-width="2"], .step-media[data-width="2"] { grid-column: span 2; }
  .media-editor-card[data-width="3"], .step-media[data-width="3"] { grid-column: span 3; }
  .media-editor-card[data-width="4"], .step-media[data-width="4"] { grid-column: span 4; }
  .media-editor-card[data-width="5"], .step-media[data-width="5"] { grid-column: span 5; }
  .media-editor-card[data-width="6"], .step-media[data-width="6"] { grid-column: span 6; }
  .media-editor-card[data-width="7"], .step-media[data-width="7"] { grid-column: span 7; }
  .media-editor-card[data-width="8"], .step-media[data-width="8"] { grid-column: span 8; }
  .media-editor-card[data-width="9"], .step-media[data-width="9"] { grid-column: span 9; }
  .media-editor-card[data-width="10"], .step-media[data-width="10"] { grid-column: span 10; }
  .media-editor-card[data-width="11"], .step-media[data-width="11"] { grid-column: span 11; }
  .media-editor-card[data-width="12"], .step-media[data-width="12"] { grid-column: span 12; }
  .media-editor-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
  .media-editor-card__header > div { display: grid; gap: .1rem; }
  .media-editor-card__header small { color: var(--color-muted); }
  .media-editor-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .media-editor-card__actions form { display: contents; }
  .media-properties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .media-properties .field { min-width: 0; }
  .media-properties.form-stack > .notice, .media-properties.form-stack > .notice-editor-status, .media-properties.form-stack > .form-actions { grid-column: 1 / -1; }
  .media-upload-preview { width: 100%; max-height: 18rem; border: 1px dashed var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); object-fit: contain; }

  .annotation-workspace { display: grid; gap: var(--space-3); }
  .annotation-help { color: var(--color-muted); font-size: .82rem; }
  .annotation-form { display: grid; gap: var(--space-3); }
  .annotation-coordinates { display: grid; grid-template-columns: repeat(4, minmax(4rem, 1fr)); gap: var(--space-2); }
  .annotation-coordinates .field label { font-size: .74rem; }
  .annotation-coordinates .field input { min-height: 2.5rem !important; }
  .annotation-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
  .annotation-list li { display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem .3rem .6rem; border-radius: 99rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .76rem; }
  .annotation-list form { display: contents; }

  .guided-step { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .guided-step__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: clamp(1rem, 2.5vw, 1.5rem); border-bottom: 1px solid var(--color-line); background: linear-gradient(135deg, #fff, #f6faf8); }
  .guided-step__header-copy { display: grid; align-content: center; gap: .2rem; }
  .guided-step__header-meta { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
  .guided-step__title { font-size: clamp(1.35rem, 3vw, 2rem); }
  .guided-step__objective { max-width: 55rem; color: var(--color-muted); font-size: 1rem; }
  .guided-step__duration { display: inline-flex; min-height: 2.35rem; align-items: center; gap: .4rem; padding: .4rem .7rem; border-radius: 99rem; background: var(--color-surface-strong); color: var(--color-brand-strong); font-size: .84rem; font-weight: 780; white-space: nowrap; }
  .guided-step__content { display: grid; min-width: 0; gap: var(--space-5); padding: clamp(1rem, 3vw, 1.75rem); }
  .guided-step__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; gap: var(--space-3); }
  .guided-step__instructions { display: grid; min-width: 0; align-content: start; gap: var(--space-4); }
  .guided-step__work { display: grid; min-width: 0; min-height: 0; align-content: start; gap: .7rem; }
  .guided-step__instructions > h2, .guided-step__assets h2, .guided-step__quality h2 { font-size: 1rem; }
  .guided-step__footer { display: grid; gap: var(--space-4); padding: 0 clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.75rem); }

  .step-media { position: relative; display: grid; grid-column: span 12; align-content: start; gap: .45rem; min-width: 0; margin: 0; }
  .step-media__stage { position: relative; display: grid; min-height: 10rem; place-items: center; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #e8eeeb; touch-action: none; }
  .step-media__transform { position: relative; display: grid; width: 100%; transform-origin: 50% 50%; transition: transform .15s ease; }
  .step-media__transform img { display: block; width: 100%; max-height: 34rem; grid-area: 1 / 1; object-fit: contain; }
  .step-media__stage--interactive { cursor: crosshair; }
  .step-media__caption { color: var(--color-muted); font-size: .8rem; }
  .step-media__zoom { position: absolute; z-index: 3; right: .5rem; bottom: .5rem; min-height: 2.4rem; padding: .35rem .55rem; border: 1px solid rgb(255 255 255 / 60%); border-radius: .45rem; background: rgb(18 33 28 / 82%); color: #fff; font-size: .76rem; font-weight: 750; }
  .media-annotations { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .media-annotation { fill: none; stroke: #e32929; stroke-width: .75; vector-effect: non-scaling-stroke; }
  .media-annotation circle { fill: #e32929; }
  .media-annotation text { fill: #fff; stroke: #a41616; stroke-width: .3; paint-order: stroke; font-size: 3.2px; font-weight: 850; }
  .media-annotation polyline { fill: none; }
  .media-annotation--preview { stroke: var(--color-focus); }
  .media-annotation--preview circle { fill: var(--color-focus); }
  .media-annotation--preview text { stroke: var(--color-focus); }
  .media-annotation--neutral { stroke: #202b27; }
  .media-annotation--neutral circle { fill: #202b27; }
  .media-annotation--info { stroke: var(--color-info); }
  .media-annotation--info circle { fill: var(--color-info); }
  .media-annotation--success { stroke: var(--color-success); }
  .media-annotation--success circle { fill: var(--color-success); }
  .media-annotation--warning { stroke: #d27b00; }
  .media-annotation--warning circle { fill: #d27b00; }
  .media-annotation--danger { stroke: #e32929; }
  .media-annotation--danger circle { fill: #e32929; }
  .media-annotation--ink { stroke: #17231f; color: #17231f; }
  .media-annotation--red { stroke: #c9363e; color: #c9363e; }
  .media-annotation--orange { stroke: #d37600; color: #d37600; }
  .media-annotation--blue { stroke: #1676ad; color: #1676ad; }
  .media-annotation--green { stroke: #08765c; color: #08765c; }
  .media-annotation--purple { stroke: #7149a8; color: #7149a8; }
  .media-annotation--ink circle, .media-annotation--red circle, .media-annotation--orange circle, .media-annotation--blue circle, .media-annotation--green circle, .media-annotation--purple circle { fill: currentcolor; }
  .media-annotation--ink text, .media-annotation--red text, .media-annotation--orange text, .media-annotation--blue text, .media-annotation--green text, .media-annotation--purple text { stroke: currentcolor; }
  .media-annotation line, .media-annotation ellipse, .media-annotation circle { filter: drop-shadow(0 0 .45px #fff) drop-shadow(0 0 .8px #fff); }
  .media-annotation text { filter: drop-shadow(0 0 .65px #fff); pointer-events: none; }
  .media-annotation.is-instruction-hidden { display: none; }
  .media-annotation--general { opacity: .62; }
  .media-annotation.is-instruction-active { stroke-width: 1.05; opacity: 1; }
  .media-annotation.is-selected { stroke-width: 1.35; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 2.5px currentcolor); }
  .media-annotation.is-draft { stroke-dasharray: 2 1; opacity: .82; }
  .is-annotation-editing [data-annotation-svg] { pointer-events: auto; }
  .is-annotation-editing .media-annotation { cursor: grab; pointer-events: visiblePainted; }
  .is-annotation-editing .media-annotation:active { cursor: grabbing; }
  .step-media.is-annotation-target .step-media__stage { outline: 3px solid color-mix(in srgb, var(--color-focus) 48%, transparent); outline-offset: -3px; cursor: crosshair; }
  .is-annotation-saving .step-media.is-annotation-target .step-media__stage { cursor: progress; }

  .media-annotation-toolbar { position: absolute; z-index: 8; top: .45rem; left: 50%; display: flex; max-width: calc(100% - .9rem); min-height: 2.45rem; align-items: center; gap: .25rem; translate: -50% 0; padding: .25rem .35rem; border: 1px solid rgb(255 255 255 / 72%); border-radius: 99rem; background: rgb(22 37 32 / 92%); color: #fff; box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
  .media-annotation-toolbar[hidden] { display: none; }
  .media-annotation-toolbar button { display: grid; width: 1.9rem; min-width: 1.9rem; height: 1.9rem; min-height: 1.9rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
  .media-annotation-toolbar button:hover, .media-annotation-toolbar button.is-selected { background: rgb(255 255 255 / 20%); }
  .media-annotation-toolbar button:disabled { cursor: default; opacity: .3; }
  .media-annotation-toolbar__tools, .media-annotation-toolbar__colors { display: flex; align-items: center; gap: .08rem; }
  .media-annotation-toolbar__tools { padding-right: .2rem; border-right: 1px solid rgb(255 255 255 / 22%); }
  .media-annotation-toolbar__colors { gap: .18rem; padding: 0 .2rem; }
  .media-annotation-toolbar__colors button { width: 1.12rem; min-width: 1.12rem; height: 1.12rem; min-height: 1.12rem; border: 2px solid rgb(255 255 255 / 48%); background: var(--annotation-color); }
  .media-annotation-toolbar__colors button.is-selected { outline: 2px solid #fff; outline-offset: 1px; }
  .media-annotation-toolbar__colors [data-annotation-color="green"] { --annotation-color: #19a47f; }
  .media-annotation-toolbar__colors [data-annotation-color="blue"] { --annotation-color: #319bd3; }
  .media-annotation-toolbar__colors [data-annotation-color="orange"] { --annotation-color: #ee9d22; }
  .media-annotation-toolbar__colors [data-annotation-color="red"] { --annotation-color: #e34b55; }
  .media-annotation-toolbar__colors [data-annotation-color="ink"] { --annotation-color: #17231f; }
  .media-annotation-toolbar__label input { width: 6.5rem; min-height: 1.9rem; padding: .22rem .45rem; border: 0; border-radius: 99rem; background: #fff; color: var(--color-ink); font: inherit; font-size: .72rem; }
  .media-annotation-toolbar__status { max-width: 10rem; overflow: hidden; padding: 0 .2rem; color: #e1ece8; font-size: .68rem; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }

  .instruction-actions { display: grid; gap: var(--space-3); padding-left: 0; list-style: none; counter-reset: instruction-action; }
  .instruction-actions li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); padding: .28rem .38rem; border-radius: var(--radius-sm); color: var(--color-ink); counter-increment: instruction-action; transition: background .15s ease, box-shadow .15s ease, opacity .15s ease; }
  .instruction-actions li::before { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-brand); color: #fff; content: counter(instruction-action); font-size: .82rem; font-weight: 850; }
  .instruction-actions li.is-active { background: var(--color-brand-soft); box-shadow: inset .2rem 0 0 var(--color-brand); }
  .instruction-actions li.is-complete { opacity: .68; }
  .instruction-actions li.is-complete::before { background: var(--color-success); content: "✓"; }
  .instruction-actions__copy { padding-top: .24rem; font-size: 1rem; }
  .instruction-actions__copy[role="button"] { border-radius: .3rem; cursor: pointer; }
  .instruction-actions__copy[role="button"]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .instruction-actions__copy strong, .instruction-actions__copy span { display: block; }
  .instruction-actions__copy small { display: block; margin-top: .2rem; color: var(--color-muted); }
  [data-direct-text] { white-space: pre-wrap; }
  .is-direct-text-editing { display: block; min-width: 0; border-radius: .25rem; outline: 2px solid var(--color-brand); outline-offset: .25rem; }
  .slide-edit-text { display: block; width: 100%; min-height: 1.5em; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; resize: none; overflow: hidden; }
  .slide-edit-text:focus { outline: 0; box-shadow: none; }
  .slide-edit-controls { display: flex !important; align-items: center; gap: .35rem; margin-top: .35rem; white-space: normal; font-size: .75rem; line-height: 1.3; }
  .slide-edit-controls .slide-edit-status { display: block; flex: 1; min-width: 0; color: var(--color-muted); font-weight: 500; }
  .slide-edit-controls .slide-edit-status.is-error { color: var(--color-danger); }
  .slide-edit-controls button { display: inline-grid; flex: 0 0 auto; min-width: 1.8rem; min-height: 1.8rem; place-items: center; padding: .2rem .4rem; border: 1px solid var(--color-line-strong); border-radius: .3rem; background: var(--color-canvas); color: var(--color-brand-strong); font: inherit; cursor: pointer; }
  .slide-edit-controls button.slide-edit-save { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
  .slide-edit-controls button:disabled { opacity: .5; cursor: wait; }
  .step-media.is-direct-image-editing { outline: 3px solid var(--color-brand); outline-offset: -3px; }
  .step-media.is-direct-image-editing > .slide-edit-controls { position: absolute; z-index: 6; right: .5rem; bottom: .5rem; left: .5rem; padding: .5rem; border: 1px solid var(--color-line-strong); border-radius: .4rem; background: var(--color-canvas); box-shadow: 0 2px 10px #123a2926; }
  .instruction-annotation-button { position: relative; display: grid; width: 1.9rem; min-width: 1.9rem; height: 1.9rem; min-height: 1.9rem; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; color: var(--color-brand); cursor: pointer; opacity: .55; }
  .instruction-annotation-button:hover, .instruction-annotation-button:focus-visible, .instruction-annotation-button.has-annotations { border-color: var(--color-brand); background: var(--color-brand-soft); opacity: 1; }
  .instruction-annotation-button.has-annotations::after { position: absolute; top: -.15rem; right: -.12rem; display: grid; min-width: .85rem; height: .85rem; place-items: center; padding: 0 .12rem; border: 1px solid #fff; border-radius: 99rem; background: var(--color-brand); color: #fff; content: attr(data-annotation-count); font-size: .52rem; font-weight: 850; }
  .legacy-instruction { color: var(--color-muted); }
  .legacy-instruction p + p { margin-top: var(--space-3); }

  .step-callouts { display: grid; gap: .45rem; }
  .step-callout { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .42rem .65rem; border: 1px solid var(--color-line); border-left: .22rem solid var(--color-info); border-radius: var(--radius-sm); background: var(--color-info-soft); }
  .step-callout--warning { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
  .step-callout--danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
  .step-callout--tip { border-left-color: var(--color-success); background: var(--color-success-soft); }
  .step-callout--warning .step-callout__icon { background: #f3c24e; color: #5e3b00; }
  .step-callout--danger .step-callout__icon { background: var(--color-danger); color: #fff; }
  .step-callout--tip .step-callout__icon { background: var(--color-success); color: #fff; }
  .step-callout__icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: 50%; background: var(--color-info); color: #fff; font-size: 1.2rem; font-weight: 900; line-height: 1; }
  .step-callout p { margin: 0; color: var(--color-ink); font-size: .82rem; line-height: 1.35; }

  .guided-step__assets { display: grid; gap: var(--space-3); }
  .step-assets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
  .step-asset-group { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fafcfb; }
  .step-asset-group h3 { color: var(--color-muted); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
  .step-asset-list { display: grid; gap: .45rem; list-style: none; }
  .step-asset-list li, .step-asset-list a { color: var(--color-ink); font-size: .86rem; }
  .step-asset-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .step-asset-list small { color: var(--color-muted); }
  .step-asset-list a { font-weight: 700; overflow-wrap: anywhere; }
  .expected-result { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .62rem .8rem; border: 1px solid #acd6bb; border-radius: var(--radius-md); background: var(--color-success-soft); }
  .expected-result__mark { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--color-success); color: #fff; font-weight: 900; }
  .expected-result p { margin-top: .05rem; color: var(--color-muted); font-size: .82rem; }

  .guided-step[data-layout="action"] .guided-step__content, .guided-step[data-layout="preparation"] .guided-step__content { grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .75fr); align-items: stretch; }
  .guided-step[data-layout="action"] .guided-step__media, .guided-step[data-layout="preparation"] .guided-step__media, .guided-step[data-layout="technical"] .guided-step__media { min-height: 0; height: 100%; }
  .guided-step[data-layout="action"] .guided-step__media .step-media:only-child, .guided-step[data-layout="preparation"] .guided-step__media .step-media:only-child, .guided-step[data-layout="technical"] .guided-step__media .step-media:only-child { height: 100%; }
  .guided-step[data-layout="action"] .guided-step__media .step-media:only-child .step-media__stage, .guided-step[data-layout="preparation"] .guided-step__media .step-media:only-child .step-media__stage, .guided-step[data-layout="technical"] .guided-step__media .step-media:only-child .step-media__stage { height: 100%; }
  .guided-step[data-layout="action"] .guided-step__media .step-media:only-child .step-media__transform, .guided-step[data-layout="preparation"] .guided-step__media .step-media:only-child .step-media__transform, .guided-step[data-layout="technical"] .guided-step__media .step-media:only-child .step-media__transform { height: 100%; }
  .guided-step[data-layout="action"] .guided-step__media .step-media:only-child img, .guided-step[data-layout="preparation"] .guided-step__media .step-media:only-child img, .guided-step[data-layout="technical"] .guided-step__media .step-media:only-child img { height: 100%; max-height: none; object-fit: contain; }
  .guided-step[data-layout="multi_media"] .guided-step__content { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, .8fr); align-items: stretch; }
  .guided-step[data-layout="technical"] .guided-step__content { grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .65fr); align-items: stretch; }
  .guided-step[data-layout="technical"] .step-media__stage { background: #f5f8f7; }
  .guided-step[data-layout="preparation"] .guided-step__media:empty { display: none; }
  .guided-step[data-layout="quality"] .guided-step__content { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); align-items: stretch; }
  .guided-step[data-layout="quality"] .guided-step__media { grid-column: 2; grid-row: 1; }
  .guided-step[data-layout="quality"] .guided-step__work { grid-column: 1; grid-row: 1; }
  .guided-step--no-media .guided-step__work { grid-column: 1 / -1 !important; }
  .guided-step[data-layout="quality"] .expected-result { border-width: 2px; }

  .media-dialog { width: min(96vw, 92rem); max-width: none; height: min(92vh, 62rem); max-height: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: #101815; color: #fff; box-shadow: 0 30px 90px rgb(0 0 0 / 45%); }
  .media-dialog::backdrop { background: rgb(5 12 9 / 80%); }
  .media-dialog__body { display: grid; width: 100%; height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .media-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .media-dialog__header button { min-height: 2.5rem; border-color: rgb(255 255 255 / 35%); color: #fff; }
  .media-dialog__viewport { display: grid; min-height: 0; place-items: start center; overflow: auto; padding: var(--space-3); }
  .media-dialog__media { width: min(100%, 90rem); max-width: 100%; color: #fff; }
  .media-dialog__media .step-media__stage { width: 100%; min-height: 0; background: #e8eeeb; }
  .media-dialog__media .step-media__stage img { width: 100%; max-width: none; max-height: none; object-fit: contain; }
  .media-dialog__media .step-media__caption { padding-top: var(--space-2); color: #dce8e3; }

  .build-step-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: .84rem; }
  .build-step-context span + span::before { margin-right: var(--space-2); content: "›"; }
  .build-step-layout { display: grid; gap: var(--space-5); }
  .build-step-layout .guided-step { min-width: 0; }

  @media (min-width: 54rem) {
    .notice-editor-shell { grid-template-columns: 15rem minmax(0, 1fr); }
    .notice-editor-sidebar--navigator { position: sticky; top: 8.9rem; max-height: calc(100vh - 10rem); overflow: auto; }
    .notice-editor-sidebar--properties { grid-column: 1 / -1; }
    .build-step-layout { grid-template-columns: minmax(0, 1fr); }
  }

  @media (min-width: 72rem) {
    .notice-editor-shell { grid-template-columns: 14rem minmax(30rem, 1fr) 18rem; }
    .notice-editor-sidebar--properties { position: sticky; top: 8.9rem; grid-column: auto; max-height: calc(100vh - 10rem); overflow: auto; }
    .build-step-layout { grid-template-columns: minmax(0, 1.5fr) minmax(22rem, .62fr); align-items: start; }
    .build-step-layout .quality-panel { position: sticky; top: 8.9rem; }
  }

  @media (max-width: 64rem) {
    .guided-step[data-layout] .guided-step__content { grid-template-columns: minmax(0, 1fr); }
    .guided-step[data-layout] .guided-step__instructions { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
  }

  @media (max-width: 53.99rem) {
    .notice-editor-sidebar--navigator { order: -1; }
    .is-enhanced .notice-tree__toggle { display: inline-flex; }
    .notice-tree [data-navigator-content]:not([hidden]) { max-height: 20rem; overflow: auto; border-top: 1px solid var(--color-line); }
  }

  @media (max-width: 46rem) {
    .notice-editor-header__actions, .notice-editor-header__actions .button { width: 100%; }
    .layout-picker { grid-template-columns: 1fr; }
    .media-editor-card[data-width] { grid-column: span 12; }
    .media-properties { grid-template-columns: 1fr; }
    .annotation-coordinates { grid-template-columns: repeat(2, minmax(4rem, 1fr)); }
    .structured-list__item { grid-template-columns: 2rem minmax(0, 1fr); }
    .structured-list__actions { grid-column: 2; justify-content: flex-start; }
    .step-media[data-width] { grid-column: span 12; }
    .guided-step__header { grid-template-columns: minmax(0, 1fr); }
    .guided-step__duration { width: fit-content; }
    .instruction-actions li { grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: var(--space-2); }
    .instruction-actions li::before { width: 1.8rem; height: 1.8rem; }
    .editor-block > summary { grid-template-columns: 2rem minmax(0, 1fr); }
    .editor-block__count { grid-column: 2; width: fit-content; }
    .media-dialog { width: 100vw; height: 100vh; border-radius: 0; }
  }
}

@layer components {
  .notice-studio {
    display: grid;
    width: calc(100vw - 2rem);
    max-width: 112rem;
    margin-inline: calc(50% - 50vw + 1rem);
    gap: var(--space-2);
  }

  .notice-studio__bar {
    position: sticky;
    z-index: 22;
    top: calc(var(--header-height) + 3.6rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    min-height: 3.4rem;
    padding: .45rem .6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
  }

  .notice-studio__tool,
  .notice-step-navigation__arrow {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--color-line);
    border-radius: .6rem;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: .86rem;
    font-weight: 720;
    text-decoration: none;
  }

  .notice-studio__tool:hover,
  .notice-step-navigation__arrow:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .notice-studio__tool--quiet { border-color: transparent; background: transparent; }
  .notice-studio__bar-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
  .notice-step-navigation { display: flex; align-items: center; gap: var(--space-2); font-size: .86rem; }
  .notice-step-navigation__arrow { width: 2.45rem; padding: 0; font-size: 1.25rem; }
  .notice-step-navigation__arrow.is-disabled { opacity: .3; }
  .notice-studio .notice-editor-status { min-height: 1rem; padding-inline: .35rem; text-align: center; }

  .notice-studio__canvas { width: min(100%, 92rem); margin-inline: auto; }
  .notice-live-step { overflow: hidden; border: 1px solid var(--color-line); border-radius: 1.15rem; background: var(--color-surface); box-shadow: 0 14px 45px rgb(18 33 28 / 7%); }
  .notice-live-step__header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); padding: clamp(1.15rem, 2.4vw, 2rem); border-bottom: 1px solid var(--color-line); background: linear-gradient(135deg, #fff, #f2f8f5); }
  .notice-live-step__identity { display: grid; gap: .25rem; }

  .notice-inline-title,
  .notice-inline-objective,
  .notice-inline-result textarea,
  .inline-action textarea {
    width: 100%;
    min-width: 0;
    resize: none;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: transparent;
    color: inherit;
    line-height: inherit;
  }
  .notice-inline-title { padding: .08rem .2rem; font-size: clamp(1.6rem, 3vw, 2.45rem); font-weight: 780; letter-spacing: -.035em; }
  .notice-inline-objective { padding: .2rem; color: var(--color-muted); font-size: 1rem; }
  .notice-inline-title:hover, .notice-inline-objective:hover, .notice-inline-result textarea:hover, .inline-action textarea:hover { border-color: var(--color-line); background: #fff; }
  .notice-inline-title:focus, .notice-inline-objective:focus, .notice-inline-result textarea:focus, .inline-action textarea:focus { border-color: var(--color-brand); background: #fff; outline: .18rem solid var(--color-brand-soft); }
  .notice-inline-duration { display: flex; height: 2.45rem; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 99rem; background: var(--color-surface-strong); color: var(--color-brand-strong); font-size: .84rem; font-weight: 760; }
  .notice-inline-duration input { width: 2.7rem; padding: 0; border: 0; background: transparent; color: inherit; font-weight: inherit; text-align: right; }

  .step-category-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem clamp(1.15rem, 2.4vw, 2rem); border: 0; border-bottom: 1px solid var(--color-line); }
  .step-category-picker legend { float: left; margin-right: .3rem; color: var(--color-muted); font-size: .76rem; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }
  .step-category-choice { position: relative; display: inline-flex; min-height: 2.25rem; align-items: center; gap: .38rem; padding: .32rem .58rem; border: 1px solid var(--color-line); border-radius: 99rem; background: var(--color-surface); color: var(--color-muted); cursor: pointer; font-size: .8rem; font-weight: 700; }
  .step-category-choice:hover, .step-category-choice.is-selected { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-strong); }
  .step-category-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .step-category-icon { display: inline-grid; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; place-items: center; }
  .step-category-icon svg { width: 100%; height: 100%; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .step-category-badge { display: inline-flex; width: fit-content; min-height: 2.65rem; align-items: center; gap: .5rem; margin: 0; padding: .48rem .8rem; border-radius: 99rem; background: var(--color-brand-soft); color: var(--color-brand-strong); font-size: 1rem; font-weight: 820; white-space: nowrap; }
  .step-category-badge .step-category-icon { width: 1.5rem; height: 1.5rem; }
  .step-category-badge--missing { background: var(--color-warning-soft); color: var(--color-warning); }

  .notice-live-step__media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); padding: clamp(1.15rem, 2.4vw, 2rem); padding-bottom: 0; }
  .step-media--editable { position: relative; }
  .step-media__quick-actions { position: absolute; right: .55rem; bottom: .55rem; left: .55rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; opacity: 0; transition: opacity .16s ease; }
  .step-media:hover .step-media__quick-actions, .step-media:focus-within .step-media__quick-actions { opacity: 1; }
  .step-media__quick-actions a { padding: .35rem .55rem; border-radius: .45rem; background: rgb(18 33 28 / 90%); color: #fff; font-size: .74rem; font-weight: 700; text-decoration: none; }

  .quick-media-upload { grid-column: span 12; min-height: 6.5rem; }
  .quick-media-upload label { display: grid; min-height: 6.5rem; place-items: center; align-content: center; gap: .08rem; border: 2px dashed var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-muted); cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; }
  .quick-media-upload label:hover, .quick-media-upload.is-dragging label { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-strong); }
  .quick-media-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .quick-media-upload__icon { font-size: 1.55rem; line-height: 1; }
  .quick-media-upload small { font-size: .75rem; }

  .notice-live-step__instructions { display: grid; gap: var(--space-3); padding: clamp(1.15rem, 2.4vw, 2rem); }
  .notice-live-step__instructions > h2 { font-size: 1rem; }
  .inline-actions { display: grid; gap: .35rem; list-style: none; }
  .inline-action { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: start; gap: .55rem; padding: .28rem; border-radius: .65rem; }
  .inline-action:hover { background: var(--color-canvas); }
  .inline-action__number { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-brand); color: #fff; font-size: .78rem; font-weight: 800; }
  .inline-action textarea { display: block; min-height: 2rem; padding: .25rem .4rem; overflow: hidden; font-size: 1rem; }
  .inline-action__menu { position: relative; }
  .inline-action__menu > summary { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; cursor: pointer; list-style: none; font-size: 1.25rem; }
  .inline-action__menu > summary::-webkit-details-marker { display: none; }
  .inline-action__menu[open] > summary { background: var(--color-surface-strong); }
  .inline-action__menu > div { position: absolute; z-index: 8; top: 2.2rem; right: 0; min-width: 8rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: .55rem; background: #fff; box-shadow: var(--shadow-md); }
  .inline-action__menu form { display: block; }
  .inline-action__menu button { width: 100%; padding: .48rem .7rem; border: 0; background: #fff; text-align: left; }
  .inline-action__menu button:hover { background: var(--color-canvas); }
  .inline-action__menu button.danger { color: var(--color-danger); }
  .inline-action-add { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .55rem; padding: .28rem; color: var(--color-muted); }
  .inline-action-add > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px dashed var(--color-line-strong); border-radius: 50%; }
  .inline-action-add textarea { width: 100%; min-height: 2.35rem; resize: none; padding: .4rem .55rem; border: 1px dashed var(--color-line-strong); border-radius: .55rem; background: transparent; }

  .notice-inline-result { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .7rem; margin: 0 clamp(1.15rem, 2.4vw, 2rem) clamp(1.15rem, 2.4vw, 2rem); padding: .85rem 1rem; border: 1px solid #b8dfc4; border-radius: var(--radius-md); background: var(--color-success-soft); }
  .notice-inline-result > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: var(--color-success); color: #fff; font-weight: 800; }
  .notice-inline-result textarea { display: block; min-height: 2rem; padding: .18rem .28rem; }

  .notice-drawer-backdrop { position: fixed; z-index: 69; inset: 0; background: rgb(4 15 10 / 42%); }
  .notice-drawer { position: fixed; z-index: 70; top: 0; bottom: 0; display: block; width: min(92vw, 25rem); overflow-y: auto; padding: 4rem 1rem 1rem; background: var(--color-canvas); box-shadow: 0 0 45px rgb(0 0 0 / 18%); transition: translate .2s ease; }
  .notice-drawer--left { left: 0; translate: -105% 0; }
  .notice-drawer--right { right: 0; width: min(94vw, 31rem); translate: 105% 0; }
  .notice-drawer.is-open { translate: 0 0; }
  .notice-drawer__close { position: absolute; top: .65rem; right: .75rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; font-size: 1.4rem; }
  .notice-drawer .notice-editor-sidebar { display: block; }
  .notice-drawer .notice-tree { border: 0; box-shadow: none; }
  .notice-drawer__content { display: grid; gap: var(--space-4); }
  .notice-drawer__content > section { padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }
  .notice-drawer__content h2 { margin-bottom: var(--space-4); }
  .notice-advanced-block { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }
  .notice-advanced-block > summary { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .75rem 1rem; cursor: pointer; font-weight: 750; }
  .notice-advanced-block > summary span { display: grid; min-width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--color-surface-strong); font-size: .75rem; }
  .notice-advanced-block > div { display: grid; gap: var(--space-3); padding: 0 1rem 1rem; border-top: 1px solid var(--color-line); }
  .notice-advanced-block form { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
  .notice-advanced-item { display: flex; align-items: start; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); font-size: .84rem; }
  .notice-advanced-item a { white-space: nowrap; }
  body.has-notice-drawer { overflow: hidden; }

  body:has(.notice-studio--player) { overflow: hidden; }
  body:has(.notice-studio--player) .app-main {
    width: 100%;
    max-width: none;
    height: calc(100dvh - var(--header-height) - 3.6rem);
    padding: .55rem 1rem;
    overflow: hidden;
  }
  .notice-studio--player {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  .notice-studio--player .notice-studio__bar { position: relative; top: auto; }
  .notice-studio--player .notice-editor-status:empty { display: none; }

  .notice-studio-tabs { display: flex; align-items: center; gap: .2rem; }
  .notice-studio-tabs button {
    min-height: 2.45rem;
    padding: .4rem .78rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--color-muted);
    font-size: .86rem;
    font-weight: 740;
  }
  .notice-studio-tabs button:hover { background: var(--color-canvas); color: var(--color-ink); }
  .notice-studio-tabs button.is-active { background: var(--color-brand); color: #fff; }
  .notice-version-chip { color: var(--color-muted); font-size: .78rem; white-space: nowrap; }

  .notice-studio-panel { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
  .notice-studio-panel[hidden] { display: none; }
  .notice-studio-panel.is-active { display: block; }
  .notice-studio-panel--viewer { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #e7eeea; }
  .notice-studio-panel--scroll, .notice-studio-panel--plan { overflow: auto; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-canvas); }

  .notice-stage { position: relative; display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; overflow: hidden; padding: .8rem 4rem; }
  .notice-stage__content { width: min(100%, 92rem); max-height: 100%; transform-origin: center center; will-change: transform; }
  .notice-stage__content .guided-step { width: 100%; box-shadow: 0 12px 45px rgb(18 33 28 / 10%); }
  .notice-stage__arrow { position: absolute; z-index: 8; top: 50%; display: grid; width: 3rem; height: 4.5rem; translate: 0 -50%; place-items: center; border: 1px solid var(--color-line); border-radius: .8rem; background: rgb(255 255 255 / 94%); color: var(--color-brand); box-shadow: var(--shadow-md); font-size: 2.5rem; line-height: 1; text-decoration: none; }
  .notice-stage__arrow:hover { background: var(--color-brand); color: #fff; }
  .notice-stage__arrow--previous { left: .65rem; }
  .notice-stage__arrow--next { right: .65rem; }

  .notice-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: min(100%, 58rem); margin: 0 auto var(--space-4); }
  .notice-studio-panel--plan > .notice-editor-sidebar { display: block; width: min(100%, 58rem); margin-inline: auto; }
  .notice-studio-panel--plan .notice-tree { box-shadow: none; }
  .notice-studio-panel--plan .notice-tree__toggle { display: none; }
  .notice-studio-panel--plan [data-navigator-content] { display: block !important; max-height: none !important; }

  .notice-options-grid { display: grid; width: min(100%, 74rem); margin-inline: auto; grid-template-columns: minmax(18rem, .75fr) minmax(22rem, 1.25fr); align-items: start; gap: var(--space-4); }
  .notice-options-grid > .panel { padding: var(--space-4); }
  .notice-options-grid > .panel h2 { margin-bottom: var(--space-4); }
  .notice-options-grid__blocks { display: grid; gap: var(--space-3); }
}

@layer layout {
  @media (max-width: 53.99rem) {
    body:has(.notice-studio--player) .app-main {
      height: calc(100dvh - var(--header-height) - var(--nav-height));
      padding: .4rem .5rem;
    }
    .notice-studio { width: calc(100vw - 1rem); margin-inline: calc(50% - 50vw + .5rem); }
    .notice-studio__bar { top: var(--header-height); grid-template-columns: auto 1fr auto; }
    .notice-studio__tool span:last-child, .notice-studio__tool--quiet { display: none; }
    .notice-studio__tool { width: 2.45rem; padding: 0; }
    .notice-step-navigation { justify-self: center; }
    .notice-live-step__header { grid-template-columns: minmax(0, 1fr); }
    .notice-inline-duration { width: fit-content; }
    .step-category-picker { overflow-x: auto; flex-wrap: nowrap; }
    .step-category-picker legend { display: none; }
    .step-category-choice { flex: 0 0 auto; }
    .notice-live-step__media .step-media[data-width] { grid-column: span 12; }
    .step-media__quick-actions { opacity: 1; }
    .notice-studio--player { width: 100%; height: 100%; min-height: 0; margin: 0; }
    .notice-studio--player .notice-studio__bar { grid-template-columns: minmax(0, 1fr) auto; }
    .notice-studio-tabs { overflow-x: auto; }
    .notice-studio-tabs button { flex: 0 0 auto; }
    .notice-studio--player .notice-step-navigation { grid-column: 1 / -1; grid-row: 2; }
    .notice-studio--player .notice-studio__bar-actions { grid-column: 2; grid-row: 1; }
    .notice-version-chip { display: none; }
    .notice-stage { padding: .45rem 2.8rem; }
    .notice-stage__arrow { width: 2.2rem; height: 3.5rem; font-size: 2rem; }
    .notice-stage__arrow--previous { left: .3rem; }
    .notice-stage__arrow--next { right: .3rem; }
    .notice-options-grid { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer components {
  body.notice-page { overflow: hidden; }
  body.notice-page .app-main {
    width: 100%;
    max-width: none;
    height: calc(100dvh - var(--header-height));
    padding: .45rem;
    overflow: hidden;
  }
  body.notice-page .messages:empty { display: none; }

  .notice-workspace {
    --left-rail-width: 4.25rem;
    --right-rail-width: 0rem;
    --left-panel-width: clamp(18rem, 23vw, 24rem);
    --right-panel-width: clamp(24rem, 31vw, 34rem);
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width);
    overflow: clip;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: #e7eeea;
  }
  .notice-workspace--editor { --right-rail-width: 4.25rem; }

  .notice-workspace__stage {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    grid-column: 2;
    overflow: hidden;
    padding: 0;
    transition: margin .2s ease;
  }
  .notice-workspace.has-left-panel .notice-workspace__stage { margin-left: var(--left-panel-width); }
  .notice-workspace.has-right-panel .notice-workspace__stage { margin-right: var(--right-panel-width); }

  .notice-workspace .notice-stage__content {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100rem;
    height: 56.25rem;
    max-height: none;
    flex: 0 0 auto;
    transform-origin: top left;
    will-change: transform;
  }
  .notice-workspace .notice-stage__content .guided-step {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: .9rem;
    box-shadow: 0 14px 42px rgb(18 33 28 / 13%);
  }
  .notice-workspace .guided-step__header { min-height: 6.6rem; align-items: stretch; padding: .72rem 1.35rem; }
  .notice-workspace .guided-step__header-copy { align-content: center; }
  .notice-workspace .guided-step__header-meta { min-height: 4.8rem; align-items: stretch; }
  .notice-workspace .step-category-badge, .notice-workspace .guided-step__duration {
    display: grid;
    min-width: 8rem;
    min-height: 100%;
    place-items: center;
    align-content: center;
    gap: .28rem;
    padding: .48rem .8rem;
    border-radius: .85rem;
    font-size: 1.08rem;
    font-weight: 850;
  }
  .notice-workspace .step-category-badge .step-category-icon { width: 1.45rem; height: 1.45rem; }
  .notice-workspace .guided-step__duration { min-width: 6rem; background: var(--color-surface-soft); color: var(--color-brand-strong); }
  .notice-workspace .guided-step__duration > span { font-size: 1.25rem; }
  .notice-workspace .guided-step__content { min-height: 0; grid-template-columns: minmax(0, 2fr) minmax(25rem, 1fr) !important; align-items: stretch !important; gap: 1.25rem; overflow: hidden; padding: 1.25rem 1.35rem 1.1rem; }
  .notice-workspace .guided-step__media { display: grid; min-width: 0; min-height: 0; height: 100%; gap: .75rem; align-content: stretch; }
  .notice-workspace .guided-step__media[data-media-layout="single"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .notice-workspace .guided-step__media[data-media-layout="columns"] { grid-template-columns: repeat(var(--media-count), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .notice-workspace .guided-step__media[data-media-layout="stacked"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--media-count), minmax(0, 1fr)); }
  .notice-workspace .guided-step__media[data-media-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--media-rows), minmax(0, 1fr)); }
  .notice-workspace .guided-step__media .step-media[data-width] { display: grid; min-width: 0; min-height: 0; height: 100%; grid-column: auto; grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .notice-workspace .guided-step__media .step-media__stage { width: 100%; height: 100%; min-height: 0; cursor: zoom-in; }
  .notice-workspace .guided-step__media .step-media__transform { max-width: 100%; max-height: 100%; transform: none !important; }
  .notice-workspace .guided-step__media .step-media__transform img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; }
  .notice-workspace .guided-step__media .step-media__caption { min-height: 1.1rem; overflow: hidden; line-height: 1.1rem; white-space: nowrap; text-overflow: ellipsis; }
  .notice-workspace .guided-step[data-layout="quality"] .guided-step__media, .notice-workspace .guided-step[data-layout="quality"] .guided-step__work { grid-column: auto; grid-row: auto; }

  .notice-side-rail {
    z-index: 14;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .42rem;
    padding: .55rem .42rem;
    background: rgb(255 255 255 / 94%);
  }
  .notice-side-rail--left { grid-column: 1; border-right: 1px solid var(--color-line); }
  .notice-side-rail--right { grid-column: 3; border-left: 1px solid var(--color-line); }
  .notice-rail-button {
    position: relative;
    display: grid;
    min-height: 3.65rem;
    place-items: center;
    align-content: center;
    gap: .12rem;
    padding: .35rem .2rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    background: transparent;
    color: var(--color-muted);
    font-size: .66rem;
    font-weight: 760;
  }
  .notice-rail-button__icon { font-size: 1.25rem; line-height: 1; }
  .notice-rail-button small { max-width: 3.2rem; overflow: hidden; font-size: .48rem; font-weight: 700; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
  .notice-rail-button:hover { border-color: var(--color-line); background: var(--color-surface-soft); color: var(--color-brand); }
  .notice-rail-button[aria-expanded="true"] { background: var(--color-brand); color: #fff; }
  .notice-rail-button--bottom-start { margin-top: auto; }
  .notice-rail-button--attention::after { position: absolute; width: .45rem; height: .45rem; margin: -2.55rem 0 0 2.4rem; border: 2px solid #fff; border-radius: 50%; background: var(--color-warning); content: ""; }
  .notice-rail-button--version { min-height: 4.35rem; border-color: currentcolor; }
  .notice-rail-button__status-dot { width: .85rem; height: .85rem; border: .18rem solid currentcolor; border-radius: 50%; background: currentcolor; box-shadow: inset 0 0 0 .15rem #fff; }
  .notice-rail-button--status-preparation { background: #e3f0ff; color: #2362a2; }
  .notice-rail-button--status-review { background: var(--color-warning-soft); color: var(--color-warning); }
  .notice-rail-button--status-available { background: var(--color-success-soft); color: var(--color-success); }
  .notice-rail-button--status-archived { background: #ecefed; color: #5d6964; }
  .notice-rail-button--create { margin-top: auto; border-color: #b9ddc7; background: var(--color-success-soft); color: var(--color-success); }
  .notice-delete-step { margin: 0; }
  .notice-delete-step .notice-rail-button { width: 100%; color: var(--color-danger); }
  .notice-delete-step .notice-rail-button:hover { background: var(--color-danger-soft); border-color: currentcolor; }

  .notice-workspace-panel {
    position: absolute;
    z-index: 13;
    top: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--color-canvas);
    box-shadow: 10px 0 32px rgb(18 33 28 / 12%);
    visibility: hidden;
    opacity: 0;
    transition: translate .2s ease, opacity .18s ease, visibility 0s linear .2s;
  }
  .notice-workspace-panel--left { left: var(--left-rail-width); width: var(--left-panel-width); translate: -105% 0; }
  .notice-workspace-panel--right { right: var(--right-rail-width); width: var(--right-panel-width); translate: 105% 0; box-shadow: -10px 0 32px rgb(18 33 28 / 12%); }
  .notice-workspace-panel.is-open { visibility: visible; translate: 0 0; opacity: 1; transition-delay: 0s; }
  .notice-workspace-panel__header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .85rem; border-bottom: 1px solid var(--color-line); background: #fff; }
  .notice-workspace-panel__header h2 { font-size: 1.15rem; }
  .notice-workspace-panel__header button { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 0; border-radius: 50%; background: var(--color-surface-soft); font-size: 1.45rem; }
  .notice-workspace-panel__body { min-height: 0; overflow-y: auto; padding: .75rem; }
  .notice-workspace-panel .notice-editor-sidebar { display: block; }
  .notice-workspace-panel .notice-tree { border: 0; box-shadow: none; }
  .notice-workspace-panel .notice-tree__toggle { display: none; }
  .notice-workspace-panel [data-navigator-content] { display: block !important; max-height: none !important; }

  .notice-read-bom { display: grid; gap: 1rem; }
  .notice-side-heading { display: grid; gap: .2rem; }
  .notice-read-bom__list, .notice-read-bom__tools ul, .notice-read-bom__total ul { display: grid; gap: .45rem; list-style: none; }
  .notice-read-bom__list li, .notice-read-bom__total li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem; border: 1px solid var(--color-line); border-radius: .6rem; background: #fff; }
  .notice-read-bom__list li > span { display: grid; gap: .05rem; }
  .notice-read-bom__list small { color: var(--color-muted); }
  .notice-bom-thumb { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; overflow: hidden; border: 1px solid var(--color-line); border-radius: .55rem; background: #fff; }
  .notice-bom-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .notice-bom-status { width: fit-content; padding: .08rem .38rem; border-radius: 99rem; background: var(--color-warning-soft); color: var(--color-warning) !important; font-size: .66rem; font-weight: 750; }
  .notice-read-bom__list b, .notice-read-bom__total b { white-space: nowrap; }
  .notice-read-bom__tools { display: grid; gap: .45rem; padding-top: .75rem; border-top: 1px solid var(--color-line); }
  .notice-read-bom__tools li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: .45rem; background: #fff; }
  .asset-kind-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .55rem; background: var(--color-brand-soft); color: var(--color-brand); }
  .asset-kind-icon--tool { background: var(--color-warning-soft); color: #8c5a00; }
  .asset-kind-icon--ppe { background: #e8f1ff; color: #245da8; }
  .asset-kind-icon--file, .asset-kind-icon--gcode, .asset-kind-icon--dxf, .asset-kind-icon--firmware, .asset-kind-icon--wiring, .asset-kind-icon--other { background: var(--color-info-soft); color: var(--color-info); }
  .asset-kind-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  .notice-read-bom__total summary { padding: .65rem 0; cursor: pointer; font-weight: 750; }
  .notice-read-bom--compact { gap: .5rem; }
  .notice-read-bom--compact .notice-side-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; }
  .notice-read-bom--compact .notice-side-heading h2 { font-size: .95rem; }
  .notice-read-bom--compact .notice-side-heading .eyebrow { font-size: .65rem; }
  .notice-read-bom--compact .notice-read-bom__list, .notice-read-bom--compact .notice-read-bom__total ul { gap: 0; border: 1px solid var(--color-line); border-radius: .6rem; overflow: hidden; background: #fff; }
  .notice-read-bom--compact .notice-read-bom__list li, .notice-read-bom--compact .notice-read-bom__total li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .4rem; padding: .06rem .4rem; border: 0; border-radius: 0; }
  .notice-read-bom--compact .notice-read-bom__list li + li, .notice-read-bom--compact .notice-read-bom__total li + li { border-top: 1px solid var(--color-line); }
  .notice-read-bom--compact .notice-bom-thumb { width: 3.4rem; height: 3.4rem; border: 0; border-radius: 0; background: transparent; }
  .notice-read-bom--compact .asset-kind-icon { background: transparent; }
  .notice-bom-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .08rem .4rem; min-width: 0; padding-block: .2rem; }
  .notice-bom-item > strong { font-size: .83rem; line-height: 1.2; overflow-wrap: anywhere; }
  .notice-bom-item__quantity { font-size: .75rem; }
  .notice-bom-item__meta { grid-column: 1 / -1; font-size: .72rem; line-height: 1.1; }
  .notice-bom-item__note, .notice-bom-item > .notice-bom-status { grid-column: 1 / -1; }
  .notice-bom-item__note { font-size: .72rem; line-height: 1.2; color: var(--color-muted); overflow-wrap: anywhere; }
  .notice-read-bom--equipment strong { font-size: .85rem; line-height: 1.2; }
  .notice-read-bom--equipment small { font-size: .73rem; }
  .notice-side-empty { display: grid; place-items: center; gap: .5rem; padding: 1.5rem; border: 1px dashed var(--color-line-strong); border-radius: .65rem; color: var(--color-muted); text-align: center; }
  .notice-side-empty span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); }

  .build-notice-plan { display: grid; gap: .35rem; list-style: none; }
  .build-notice-plan a, .build-notice-plan li > span { display: grid; gap: .08rem; padding: .65rem .7rem; border-radius: .55rem; color: var(--color-muted); text-decoration: none; }
  .build-notice-plan a:hover, .build-notice-plan .is-current a { background: var(--color-brand-soft); color: var(--color-brand-strong); }
  .build-notice-plan li > span[aria-disabled="true"] { opacity: .46; }
  .build-notice-plan small { font-size: .7rem; }

  .notice-tool-form { display: grid; align-content: start; gap: 1.25rem; }
  .notice-reference-fixed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .notice-reference-fixed span { display: grid; gap: .08rem; padding: .58rem .65rem; border: 1px solid var(--color-line); border-radius: .55rem; background: #fff; }
  .notice-reference-fixed small { color: var(--color-muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; }
  .notice-reference-fixed strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
  .notice-reference-form { display: grid; gap: .7rem; }
  .notice-reference-form label, .notice-publish-form label { display: grid; gap: .25rem; color: var(--color-muted); font-size: .72rem; font-weight: 720; }
  .notice-reference-form input, .notice-reference-form textarea, .notice-publish-form input { width: 100%; min-height: 2.55rem; padding: .5rem .6rem; border: 1px solid var(--color-line); border-radius: .5rem; background: #fff; color: var(--color-ink); font: inherit; }
  .notice-reference-form textarea { resize: vertical; }
  .notice-version-panel { display: grid; align-content: start; gap: .85rem; }
  .notice-version-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; padding: .85rem; border: 1px solid var(--color-line); border-radius: .7rem; background: #fff; }
  .notice-version-summary > div { display: flex; align-items: center; gap: .5rem; }
  .notice-version-summary > span { font-weight: 800; }
  .notice-version-summary > small { grid-column: 1 / -1; color: var(--color-muted); }
  .notice-version-summary > em { grid-column: 1 / -1; width: fit-content; padding: .16rem .42rem; border-radius: 99rem; background: rgb(255 255 255 / 72%); font-size: .65rem; font-style: normal; font-weight: 800; }
  .notice-version-summary__dot { width: .7rem; height: .7rem; border-radius: 50%; background: currentcolor; }
  .notice-version-summary--preparation { border-color: #b6d7f8; background: #f2f8ff; color: #2362a2; }
  .notice-version-summary--review { border-color: #e5c777; background: var(--color-warning-soft); color: var(--color-warning); }
  .notice-version-summary--available { border-color: #b9ddc7; background: var(--color-success-soft); color: var(--color-success); }
  .notice-version-summary--archived { background: #ecefed; color: #5d6964; }
  .notice-version-actions { display: grid; gap: .55rem; }
  .notice-version-actions form { display: grid; gap: .5rem; }
  .notice-correction-state { display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem; border: 1px solid #e5c777; border-radius: .55rem; background: var(--color-warning-soft); color: var(--color-warning); font-size: .75rem; font-weight: 800; }
  .notice-correction-state span { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: #fff; }
  .notice-version-waiting { padding: .55rem .65rem; border-radius: .5rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .75rem; }
  .notice-revision-history, .notice-major-version { overflow: hidden; border: 1px solid var(--color-line); border-radius: .6rem; background: #fff; }
  .notice-revision-history > summary, .notice-major-version > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .7rem; font-size: .74rem; font-weight: 800; list-style: none; cursor: pointer; }
  .notice-revision-history > summary::-webkit-details-marker, .notice-major-version > summary::-webkit-details-marker { display: none; }
  .notice-revision-history > summary span:last-child { display: inline-grid; min-width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 99rem; background: var(--color-surface-soft); color: var(--color-muted); font-size: .62rem; }
  .notice-revision-history ul { display: grid; gap: .25rem; padding: .35rem; border-top: 1px solid var(--color-line); list-style: none; }
  .notice-revision-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: .4rem; background: var(--color-surface-soft); }
  .notice-revision-history li > span:first-child { display: grid; gap: .04rem; min-width: 0; }
  .notice-revision-history li strong { font-size: .7rem; }
  .notice-revision-history li small { overflow: hidden; color: var(--color-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .notice-revision-history__current { color: var(--color-success); font-size: .64rem; font-weight: 800; }
  .notice-major-version { padding-bottom: .55rem; }
  .notice-major-version > p { padding: 0 .7rem .55rem; color: var(--color-muted); font-size: .7rem; }
  .notice-major-version > a { width: calc(100% - 1.4rem); margin-inline: .7rem; }
  .notice-tool-form > section { display: grid; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
  .notice-tool-list { display: grid; gap: .4rem; }
  .notice-tool-list > div { display: flex; align-items: start; justify-content: space-between; gap: .65rem; padding: .65rem; border: 1px solid var(--color-line); border-radius: .55rem; background: #fff; font-size: .82rem; }
  .notice-tool-list > div > span:first-child { display: flex; gap: .45rem; }
  .notice-tool-list__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; white-space: nowrap; }
  .notice-tool-list__actions form { display: contents; }
  .button-link { padding: 0; border: 0; background: transparent; color: var(--color-brand); text-decoration: underline; text-underline-offset: .2em; }
  .button-link--danger { color: var(--color-danger); }
  .notice-compact-fields { display: grid; gap: .75rem; }
  .notice-compact-fields label, .notice-add-part label, .notice-inline-part label { display: grid; gap: .25rem; color: var(--color-muted); font-size: .72rem; font-weight: 720; }
  .notice-compact-fields input, .notice-compact-fields textarea, .notice-add-part input, .notice-add-part select, .notice-inline-part input { width: 100%; min-height: 2.5rem; padding: .48rem .58rem; border: 1px solid var(--color-line); border-radius: .5rem; background: #fff; color: var(--color-text); font: inherit; }
  .notice-compact-fields textarea { resize: vertical; }
  .notice-compact-fields__row { display: grid; grid-template-columns: minmax(6rem, .34fr) minmax(0, 1fr); gap: .6rem; }
  .notice-input-suffix { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--color-line); border-radius: .5rem; background: #fff; }
  .notice-input-suffix input { min-width: 0; border: 0; }
  .notice-input-suffix small { padding: 0 .55rem; white-space: nowrap; }
  .notice-autosave-hint { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--color-success); font-size: .72rem; }
  .notice-choice-fieldset { display: grid; gap: .45rem; padding: 0; border: 0; }
  .notice-choice-fieldset legend { margin-bottom: .35rem; color: var(--color-muted); font-size: .72rem; font-weight: 720; }
  .notice-category-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .notice-category-choices label { display: grid; min-height: 3.2rem; place-items: center; align-content: center; gap: .12rem; padding: .35rem .15rem; border: 1px solid var(--color-line); border-radius: .5rem; background: #fff; color: var(--color-muted); cursor: pointer; font-size: .62rem; text-align: center; }
  .notice-category-choices input, .notice-layout-choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .notice-category-choices label:has(input:checked), .notice-layout-choices label:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-strong); box-shadow: inset 0 0 0 1px var(--color-brand); }
  .notice-layout-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .notice-layout-choices > label { display: grid; min-height: 4.6rem; align-content: start; gap: .4rem; padding: .45rem; border: 1px solid var(--color-line); border-radius: .55rem; background: #fff; color: var(--color-muted); cursor: pointer; font-size: .68rem; }
  .notice-layout-choice__diagram { display: grid; height: 2rem; grid-template-columns: 1.45fr .7fr; gap: .18rem; }
  .notice-layout-choice__diagram i { border-radius: .2rem; background: var(--color-surface-strong); }
  [data-layout-choice="multi_media"] .notice-layout-choice__diagram { grid-template-columns: repeat(3, 1fr); }
  [data-layout-choice="technical"] .notice-layout-choice__diagram { grid-template-columns: 1.8fr .55fr; }
  [data-layout-choice="quality"] .notice-layout-choice__diagram { grid-template-columns: 1.2fr .8fr; }
  [data-layout-choice="quality"] .notice-layout-choice__diagram i:first-child { background: var(--color-success-soft); }
  .notice-tool-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
  .notice-tool-section-heading small { color: var(--color-muted); }
  .inline-actions--panel .inline-action { padding-inline: 0; }
  .inline-actions--panel textarea { font-size: .85rem; }
  .notice-workspace-panel--compact .notice-workspace-panel__header { min-height: 3rem; padding: .4rem .65rem; }
  .notice-workspace-panel--compact .notice-workspace-panel__header h2 { font-size: 1.05rem; }
  .notice-workspace-panel--compact .notice-workspace-panel__header button { width: 2rem; height: 2rem; }
  .notice-workspace-panel--compact .notice-workspace-panel__body { padding: .55rem .65rem; }
  .notice-workspace-panel--compact .notice-tool-form { gap: .65rem; }
  .notice-workspace-panel--compact .notice-tool-form > section { gap: .4rem; padding-top: .6rem; }
  .notice-workspace-panel--compact .notice-tool-form > section:first-child { border: 0; padding-top: 0; }
  .notice-workspace-panel--compact h3 { font-size: .9rem; }
  .notice-workspace-panel--compact .notice-compact-fields { gap: .45rem; }
  .notice-workspace-panel--compact .notice-compact-fields label { gap: .15rem; min-width: 0; }
  .notice-workspace-panel--compact .notice-compact-fields :is(input:not([type="radio"]), textarea, select) { min-width: 0; width: 100%; min-height: 2rem; padding: .3rem .45rem; border: 1px solid var(--color-line); border-radius: .35rem; background: #fff; color: var(--color-ink); font-size: .8rem; font-weight: 400; line-height: 1.3; }
  .notice-workspace-panel--compact .notice-input-suffix { border-radius: .35rem; }
  .notice-workspace-panel--compact .notice-compact-fields .notice-input-suffix input { border: 0; }
  .notice-content-identity, .notice-content-outcomes { display: grid; gap: .5rem; align-items: start; }
  .notice-content-identity { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .notice-content-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice-workspace-panel--compact .notice-choice-fieldset { gap: .2rem; }
  .notice-workspace-panel--compact .notice-choice-fieldset legend { margin-bottom: .2rem; }
  .notice-workspace-panel--compact .notice-category-choices { gap: .3rem; }
  .notice-workspace-panel--compact .notice-category-choices label { display: flex; justify-content: center; align-items: center; min-height: 2rem; padding: .2rem .3rem; gap: .25rem; font-size: .65rem; border-radius: .35rem; }
  .notice-workspace-panel--compact .notice-category-choices .step-category-icon { width: .95rem; height: .95rem; flex: 0 0 auto; }
  .notice-workspace-panel--compact .notice-category-choices label:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 2px; }
  .notice-workspace-panel--compact .notice-autosave-hint { color: var(--color-muted); font-size: .67rem; }
  .notice-workspace-panel--compact .notice-tool-section-heading { align-items: center; gap: .5rem; }
  .notice-workspace-panel--compact .notice-tool-section-heading small { font-size: .7rem; }
  .notice-workspace-panel--compact .inline-action, .notice-workspace-panel--compact .inline-action-add { grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem; gap: .35rem; padding-block: .1rem; }
  .notice-workspace-panel--compact .inline-action-add { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .notice-workspace-panel--compact :is(.inline-action__number, .inline-action__menu > summary, .inline-action-add > span) { width: 1.6rem; height: 1.6rem; }
  .notice-workspace-panel--compact .inline-action-add textarea { min-height: 2rem; padding: .3rem .4rem; font-size: .8rem; }
  .notice-workspace-panel--compact .notice-tool-list > div { align-items: center; padding: .25rem .45rem; gap: .4rem; }
  .notice-workspace-panel--compact .notice-tool-list > div > span:first-child { display: block; min-width: 0; overflow-wrap: anywhere; }
  .notice-workspace-panel--compact .notice-editor-add { min-height: 1.9rem; padding: .2rem .5rem; border-radius: .35rem; font-size: .75rem; white-space: nowrap; }
  .notice-editor-icon, .notice-workspace-panel--compact .callout-actions--compact :is(a, button) { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; min-height: 0; padding: 0; border: 0; border-radius: .3rem; background: transparent; color: var(--color-brand); font-size: 1rem; text-decoration: none; }
  .notice-editor-icon:hover, .callout-actions--compact :is(a, button):hover { background: var(--color-brand-soft); }
  .notice-alert-list { display: grid; gap: .4rem; }
  .notice-alert { padding: .3rem .55rem .45rem; border: 1px solid var(--color-line); border-left: 3px solid var(--color-info); border-radius: .4rem; background: #fff; }
  .notice-alert--warning { border-left-color: var(--color-warning); }
  .notice-alert--danger { border-left-color: var(--color-danger); }
  .notice-alert--tip { border-left-color: var(--color-success); }
  .notice-alert > header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
  .notice-alert > header > strong { font-size: .7rem; color: var(--color-muted); }
  .notice-alert > p { font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
  .notice-alert .callout-actions { margin: 0; gap: .1rem; }
  .notice-alert .callout-actions form { display: contents; }
  .notice-alert .callout-actions [role="status"]:not(:empty) { flex-basis: 100%; color: var(--color-danger); font-size: .75rem; white-space: normal; }
  .notice-workspace-panel--compact .notice-alert-add { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: start; gap: .35rem; }
  .notice-alert-add > button { margin-top: 1.15rem; border: 1px solid var(--color-line); }
  .notice-resolved-alerts { font-size: .75rem; color: var(--color-muted); }
  .notice-resolved-alerts > summary { padding-block: .3rem; cursor: pointer; }
  .notice-resolved-alerts > div { padding: .4rem 0; border-top: 1px solid var(--color-line); }
  .notice-resolved-alerts form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .notice-resolved-alerts form .button { min-height: 1.9rem; padding: .2rem .4rem; font-size: .75rem; }
  @media (max-width: 40rem) {
    .notice-workspace-panel--compact { max-width: calc(100% - var(--right-rail-width)); }
    .notice-workspace-panel--compact .notice-category-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .notice-content-outcomes { grid-template-columns: minmax(0, 1fr); }
    .notice-workspace-panel--compact .notice-alert-add { grid-template-columns: 6rem minmax(0, 1fr) auto; }
  }
  @media (pointer: coarse) {
    .notice-workspace-panel--compact .notice-category-choices label,
    .notice-workspace-panel--compact .notice-compact-fields :is(input:not([type="radio"]), textarea, select),
    .notice-workspace-panel--compact :is(.notice-editor-add, .notice-editor-icon),
    .notice-workspace-panel--compact .callout-actions--compact :is(a, button) { min-height: 2.75rem; }
    .notice-workspace-panel--compact .notice-workspace-panel__header button,
    .notice-workspace-panel--compact .notice-editor-icon, .notice-workspace-panel--compact .callout-actions--compact :is(a, button) { width: 2.75rem; height: 2.75rem; }
  }
  .notice-media-list { display: grid; gap: .55rem; }
  .notice-media-list__item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; align-items: center; padding: .5rem; border: 1px solid var(--color-line); border-radius: .65rem; background: #fff; }
  .notice-media-list__item > img { width: 4rem; height: 3rem; object-fit: cover; border-radius: .4rem; background: var(--color-surface-soft); }
  .notice-media-list__item > div:nth-child(2) { display: grid; min-width: 0; gap: .12rem; }
  .notice-media-list__item small { color: var(--color-muted); }
  .notice-media-list__actions { display: flex; grid-column: 1 / -1; gap: .4rem; }
  .notice-media-list__actions .button { flex: 1; min-height: 2.1rem; padding: .35rem .55rem; }
  .notice-inline-parts { display: grid; gap: .55rem; }
  .notice-inline-part { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; padding: .7rem; border: 1px solid var(--color-line); border-radius: .65rem; background: #fff; }
  .notice-inline-part__summary { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem; gap: .5rem; align-items: center; }
  .notice-inline-part__summary > span:nth-child(2) { display: grid; min-width: 0; gap: .1rem; }
  .notice-inline-part__summary small { overflow: hidden; color: var(--color-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .notice-inline-part__icon { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .45rem; background: var(--color-brand-soft); color: var(--color-brand); }
  .notice-icon-button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: #fff; color: var(--color-brand); font-size: 1rem; }
  .notice-inline-part > [data-inline-part-form] { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .5rem; align-items: end; }
  .notice-inline-part > [data-inline-part-form] > strong, .notice-inline-part > [data-inline-part-form] > label:last-of-type, .notice-inline-part__form-actions { grid-column: 1 / -1; }
  .notice-inline-part__form-actions { display: flex; justify-content: flex-end; gap: .45rem; }
  .notice-inline-part__form-actions .button { min-height: 2.2rem; padding: .38rem .65rem; }
  .notice-icon-danger { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 0; border-radius: 50%; background: var(--color-danger-soft); color: var(--color-danger); font-size: 1.1rem; }
  .notice-add-part { display: grid; gap: .65rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
  .notice-add-part__row { display: grid; grid-template-columns: minmax(6rem, .35fr) minmax(0, 1fr); gap: .55rem; }
  .notice-part-picker { display: grid; gap: .55rem; }
  .notice-part-picker__scope { display: flex !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem !important; padding: .5rem .6rem; border-radius: .5rem; background: var(--color-brand-soft); color: var(--color-brand-strong) !important; cursor: pointer; }
  .notice-part-picker__scope input { width: 1rem; min-height: 1rem; margin: 0; }
  .notice-part-picker select { min-height: 11rem; padding: .25rem; }
  .notice-part-picker option { padding: .38rem .45rem; border-radius: .3rem; }
  .notice-part-picker__status { min-height: 1rem; color: var(--color-muted); font-size: .72rem; }
  .notice-add-step { display: grid; gap: .75rem; }
  .notice-add-step label { display: grid; gap: .3rem; color: var(--color-muted); font-size: .74rem; font-weight: 720; }
  .notice-add-step input, .notice-add-step select, .notice-add-step textarea { width: 100%; min-height: 2.65rem; padding: .5rem .6rem; border: 1px solid var(--color-line); border-radius: .5rem; background: #fff; color: var(--color-text); font: inherit; }
  .notice-add-step__title input { min-height: 3.2rem; font-size: 1rem; font-weight: 720; }
  .notice-add-step details { border-top: 1px solid var(--color-line); }
  .notice-add-step summary { padding: .75rem 0; color: var(--color-brand); cursor: pointer; font-size: .8rem; font-weight: 750; }
  .notice-add-step__options { display: grid; gap: .65rem; padding-bottom: .75rem; }

  .notice-floating-navigation { position: absolute; z-index: 7; bottom: .7rem; left: 50%; display: flex; align-items: center; gap: .3rem; translate: -50% 0; padding: .25rem; border: 1px solid var(--color-line); border-radius: 99rem; background: rgb(255 255 255 / 92%); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
  .notice-floating-navigation a, .notice-floating-navigation > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--color-brand); font-size: 1.45rem; line-height: 1; text-decoration: none; }
  .notice-floating-navigation a:hover { background: var(--color-brand); color: #fff; }
  .notice-floating-navigation > span { opacity: .25; }
  .notice-floating-navigation .notice-space-hint { display: block; width: auto; height: auto; padding: 0 .4rem; color: var(--color-muted); font-size: .66rem; font-weight: 700; line-height: 1.1; opacity: 1; white-space: nowrap; }
  .notice-floating-navigation strong { min-width: 3.4rem; font-size: .78rem; text-align: center; }
  .notice-floating-navigation small { color: var(--color-muted); font-weight: 600; }
  .notice-floating-version { position: absolute; z-index: 6; top: .6rem; right: .7rem; padding: .22rem .48rem; border-radius: 99rem; background: rgb(255 255 255 / 86%); color: var(--color-muted); font-size: .68rem; }
  .notice-editor-status { position: absolute; z-index: 18; top: .6rem; left: 50%; min-height: 0; translate: -50% 0; padding: .25rem .55rem; border-radius: 99rem; background: rgb(255 255 255 / 90%); color: var(--color-muted); font-size: .72rem; pointer-events: none; }
  .notice-editor-status:empty { display: none; }
  .notice-build-action { position: absolute; z-index: 10; right: 1rem; bottom: .85rem; min-height: 2.7rem; padding: .5rem 1rem; border: 0; border-radius: 99rem; background: var(--color-brand); color: #fff; font-weight: 760; box-shadow: var(--shadow-md); }
  .notice-workspace-backdrop { position: absolute; z-index: 12; inset: 0; border: 0; background: rgb(6 18 13 / 35%); }

  @media (min-width: 54rem) {
    .notice-workspace-backdrop { display: none !important; }
  }

  @media (max-width: 53.99rem) {
    .notice-workspace { --left-rail-width: 3.65rem; --right-rail-width: 0rem; border-radius: .75rem; }
    .notice-workspace--editor { --right-rail-width: 3.65rem; }
    .notice-workspace.has-left-panel .notice-workspace__stage, .notice-workspace.has-right-panel .notice-workspace__stage { margin: 0; }
    .notice-workspace-panel--left { width: min(86vw, 22rem); }
    .notice-workspace-panel--right { width: min(88vw, 30rem); }
    .notice-workspace-panel { z-index: 17; }
    .notice-workspace-backdrop:not([hidden]) { display: block; }
    .notice-side-rail { padding-inline: .28rem; }
    .notice-rail-button { min-height: 3.35rem; font-size: .6rem; }
    .notice-workspace .notice-stage__content { width: 80rem; height: 45rem; }
    .notice-floating-version { display: none; }
    .notice-build-action { right: .65rem; bottom: .65rem; }
  }
}

@layer components {
  .bom-catalog-heading { margin-bottom: 1.25rem; }
  .bom-catalog-toolbar { display: grid; grid-template-columns: minmax(42rem, 1.35fr) minmax(34rem, 1fr); align-items: stretch; gap: .65rem; margin-bottom: .75rem; }
  .bom-filter-bar { display: grid; grid-template-columns: minmax(11rem, 1.25fr) minmax(8rem, .7fr) minmax(8rem, .7fr) minmax(12rem, 1fr) auto; align-items: end; gap: .5rem; padding: .55rem .65rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }
  .bom-filter-bar label { display: grid; gap: .25rem; color: var(--color-muted); font-size: .72rem; font-weight: 750; }
  .bom-filter-bar input, .bom-filter-bar select { width: 100%; min-height: 2.35rem; padding: .38rem .5rem; border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; }
  .bom-catalog-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
  .bom-catalog-section-heading h2 { margin-top: .1rem; }
  .bom-catalog-section-heading > p { max-width: 36rem; color: var(--color-muted); font-size: .88rem; }
  .bom-filter-reset { display: grid; width: 2.35rem; min-height: 2.35rem; place-items: center; border: 1px solid var(--color-line); border-radius: .45rem; color: var(--color-muted); font-size: 1.2rem; text-decoration: none; }
  .bom-filter-reset:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .bom-catalog-metrics { display: grid; grid-template-columns: .68fr .75fr 1.4fr .78fr .8fr; gap: .4rem; }
  .bom-catalog-metrics > div { display: grid; align-content: center; gap: .05rem; min-width: 0; padding: .48rem .55rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }
  .bom-catalog-metrics span { overflow: hidden; color: var(--color-muted); font-size: .64rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
  .bom-catalog-metrics strong { font-size: 1.08rem; white-space: nowrap; }
  .bom-catalog-metrics small { overflow: hidden; color: var(--color-warning); font-size: .58rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .bom-catalog-metrics .is-warning { border-color: #e5c777; background: var(--color-warning-soft); color: var(--color-warning); }
  .bom-catalog-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }
  .bom-catalog-table { width: 100%; min-width: 76rem; border-collapse: collapse; }
  .bom-catalog-table th, .bom-catalog-table td { padding: .42rem .6rem; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: middle; }
  .bom-catalog-table td { font-size: .86rem; line-height: 1.2; }
  .bom-catalog-table th { background: var(--color-surface-soft); color: var(--color-muted); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .bom-catalog-table tbody tr:last-child td { border-bottom: 0; }
  .bom-catalog-table tbody tr:hover { background: #f7fbf9; }
  .bom-catalog-table tbody tr.is-editing td { background: #eff8f4; }
  .bom-catalog-table tbody tr.is-saving { opacity: .72; }
  .bom-catalog-table [hidden] { display: none !important; }
  .bom-catalog-table__visual { width: 2.7rem; padding-right: .15rem !important; }
  .bom-catalog-table__visual a, .bom-catalog-table__visual span { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; overflow: hidden; border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; color: var(--color-muted); text-decoration: none; }
  .bom-catalog-table__visual img { width: 100%; height: 100%; object-fit: contain; }
  .equipment-catalog-table { min-width: 58rem; }
  .equipment-catalog-table .bom-catalog-table__visual .asset-kind-icon { width: 100%; height: 100%; border-radius: 0; }
  .equipment-catalog-toolbar .bom-catalog-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .equipment-form-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: .65rem; }
  .equipment-form-fields .field:last-child { grid-column: 1 / -1; }
  .bom-catalog-table .is-numeric { text-align: right; white-space: nowrap; }
  .bom-catalog-table td small { color: var(--color-muted); }
  .bom-catalog-table__reference { color: var(--color-brand); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; font-weight: 800; }
  .bom-catalog-table__supplier { display: block; margin-top: .12rem; color: var(--color-brand); font-size: .72rem; font-weight: 750; text-decoration: none; }
  .bom-catalog-table__supplier:hover { text-decoration: underline; }
  .bom-catalog-table--compact { table-layout: fixed; }
  .bom-catalog-table--compact .bom-col-image { width: 2.7rem; }
  .bom-catalog-table--compact .bom-col-reference { width: 11rem; }
  .bom-catalog-table--compact .bom-col-category { width: 6.2rem; }
  .bom-catalog-table--compact .bom-col-storage { width: 6.5rem; }
  .bom-catalog-table--compact .bom-col-price { width: 7.6rem; }
  .bom-catalog-table--compact .bom-col-need { width: 7.8rem; }
  .bom-catalog-table--compact .bom-col-stock { width: 7.4rem; }
  .bom-catalog-table--compact .bom-col-notices { width: 4rem; }
  .bom-catalog-table--compact .bom-col-status { width: 5rem; }
  .bom-catalog-table--compact .bom-col-actions { width: 4.8rem; }
  .bom-catalog-table--compact th, .bom-catalog-table--compact td { padding: .22rem .45rem; }
  .bom-catalog-table.bom-catalog-table--compact .bom-row-image { width: 2rem; height: 2rem; }
  .bom-catalog-table--compact .bom-row-icon { width: 1.8rem; height: 1.8rem; }
  .bom-catalog-table--compact .status { padding: .25rem .5rem; font-size: .72rem; }
  .bom-catalog-table.bom-catalog-table--compact .bom-inline-stack { display: flex; align-items: center; gap: .25rem; min-width: 0; }
  .bom-reference-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bom-designation-line { display: flex; align-items: center; gap: .3rem; min-width: 0; }
  .bom-designation-line > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bom-designation-line .bom-catalog-table__supplier { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin: 0; font-size: .95rem; }
  .bom-catalog-table--compact .storage-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bom-catalog-table__actions { width: 5.2rem; }
  .bom-inline-stack { display: grid; gap: .28rem; min-width: 12rem; }
  .bom-inline-field { display: block; min-width: 0; }
  .bom-inline-field input, .bom-inline-field select { width: 100%; min-width: 4.5rem; min-height: 2rem; padding: .25rem .38rem; border: 1px solid var(--color-line-strong); border-radius: .38rem; background: #fff; color: var(--color-ink); font-size: .78rem; }
  .bom-inline-field input:focus, .bom-inline-field select:focus { border-color: var(--color-brand); outline: .14rem solid var(--color-brand-soft); }
  .bom-catalog-table .bom-inline-field input, .bom-catalog-table .bom-inline-field select { border: 0; border-bottom: 1px solid #b6cec3; border-radius: 0; background: transparent; min-height: 1.85rem; padding: .2rem .15rem; font: inherit; }
  .bom-catalog-table .bom-inline-field input:focus, .bom-catalog-table .bom-inline-field select:focus { border-bottom-color: var(--color-brand); outline: 0; box-shadow: 0 1px 0 var(--color-brand); }
  .bom-catalog-table--compact .bom-inline-field { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: inherit; }
  .bom-catalog-table--compact .bom-inline-field input { min-width: 0; }
  .bom-catalog-table--compact .bom-inline-price input { text-align: right; }
  .bom-catalog-table--compact .bom-price-basis { flex-shrink: 0; font-size: .76rem; }
  .bom-catalog-table--compact .bom-cell-more { flex: 0 0 1.3rem; width: 1.3rem; height: 1.8rem; padding: 0; text-align: center; font-size: 1.1rem; line-height: 1; }
  .bom-cell-more.has-suggestions { color: var(--color-warning); }
  .bom-value-unit { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; white-space: nowrap; min-height: 1.85rem; }
  .bom-value-unit .bom-unit-input { flex: 0 1 5rem; min-width: 0; }
  .bom-value-unit .bom-unit-input input { font-size: .76rem; text-overflow: ellipsis; }
  .bom-catalog-table .bom-inline-stack { min-width: 11rem; gap: .12rem; }
  .bom-catalog-table .bom-row-image { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; overflow: hidden; cursor: pointer; color: var(--color-brand); }
  .bom-catalog-table .bom-row-image:hover { border-color: var(--color-brand); }
  .bom-catalog-table .bom-row-image span { border: 0; width: auto; height: auto; font-size: 1.15rem; }
  .bom-cell-option { display: block; padding: .12rem .2rem; border: 0; background: transparent; color: var(--color-brand); cursor: pointer; font-size: .68rem; text-align: left; }
  .bom-cell-option:hover { text-decoration: underline; }
  .bom-usage-count { margin-left: auto; font-size: inherit; }
  .bom-cell-popover { position: fixed; inset: auto; margin: 0; width: min(21rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: 1rem; border: 1px solid var(--color-line-strong); border-radius: .6rem; box-shadow: 0 6px 24px #123a2926; background: #fff; color: var(--color-ink); text-align: left; white-space: normal; font-size: .82rem; }
  .bom-cell-popover h3 { margin: 0 0 .5rem; font-size: .95rem; }
  .bom-cell-popover p { margin: .4rem 0; }
  .bom-cell-popover .form-field { margin-bottom: .65rem; }
  .bom-cell-popover input, .bom-cell-popover select { min-height: 2rem; padding: .35rem .5rem; font-size: .82rem; }
  .bom-cell-popover output { display: block; margin-top: .7rem; font-weight: 700; }
  .bom-cell-popover [data-row-similar] { display: grid; gap: .35rem; margin-top: .6rem; }
  .bom-new-storage { display: inline-flex; align-items: center; gap: .05rem; white-space: nowrap; }
  .bom-new-storage input { width: 2.3ch; min-width: 0; min-height: 1.8rem; padding: .15rem 0; border: 1px solid transparent; border-bottom-color: #b6cec3; border-radius: .2rem; background: transparent; text-align: center; font: inherit; }
  .bom-new-storage input:focus { width: 5ch; background: #fff; border-color: var(--color-brand); }
  .bom-inline-calculated { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; }
  .bom-inline-calculated .bom-inline-field { width: 5rem; }
  .bom-inline-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 750; white-space: nowrap; }
  .bom-row-icon { display: inline-grid; width: 2.05rem; height: 2.05rem; place-items: center; padding: 0; border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; color: var(--color-brand-strong); cursor: pointer; text-decoration: none; }
  .bom-row-icon:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
  .bom-row-icon svg { width: 1rem; height: 1rem; fill: currentcolor; }
  .bom-row-icon--save { border-color: var(--color-brand); background: var(--color-brand); color: #fff; font-size: 1rem; font-weight: 900; }
  .bom-row-icon--save:hover { background: var(--color-brand-strong); color: #fff; }
  .bom-row-icon:disabled { cursor: wait; opacity: .55; }
  .bom-row-actions-edit { display: flex; align-items: center; gap: .3rem; }
  .bom-row-error { display: block; width: 12rem; margin-top: .28rem; color: var(--color-danger); font-size: .68rem !important; line-height: 1.25; white-space: normal; }
  .bom-category { display: inline-flex; padding: .2rem .48rem; border-radius: 99rem; background: var(--color-brand-soft); color: var(--color-brand-strong); font-size: .72rem; font-weight: 720; white-space: nowrap; }
  .bom-part-editor { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; }
  .bom-part-editor--compact > .panel { width: min(100%, 58rem); }
  .bom-part-form-panel { padding: 1rem; }
  .bom-part-form { display: grid; gap: .8rem; }
  .bom-part-form__layout { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: start; gap: 1rem; }
  .bom-part-image-picker { position: relative; display: grid; width: 10.5rem; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px dashed var(--color-line-strong); border-radius: .7rem; background: var(--color-surface-soft); color: var(--color-brand-strong); cursor: pointer; }
  .bom-part-image-picker:hover, .bom-part-image-picker:focus-within { border-color: var(--color-brand); background: var(--color-brand-soft); }
  .bom-part-image-picker img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
  .bom-part-image-picker__empty { display: grid; place-items: center; gap: .2rem; padding: .75rem; text-align: center; font-size: .76rem; font-weight: 750; }
  .bom-part-image-picker__empty b { font-size: 1.5rem; line-height: 1; }
  .bom-part-image-picker__action { position: absolute; inset: auto .3rem .3rem; padding: .28rem .4rem; border-radius: .35rem; background: rgb(9 70 57 / 88%); color: #fff; font-size: .65rem; font-weight: 800; text-align: center; }
  .bom-part-image-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .bom-part-form__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
  .bom-part-form__field--wide { grid-column: span 2; }
  .bom-part-form .field { gap: .2rem; }
  .bom-part-form .field > label, .bom-part-form .field > span:first-child { font-size: .72rem; }
  .bom-part-form input, .bom-part-form select { min-height: 2.25rem; padding: .38rem .5rem; }
  .bom-part-form .helptext { margin-top: 0; font-size: .67rem; }
  .bom-part-advanced { border-top: 1px solid var(--color-line); }
  .bom-part-advanced summary { padding: .65rem 0 .15rem; color: var(--color-muted); font-size: .76rem; font-weight: 800; cursor: pointer; }
  .bom-part-advanced__fields { display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; gap: .55rem; padding-top: .5rem; }
  .bom-part-form__actions { margin-top: 0; }
  .bom-part-editor__usage { grid-column: 1 / -1; }
  .bom-part-editor__usage details { overflow-wrap: anywhere; }
  .fastener-table select, .fastener-table input[type="number"] { min-height: 2.5rem; max-width: 100%; padding: .45rem .6rem; border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; }
  .fastener-table input[type="number"] { width: 7rem; }
  .bom-part-editor__usage .card-list { list-style: none; }
  .bom-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid var(--color-line); border-radius: .55rem; color: var(--color-ink); text-decoration: none; }
  .bom-usage-row > span { display: grid; }
  .bom-usage-row small { color: var(--color-muted); }
  .bom-usage-row b { white-space: nowrap; }
  .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

  @media (max-width: 72rem) {
    .bom-catalog-toolbar { grid-template-columns: minmax(0, 1fr); }
    .bom-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bom-catalog-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  @media (max-width: 53.99rem) {
    .bom-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bom-filter-bar label:first-child { grid-column: 1 / -1; }
    .bom-part-editor { grid-template-columns: minmax(0, 1fr); }
    .bom-catalog-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bom-part-editor__usage { grid-column: auto; }
    .bom-part-form__layout { grid-template-columns: minmax(0, 1fr); }
    .bom-part-image-picker { width: 8rem; }
    .bom-part-form__fields, .bom-part-advanced__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notice-workspace .guided-step__header-meta { min-height: 4.4rem; }
    .notice-workspace .step-category-badge, .notice-workspace .guided-step__duration { min-width: 6.4rem; font-size: 1rem; }
  }
}

@layer components {
  .page-heading--sf { margin-bottom: var(--space-5); }
  .sf-fleet-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--space-5); }
  .sf-fleet-metrics .metric-card { min-height: 5.4rem; padding: .85rem 1rem; }
  .sf-fleet-metrics .metric-card strong { display: flex; align-items: baseline; gap: .2rem; }
  .sf-fleet-metrics .metric-card strong small { color: var(--color-muted); font-size: .85rem; }

  .sf-fleet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .sf-factory-card {
    display: grid;
    gap: var(--space-4);
    padding: 1.15rem;
    border: 1px solid var(--color-line);
    border-left-width: .3rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, translate .16s ease;
  }
  .sf-factory-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); translate: 0 -.12rem; }
  .sf-factory-card__header, .sf-factory-card__header > span:first-child, .sf-factory-card__alerts, .sf-factory-card__progress > span {
    display: flex;
    align-items: center;
  }
  .sf-factory-card__header { justify-content: space-between; gap: var(--space-4); }
  .sf-factory-card__header > span:first-child { min-width: 0; gap: var(--space-3); }
  .sf-factory-card__header strong { overflow: hidden; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
  .sf-factory-card__progress { display: grid; gap: .5rem; }
  .sf-factory-card__progress > span { justify-content: space-between; gap: var(--space-3); color: var(--color-muted); font-size: .86rem; }
  .sf-factory-card__progress progress { width: 100%; height: .55rem; overflow: hidden; border: 0; border-radius: 99rem; accent-color: var(--color-brand); }
  .sf-factory-card__progress progress::-webkit-progress-bar { border-radius: 99rem; background: var(--color-surface-strong); }
  .sf-factory-card__progress progress::-webkit-progress-value { border-radius: 99rem; background: var(--color-brand); }
  .sf-factory-card__alerts { min-height: 2rem; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--color-line); }
  .sf-factory-card__open { margin-left: auto; color: var(--color-brand); font-size: 1.35rem; font-weight: 800; }

  .sf-status {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    gap: .4rem;
    padding: .32rem .62rem;
    border-radius: 99rem;
    background: var(--color-surface-soft);
    color: var(--color-muted);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }
  .sf-status__icon { display: inline-grid; width: 1rem; height: 1rem; place-items: center; font-size: .85rem; }
  .sf-alert-count { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-muted); font-size: .78rem; }
  .sf-alert-count > span:first-child { display: inline-grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 99rem; background: var(--color-surface-soft); font-size: .7rem; font-weight: 900; }
  .sf-alert-count--danger { color: var(--color-danger); font-weight: 750; }
  .sf-alert-count--danger > span:first-child { background: var(--color-danger-soft); }
  .sf-alert-count--warning { color: var(--color-warning); font-weight: 750; }
  .sf-alert-count--warning > span:first-child { background: var(--color-warning-soft); }

  .sf-state--operational, .sf-state--success { background: var(--color-success-soft); color: var(--color-success); }
  .sf-state--installed, .sf-state--commissioning, .sf-state--in-progress, .sf-state--in_progress, .sf-state--info { background: var(--color-info-soft); color: var(--color-info); }
  .sf-state--degraded, .sf-state--maintenance, .sf-state--warning, .sf-state--minor, .sf-state--major { background: var(--color-warning-soft); color: var(--color-warning); }
  .sf-state--stopped, .sf-state--danger, .sf-state--critical, .sf-state--error { background: var(--color-danger-soft); color: var(--color-danger); }
  .sf-state--empty, .sf-state--neutral, .sf-state--removed { background: var(--color-surface-soft); color: var(--color-muted); }
  .sf-state-border--operational, .sf-state-border--success { border-left-color: var(--color-success); }
  .sf-state-border--installed, .sf-state-border--commissioning, .sf-state-border--in-progress, .sf-state-border--in_progress, .sf-state-border--info { border-left-color: var(--color-info); }
  .sf-state-border--degraded, .sf-state-border--maintenance, .sf-state-border--warning, .sf-state-border--minor, .sf-state-border--major { border-left-color: #b77b18; }
  .sf-state-border--stopped, .sf-state-border--danger, .sf-state-border--critical, .sf-state-border--error { border-left-color: var(--color-danger); }
  .sf-state-border--empty, .sf-state-border--neutral, .sf-state-border--removed { border-left-color: var(--color-line-strong); }

  .sf-detail-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5);
    margin: var(--space-4) 0 var(--space-4);
  }
  .sf-detail-heading > .sf-status { min-height: 2.45rem; padding-inline: .85rem; font-size: .86rem; }
  .sf-detail-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--space-5);
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  .sf-detail-metrics > span { display: inline-flex; align-items: baseline; gap: .28rem; padding: .7rem 1rem; color: var(--color-muted); font-size: .82rem; }
  .sf-detail-metrics > span + span { border-left: 1px solid var(--color-line); }
  .sf-detail-metrics strong { color: var(--color-ink); font-size: 1.02rem; }
  .sf-detail-metrics .is-danger, .sf-detail-metrics .is-danger strong { color: var(--color-danger); }
  .sf-detail-metrics .is-warning, .sf-detail-metrics .is-warning strong { color: var(--color-warning); }

  .sf-structure {
    padding: var(--space-4);
    border: .2rem solid var(--color-line-strong);
    border-radius: var(--radius-lg);
    background: #eef3f0;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%);
  }
  .sf-structure__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-3); }
  .sf-structure__header h2 { font-size: 1.25rem; }
  .sf-global-slot { width: min(100%, 24rem); }
  .sf-network-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: .55rem;
    border: 1px solid #b6c9d5;
    border-radius: var(--radius-md);
    background: #e8f1f5;
  }
  .sf-network-strip__label { display: inline-flex; align-items: center; gap: .4rem; padding-inline: .45rem; color: #284d63; font-size: .78rem; font-weight: 850; text-transform: uppercase; }
  .sf-physical-map { display: grid; gap: var(--space-4); }
  .sf-zone { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: rgb(255 255 255 / 72%); }
  .sf-zone__heading { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-bottom: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-brand-strong); }
  .sf-zone__heading h3 { font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
  .sf-zone__heading small { margin-left: auto; color: var(--color-muted); font-size: .64rem; font-weight: 600; }
  .sf-compartment-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--color-line-strong) transparent; }
  .sf-compartment-stack { display: grid; width: 100%; gap: .45rem; padding: .55rem; }
  .sf-compartment-stack--production, .sf-compartment-stack--maturation { min-width: 78rem; grid-template-columns: repeat(9, minmax(8rem, 1fr)); }
  .sf-compartment {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: .45rem;
    min-width: 0;
    min-height: 9.8rem;
    padding: .4rem;
    border: 1px solid var(--color-line);
    border-radius: .6rem;
    background: var(--color-surface);
  }
  .sf-compartment-stack--maturation .sf-compartment { min-height: 6.6rem; }
  .sf-compartment--physical { border-style: dashed; background: transparent; }
  .sf-compartment__label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .35rem; padding: .3rem .45rem; border-radius: .4rem; background: var(--color-surface-soft); }
  .sf-compartment__label strong { color: var(--color-brand-strong); font-size: .9rem; }
  .sf-compartment__label small { overflow: hidden; color: var(--color-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
  .sf-compartment__slots { display: grid; min-width: 0; gap: .4rem; }
  .sf-compartment__slots--2, .sf-compartment__slots--3, .sf-compartment__slots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-compartment--process .sf-compartment__slots--equipment-stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.55fr) minmax(0, .58fr) repeat(2, minmax(0, 1fr));
    gap: .24rem;
    min-height: 0;
  }
  .sf-compartment--process .sf-slot {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    min-height: 0;
    gap: .25rem;
    padding: .2rem .28rem;
    border-radius: .35rem;
  }
  .sf-compartment--process .sf-slot__state { width: .9rem; height: .9rem; font-size: .5rem; }
  .sf-compartment--process .sf-slot__body strong { font-size: .65rem; }
  .sf-compartment--process .sf-slot__body small { margin-top: .05rem; font-size: .54rem; }
  .sf-compartment--process .sf-slot__update { width: .9rem; height: .9rem; font-size: .5rem; }
  .sf-compartment--process .sf-slot--conditionnement { order: 1; }
  .sf-compartment--process .sf-slot--aiguillage { order: 2; }
  .sf-compartment--process .sf-slot--pasto-h { order: 3; }
  .sf-compartment--process .sf-slot--pasto-b { order: 4; }
  .sf-compartment--process .sf-slot--aiguillage .sf-slot__body small { display: none; }
  .sf-compartment--process .sf-slot--aiguillage .sf-slot__body strong { font-size: .6rem; }
  .sf-compartment--process .sf-slot--conditionnement .sf-slot__state { width: 1.05rem; height: 1.05rem; font-size: .58rem; }
  .sf-compartment--process .sf-slot--conditionnement .sf-slot__body strong { font-size: .68rem; }
  .sf-physical-zone { display: grid; align-content: center; justify-items: center; gap: .15rem; padding: .35rem; color: var(--color-muted); text-align: center; }
  .sf-physical-zone span { font-size: .75rem; font-weight: 750; }
  .sf-physical-zone small { font-size: .65rem; }

  .sf-slot {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 3.15rem;
    align-items: center;
    gap: .5rem;
    padding: .42rem .55rem;
    border: 1px solid var(--color-line);
    border-left-width: .22rem;
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-ink);
    text-align: left;
    box-shadow: var(--shadow-sm);
  }
  .sf-slot:hover { border-top-color: var(--color-line-strong); border-right-color: var(--color-line-strong); border-bottom-color: var(--color-line-strong); background: #fbfdfc; }
  .sf-slot[aria-expanded="true"] { outline: .16rem solid var(--color-brand-soft); border-top-color: var(--color-brand); border-right-color: var(--color-brand); border-bottom-color: var(--color-brand); }
  .sf-slot__state { display: inline-grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 99rem; font-size: .78rem; font-weight: 900; }
  .sf-slot__body { display: grid; min-width: 0; line-height: 1.2; }
  .sf-slot__body strong, .sf-slot__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-slot__body strong { font-size: .76rem; }
  .sf-slot__body small { margin-top: .15rem; color: var(--color-muted); font-size: .62rem; }
  .sf-slot__update { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 99rem; background: var(--color-info-soft); color: var(--color-info); font-size: .72rem; font-weight: 900; }

  .sf-drawer-backdrop { position: fixed; z-index: 54; inset: 0; background: rgb(18 33 28 / 35%); }
  .sf-slot-drawer {
    position: fixed;
    z-index: 55;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 100vw);
    overflow-y: auto;
    border-left: 1px solid var(--color-line);
    background: var(--color-canvas);
    box-shadow: -1rem 0 3rem rgb(18 33 28 / 18%);
    translate: 102% 0;
    transition: translate .2s ease;
  }
  .sf-slot-drawer[aria-hidden="false"] { translate: 0; }
  .sf-slot-drawer__close { position: sticky; z-index: 2; top: .75rem; float: right; display: inline-grid; width: 2.5rem; height: 2.5rem; margin: .75rem .75rem 0 0; place-items: center; border: 1px solid var(--color-line); border-radius: 99rem; background: var(--color-surface); color: var(--color-ink); font-size: 1.4rem; line-height: 1; box-shadow: var(--shadow-sm); }
  .sf-slot-drawer__close:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .sf-slot-drawer__content { min-height: 100%; }
  .sf-slot-panel { display: grid; gap: var(--space-4); padding: 1.15rem; }
  .sf-slot-panel__heading { display: grid; gap: .7rem; padding: .35rem 3.2rem 1rem 0; border-bottom: 1px solid var(--color-line); }
  .sf-slot-panel__heading .sf-status { justify-self: start; }
  .sf-slot-panel__section { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .sf-slot-panel__section-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .sf-slot-panel__section-title h3 { font-size: .95rem; }
  .sf-slot-panel__section-title > span { color: var(--color-muted); font-size: .7rem; font-weight: 750; }
  .sf-update-badge { display: inline-flex; padding: .25rem .45rem; border: 1px solid transparent; border-radius: 99rem; background: var(--color-info-soft); color: var(--color-info) !important; font-size: .7rem; font-weight: 750; }
  button.sf-update-badge:hover { border-color: var(--color-info); }
  .sf-status-note { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: .5rem; padding: .5rem; border-radius: .45rem; background: var(--color-info-soft); color: var(--color-info); font-size: .72rem; }
  .sf-status-note > span:first-child { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 99rem; background: #fff; font-weight: 900; }
  .sf-status-note > span:last-child { display: grid; }
  .button--block { width: 100%; justify-content: center; }
  .sf-slot-panel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sf-slot-panel__links .button { justify-content: center; }
  .sf-slot-panel__actions > h3 { font-size: .95rem; }
  .sf-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sf-inline-action { min-width: 0; }
  .sf-inline-action[open] { grid-column: 1 / -1; }
  .sf-inline-action summary {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .65rem;
    border: 1px solid var(--color-line-strong);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-brand-strong);
    font-size: .75rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
  }
  .sf-inline-action summary::-webkit-details-marker { display: none; }
  .sf-inline-action summary:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
  .sf-inline-action--danger summary { border-color: #e4b3b3; color: var(--color-danger); }
  .sf-inline-action--danger summary:hover { border-color: var(--color-danger); background: var(--color-danger-soft); }
  .sf-inline-action[open] summary { border-radius: .5rem .5rem 0 0; background: var(--color-surface-soft); }
  .sf-inline-action form, .sf-assign-form, .sf-declare-form, .sf-event__resolve form { display: grid; gap: .45rem; padding: .7rem; border: 1px solid var(--color-line); border-top: 0; border-radius: 0 0 .5rem .5rem; background: var(--color-surface-soft); text-align: left; }
  .sf-inline-action label, .sf-assign-form label, .sf-declare-form label { display: grid; gap: .2rem; color: var(--color-muted); font-size: .68rem; font-weight: 750; }
  .sf-inline-action input, .sf-inline-action select, .sf-inline-action textarea, .sf-assign-form select, .sf-declare-form input, .sf-event__resolve textarea {
    width: 100%;
    min-height: 2.35rem;
    padding: .4rem .5rem;
    border: 1px solid var(--color-line-strong);
    border-radius: .42rem;
    background: #fff;
    color: var(--color-ink);
    resize: vertical;
  }
  .sf-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sf-assign-form { width: min(100%, 22rem); margin-top: .6rem; border-top: 1px solid var(--color-line); border-radius: .55rem; }
  .sf-assign-form--primary { width: 100%; margin-top: 0; }
  .sf-declare-form { width: 100%; border-top: 1px solid var(--color-line); border-radius: .6rem; background: var(--color-brand-soft); }
  .sf-declare-form__release { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: .7rem; }
  .sf-declare-form__release strong { color: var(--color-brand-strong); }
  .sf-existing-unit { overflow: hidden; border: 1px solid var(--color-line); border-radius: .5rem; }
  .sf-existing-unit > summary { padding: .55rem .65rem; color: var(--color-brand); font-size: .72rem; font-weight: 800; cursor: pointer; }
  .sf-existing-unit .sf-assign-form { width: 100%; margin: 0; border-inline: 0; border-bottom: 0; border-radius: 0; }
  .sf-no-unit { margin-top: .4rem; padding: .55rem .7rem; border-radius: .5rem; background: var(--color-warning-soft); color: var(--color-warning); font-size: .75rem; font-weight: 700; }
  .sf-event-list { display: grid; gap: .45rem; list-style: none; }
  .sf-event { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .5rem; border-radius: .45rem; background: var(--color-surface-soft); }
  .sf-event__icon { display: inline-grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 99rem; background: var(--color-info-soft); color: var(--color-info); font-size: .75rem; font-weight: 900; }
  .sf-event > span:last-child { display: grid; min-width: 0; }
  .sf-event strong, .sf-event small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-event strong { font-size: .78rem; }
  .sf-event small { color: var(--color-muted); font-size: .68rem; }
  .sf-event--minor .sf-event__icon, .sf-event--major .sf-event__icon { background: var(--color-warning-soft); color: var(--color-warning); }
  .sf-event--critical .sf-event__icon { background: var(--color-danger-soft); color: var(--color-danger); }
  .sf-event__attachment, .sf-history__attachment { color: var(--color-brand); font-size: .64rem; font-weight: 800; white-space: nowrap; }
  .sf-event__resolve { grid-column: 1 / -1; }
  .sf-event__resolve summary { color: var(--color-brand); font-size: .68rem; font-weight: 800; text-align: right; cursor: pointer; }
  .sf-event__resolve form { margin-top: .35rem; border-top: 1px solid var(--color-line); border-radius: .45rem; }
  .sf-panel-empty { display: flex; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .78rem; }
  .sf-panel-empty span { display: inline-grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 99rem; background: var(--color-success-soft); color: var(--color-success); font-weight: 900; }
  .sf-vacant-slot { display: grid; gap: .8rem; padding: .9rem; border: 1px solid var(--color-brand); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
  .sf-vacant-slot__header { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: .7rem; }
  .sf-vacant-slot__icon { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .6rem; background: var(--color-brand-soft); color: var(--color-brand); font-size: 1.45rem; font-weight: 850; }
  .sf-vacant-slot__header > div { display: grid; gap: .15rem; }
  .sf-vacant-slot__header h3 { font-size: 1rem; }
  .sf-vacant-slot__header p:last-child { color: var(--color-muted); font-size: .74rem; }
  .sf-history { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
  .sf-history > summary { display: flex; min-height: 2.8rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .85rem; color: var(--color-ink); font-size: .78rem; font-weight: 800; list-style: none; cursor: pointer; }
  .sf-history > summary::-webkit-details-marker { display: none; }
  .sf-history > summary > span:first-child { display: inline-flex; align-items: center; gap: .45rem; }
  .sf-history > summary > span:last-child { color: var(--color-brand); font-size: .68rem; }
  .sf-history[open] > summary { border-bottom: 1px solid var(--color-line); }
  .sf-history__content { display: grid; gap: .85rem; padding: .75rem; }
  .sf-history__content section { display: grid; gap: .45rem; }
  .sf-history__content h3 { color: var(--color-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
  .sf-history-list { display: grid; gap: .35rem; list-style: none; }
  .sf-history-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .8fr); gap: .6rem; padding: .45rem .55rem; border-radius: .4rem; background: var(--color-surface-soft); }
  .sf-history-list li > span { display: grid; min-width: 0; }
  .sf-history-list strong, .sf-history-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-history-list strong { font-size: .72rem; }
  .sf-history-list small { color: var(--color-muted); font-size: .63rem; }
  .sf-drawer-open { overflow: hidden; }

  @media (max-width: 72rem) {
    .sf-fleet-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 53.99rem) {
    .sf-fleet-metrics, .sf-fleet-grid { grid-template-columns: minmax(0, 1fr); }
    .sf-fleet-metrics { gap: .55rem; }
    .sf-fleet-metrics .metric-card { min-height: 4.25rem; }
    .sf-factory-card__header { align-items: flex-start; }
    .sf-factory-card__header > span:first-child { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .sf-factory-card__progress > span { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .sf-factory-card__alerts { align-items: flex-start; flex-direction: column; }
    .sf-factory-card__open { position: absolute; opacity: 0; }
    .sf-detail-heading { align-items: flex-start; flex-direction: column; }
    .sf-detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-detail-metrics > span, .sf-detail-metrics > span + span { border: 0; border-bottom: 1px solid var(--color-line); }
    .sf-detail-metrics > span:nth-child(odd) { border-right: 1px solid var(--color-line); }
    .sf-structure { padding: .65rem; }
    .sf-structure__header { align-items: flex-start; flex-direction: column; }
    .sf-global-slot { width: 100%; }
    .sf-network-strip { grid-template-columns: minmax(0, 1fr); }
    .sf-network-strip__label { padding-block: .15rem; }
    .sf-zone__heading small { display: none; }
    .sf-compartment-stack--production, .sf-compartment-stack--maturation { min-width: 70rem; }
    .sf-compartment { padding: .3rem; }
    .sf-compartment__label { padding-inline: .35rem; }
    .sf-slot-drawer { top: var(--header-height); width: 100vw; border-top: 1px solid var(--color-line); border-left: 0; }
  }
}

@layer components {
  .bom-quantity-form { max-width: 22rem; }
  .bom-quantity-form [hidden] { display: none !important; }
  .bom-quantity-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .bom-quantity-field input { width: 7.5rem; min-height: var(--touch); padding: .5rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
  .bom-quantity-field input[aria-invalid="true"] { border-color: var(--color-danger); }
  .bom-quantity-status { display: block; min-height: 1.5em; margin-top: .2rem; color: var(--color-muted); }
  .bom-quantity-status.is-error { color: var(--color-danger); }
}

@layer utilities {
  [hidden] { display: none !important; }
}

@layer components {
  .account-menu { position: relative; }
  .account-menu summary { cursor: pointer; }
  .app-header .account-menu > summary { display: block; padding: .4rem; }
  .account-menu__mobile { display: none; }
  @media (max-width: 72rem) {
    .app-header .account-menu > summary strong, .app-header .account-menu > summary small { display: none; }
    .account-menu__mobile { display: inline; font-size: .85rem; font-weight: 650; }
  }
  @media (max-width: 53.99rem) {
    .app-header .brand { justify-self: start; }
  }
  .account-menu__content { position: absolute; right: 0; top: 100%; padding: 1rem; min-width: 15rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; }
  .account-menu__content a { display: block; padding: .5rem; }
  .password-field { display: flex; align-items: stretch; gap: .5rem; }
  .password-field input { min-width: 0; flex: 1; }
  .password-toggle { display: flex; gap: .35rem; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface-soft); color: var(--color-brand); padding: .5rem; min-height: var(--touch); }
  .part-storage { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-size: .84rem; text-align: left; }
  .storage-entry { display: grid; }
  .storage-code, .storage-fields { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 650; white-space: nowrap; }
  .storage-form { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0; max-width: 19rem; }
  .storage-fields { display: inline-flex; align-items: center; gap: .08rem; color: var(--color-muted); }
  .storage-fields input { box-sizing: content-box; width: 2ch; min-width: 2ch; min-height: 1.75rem; padding: .05rem .15rem; border: 1px solid transparent; border-bottom-color: var(--color-line); border-radius: .2rem; background: transparent; color: var(--color-ink); font: inherit; text-align: center; }
  .storage-fields input::placeholder { color: var(--color-muted); opacity: .7; }
  .storage-fields input:hover { background: var(--color-surface-soft); border-color: var(--color-line); }
  .storage-fields input:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; background: #fff; }
  .storage-fields input[aria-invalid="true"] { border-color: var(--color-danger); }
  .storage-place { display: block; flex-basis: 100%; color: var(--color-muted); font-size: .68rem; }
  .storage-other { position: relative; }
  .storage-other > summary { color: var(--color-muted); cursor: pointer; list-style: none; }
  .storage-other[open] > .storage-form { padding: .4rem; border: 1px solid var(--color-line); border-radius: .35rem; }
  .storage-location { flex-basis: 100%; }
  .storage-location select { max-width: 12rem; padding: .25rem; font-size: .8rem; }
  .storage-retry { padding: .1rem .25rem; border: 0; background: transparent; color: var(--color-danger); cursor: pointer; }
  .storage-status { flex-basis: 100%; max-width: 17rem; font-size: .72rem; }
  .storage-status:empty { display: none; }
  .storage-error { color: var(--color-danger) !important; }
  .step-tutorials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
  .step-tutorials > a { white-space: normal; text-align: left; }
  .tutorial-picker { width: 100%; }
  .tutorial-picker summary { cursor: pointer; color: var(--color-brand); padding: .6rem 0; }
  .tutorial-picker__body { display: grid; gap: .7rem; padding: .8rem; background: var(--color-surface-soft); border-radius: var(--radius-sm); }
  .tutorial-picker input { width: 100%; min-width: 0; min-height: var(--touch); padding: .5rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); }
  .tutorial-choice { display: block; text-align: left; width: 100%; padding: .65rem; border: 0; border-bottom: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); }
  .tutorial-choice small { display: block; color: var(--color-muted); }
  .tutorial-linked { padding: .7rem 0; border-top: 1px solid var(--color-line); }
  .tutorial-linked small { display: block; }
  .tutorial-dialog { width: min(95vw, 86rem); height: 92dvh; max-width: 95vw; max-height: 94dvh; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); }
  .tutorial-dialog[open] { display: flex; flex-direction: column; }
  .tutorial-dialog::backdrop { background: rgb(18 33 28 / 55%); }
  .tutorial-dialog > header { display: flex; gap: .5rem; justify-content: space-between; align-items: center; padding: .75rem; border-bottom: 1px solid var(--color-line); }
  .tutorial-dialog iframe { border: 0; width: 100%; flex: 1; min-height: 0; }
  .tutorial-player { padding: 1rem; max-width: 86rem; margin: 0 auto; }
  .tutorial-player__header, .tutorial-player__navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .tutorial-player__header h1 { font-size: 1.5rem; }
  .tutorial-player__navigation { margin-top: 1rem; }
  .tutorial-player .guided-step { min-height: 0; }
  .tutorial-player .guided-step__content { height: auto; }
}

@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

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

@layer components {
  body.notice-page .app-main { height: auto; }
  .notice-workspace { height: var(--notice-available-height, calc(100dvh - var(--header-height) - 1rem)); }
  .notice-side-rail { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .notice-side-rail--right { gap: .15rem; }
  .notice-side-rail--right .notice-rail-button { min-height: 3.25rem; padding: .25rem; }
  .media-annotation { stroke-width: .35; }
  .media-annotation.is-instruction-active { stroke-width: .4; }
  .media-annotation.is-selected { stroke-width: .5; filter: none; }
  .media-annotation line, .media-annotation ellipse, .media-annotation circle { filter: drop-shadow(0 0 .2px #fff); }
  .media-annotation-toolbar__label { display: grid; gap: .1rem; font-size: .6rem; }
  .batch-picker { display: grid; gap: .65rem; }
  .batch-picker > label:first-of-type { display: grid; gap: .35rem; font-size: .82rem; font-weight: 700; }
  .batch-picker input[type=search], .batch-picker input[type=number] { border: 1px solid var(--color-line); border-radius: .45rem; background: #fff; padding: .5rem; min-height: 2.5rem; width: 100%; }
  .batch-picker input[type=checkbox] { accent-color: var(--color-brand); }
  [data-picker-results] { max-height: clamp(7rem, calc(var(--notice-available-height) - 25rem), 24rem); overflow-y: auto; overscroll-behavior: contain; }
  [data-part-editor][hidden], [data-inline-part-row][hidden] { display: none; }
  [data-similar-parts]:empty { display: none; }
  .bom-part-form__fields > .notice, .bom-part-form__fields > [data-similar-parts] { grid-column: 1 / -1; }
  .part-comparison .details-list > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--color-line); }
  .part-comparison .details-list dt { color: var(--color-muted); }
  .part-comparison .details-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .batch-picker-scope { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
  .batch-picker-scope input, .batch-picker-row input[type=checkbox] { width: 1.1rem; min-height: 1.1rem; flex: 0 0 1.1rem; }
  .batch-picker-row { display: flex; align-items: center; gap: .4rem; padding: .5rem 0; border-bottom: 1px solid var(--color-line); font-size: .85rem; }
  .batch-picker-row label { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; cursor: pointer; }
  .batch-picker-row img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
  .batch-picker-row small { display: block; color: var(--color-muted); font-size: .72rem; overflow-wrap: anywhere; }
  .batch-picker-row input[type=number] { width: 4.5rem; min-height: 2.3rem; padding: .3rem; }
  .batch-existing, .callout-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
  .batch-existing { justify-content: space-between; }
  .callout-actions { margin-top: .35rem; font-size: .75rem; }
  .callout-actions form { display: inline; }
  .callout-actions button { border: 0; padding: .3rem; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
  .price-calculator-options { display: flex; gap: 1rem; align-items: end; }
  .price-calculator-options > * { flex: 1; }
  [data-price-result] { display: block; padding: .5rem 0; font-weight: 700; color: var(--color-primary); }
  .part-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
  .comparison-image { max-width: 10rem; max-height: 8rem; object-fit: contain; }
  .comparison-candidates { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0; }
  @media (max-width: 48rem) { .part-comparison { grid-template-columns: 1fr; } }
}

/* Purchasing uses the same compact rows as the BOM. */
.purchase-batch { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.6rem 0; font-size:.82rem; }
.purchase-batch small { margin-left:auto; color:var(--color-muted); }
.purchase-table { width:100%; font-size:.88rem; }
.purchase-table th, .purchase-table td { padding:.45rem .55rem; }
.purchase-table td:first-child, .purchase-table th:first-child { width:2rem; }
.purchase-table input[type="checkbox"] { width:1rem; height:1rem; min-height:0; }
.purchase-table td:nth-child(2) { min-width:12rem; max-width:24rem; }
.purchase-table td:nth-child(2) > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.purchase-table small { font-size:.75rem; }
.purchase-history { display:block; color:var(--color-muted); font-size:.72rem; }
.purchase-number { white-space:nowrap; text-align:right; }
.purchase-number small { display:inline !important; }
.purchase-table .purchase-actions { white-space:nowrap; }
.purchase-actions .bom-row-icon { display:inline-flex; vertical-align:middle; }
.purchase-edit-row { background:var(--color-surface-soft); }
.purchase-table input:not([type="checkbox"]), .purchase-table select { min-height:2rem; height:2rem; padding:.2rem .4rem; font-size:.84rem; border-radius:.3rem; }
.purchase-table input[type="number"] { width:6rem; }
.purchase-edit-row td:nth-child(3) input { width:10rem; }
.purchase-inline-unit { display:inline-block; max-width:8rem; margin-top:.2rem; }
.purchase-page .purchase-filters input, .purchase-page .purchase-filters select { min-height:2rem; padding:.25rem .5rem; }
.purchase-page .purchase-filters input { width:19rem; }
.purchase-receipt { display:grid; gap:.6rem; }
.purchase-receipt label { display:grid; gap:.3rem; }
.purchase-receipt input, .purchase-receipt select { width:100% !important; }
.status--ordered { background:#e6f1fc; color:#24659e; }
.status--delivered { background:var(--color-success-soft); color:var(--color-success); }
.status--cancelled { background:var(--color-surface-soft); color:var(--color-muted); }

/* Image dimensions cannot enlarge the slide's grid tracks. */
.notice-workspace .guided-step__media .step-media__stage { min-width:0; }
.notice-workspace .guided-step__media .step-media__transform,
.media-dialog__media .step-media__transform { position:absolute; min-width:0; min-height:0; }
.media-dialog__viewport { place-items:stretch; overflow:hidden; }
.media-dialog__media { width:100%; height:100%; min-height:0; grid-template-rows:minmax(0,1fr) auto; align-content:stretch; }
.media-dialog__media .step-media__stage { min-width:0; min-height:0; height:100%; }
.media-dialog__media .step-media__transform img { width:100%; height:100%; object-fit:contain; }

.purchase-filters { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.purchase-filters input, .purchase-filters select { border:1px solid var(--color-line); border-radius:.4rem; background:white; }
.purchase-table .purchase-edit-row input:not([type="checkbox"]), .purchase-table .purchase-edit-row select { border:0; border-bottom:1px solid #afcbc1; background:transparent; box-shadow:none; }
.purchase-edit-row td:nth-child(2) > input { width:100%; }
.purchase-edit-row input:focus, .purchase-edit-row select:focus { outline:2px solid var(--color-brand); outline-offset:1px; }
@media(max-width:40rem) { .purchase-page .list-section-heading { display:block; } .purchase-page .purchase-filters { margin-top:.5rem; } .purchase-page .purchase-filters input { width:100%; } .purchase-batch small { margin-left:0; } }

.purchase-page .table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--color-line); border-radius:.6rem; background:white; }
.purchase-page [popover] { position:fixed; inset:0; margin:auto; max-width:calc(100vw - 2rem); max-height:80dvh; overflow-y:auto; white-space:normal; }
.purchase-page .purchase-receipt > button { background:var(--color-brand); color:white; }
@media(max-width:40rem) {
 .purchase-page .purchase-table thead { display:none; }
 .purchase-page .purchase-table, .purchase-page .purchase-table tbody { display:block; width:100%; }
 .purchase-page .purchase-table tr { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:.65rem; gap:.45rem; border-bottom:1px solid var(--color-line); }
 .purchase-page .purchase-table td { display:block; padding:0; border:0; min-width:0; max-width:none; text-align:left; }
 .purchase-page .purchase-table td:first-child { position:absolute; top:.65rem; right:.65rem; width:auto; }
 .purchase-page .purchase-table td:nth-child(2) { grid-column:1/-1; padding-right:1.6rem; }
 .purchase-page .purchase-table td:nth-child(3) { grid-column:1/-1; }
 .purchase-page .purchase-table td:nth-child(4)::before { content:'Qté : '; color:var(--color-muted); }
 .purchase-page .purchase-table td:nth-child(5)::before { content:'PU HT : '; color:var(--color-muted); }
 .purchase-page .purchase-table td:nth-child(6)::before { content:'Total HT : '; color:var(--color-muted); }
 .purchase-page .purchase-table td:nth-child(9) { text-align:right; }
 .purchase-page .purchase-edit-row td:nth-child(3) input { width:100%; }
}