/* HONOR – Layout und Seitenmuster aus den Mockups 01–04 (nur Token-Variablen, keine festen Farben). Gemeinsamer Teil = Mockup 02, Bürgerportal = Mockup 01 (unter body.portal). */
  /* Nur Layout – ausschließlich Token-Variablen, keine eigenen Farbwerte */
  .skip { position: absolute; left: var(--space-2); top: -60px; padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-primary); border-radius: var(--radius); z-index: 10; }
  .skip:focus { top: var(--space-2); }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-6); }
  .app-header { background: var(--color-primary); color: var(--color-on-primary); border-bottom: 4px solid var(--color-accent-on-dark, var(--color-accent)); }
  .app-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-on-primary); text-decoration: none; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: .04em; }
  .brand:hover { color: var(--color-on-primary); }
  .brand svg path { fill: var(--color-accent-on-dark, var(--color-accent)); }
  .app-header a:focus-visible { box-shadow: 0 0 0 3px var(--color-on-primary); }
  .user { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); flex-wrap: wrap; }
  .user .badge { background: var(--color-surface); }
  .subnav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
  .subnav ul { list-style: none; display: flex; gap: var(--space-1); margin: 0; padding: 0; flex-wrap: wrap; }
  .subnav a { display: block; padding: var(--space-3) var(--space-4); color: var(--color-text); text-decoration: none; font-weight: var(--fw-medium); border-bottom: 3px solid transparent; }
  .subnav a:hover { background: var(--color-primary-soft); border-bottom-color: var(--color-border-strong); }
  .subnav a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-accent); }
  .subnav a:focus-visible { box-shadow: var(--focus-ring); }
  main { padding: var(--space-6) 0 var(--space-12); }
  .crumbs { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
  .page-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
  .page-head h1 { font-size: var(--fs-xl); margin: 0; }
  .page-head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
  .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .muted { color: var(--color-text-muted); }
  .ico { width: 16px; height: 16px; flex: none; }
  .stack { display: grid; gap: var(--space-4); align-content: start; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); align-items: start; }
  .card h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
  .card h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .form-grid .full { grid-column: 1 / -1; }
  .req { color: var(--color-error); font-weight: var(--fw-bold); }
  .seg { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  .seg label { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); min-height: 44px; border: 2px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); cursor: pointer; font-weight: var(--fw-medium); }
  .seg input { width: 18px; height: 18px; accent-color: var(--color-primary); }
  .seg label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
  .seg label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

  /* Tabellen */
  .toolbar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
  .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  caption { text-align: left; padding: var(--space-3) var(--space-4); caption-side: top; color: var(--color-text-muted); font-size: var(--fs-sm); }
  th { text-align: left; background: var(--color-surface-alt); padding: var(--space-3) var(--space-4); font-weight: var(--fw-bold); border-bottom: 2px solid var(--color-border-strong); white-space: nowrap; }
  th a { color: var(--color-text); text-decoration: none; display: inline-flex; gap: var(--space-1); align-items: center; }
  td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
  tbody tr:hover { background: var(--color-primary-soft); }
  tbody tr:last-child td { border-bottom: 0; }
  td .sub { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); }
  .table-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--fs-sm); gap: var(--space-3); flex-wrap: wrap; border-top: 1px solid var(--color-border); }
  .chan { display: inline-flex; align-items: center; gap: var(--space-2); }

  /* Kennzahlen */
  .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
  .kpi { padding: var(--space-4); }
  .kpi .num { font-family: var(--font-heading); font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: 1.1; }
  .kpi .lbl { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-1); }
  .kpi.cat-gut { border-top: 4px solid var(--color-success); }
  .kpi.cat-mittel { border-top: 4px solid var(--color-warning); }
  .kpi.cat-un { border-top: 4px solid var(--color-error); }
  .kpi.cat-total { border-top: 4px solid var(--color-accent); }
  .kpi.cat-open { border-top: 4px solid var(--color-border-strong); }
  .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
  .cols h2 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
  .bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-sm); }
  .bars li { display: grid; grid-template-columns: 112px 1fr 28px; align-items: center; gap: var(--space-2); }
  .bars .track { height: 12px; background: var(--color-surface-alt); border-radius: var(--radius-pill); overflow: hidden; }
  .bars .fill { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }
  .bars .fill.alt { background: var(--color-secondary); }
  .bars b { text-align: right; }

  /* Status-Workflow (Stepper) */
  .stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); counter-reset: s; }
  .stepper li { position: relative; padding-top: var(--space-8); text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.3; }
  .stepper li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; margin-left: -14px; width: 28px; height: 28px; border-radius: var(--radius-pill); border: 2px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; }
  .stepper li::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--color-border-strong); }
  .stepper li:last-child::after { display: none; }
  .stepper li.done { color: var(--color-text); }
  .stepper li.done::before { content: "✓"; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .stepper li.done::after { background: var(--color-primary); }
  .stepper li.current { color: var(--color-text); font-weight: var(--fw-bold); }
  .stepper li.current::before { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-accent-soft); }

  /* Historie / Zeitleiste */
  .timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--color-border-strong); display: grid; gap: var(--space-4); }
  .timeline li { position: relative; font-size: var(--fs-sm); }
  .timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 7px); top: 5px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--color-primary); border: 2px solid var(--color-surface); }
  .timeline .when { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
  .timeline blockquote { margin: var(--space-1) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--color-accent); color: var(--color-text); }

  /* Upload */
  .dropzone { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-alt); padding: var(--space-6); text-align: center; color: var(--color-text-muted); }
  .dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
  .files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
  .files li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); font-size: var(--fs-sm); flex-wrap: wrap; }
  .files li.bad { border-color: var(--color-error); background: var(--color-error-soft); }

  /* Listen-Karten (Konkurrenz, Ersatzliste, Auswahl) */
  .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .rows > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
  .rows > li.sel { border-color: var(--color-primary); background: var(--color-primary-soft); }
  .rows .t { font-weight: var(--fw-bold); }
  .rows .s { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }
  .pos { width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
  .sim { display: grid; gap: 2px; min-width: 96px; font-size: var(--fs-xs); color: var(--color-text-muted); }
  .sim .track { height: 8px; background: var(--color-surface-alt); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--color-border-strong); }
  .sim .fill { display: block; height: 100%; background: var(--color-warning); }
  dl.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--fs-sm); }
  dl.kv dt { color: var(--color-text-muted); }
  dl.kv dd { margin: 0; font-weight: var(--fw-medium); }
  .meter { height: 14px; background: var(--color-surface-alt); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); overflow: hidden; }
  .meter span { display: block; height: 100%; background: var(--color-primary); }
  .tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-4); }
  .tabs a { padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--color-text); font-weight: var(--fw-medium); border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: var(--radius) var(--radius) 0 0; }
  .tabs a[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-accent); }
  .tabs a:hover { background: var(--color-primary-soft); }

  .kpis.four { grid-template-columns: repeat(4, 1fr); }
  .rows.stacked > li { grid-template-columns: auto minmax(0, 1fr); }
  .rows.stacked .sim { grid-column: 2; }
  main, .wrap, .card, .split > * { min-width: 0; }
  @media (max-width: 1000px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .cols { grid-template-columns: 1fr; }
    .toolbar { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: minmax(0, 1fr); }
    .kpis.four { grid-template-columns: repeat(2, 1fr); }
    .stepper { grid-template-columns: 1fr; gap: 0; }
    .stepper li { text-align: left; padding: var(--space-2) 0 var(--space-3) 44px; min-height: 40px; }
    .stepper li::before { left: 0; margin-left: 0; top: 4px; }
    .stepper li::after { top: 32px; bottom: -4px; left: 13px; right: auto; width: 2px; height: auto; }
  }
  @media (max-width: 640px) {
    .wrap { padding: 0 var(--space-4); }
    .kpis, .kpis.four { grid-template-columns: 1fr 1fr; }
    .toolbar, .form-grid { grid-template-columns: 1fr; }
    .subnav ul { flex-wrap: nowrap; overflow-x: auto; }
    .subnav a { white-space: nowrap; }
    thead { position: absolute; left: -9999px; }
    table, tbody, tr, td { display: block; width: 100%; }
    tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
    td { border: 0; padding: var(--space-1) 0; display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
    td.main { display: block; text-align: left; font-size: var(--fs-base); }
    td.main::before { display: none; }
    td::before { content: attr(data-label); font-weight: var(--fw-bold); text-align: left; color: var(--color-text-muted); flex: none; }
    td:not([data-label])::before { display: none; }
    .bars li { grid-template-columns: 96px 1fr 28px; }
    .rows > li { grid-template-columns: auto minmax(0, 1fr); }
    .rows > li > :last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
    .page-head .actions, .page-head .actions .btn { width: 100%; }
    .card { padding: var(--space-4); }
    dl.kv { grid-template-columns: minmax(0, 1fr); }
    dl.kv dd { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
    .badge { white-space: normal; }
    .tabs { overflow-x: auto; }
    .tabs a { white-space: nowrap; }
  }

  .narrow { max-width: 880px; }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: var(--fw-bold); padding: 0; margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }
  .no { display: inline-flex; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-base); align-items: center; justify-content: center; }
  .errlist { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
  .errlist a { color: var(--color-error); font-weight: var(--fw-medium); }
  .exclusive { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); background: var(--color-surface-alt); display: grid; gap: var(--space-4); }
  .or { text-align: center; font-weight: var(--fw-bold); color: var(--color-text-muted); }
  .submit-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

  /* ---- Bürgerportal (Startseite, Mockup 01) ---- */
  body.portal .wrap { max-width: 1120px; }
  .site-header { background: var(--color-primary); color: var(--color-on-primary); border-bottom: 4px solid var(--color-accent-on-dark, var(--color-accent)); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .brand small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-normal); letter-spacing: 0; }
  .nav { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
  .nav a { color: var(--color-on-primary); text-decoration: none; padding: var(--space-2) var(--space-3); border-bottom: 3px solid transparent; font-weight: var(--fw-medium); }
  .nav a:hover { color: var(--color-on-primary); border-bottom-color: var(--color-accent-on-dark, var(--color-accent)); }
  .nav a[aria-current="page"] { border-bottom-color: var(--color-accent-on-dark, var(--color-accent)); }
  .nav a.btn, .nav a.btn:hover { color: var(--color-primary); border: 2px solid var(--color-primary); margin-left: var(--space-2); }
  .nav a.btn:hover { background: var(--color-primary-soft); }
  .nav a:focus-visible { box-shadow: 0 0 0 3px var(--color-on-primary); border-radius: var(--radius-sm); }
  .hero { padding: var(--space-12) 0 var(--space-8); }
  .hero .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-8); align-items: center; }
  .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); color: var(--color-primary); margin-bottom: var(--space-3); }
  .lead { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 40ch; }
  .phase h2 { font-size: var(--fs-lg); }
  .meta { display: flex; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
  .meter { height: 14px; background: var(--color-surface-alt); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); overflow: hidden; display: flex; }
  .meter span { display: block; height: 100%; background: var(--color-primary); width: 75%; }
  .meter span + span { width: 25%; background: var(--color-accent); }
  .legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
  .facts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
  .facts li { display: flex; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
  .facts strong { font-weight: var(--fw-bold); text-align: right; }
  section.block { padding: var(--space-8) 0; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .step-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
  .icon { width: 28px; height: 28px; flex: none; color: var(--color-primary); }
  .channel { display: flex; gap: var(--space-3); align-items: flex-start; }
  .channel h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
  .channel p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
  .band { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .honored h3 { margin-bottom: var(--space-1); }
  .honored p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
  .section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
  .section-head h2 { margin: 0; }
  .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-6) 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
  .site-footer .wrap { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .site-footer ul { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; flex-wrap: wrap; }
  @media (max-width: 860px) {
    .hero .wrap, .grid3 { grid-template-columns: 1fr; }
    h1 { font-size: var(--fs-xl); }
  }
  @media (max-width: 560px) {
    .wrap { padding: 0 var(--space-4); }
    .hero { padding-top: var(--space-6); }
    .nav { width: 100%; }
    .nav a { padding: var(--space-2); }
    .actions .btn { width: 100%; }
    .facts li { flex-direction: column; gap: 0; }
    .facts strong { text-align: left; }
  }

  /* ---- Ergänzungen (ersetzen Inline-Styles der Mockups; CSP erlaubt kein style-Attribut) ---- */
  [hidden] { display: none !important; }
  .ico-lg { width: 22px; height: 22px; }
  .ico-in-text { vertical-align: -3px; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mb-6 { margin-bottom: var(--space-6); }
  .gap-3 { gap: var(--space-3); }
  .gap-6 { gap: var(--space-6); }
  .pointer { cursor: pointer; }
  .flush { margin: 0; }
  .plain { border: 0; padding: 0; margin: 0; }
  .app-header .user .btn-secondary { background: var(--color-surface); }
  .app-header .login-link { color: var(--color-on-primary); font-weight: var(--fw-medium); }
  .alert .alert-body { display: block; }
  .theme-switch { display: inline-flex; align-items: center; gap: var(--space-2); }
  .theme-switch select { min-width: 0; width: auto; }
  .site-footer .wrap, .page-foot { align-items: center; }
  .page-foot { padding: var(--space-6) 0; font-size: var(--fs-sm); color: var(--color-text-muted); border-top: 1px solid var(--color-border); background: var(--color-surface); }
  .page-foot .wrap { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
  .empty, .loading { margin: var(--space-4) 0; }
  .num-right { text-align: right; }
  .nowrap { white-space: nowrap; }
  .pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-1) 0 0; font-family: var(--font-text); }
  kol-alert { display: block; margin-bottom: var(--space-4); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
  .sort-active { color: var(--color-primary); }
  .filled { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); }
  .links a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; background: var(--color-surface); }
  .links a:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
  .savebar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

  /* Gremium, Entscheidung, Administration (Mockups 05–09) */
  .cat-opts { display: flex; gap: var(--space-4); flex-wrap: wrap; }
  .cat-opts label { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 2px solid var(--color-border-strong); border-radius: var(--radius); cursor: pointer; }
  .cat-opts label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
  .cat-opts label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .comment { padding: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius); font-size: var(--fs-sm); }
  .comment b { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
  .lock { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
  .range { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
  .range span { flex: 1; height: 12px; border-radius: var(--radius-pill); background: var(--color-surface-alt); border: 1px solid var(--color-border-strong); }
  .range span.on { background: var(--color-primary); border-color: var(--color-primary); }
  .range.over span.on { background: var(--color-error); border-color: var(--color-error); }
  .range-lbl { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-text-muted); }
  .from { color: var(--color-text-muted); text-decoration: line-through; }
  .arrow { font-weight: var(--fw-bold); }
  .rows .acts { display: flex; gap: var(--space-1); }
  .rows > li > input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--color-primary); }
  dialog { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); max-width: 480px; width: calc(100% - var(--space-6)); }
  dialog::backdrop { background: color-mix(in srgb, var(--color-text) 55%, transparent); }
  .section-title { font-size: var(--fs-lg); }
  .mb-0 { margin-bottom: 0; }
  .mt-4 { margin-top: var(--space-4); }
  .kpi-inline { font-size: var(--fs-xl); font-family: var(--font-heading); }
  .alert .ico { width: 20px; height: 20px; }
  .stack-lg { gap: var(--space-6); }
  .hint-top { margin-top: 0; }
  .mt-1 { margin-top: var(--space-1); }
  .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
  summary.btn { display: inline-flex; cursor: pointer; }