/* Family App – calm, independent design. No external resources (CSP default-src 'self').
 *
 * Colour pairs (text on background), WCAG 2.x contrast ratio, all >= 4.5:1 (AC-34).
 * Computed with the relative-luminance formula (sRGB):
 *   --c-text      #1f2a30 on --c-bg        #f7f6f2  13.56:1
 *   --c-text      #1f2a30 on --c-surface   #ffffff  14.66:1
 *   --c-muted     #4a5a63 on --c-surface   #ffffff   7.16:1
 *   --c-muted     #4a5a63 on --c-bg        #f7f6f2   6.62:1
 *   --c-muted     #4a5a63 on --c-subtle    #eef1f3   6.31:1
 *   --c-on-primary #ffffff on --c-primary  #1d5c63   7.60:1
 *   --c-primary   #1d5c63 on --c-surface   #ffffff   7.60:1  (links, outlines)
 *   --c-primary   #1d5c63 on --c-bg        #f7f6f2   7.03:1
 *   --c-primary   #1d5c63 on --c-info-bg   #e6f0f0   6.55:1
 *   --c-text      #1f2a30 on --c-info-bg   #e6f0f0  12.63:1
 *   --c-danger    #8a2a1c on --c-danger-bg #fdf0ee   7.77:1
 *   --c-danger    #8a2a1c on --c-surface   #ffffff   8.65:1
 *   --c-on-danger #ffffff on --c-danger    #8a2a1c   8.65:1
 *   --c-warn      #6b4a00 on --c-warn-bg   #fff6dd   7.48:1
 *   --c-text      #1f2a30 on --c-warn-bg   #fff6dd  13.60:1
 *   --c-ok        #1e5b2e on --c-ok-bg     #eaf6ec   7.29:1
 *   --c-on-dark   #ffffff on --c-dark      #24323a  13.19:1  (top bar)
 *   --c-text      #1f2a30 on --c-mark      #ffe58a  11.75:1  (source span highlight)
 *   --c-text      #1f2a30 on --c-subtle    #eef1f3  12.93:1
 */
/* Erweiterung 3 (Agent D): shared avatar component and family network. Imported here so that no change to
 * index.html is required; both files are same-origin (CSP style-src 'self'). */
@import url("avatar.css");
@import url("network.css");
:root {
  --c-bg: #f7f6f2; --c-surface: #ffffff; --c-subtle: #eef1f3; --c-text: #1f2a30; --c-muted: #4a5a63;
  --c-primary: #1d5c63; --c-on-primary: #ffffff; --c-info-bg: #e6f0f0;
  --c-danger: #8a2a1c; --c-danger-bg: #fdf0ee; --c-on-danger: #ffffff;
  --c-warn: #6b4a00; --c-warn-bg: #fff6dd; --c-ok: #1e5b2e; --c-ok-bg: #eaf6ec;
  --c-dark: #24323a; --c-on-dark: #ffffff; --c-mark: #ffe58a; --c-border: #b9c3c8;
  --c-focus: #1d5c63;
  --radius: 10px; --gap: 1rem; --tap: 44px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.5; color: var(--c-text); background: var(--c-bg); overflow-x: hidden; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .5rem; }
a { color: var(--c-primary); }
img { max-width: 100%; height: auto; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
ul, ol { padding-left: 1.25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* focus: always visible */
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
/* Datums-/Zeitfelder: Der Tastaturfokus auf der Kalenderschaltfläche im Feld setzt :focus nicht auf das Feld selbst (Chromium). */
input[type="date"]:focus-within, input[type="time"]:focus-within, input[type="datetime-local"]:focus-within, input[type="month"]:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.topbar :focus-visible { outline-color: var(--c-on-dark); }

.skip-link { position: absolute; left: .5rem; top: -100px; z-index: 100; background: var(--c-surface); color: var(--c-primary); padding: .75rem 1rem; border-radius: var(--radius); }
.skip-link:focus { top: .5rem; }

/* ---------- layout ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: var(--c-dark); color: var(--c-on-dark); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 1rem; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; margin-right: .5rem; }
.topbar-right { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.topbar .btn { background: transparent; color: var(--c-on-dark); border-color: rgba(255, 255, 255, .6); }
.offline-banner { width: 100%; margin: 0; font-size: .9rem; }
.layout { flex: 1; display: flex; min-width: 0; }
.main { flex: 1; min-width: 0; padding: 1rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.main:focus { outline: none; }
.sidenav { width: 240px; flex: 0 0 240px; background: var(--c-surface); border-right: 1px solid var(--c-border); padding: .75rem .5rem; }
.sidenav ul, .bottomnav ul, .menu-list { list-style: none; margin: 0; padding: 0; }
.navlink, .menu-link { display: flex; align-items: center; min-height: var(--tap); padding: .5rem .75rem; border-radius: var(--radius); color: var(--c-text); text-decoration: none; background: none; border: 0; font: inherit; width: 100%; text-align: left; cursor: pointer; }
.navlink:hover, .menu-link:hover { background: var(--c-subtle); }
.navlink[aria-current="page"], .menu-link[aria-current="true"] { background: var(--c-info-bg); color: var(--c-primary); font-weight: 700; }
.bottomnav { display: none; }

@media (max-width: 600px) {
  .sidenav { display: none !important; }
  .bottomnav:not([hidden]) { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--c-surface); border-top: 1px solid var(--c-border); padding-bottom: env(safe-area-inset-bottom); }
  .bottomnav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bottomnav .navlink { justify-content: center; text-align: center; font-size: .78rem; line-height: 1.15; padding: .4rem .2rem; min-height: var(--nav-h); overflow-wrap: anywhere; }
  .main { padding: .75rem .75rem calc(var(--nav-h) + 1.5rem); }
  .topbar { padding: .5rem .75rem; }
  .sync-text { font-size: .85rem; }
  h1 { font-size: 1.3rem; }
}

/* ---------- components ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; min-width: 0; overflow-wrap: anywhere; }
.card.narrow, .narrow { max-width: 32rem; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.cards > .card { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.stack > * + * { margin-top: .75rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.page-header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-header h1 { margin: 0; }
.page-header h1:focus { outline: none; }
.page-header h1:focus-visible { outline: 3px solid var(--c-focus); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.toolbar .field { margin: 0; }
.list { list-style: none; padding: 0; margin: 0; }
.list > li { padding: .5rem 0; border-bottom: 1px solid var(--c-subtle); }
.list > li:last-child { border-bottom: 0; }
.muted { color: var(--c-muted); }
.hint { color: var(--c-muted); font-size: .92rem; }
.notes { white-space: pre-wrap; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
pre.mono { background: var(--c-subtle); padding: .75rem; border-radius: var(--radius); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: var(--tap); min-width: var(--tap); padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--c-primary); background: var(--c-surface); color: var(--c-primary); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--c-info-bg); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: #164a50; }
.btn-danger { border-color: var(--c-danger); color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-bg); }
.btn-small { padding: .35rem .75rem; }
.btn-icon { padding: .25rem; font-size: 1.4rem; line-height: 1; }
.btn-family { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: calc(var(--tap) - 1rem); }
.btn-icon-text .count { background: var(--c-on-dark); color: var(--c-dark); border-radius: 999px; padding: 0 .4rem; font-size: .8rem; }
.seg[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; }

.sync-status { gap: .5rem; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; border: 2px solid var(--c-on-dark); }
.dot-synced { background: #5fd38a; } .dot-offline { background: #c9ced1; } .dot-pending, .dot-syncing { background: #ffd34d; }
.dot-conflict, .dot-auth { background: #ff8a7a; }
.sync-line { display: flex; gap: .5rem; align-items: center; font-weight: 700; }
.sync-line .dot { border-color: var(--c-text); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .82rem; background: var(--c-subtle); color: var(--c-text); border: 1px solid var(--c-border); margin: .1rem .25rem .1rem 0; }
.badge-info { background: var(--c-info-bg); color: var(--c-primary); border-color: #9cc3c6; }
.badge-warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: #e3c97a; }
.badge-ok { background: var(--c-ok-bg); color: var(--c-ok); border-color: #9fcfaa; }
.badge-muted { background: var(--c-subtle); color: var(--c-muted); }
.badges { display: flex; flex-wrap: wrap; gap: .1rem; margin: .25rem 0; }

.alert { border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.alert-info { background: var(--c-info-bg); border-color: #9cc3c6; color: var(--c-text); }
.alert-warn { background: var(--c-warn-bg); border-color: #e3c97a; color: var(--c-text); }
.alert-error { background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger); }
.alert-ok { background: var(--c-ok-bg); border-color: #9fcfaa; color: var(--c-ok); }
.alert-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; max-width: min(28rem, calc(100vw - 2rem)); }
@media (max-width: 600px) { .alert-region { bottom: calc(var(--nav-h) + 1rem); left: .75rem; right: .75rem; } }
.alert-region .alert { box-shadow: 0 4px 18px rgba(0, 0, 0, .18); }
.inactive .badge { font-weight: 700; }

.state { padding: 1.5rem 1rem; text-align: center; background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--radius); margin-bottom: 1rem; }
.state .actions { justify-content: center; }
.state-error { border-style: solid; border-color: var(--c-danger); background: var(--c-danger-bg); }
.state-title { font-weight: 700; }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 3px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; margin-right: .5rem; vertical-align: -2px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------- forms ---------- */
.form { display: grid; gap: .75rem; }
.form-inline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); align-items: end; }
.form-inline .field:first-child { grid-column: 1 / -1; }
.form-inline .actions { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label, .fieldset legend { font-weight: 600; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  min-height: var(--tap); width: 100%; max-width: 100%; padding: .5rem .65rem; font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-muted); border-radius: 8px; }
.field input[type="color"] { padding: .2rem; width: 5rem; }
.field-check { display: flex; flex-direction: row; align-items: center; gap: .5rem; min-height: var(--tap); flex-wrap: wrap; }
.field-check input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0; flex: 0 0 auto; accent-color: var(--c-primary); }
.field-check label { font-weight: 400; flex: 1; min-width: 0; cursor: pointer; padding: .25rem 0; min-height: var(--tap); display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.field-check input[type="checkbox"] { min-height: var(--tap); }
.field-check .hint { flex-basis: 100%; margin-left: 2rem; }
.fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: .5rem .75rem; margin: 0; }
.subfields { display: grid; gap: .5rem; padding-left: .75rem; border-left: 3px solid var(--c-info-bg); }
.req { color: var(--c-danger); }
.form-error:empty { display: none; }
.form-error { color: var(--c-danger); background: var(--c-danger-bg); border-radius: 8px; padding: .5rem .75rem; }
.field-missing input, .field-missing select { border-color: var(--c-warn); border-width: 2px; }
.missing { color: var(--c-warn); font-weight: 400; }
.inline-field .field { margin: 0; }
.checklist-editor, .ing-editor { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .4rem; }
.checklist-editor .row, .ing-row { flex-wrap: nowrap; align-items: flex-end; }
.checklist-editor input { flex: 1; min-height: var(--tap); min-width: 0; padding: .4rem .6rem; font: inherit; border: 1px solid var(--c-muted); border-radius: 8px; }
.ing-row .field { flex: 2; } .ing-row .field-narrow { flex: 1; }
@media (max-width: 600px) { .ing-row { flex-wrap: wrap; } .ing-row .field { flex: 1 1 100%; } .ing-row .field-narrow { flex: 1 1 40%; } }

/* ---------- dialogs ---------- */
.dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); color: var(--c-text); background: var(--c-surface); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.dialog-wide { width: min(52rem, calc(100vw - 1.5rem)); }
.dialog::backdrop { background: rgba(20, 30, 35, .55); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.dialog-head h2 { margin: 0; }
.dialog-body { padding: 1rem; overflow-wrap: anywhere; }
.menu-list li + li { border-top: 1px solid var(--c-subtle); }

/* ---------- domain ---------- */
.facts { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .25rem .75rem; margin: 0 0 .5rem; }
.facts dt { font-weight: 600; color: var(--c-muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: .35rem; } }
.occ-list { list-style: none; padding: 0; margin: 0; }
.occ { border-bottom: 1px solid var(--c-subtle); padding: .25rem 0; }
.occ-btn { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; width: 100%; min-height: var(--tap); text-align: left; background: none; border: 0; padding: .4rem .25rem; font: inherit; color: var(--c-text); cursor: pointer; border-radius: 6px; }
.occ-btn:hover { background: var(--c-subtle); }
.occ-title { font-weight: 600; }
.occ-cancelled .occ-title { text-decoration: line-through; }
.time { font-variant-numeric: tabular-nums; color: var(--c-muted); min-width: 5.5rem; }
.day-head { font-size: 1rem; margin-bottom: .25rem; }
.week-grid { display: grid; gap: .5rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week-day { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: .5rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .week-grid { grid-template-columns: 1fr; } }
.range-label { color: var(--c-muted); }
.conflict { color: var(--c-warn); }
.conflict-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: .5rem 0; }
.conflict-col { background: var(--c-subtle); border-radius: var(--radius); padding: .75rem; }
.conflict-col dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .5rem; margin: 0; }
.conflict-col dd { margin: 0; font-weight: 700; }
.history ol { padding-left: 1.25rem; }
.diff { font-size: .92rem; }
.before { text-decoration: line-through; color: var(--c-muted); }
.items { list-style: none; padding: 0; margin: 0; }
.item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; border-bottom: 1px solid var(--c-subtle); padding: .15rem 0; }
.item .field-check { flex: 1 1 12rem; }
.item .actions { margin: 0; }
.item-done .item-name { text-decoration: line-through; color: var(--c-muted); }
.title-link { font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; min-height: var(--tap); }
.task .field-check label { font-weight: 600; }
.checklist { list-style: none; padding: 0 0 0 .5rem; margin: .25rem 0; }
.swatch { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-subtle); vertical-align: -1px; }
.inactive-member { opacity: .8; }
.unread { border-left: 4px solid var(--c-primary); }
.total { font-size: 1.15rem; font-weight: 700; }
.danger-zone { border-top: 1px solid var(--c-border); padding-top: .75rem; }
.extractor-note { margin-bottom: 1rem; }
.source-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--c-subtle); border-radius: var(--radius); padding: .75rem; max-height: 22rem; overflow-y: auto; }
mark { background: var(--c-mark); color: var(--c-text); padding: 0 .1rem; border-radius: 3px; }
.quote { margin: .25rem 0; padding: .4rem .75rem; border-left: 4px solid var(--c-mark); background: var(--c-subtle); white-space: pre-wrap; }
.quote-inline { margin-left: .35rem; }
.proposal-rejected { opacity: .85; }
.proposal-rejected h3 { text-decoration: line-through; }
.prop-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem; }
.prop-fields { display: grid; gap: .5rem; margin: .5rem 0; }
.question { background: var(--c-warn-bg); border-radius: var(--radius); padding: .5rem .75rem; }
.preview-img { border: 1px solid var(--c-border); border-radius: var(--radius); max-height: 28rem; object-fit: contain; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; }
@media (max-width: 600px) { .sticky-actions { bottom: calc(var(--nav-h) + .25rem); } }
.auth-page { max-width: 34rem; margin: 1rem auto; }
.ing-list { margin: .25rem 0; }
.meal { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.poll-option label { justify-content: space-between; }
.followup { padding: .5rem 0; }

/* R4-1: long words/links never cause horizontal scrolling */
.dialog, .dialog-body, .card, .facts dd, .dialog-head h2, .occ-title, .notes, .alert, .state { overflow-wrap: anywhere; word-break: break-word; }
.dialog-head h2 { min-width: 0; }
.facts { grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); }
.conflict-col dl { grid-template-columns: max-content minmax(0, 1fr); }
/* R4-3: focused fields are not hidden behind the bottom bar */
html { scroll-padding-bottom: 1rem; }
@media (max-width: 600px) { html { scroll-padding-bottom: calc(var(--nav-h) + 1.5rem); } }
/* R4-4: dialog actions always visible */
.dialog-footer { position: sticky; bottom: 0; z-index: 2; background: var(--c-surface); margin: 0 -1rem -1rem; padding: .75rem 1rem; border-top: 1px solid var(--c-border); }
.more-options { border: 1px solid var(--c-border); border-radius: var(--radius); padding: .25rem .75rem; }
.more-options > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.more-options[open] { display: grid; gap: .75rem; padding-bottom: .75rem; }
.link-btn { background: none; border: 0; padding: .25rem 0; min-height: var(--tap); font: inherit; color: var(--c-primary); text-decoration: underline; cursor: pointer; text-align: left; }
.warning-group + .warning-group { margin-top: .5rem; }
[aria-invalid="true"] { border-color: var(--c-danger) !important; border-width: 2px !important; }
.label-row { display: flex; gap: .25rem; align-items: baseline; }
.label-row .req { font-weight: 700; }
.proposal-changed { border: 2px solid var(--c-warn); }

/* ---------- Erweiterung 3 (D7): symbols, action cards, details, states ---------- */
.icon { flex: 0 0 auto; vertical-align: -4px; }
.with-icon { display: inline-flex; align-items: center; gap: .4rem; }
.btn .icon { width: 18px; height: 18px; }
.action-cards { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.action-card { display: flex; align-items: flex-start; gap: .75rem; width: 100%; height: 100%; min-height: calc(var(--tap) + .5rem); padding: .75rem 1rem; text-align: left;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font: inherit; text-decoration: none; cursor: pointer; }
.action-card:hover { background: var(--c-info-bg); border-color: var(--c-primary); }
.action-card:disabled { opacity: .6; cursor: not-allowed; }
.action-primary { border: 2px solid var(--c-primary); }
.action-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-info-bg); color: var(--c-primary); flex: 0 0 auto; }
.action-text { display: grid; gap: .1rem; min-width: 0; }
.action-title { font-weight: 700; color: var(--c-primary); }
.action-desc { color: var(--c-muted); font-size: .92rem; }
.more-body { display: grid; gap: .5rem; }
.state-empty p { font-weight: 600; }
@media (max-width: 600px) {
  .page-header .actions { width: 100%; }
}