@layer components {
  svg.ic { width: 1.05em; height: 1.05em; vertical-align: -0.18em; display: inline-block; flex: none; }
  /* ---------- buttons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r); padding: 10px 16px; font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; min-height: 40px; border: 1px solid transparent; background: var(--primary); color: var(--primary-fg); transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t), filter var(--t); white-space: nowrap; text-decoration: none; }
  .btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 10px 20px -10px color-mix(in oklab, var(--primary) 70%, transparent); }
  .btn:active { transform: translateY(0); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
  .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
  .btn.secondary:hover { background: var(--surface-2); box-shadow: var(--sh-1); }
  .btn.ghost { background: transparent; color: var(--text-2); }
  .btn.ghost:hover { background: var(--surface-2); color: var(--text); box-shadow: none; }
  .btn.accent { background: var(--accent); color: var(--accent-fg); }
  .btn.danger { background: var(--crit-bg); color: var(--crit-fg); }
  .btn.lg { min-height: 48px; padding: 12px 22px; font-size: var(--fs-base); border-radius: 12px; }
  .btn.sm { min-height: 32px; padding: 6px 10px; font-size: var(--fs-xs); border-radius: 8px; }
  .btn.block { width: 100%; }
  .btn .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .btn.busy { position: relative; color: transparent !important; pointer-events: none; }
  .btn.busy::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in oklab, currentColor 30%, transparent); border-top-color: var(--primary-fg); animation: spin 0.8s linear infinite; }
  .btn.secondary.busy::after, .btn.ghost.busy::after { border-top-color: var(--text); }
  @keyframes spin { to { transform: rotate(360deg); } }
  .iconbtn { width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--text-2); transition: background var(--t), transform var(--t), color var(--t); }
  .iconbtn:hover { background: var(--surface-2); color: var(--text); }
  .iconbtn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- forms ---------- */
  .field { display: grid; gap: 6px; }
  .field > label, .label { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
  .input { width: 100%; min-height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); padding: 10px 14px; font-size: var(--fs-base); color: var(--text); transition: border-color var(--t), box-shadow var(--t), background var(--t); }
  .input::placeholder { color: var(--text-3); }
  .input:hover { border-color: color-mix(in oklab, var(--border-strong) 60%, var(--text-3)); }
  .input:focus { outline: none; border-color: var(--glas); box-shadow: var(--focus); }
  .input[aria-invalid='true'] { border-color: var(--crit); }
  textarea.input { field-sizing: content; min-height: 88px; resize: vertical; }
  .input-wrap { position: relative; }
  .input-wrap .input { padding-right: 46px; }
  .input-wrap .iconbtn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; }
  .hint { font-size: var(--fs-xs); color: var(--text-3); }
  .error-text { font-size: var(--fs-sm); color: var(--crit-fg); font-weight: 600; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
  .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: none; }
  .switch { position: relative; width: 44px; height: 26px; border-radius: var(--r-full); background: var(--border-strong); transition: background var(--t); flex: none; border: 0; }
  .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--t) var(--ease); }
  .switch[aria-checked='true'] { background: var(--good); }
  .switch[aria-checked='true']::after { transform: translateX(18px); }
  .switch:disabled { opacity: 0.5; cursor: not-allowed; }
  .strength { display: flex; gap: 4px; height: 5px; margin-top: 2px; }
  .strength i { flex: 1; border-radius: 3px; background: var(--border); transition: background var(--t); }
  .strength[data-level='1'] i:nth-child(-n+1) { background: var(--crit); }
  .strength[data-level='2'] i:nth-child(-n+2) { background: var(--warn); }
  .strength[data-level='3'] i:nth-child(-n+3) { background: var(--good-mid); }
  .strength[data-level='4'] i { background: var(--good); }
  .rules { display: grid; gap: 3px; font-size: var(--fs-xs); color: var(--text-3); list-style: none; padding: 0; }
  .rules li { display: flex; gap: 6px; align-items: center; }
  .rules li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: none; }
  .rules li.ok { color: var(--good-fg); } .rules li.ok::before { background: var(--good); }
  .rules li.bad { color: var(--crit-fg); } .rules li.bad::before { background: var(--crit); }
  .code-input { letter-spacing: 0.35em; font-size: var(--fs-xl); text-align: center; font-variant-numeric: tabular-nums; }

  /* ---------- alerts, pills, badges ---------- */
  .alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--info-bg); color: var(--info-fg); font-size: var(--fs-sm); border: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
  .alert svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
  .alert.warn { background: var(--warn-bg); color: var(--warn-fg); }
  .alert.crit { background: var(--crit-bg); color: var(--crit-fg); }
  .alert.good { background: var(--good-bg); color: var(--good-fg); }
  .alert.neutral { background: var(--surface-2); color: var(--text-2); }
  .alert b { font-weight: 800; }
  .alert p { margin: 0; }
  .pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; background: var(--neutral-bg); color: var(--neutral-fg); white-space: nowrap; line-height: 1.5; }
  .pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.8; flex: none; }
  .pill.good { background: var(--good-bg); color: var(--good-fg); } .pill.good i { background: var(--good); opacity: 1; }
  .pill.good-mid { background: var(--good-mid-bg); color: var(--good-mid-fg); } .pill.good-mid i { background: var(--good-mid); opacity: 1; }
  .pill.warn { background: var(--warn-bg); color: var(--warn-fg); } .pill.warn i { background: var(--warn); opacity: 1; }
  .pill.crit { background: var(--crit-bg); color: var(--crit-fg); } .pill.crit i { background: var(--crit); opacity: 1; }
  .pill.info { background: var(--info-bg); color: var(--info-fg); } .pill.info i { background: var(--link); opacity: 1; }
  .pill.pulse i { animation: pulse 2.4s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
  .badge-dev { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 60; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 8px; background: oklch(0.85 0.17 90); color: oklch(0.25 0.06 70); box-shadow: var(--sh-2); border: 1px dashed oklch(0.45 0.1 70); }
  .tag-mock { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6562rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: oklch(0.9 0.14 90); color: oklch(0.3 0.07 70); border: 1px dashed oklch(0.5 0.1 70); vertical-align: middle; }
  .tag-soon { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--border-strong); vertical-align: middle; }

  /* ---------- cards & sections ---------- */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-2); transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); container-type: inline-size; }
  .card.h:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: color-mix(in oklab, var(--glas) 50%, var(--border)); }
  .card.tight { padding: var(--s-4); }
  .card h3 { font-size: var(--fs-md); }
  .card .sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
  .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-4); }
  .lvl { display: flex; align-items: center; gap: 12px; margin: var(--s-7) 0 var(--s-4); color: var(--text-3); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .lvl::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
  .lvl .dots { display: flex; gap: 3px; } .lvl .dots i { width: 5px; height: 12px; border-radius: 2px; background: var(--border); } .lvl .dots i.f { background: var(--glas); }
  .page-head { margin: var(--s-6) 0 var(--s-5); }
  .page-head h1 { font-size: var(--fs-2xl); }
  .page-head p { color: var(--text-2); margin-top: 6px; max-width: 62ch; }
  .state { text-align: center; padding: var(--s-7) var(--s-4); color: var(--text-2); display: grid; justify-items: center; gap: var(--s-3); }
  .state .glyph { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); }
  .state .glyph svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .state h2 { font-size: var(--fs-lg); color: var(--text); }
  .state p { max-width: 46ch; }
  .chapter-state { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); border: 1px dashed var(--border-strong); }
  .chapter-state svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; margin-top: 1px; }

  /* ---------- skeleton ---------- */
  .sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; color: transparent !important; min-height: 1em; }
  .sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--surface) 70%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
  @keyframes shimmer { to { transform: translateX(100%); } }
  .sk.line { height: 14px; } .sk.title { height: 26px; width: 55%; } .sk.block { height: 120px; }

  /* ---------- lens loader (signature) ---------- */
  .lens-loader { width: 52px; height: 52px; position: relative; display: inline-block; }
  .lens-loader::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 3px solid color-mix(in oklab, var(--text-3) 35%, transparent); border-top-color: var(--glas); animation: spin 1.1s linear infinite; }
  .lens-loader::after { content: ''; position: absolute; width: 14px; height: 4px; border-radius: 3px; background: var(--text-3); right: -6px; bottom: 2px; transform: rotate(45deg); transform-origin: left center; }
  .lens-loader.lg { width: 84px; height: 84px; } .lens-loader.lg::before { border-width: 5px; inset: 6px; } .lens-loader.lg::after { width: 22px; height: 6px; right: -10px; bottom: 4px; }

  /* ---------- tables ---------- */
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--s-4) * -1); padding: 0 var(--s-4); }
  .table { width: 100%; font-size: var(--fs-sm); }
  .table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
  .table th { color: var(--text-3); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
  .table td.n, .table th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--surface-2); }
  .table .neg { color: var(--crit-fg); font-weight: 700; }
  .table .empty { color: var(--text-3); font-style: italic; font-weight: 500; }
  .table tr.sel { background: var(--info-bg); }
  @container (max-width: 520px) { .table.stack-sm thead { display: none; } .table.stack-sm tr { display: grid; grid-template-columns: 1fr; padding: 8px 0; border-bottom: 1px solid var(--border); } .table.stack-sm td { border: 0; padding: 2px 0; } .table.stack-sm td.n { text-align: left; } .table.stack-sm td::before { content: attr(data-l); display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } }

  /* ---------- accordion, details, tabs ---------- */
  .acc { display: flex; flex-direction: column; }
  .ai { border-top: 1px solid var(--border); } .ai:first-child { border-top: 0; }
  .ah { display: flex; align-items: center; gap: 12px; padding: 12px 6px; width: 100%; text-align: left; border-radius: 8px; transition: background var(--t-fast), padding var(--t); font-weight: 700; font-size: var(--fs-sm); }
  .ah:hover { background: var(--surface-2); padding-left: 12px; }
  .ah .chev { width: 16px; height: 16px; stroke: var(--text-3); fill: none; stroke-width: 2.2; stroke-linecap: round; transition: transform var(--t-slow) var(--ease); flex: none; margin-left: auto; }
  .ai.open .ah .chev { transform: rotate(180deg); }
  .ab { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
  .ai.open .ab { grid-template-rows: 1fr; }
  .ab > div { overflow: hidden; }
  .ab .body { padding: 0 6px 14px 42px; color: var(--text-2); font-size: var(--fs-sm); }
  @container (max-width: 480px) { .ab .body { padding-left: 6px; } }
  details.dd { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color var(--t); }
  details.dd + details.dd { margin-top: 10px; }
  details.dd:hover { border-color: var(--glas); }
  details.dd > summary { cursor: pointer; list-style: none; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: var(--fs-sm); }
  details.dd > summary::-webkit-details-marker { display: none; }
  details.dd > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform var(--t); flex: none; }
  details.dd[open] > summary::after { transform: rotate(-135deg); }
  details.dd > .in { padding: 0 18px 16px; }
  .tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: var(--r); max-width: 100%; }
  .tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-3); transition: all var(--t); white-space: nowrap; }
  .tabs button:hover { color: var(--text); }
  .tabs button[aria-selected='true'] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
  .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; }
  .seg button { padding: 6px 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); border-right: 1px solid var(--border); }
  .seg button:last-child { border-right: 0; }
  .seg button[aria-pressed='true'] { background: var(--surface-2); color: var(--text); }

  /* ---------- popover (source lens) ---------- */
  .lens-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; min-height: 24px; border-radius: 7px; font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); border: 1px solid var(--border); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); vertical-align: middle; cursor: pointer; }
  .lens-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
  .lens-btn:hover, .lens-btn[aria-expanded='true'] { background: var(--surface-2); color: var(--glas-ink); border-color: var(--border); }
  .lens-btn.s-confirmed { color: var(--good-fg); } .lens-btn.s-discrepancy { color: var(--warn-fg); } .lens-btn.s-missing { color: var(--text-3); } .lens-btn.s-review { color: var(--warn-fg); }
  .pop { position: fixed; z-index: 70; width: min(340px, calc(100vw - 24px)); background: var(--surface); color: var(--text); border-radius: 14px; box-shadow: var(--sh-pop); padding: 14px 16px; font-size: var(--fs-sm); border: 0; margin: 0; inset: auto; }
  .pop::backdrop { background: transparent; }
  .pop h4 { font-size: var(--fs-sm); margin-bottom: 6px; }
  .pop .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-xs); margin-top: 8px; }
  .pop .kv dt { color: var(--text-3); font-weight: 700; } .pop .kv dd { margin: 0; }
  .focus-reveal { filter: blur(0); transition: filter var(--t-slow) var(--ease); }
  .focus-reveal.blur { filter: blur(3px); }

  /* ---------- toast ---------- */
  .toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
  .toast { background: var(--text); color: var(--bg); padding: 12px 14px; border-radius: 12px; box-shadow: var(--sh-3); font-size: var(--fs-sm); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; animation: toast-in var(--t-slow) var(--ease) both; }
  .toast.good { background: var(--good-bg); color: var(--good-fg); } .toast.crit { background: var(--crit-bg); color: var(--crit-fg); } .toast.warn { background: var(--warn-bg); color: var(--warn-fg); }
  .toast button { margin-left: auto; opacity: 0.7; font-weight: 800; } .toast button:hover { opacity: 1; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

  /* ---------- dialog ---------- */
  dialog.modal { border: 0; border-radius: 18px; padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--sh-3); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
  dialog.modal::backdrop { background: oklch(0.15 0.04 262 / 0.55); backdrop-filter: blur(4px); }
  dialog.modal .m-body { padding: var(--s-5); }
  dialog.modal h2 { font-size: var(--fs-lg); margin-bottom: 8px; }
  dialog.modal .m-foot { display: flex; justify-content: flex-end; gap: 8px; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); flex-wrap: wrap; }
  dialog.modal[open] { animation: modal-in var(--t-slow) var(--ease) both; }
  @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }

  /* ---------- sidebar / shell ---------- */
  .app-grid { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
  db-sidebar { display: flex; flex-direction: column; gap: 4px; background: var(--sidebar); border-right: 1px solid var(--border); padding: 20px 14px; position: sticky; top: 0; height: 100dvh; overflow: auto; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; text-decoration: none; }
  .brand svg { width: 34px; height: 34px; flex: none; }
  .nav-grp { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); padding: 14px 10px 6px; }
  .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: 0.875rem; text-decoration: none; position: relative; transition: background var(--t-fast), color var(--t-fast), transform var(--t); }
  .nav a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .nav a:hover { background: var(--surface-2); color: var(--text); transform: translateX(3px); }
  .nav a[aria-current='page'] { background: var(--surface-2); color: var(--primary); }
  .nav a[aria-current='page']::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--glas); }
  .nav a .soon { margin-left: auto; font-size: 0.625rem; font-weight: 800; color: var(--text-3); border: 1px dashed var(--border-strong); border-radius: 5px; padding: 1px 5px; }
  .credit-box { margin-top: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-decoration: none; display: block; color: inherit; transition: border-color var(--t), transform var(--t); }
  .credit-box:hover { border-color: var(--glas); transform: translateY(-2px); }
  .credit-box .caps { margin-bottom: 2px; }
  .credit-box b { font-size: 1.75rem; font-weight: 800; display: block; line-height: 1.1; letter-spacing: -0.02em; }
  .credit-box small { color: var(--text-3); font-size: 0.75rem; display: block; margin-top: 8px; }
  .meter { height: 6px; border-radius: 9px; background: var(--surface-3); margin-top: 10px; overflow: hidden; }
  .meter i { display: block; height: 100%; width: var(--w, 0%); border-radius: 9px; background: linear-gradient(90deg, var(--series-1), var(--glas)); transition: width 1.1s var(--ease) 0.3s; }
  .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); min-height: var(--topbar-h); background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .topbar .sp { flex: 1; }
  .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--series-1), var(--glas)); color: #fff; font-weight: 800; font-size: 0.8125rem; display: grid; place-items: center; border: 0; }
  .menu { position: fixed; z-index: 80; background: var(--surface); border-radius: 12px; box-shadow: var(--sh-pop); padding: 6px; min-width: 220px; border: 0; margin: 0; inset: auto; }
  .menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-decoration: none; }
  .menu a:hover, .menu button:hover { background: var(--surface-2); }
  .menu .sep { height: 1px; background: var(--border); margin: 6px 4px; }
  .wrap { padding: 0 var(--gutter) 96px; max-width: var(--content-max); margin: 0 auto; width: 100%; }
  .wrap.narrow { max-width: 760px; }
  .mobile-nav { display: none; }
  .main-col { min-width: 0; }
  @media (max-width: 900px) {
    .app-grid { grid-template-columns: minmax(0, 1fr); }
    db-sidebar { display: none; }
    .mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 6px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)); justify-content: space-around; }
    .mobile-nav a { display: grid; justify-items: center; gap: 3px; font-size: 0.6562rem; font-weight: 700; color: var(--text-3); text-decoration: none; padding: 4px 8px; border-radius: 8px; min-width: 56px; }
    .mobile-nav a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-nav a[aria-current='page'] { color: var(--primary); }
    .wrap { padding-bottom: 110px; }
    .toast-region { bottom: 76px; }
    .badge-dev { bottom: 72px; }
  }
  .public-shell .topbar { background: transparent; border-bottom: 0; backdrop-filter: none; position: static; }
  .public-top { display: flex; align-items: center; gap: 12px; padding: 14px var(--gutter); max-width: var(--content-max); margin: 0 auto; width: 100%; }
  .public-top .sp { flex: 1; }
  .public-top .brand { padding: 0; font-size: 1.125rem; }
  .public-top .brand svg { width: 30px; height: 30px; }
  .footer { padding: var(--s-6) var(--gutter); color: var(--text-3); font-size: var(--fs-xs); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .footer a { color: inherit; text-decoration: none; } .footer a:hover { color: var(--text); text-decoration: underline; }
}

@layer components {
  /* "Quelle" button (FR-C20): a lens with an arrow that leaves the page */
  .src-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 8px; color: var(--glas-ink); border: 1px solid var(--border); background: transparent; cursor: pointer; vertical-align: middle; transition: background var(--t-fast), border-color var(--t-fast); text-decoration: none; }
  .src-btn svg { width: 17px; height: 17px; }
  .src-btn:hover, .src-btn[aria-expanded='true'] { background: var(--surface-2); border-color: var(--border-strong); }
  .src-btn.charge { color: var(--warn-fg); }
  .kv-table td .src-btn, .card-head .src-btn { margin-left: 6px; }
  .srcl-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
  .srcl { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: var(--fs-sm); }
  .srcl .k svg { width: 18px; height: 18px; color: var(--text-3); }
  .srcl .link { overflow-wrap: anywhere; }
  .ic.xs { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
}

@layer components {
  /* text size: two capital A of different size */
  .fontctl { display: inline-flex; height: 38px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; margin-right: 6px; }
  .fontctl button { min-width: 34px; display: grid; place-items: center; color: var(--text-2); font-weight: 800; line-height: 1; }
  .fontctl button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
  .fontctl button:disabled { opacity: 0.35; cursor: default; }
  .fontctl button + button { border-left: 1px solid var(--border); }
  .fontctl .a-s { font-size: 0.8125rem; } .fontctl .a-l { font-size: 1.25rem; }
}