/* Self-hosted brand faces, served same-origin at /static/fonts/
     (the CSP has no font-src, so it inherits default-src 'self'). */
  @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900;
    font-display: swap; src: url("/static/fonts/Inter.woff2") format("woff2"); }
  @font-face { font-family: "JetBrains Mono"; font-style: normal;
    font-weight: 100 800; font-display: swap;
    src: url("/static/fonts/JetBrainsMono.woff2") format("woff2"); }

  :root {
    /* Surfaces - dark gunmetal */
    --bg: #060709;
    --surface: #141a22;
    --surface-1: #0e1117;
    --surface-2: #141a22;
    --surface-3: #1b222c;
    --inset: #08090c;
    /* Borders */
    --line: #232b35;
    --line-strong: #38434f;
    /* Ink */
    --ink: #e9edf3;
    --ink-soft: #d3d9e2;
    --ink-dim: #a6b0bd;
    --muted: #828d9c;  /* M6: lifted from #717c8a for WCAG AA (5.20:1 on
                          #141a22, 5.07:1 on #0f1d2b; was 4.13/4.02). Stays
                          below --muted-soft / --ink-dim so it reads muted. */
    --muted-soft: #8a94a2;
    /* Signal blue accent */
    --accent: #3aa0ff;
    --accent-strong: #73c2ff;
    --accent-dim: #15324b;
    --accent-tint: #0f1d2b;
    --accent-tint-strong: #15324b;
    /* Semantic */
    --ok: #46d08a;    --ok-tint: #102a1d;   --ok-line: #1f5a42;
    --warn: #f2b45a;  --warn-tint: #2a1f0e; --warn-line: #5a4a1f;
    --danger: #ff6a6a; --danger-tint: #2a1212; --danger-line: #5a2828;
    --sealed: #a78bfa; --sealed-tint: #1a142a; --sealed-line: #3e3260;
    --warn-bg: #2a1f0e; --warn-border: #5a4a1f;
    /* Glow on CTA hover */
    --glow: 0 0 0 1px #3aa0ff, 0 0 22px -4px rgba(58,160,255,.55);
    --shadow-sm: 0 1px 0 rgba(0,0,0,0.3), 0 4px 14px -8px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 18px rgba(0,0,0,0.5);
    --ring: 0 0 0 3px rgba(58,160,255,0.35);
    /* Radii - apex uses 8/4/12 + clip-path bevel of 10px */
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --cut: 10px;
    /* Fonts */
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif: var(--sans);   /* serif retired — match apex (every old serif → sans) */
    /* Wide console shell — single source for the dashboard width (was the
       min(1440px, …) literal duplicated at the console main + its nav/footer
       rails below). Other dashboard pages keep their narrower form columns. */
    --shell-wide: min(1440px, calc(100vw - 64px));
  }
  /* Dashboard is dark-default in all OS modes to match apex
     (satsignal.cloud). The prior @media (prefers-color-scheme: light)
     override flipped tokens to cream + material blue on light-OS
     visitors, causing a hard light->dark flash on cross-domain nav
     (Verify/Docs/Pricing/Trust -> apex) and violating the
     "dashboard matches apex" theme invariant. */
  * { box-sizing: border-box; }
  html { color-scheme: dark; }
  body {
    margin: 0; font-family: var(--sans);
    color: var(--ink); background: var(--bg); line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Accessibility baseline for the dashboard / per-folder UI:
     visible keyboard focus + skip-to-content. Same shape as the
     marketing-site CSS so behaviour is consistent across vhosts. */
  :focus-visible { outline: none; box-shadow: var(--ring);
                   border-radius: 4px; }
  /* N8: the bundle download button sits on the blue accent fill, where
     the translucent box-shadow ring is low-contrast and clips away in
     forced-colors mode. Pair the global box-shadow ring with a solid
     outline + offset so the focus ring survives on the blue button and
     under Windows High Contrast. */
  .download-bundle:focus-visible {
    outline: 2px solid var(--ink); outline-offset: 3px;
    box-shadow: var(--ring);
  }
  .skip-link { position: absolute; left: -9999px; top: 0;
               background: var(--ink); color: var(--bg);
               padding: 0.6em 1em; text-decoration: none;
               z-index: 100; font-weight: 600; }
  .skip-link:focus { left: 0.5em; top: 0.5em; }

  .app-nav {
    border-bottom: 1px solid var(--line); background: var(--bg);
    padding: 0.7em 1.2em;
    position: sticky; top: 0; z-index: 10;
    backdrop-filter: saturate(180%) blur(8px);
  }
  .app-nav-inner {
    max-width: 1040px; margin: 0 auto;
    display: flex; align-items: center; gap: 1.2em;
    flex-wrap: wrap;
  }
  .app-nav .brand {
    font-family: var(--serif);
    font-weight: 600; color: var(--ink); text-decoration: none;
    font-size: 1.18em; letter-spacing: -0.01em;
    display: inline-flex; align-items: baseline; gap: 0.45em;
  }
  .app-nav .brand-tag {
    color: var(--muted); font-weight: 400; font-size: 0.82em;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .app-nav-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0.4em 1.2em;
  }
  .app-nav-links li { white-space: nowrap; }
  .app-nav-links a {
    color: var(--muted); text-decoration: none; font-size: 0.93em;
    padding: 0.25em 0.1em;
  }
  .app-nav-links a:hover { color: var(--accent); }
  .app-nav-spacer { flex: 1; }
  .app-nav .who { color: var(--muted); font-size: 0.9em; }
  .app-nav .who b { color: var(--ink); font-weight: 600; }
  .app-nav form { display: inline; margin: 0; }
  .app-nav button.linklike {
    background: none; border: 0; padding: 0; margin: 0 0 0 0.8em;
    color: var(--muted); cursor: pointer;
    font: inherit; font-size: 0.9em;
  }
  .app-nav button.linklike:hover { color: var(--accent); }

  @media (max-width: 640px) {
    .app-nav { padding: 0.6em 1em; }
    .app-nav-inner { gap: 0.5em 1em; row-gap: 0.5em; }
    .app-nav-spacer { display: none; }
    .app-nav-links {
      order: 3; width: 100%;
      overflow-x: auto; flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.2em;
      gap: 1.1em;
    }
    .app-nav-links::-webkit-scrollbar { display: none; }
    /* L24: keep the account label + Sign out as one coherent cluster on
       the right of row 1 instead of letting Sign out orphan onto its own
       cramped row. Push the whole cluster (who + form) right as a unit
       and align them on a shared baseline; the email still wraps under
       "Signed in as" but the control rides with it. */
    .app-nav .who {
      font-size: 0.85em; margin-left: auto;
      display: inline-flex; align-items: baseline; gap: 0.3em;
      flex-wrap: wrap;
    }
    .app-nav .who b { font-weight: 600; }
    .app-nav form { margin-left: 0.6em; }
    .app-nav button.linklike { margin-left: 0; }
  }

  /* L24: at very narrow widths (~390px) the brand + account cluster can
     no longer share one row. Drop the who + Sign out onto their own
     shared row (both order:2, consecutive) so they read as one coherent
     account cluster instead of an orphaned control. The email keeps its
     baseline next to the button rather than stranding above the nav. */
  @media (max-width: 420px) {
    .app-nav .who { order: 2; margin-left: 0; padding-top: 0.15em; }
    .app-nav form { order: 2; margin-left: auto; }
  }

  /* ── Left-nav app shell (concept IA). Rendered only on authed,
     workspace-scoped pages (when _shell is given ws_slug). Login + error
     pages keep the simple top-nav-only layout. ── */
  .app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
  .app-sidebar {
    flex: 0 0 232px; width: 232px; box-sizing: border-box;
    background: var(--surface-1); border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; padding: 1.1em 0.8em 1.2em;
  }
  .app-shell-main {
    flex: 1 1 auto; min-width: 0; display: flex;
    flex-direction: column; min-height: 100vh;
  }
  /* width:100% + box-sizing stops the flex column from shrinking main to its
     content width when a page's content is narrow (the margin:0 auto on
     .app-main otherwise collapses it); max-width still caps + centers it. */
  .app-shell-main > main.app-main {
    flex: 1 0 auto; width: 100%; box-sizing: border-box;
  }
  .side-brand {
    font-family: var(--serif); font-weight: 600; color: var(--ink);
    text-decoration: none; font-size: 1.16em; letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 0.4em;
    padding: 0.3em 0.55em 0.2em;
  }
  .side-brand .brand-tag {
    color: var(--muted); font-weight: 400; font-size: 0.6em;
    text-transform: uppercase; letter-spacing: 0.07em;
  }
  .side-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 1.1em; }
  .side-group {
    margin: 0.95em 0.65em 0.3em; font-size: 0.66em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  }
  .side-link {
    display: flex; align-items: center; gap: 0.65em;
    padding: 0.52em 0.65em; border-radius: 8px;
    color: var(--ink-dim); text-decoration: none;
    font-size: 0.92em; font-weight: 500; line-height: 1.2;
  }
  .side-link svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .side-link:hover { background: var(--accent-tint); color: var(--ink); }
  .side-link.active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
  .side-foot { margin-top: auto; padding: 0.9em 0.55em 0; }
  .side-foot .side-plan-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5em; padding-top: 0.9em; border-top: 1px solid var(--line);
  }
  .side-foot .side-plan { color: var(--muted); font-size: 0.82em; }
  .side-foot .side-plan b { color: var(--ink-dim); font-weight: 600; }
  .side-foot .side-upgrade {
    color: var(--accent); text-decoration: none; font-size: 0.82em; font-weight: 600;
  }
  .side-foot .side-upgrade:hover { text-decoration: underline; }
  @media (max-width: 860px) {
    .app-shell { flex-direction: column; align-items: stretch; }
    .app-sidebar {
      flex: none; width: 100%; height: auto; position: static;
      border-right: 0; border-bottom: 1px solid var(--line);
      flex-direction: row; align-items: center; gap: 0.15em;
      overflow-x: auto; padding: 0.5em 0.7em;
    }
    .app-sidebar::-webkit-scrollbar { display: none; }
    .side-brand { padding: 0.2em 0.4em; flex: 0 0 auto; }
    .side-brand .brand-tag { display: none; }
    .side-nav { flex-direction: row; margin-top: 0; gap: 0.15em; }
    .side-group, .side-foot { display: none; }
    .side-link { padding: 0.4em 0.6em; white-space: nowrap; }
  }

  main.app-main {
    max-width: 760px; margin: 0 auto; padding: 2em 1.4em 4em;
  }
  h1.app-h1 {
    margin: 0 0 0.35em; font-size: 1.7em; letter-spacing: -0.015em;
    line-height: 1.2;
  }
  p.app-lead { color: var(--ink-soft); margin: 0 0 1.5em; font-size: 1.02em; }

  .app-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5em 1.7em;
    margin: 1em 0 1.4em;
    box-shadow: var(--shadow-sm);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  }
  .app-card h2 {
    margin: 0 0 0.4em; font-size: 1.15em;
  }
  .app-card p { margin: 0.4em 0; color: var(--ink-soft); }
  .app-card .meta { color: var(--muted); font-size: 0.92em; }

  form.app-form { display: flex; flex-direction: column; gap: 0.7em; }
  form.app-form label {
    font-weight: 600; font-size: 0.95em; color: var(--ink-soft);
  }
  form.app-form input[type="email"] {
    padding: 0.7em 0.9em; font-size: 1.02em;
    border: 1px solid var(--line); border-radius: 6px;
    font-family: inherit;
  }
  form.app-form input[type="email"]:focus {
    outline: none; border-color: var(--accent);
  }
  form.app-form button {
    padding: 0.75em 1.4em; font-size: 1em; font-weight: 600;
    background: var(--accent-strong); color: #04121f;
    border: 0; border-radius: 6px;
    cursor: pointer; font-family: inherit;
    align-self: flex-start;
    clip-path: polygon(var(--radius-sm) 0, 100% 0, 100% calc(100% - var(--radius-sm)), calc(100% - var(--radius-sm)) 100%, 0 100%, 0 var(--radius-sm));
  }
  form.app-form button:hover { background: var(--accent); box-shadow: var(--glow); }

  .app-banner {
    background: var(--warn-tint); border: 1px solid var(--warn-line);
    padding: 0.9em 1.1em; border-radius: 6px; margin: 0 0 1.4em;
    font-size: 0.95em; color: var(--warn);
  }
  .app-banner b { color: var(--warn); }

  .ws-context {
    color: var(--muted); font-size: 0.92em;
    margin: 0 0 0.6em;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.45em;
  }
  .ws-context b { color: var(--ink-soft); }
  .ws-context .ws-name {
    color: var(--ink); font-weight: 600; font-size: 1.02em;
  }
  .ws-context .sep {
    color: var(--line-strong); margin: 0 0.1em;
  }

  .folder-list { list-style: none; margin: 0; padding: 0; }
  .folder-list li {
    display: flex; align-items: baseline; gap: 0.8em;
    padding: 0.85em 0;
    border-bottom: 1px solid var(--line);
  }
  .folder-list li:last-child { border-bottom: 0; }
  .folder-list .folder-name {
    flex: 1; min-width: 0;
    font-weight: 600; color: var(--ink);
    text-decoration: none;
  }
  .folder-list .folder-name:hover { color: var(--accent); }
  .folder-list .folder-name:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px; border-radius: var(--radius-sm);
  }
  .folder-list .folder-pin {
    display: inline-block; padding: 0.12em 0.55em;
    font-size: 0.74em; font-weight: 600; letter-spacing: 0.05em;
    background: var(--accent-tint); color: var(--accent);
    border-radius: var(--radius-sm); text-transform: uppercase;
    margin-right: 0.3em;
  }
  .folder-list .folder-meta {
    color: var(--muted); font-size: 0.88em;
    margin-left: auto;
  }
  .folder-list .folder-empty {
    color: var(--muted); font-style: italic; padding: 0.6em 0;
  }

  .inline-form {
    display: flex; gap: 0.55em; align-items: stretch;
    margin: 1em 0 0;
  }
  .inline-form input[type="text"] {
    flex: 1; padding: 0.55em 0.8em; font-size: 0.95em;
    border: 1px solid var(--line); border-radius: 5px;
    font-family: inherit;
  }
  .inline-form input[type="text"]:focus {
    outline: none; border-color: var(--accent);
  }
  .inline-form button {
    padding: 0.55em 1.1em; font-size: 0.93em; font-weight: 600;
    background: var(--accent-strong); color: #04121f;
    border: 0; border-radius: 5px;
    cursor: pointer; font-family: inherit;
    clip-path: polygon(var(--radius-sm) 0, 100% 0, 100% calc(100% - var(--radius-sm)), calc(100% - var(--radius-sm)) 100%, 0 100%, 0 var(--radius-sm));
  }
  .inline-form button:hover { background: var(--accent); box-shadow: var(--glow); }
  .inline-form-error {
    margin: 0.9em 0 0; padding: 0.6em 0.85em;
    font-size: 0.9em; color: var(--danger);
    background: var(--danger-tint);
    border: 1px solid var(--danger-line);
    border-radius: var(--radius-sm);
  }

  .placeholder {
    background: var(--accent-tint); border: 1px dashed var(--accent-tint-strong);
    border-radius: var(--radius-sm); padding: 1.4em 1.5em;
    color: var(--ink-soft);
  }
  .placeholder b { color: var(--ink); }

  /* H5: the sealed auto-delete / blind-mode loss callouts are the most
     consequential message on the proof page — they must NOT look like
     the generic muted dashed empty-state (.placeholder). Give them a
     real warning treatment: solid amber border, faintly tinted bg, and
     a bolder/colored date. */
  .retention-warning {
    background: var(--warn-tint);
    border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    padding: 1.1em 1.3em;
    color: var(--ink-soft);
  }
  .retention-warning b { color: var(--ink); }
  .retention-warning .retention-date {
    font-weight: 700; color: var(--warn);
  }

  .crumbs {
    color: var(--muted); font-size: 0.92em; margin: 0 0 0.8em;
  }
  .crumbs a { color: var(--accent); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }

  /* Unified pill family: same shape + size, semantic tint via class. */
  .trial-pill, .quota-pill, .plan-pill {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.22em 0.7em;
    font-size: 0.82em; letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    margin: 0;
    line-height: 1.4;
  }
  .trial-pill {
    background: var(--warn-tint); color: var(--warn);
    border-color: var(--warn-line);
  }
  .quota-pill {
    background: var(--accent-tint); color: var(--ink-soft);
    border-color: var(--accent-tint-strong);
    font-variant-numeric: tabular-nums;
  }
  .quota-pill.hit {
    background: var(--danger-tint); color: var(--danger);
    border-color: var(--danger-line);
  }
  .quota-pill.warn {
    background: var(--warn-tint); color: var(--warn);
    border-color: var(--warn-line);
  }
  .quota-pill.readonly {
    background: var(--surface-2); color: var(--muted);
    border-color: var(--line);
  }
  .quota-pill a { color: inherit; text-decoration: underline; }
  .plan-pill {
    background: var(--ok-tint); color: var(--ok);
    border-color: var(--ok-line);
    text-decoration: none; font-weight: 500;
  }
  .plan-pill:hover, .plan-pill:focus-visible { text-decoration: underline; }

  /* Inline quota meter — visual progress bar with the number overlaid. */
  .quota-meter {
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.22em 0.7em;
    font-size: 0.82em; letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent-tint-strong);
    background: var(--accent-tint); color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
  }
  .quota-meter .bar {
    display: inline-block; width: 56px; height: 6px;
    background: var(--surface); border-radius: var(--radius-pill);
    overflow: hidden; position: relative;
    border: 1px solid var(--accent-tint-strong);
  }
  .quota-meter .bar::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--pct, 0%); background: var(--accent-strong);
    transition: width 0.2s ease-out;
  }
  .quota-meter.warn { background: var(--warn-tint); color: var(--warn);
                       border-color: var(--warn-line); }
  .quota-meter.warn .bar { border-color: var(--warn-line); }
  .quota-meter.warn .bar::before { background: var(--warn); }
  .quota-meter.hit { background: var(--danger-tint); color: var(--danger);
                      border-color: var(--danger-line); }
  .quota-meter.hit .bar { border-color: var(--danger-line); }
  .quota-meter.hit .bar::before { background: var(--danger); width: 100%; }
  .quota-meter.readonly { background: var(--surface-2); color: var(--muted);
                           border-color: var(--line); }
  .quota-meter.readonly .bar { display: none; }
  .quota-meter a { color: inherit; text-decoration: underline; }

  .quota-banner {
    background: var(--danger-tint); border: 1px solid var(--danger-line);
    color: var(--danger); padding: 0.85em 1.1em;
    border-radius: var(--radius-sm); margin: 0 0 1.2em;
    font-size: 0.95em; line-height: 1.5;
  }

  /* Operator annotation card. Amber tint to read as 'workspace
     metadata, not chain truth' — the chain anchor card stays in
     the default neutral palette. */
  .annotation-card {
    background: var(--warn-tint); border: 1px solid var(--warn-line);
    border-left: 4px solid var(--warn);
    border-radius: 6px; padding: 1em 1.2em;
    margin-top: 1em; color: var(--warn);
  }
  .annotation-card h2 {
    margin: 0 0 0.4em; font-size: 1.05em; color: var(--warn);
  }
  .annotation-card p { margin: 0.35em 0; }
  .annotation-card .annotation-pill {
    display: inline-block; padding: 0.18em 0.55em;
    font-size: 0.82em; letter-spacing: 0.04em;
    background: var(--warn); color: #04121f;
    border-radius: 4px; margin-right: 0.5em;
    text-transform: uppercase; font-weight: 600;
  }
  .annotation-card .meta {
    color: var(--warn); font-size: 0.9em;
  }
  .annotation-card .annotation-text {
    background: var(--warn-tint); border: 1px solid var(--warn-line);
    border-radius: 4px; padding: 0.6em 0.8em;
    margin: 0.6em 0 0.2em; font-style: italic;
    white-space: pre-wrap; word-break: break-word;
    color: var(--ink-soft);
  }
  .quota-banner b { color: var(--danger); }
  .quota-banner a {
    color: var(--danger); font-weight: 600; text-decoration: underline;
  }

  .proof-list { list-style: none; margin: 0; padding: 0; }
  .proof-list li {
    display: flex; flex-direction: column; gap: 0.25em;
    padding: 0.85em 0; border-bottom: 1px solid var(--line);
  }
  .proof-list li:last-child { border-bottom: 0; }
  .proof-list .r-top {
    display: flex; align-items: baseline; gap: 0.7em;
  }
  .proof-list .r-label {
    font-weight: 600; color: var(--ink);
  }
  /* H4: the title is the primary link to the proof detail. Make the
     whole title row read as clickable (pointer + hover tint) while the
     checkbox and meta links stay independently clickable. */
  .proof-list .r-title-link {
    text-decoration: none; cursor: pointer;
    border-radius: var(--radius-sm);
    margin: -0.15em -0.4em; padding: 0.15em 0.4em;
    transition: background 0.12s ease;
  }
  .proof-list .r-title-link:hover {
    background: var(--accent-tint);
  }
  .proof-list .r-title-link:hover .r-label {
    color: var(--accent-strong);
  }
  .proof-list .r-title-link:focus-visible {
    outline: none; box-shadow: var(--ring);
  }
  /* L8: an unnamed proof reads as "no title", not a real one. */
  .proof-list .r-label-unnamed {
    font-weight: 400; font-style: italic; color: var(--muted-soft);
  }
  .proof-list .r-mode,
  .proof-table .r-mode,
  .rail-activity .r-mode {
    display: inline-block; padding: 0.12em 0.6em;
    font-size: 0.72em; font-weight: 600; letter-spacing: 0.05em;
    background: var(--accent-tint); color: var(--accent);
    border: 1px solid var(--accent-tint-strong);
    border-radius: var(--radius-sm); text-transform: uppercase;
  }
  .proof-list .r-mode.sealed,
  .proof-table .r-mode.sealed,
  .rail-activity .r-mode.sealed {
    background: var(--sealed-tint); color: var(--sealed);
    border-color: var(--sealed-line);
  }
  .proof-list .r-meta {
    color: var(--muted); font-size: 0.88em;
    display: flex; gap: 1em; flex-wrap: wrap;
  }
  /* H4: meta links (e.g. "view tx") carry a persistent underline + the
     accent color so they're clearly distinguishable from the grey meta
     text around them (was measured at 1.54:1 link-vs-meta). */
  .proof-list .r-meta a {
    color: var(--accent-strong); text-decoration: underline;
    text-underline-offset: 2px;
  }
  .proof-list .r-meta a:hover { color: var(--accent); }
  .proof-list .r-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em; color: var(--ink-soft);
  }

  /* Bulk-select toolbar — appears when one or more proofs are checked. */
  .bulk-toolbar {
    position: sticky; top: 56px;
    display: flex; align-items: center; gap: 1em;
    padding: 0.7em 1em;
    background: var(--surface-1);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin: 0 0 1em;
    box-shadow: var(--shadow-md);
    z-index: 5;
  }
  /* Buttons inside the toolbar use a contrasting raised surface so
     they read as actionable instead of blending into the toolbar bg. */
  .bulk-toolbar .btn.ghost {
    background: var(--surface-3);
    border-color: var(--line-strong);
  }
  .bulk-toolbar .btn.ghost:hover {
    background: var(--accent-tint);
    border-color: var(--accent);
  }
  .bulk-toolbar .btn.ghost.danger {
    background: var(--surface-3);
  }
  .bulk-toolbar .btn.ghost.danger:hover {
    background: var(--danger-tint);
    border-color: var(--danger);
  }
  .bulk-toolbar[hidden] { display: none; }
  .bulk-count { color: var(--ink); font-size: 0.95em; }
  .bulk-count b { color: var(--accent); }
  .bulk-actions {
    display: flex; gap: 0.5em; align-items: center;
    margin-left: auto;
  }
  .bulk-move-wrap { position: relative; }
  .bulk-move-menu {
    list-style: none; margin: 0; padding: 0.4em 0;
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 12em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 6;
  }
  .bulk-move-menu[hidden] { display: none; }
  .bulk-move-menu li button {
    display: block; width: 100%; text-align: left;
    padding: 0.5em 0.9em; background: none; border: 0;
    color: var(--ink); font: inherit; cursor: pointer;
  }
  .bulk-move-menu li button:hover {
    background: var(--accent-tint); color: var(--accent);
  }
  .btn.ghost.danger { color: var(--danger); border-color: var(--danger-line); }
  .btn.ghost.danger:hover {
    background: var(--danger-tint); border-color: var(--danger);
    color: var(--danger);
  }
  /* L18: a faint-grey full-opacity "Clear" read as disabled. Lift it to
     a brighter ghost-button treatment so it's clearly actionable. */
  .btn-link {
    background: none; border: 1px solid transparent; color: var(--ink-dim);
    cursor: pointer; font: inherit; padding: 0.4em 0.6em;
    border-radius: var(--radius-sm); transition: color 0.12s ease,
    background 0.12s ease, border-color 0.12s ease;
  }
  .btn-link:hover {
    color: var(--accent); background: var(--accent-tint);
    border-color: var(--accent-tint-strong);
  }

  .bulk-select-all {
    padding: 0.6em 0; color: var(--muted); font-size: 0.88em;
    border-bottom: 1px solid var(--line); margin-bottom: 0.2em;
  }
  .bulk-select-all label {
    display: inline-flex; align-items: center; gap: 0.45em; cursor: pointer;
  }

  /* Proof list: checkbox column. */
  .proof-list li.bulk-row {
    flex-direction: row; gap: 0.7em; align-items: flex-start;
  }
  /* N6: the selection checkbox gets a clear pointer + hover affordance
     so it reads as an interactive target, not decoration. */
  .proof-list li.bulk-row .bulk-check {
    flex: 0 0 auto; padding-top: 0.2em; cursor: pointer;
    border-radius: var(--radius-sm); margin: -0.15em -0.2em;
    padding-left: 0.2em; padding-right: 0.2em;
    transition: background 0.12s ease;
  }
  .proof-list li.bulk-row .bulk-check:hover {
    background: var(--accent-tint);
  }
  .proof-list li.bulk-row .bulk-check input,
  .bulk-select-all input { cursor: pointer; }
  .proof-list li.bulk-row .r-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.25em;
  }

  /* Flash banner — surfaces the move/delete outcome on the destination. */
  .flash-banner {
    padding: 0.7em 1em; margin: 0 0 1em;
    background: var(--ok-tint); color: var(--ok);
    border: 1px solid var(--ok-line); border-radius: var(--radius);
    font-size: 0.93em;
  }
  .flash-banner.warn {
    background: var(--warn-tint); color: var(--warn);
    border-color: var(--warn-line);
  }
  .flash-banner .flash-dismiss {
    float: right; background: none; border: 0;
    color: inherit; cursor: pointer; font-size: 1.1em; line-height: 1;
  }

  .mode-picker {
    display: flex; gap: 0.7em; margin: 0 0 1em;
  }
  .mode-picker-opt {
    flex: 1; cursor: pointer;
    padding: 0.85em 1em;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface);
    transition: border-color 0.12s, background 0.12s;
  }
  .mode-picker-opt input[type="radio"] {
    position: absolute; left: -9999px;
  }
  .mode-picker-opt .opt-name {
    font-weight: 600; color: var(--ink);
    font-size: 0.98em;
  }
  .mode-picker-opt .opt-tagline {
    margin-top: 0.25em;
    color: var(--muted); font-size: 0.88em; line-height: 1.45;
  }
  .mode-picker-opt.selected { border-color: var(--accent-strong);
                              background: var(--accent-tint); }
  .mode-picker-opt.selected .opt-name { color: var(--accent); }
  .mode-picker-opt.selected.sealed { border-color: var(--sealed);
                                     background: var(--sealed-tint); }
  .mode-picker-opt.selected.sealed .opt-name { color: var(--sealed); }
  /* Keyboard focus indicator: the radios are off-screen, so reflect
     focus on the wrapping card (mirrors the .selected accent). */
  .mode-picker-opt:focus-within {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px var(--accent-tint);
  }
  .mode-picker-opt.sealed:focus-within { border-color: var(--sealed); }
  .sealed-fields {
    margin: 0 0 0.9em; padding: 0.85em 1em;
    background: var(--sealed-tint); border: 1px solid var(--sealed-line);
    border-radius: 6px;
    color: var(--ink-soft); font-size: 0.92em;
  }
  .sealed-fields label {
    display: block; font-weight: 600; font-size: 0.9em;
    color: var(--ink); margin-bottom: 0.3em;
  }
  .sealed-fields select {
    padding: 0.45em 0.6em; font-size: 0.94em;
    border: 1px solid var(--line); border-radius: 4px;
    font-family: inherit; background: var(--surface); color: var(--ink);
  }
  .sealed-fields p { margin: 0.7em 0 0; line-height: 1.5; }
  .sealed-fields[hidden] { display: none; }

  .sealed-submode {
    border: 0; padding: 0; margin: 0 0 0.8em;
    display: flex; flex-direction: column; gap: 0.5em;
  }
  .sealed-submode legend {
    font-weight: 600; font-size: 0.9em; color: var(--ink);
    margin-bottom: 0.3em; padding: 0;
  }
  .sealed-submode label {
    display: flex; gap: 0.5em; align-items: flex-start;
    padding: 0.5em 0.7em; border-radius: var(--radius-sm);
    border: 1px solid var(--sealed-line);
    background: color-mix(in srgb, var(--sealed-tint) 60%, transparent);
    cursor: pointer;
  }
  .sealed-submode label:has(input:checked) {
    background: var(--sealed-tint);
    border-color: var(--sealed);
  }
  .sealed-submode label:focus-within {
    border-color: var(--sealed);
    box-shadow: 0 0 0 2px var(--sealed-tint);
  }
  .sealed-submode label b { color: var(--sealed); }
  .sealed-submode input[type="radio"] {
    margin-top: 0.2em; flex: 0 0 auto;
  }
  #retain_days_row[hidden] { display: none; }

  .anchor-card { padding: 1.6em 1.8em;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  }
  .anchor-card .file-drop {
    border: 2px dashed var(--line-strong); border-radius: var(--radius);
    padding: 1.6em 1em; text-align: center;
    background: var(--surface-2); cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .anchor-card .file-drop.drag {
    border-color: var(--accent); background: var(--accent-tint);
  }
  .anchor-card .file-drop.ready {
    border-color: var(--ok); background: var(--ok-tint);
  }
  .anchor-card .file-drop input { display: none; }
  .anchor-card .file-drop .picker-label {
    color: var(--ink-soft); font-size: 0.95em;
  }
  .anchor-card .file-drop .picker-link {
    color: var(--accent); cursor: pointer;
    text-decoration: underline;
  }
  .anchor-card .file-drop .file-info {
    margin-top: 0.4em; color: var(--ink); font-weight: 500;
  }
  .anchor-card .file-drop .file-info code {
    color: var(--muted); font-weight: 400; font-size: 0.88em;
  }
  .anchor-card form > * + * { margin-top: 1em; }
  .anchor-card .progress-text {
    color: var(--muted); font-size: 0.92em;
    /* Reserve ~2 lines so an in-flight multi-line status doesn't
       shift the submit button down (CLS). */
    min-height: 2.6em; line-height: 1.4;
  }
  .anchor-card button[type="submit"] {
    padding: 0.75em 1.4em; font-size: 1em; font-weight: 600;
    background: var(--accent-strong); color: #04121f;
    border: 0; border-radius: 6px; cursor: pointer;
    font-family: inherit;
    clip-path: polygon(var(--radius-sm) 0, 100% 0, 100% calc(100% - var(--radius-sm)), calc(100% - var(--radius-sm)) 100%, 0 100%, 0 var(--radius-sm));
  }
  .anchor-card button[type="submit"]:disabled {
    background: var(--line-strong); color: var(--muted); cursor: not-allowed;
  }
  .anchor-card button[type="submit"]:hover:not(:disabled) {
    background: var(--accent); box-shadow: var(--glow);
  }
  .anchor-card .anchor-hint {
    margin-top: 0.5em; color: var(--muted); font-size: 0.85em;
  }

  .share-list { list-style: none; margin: 0; padding: 0; }
  .share-list li {
    padding: 0.85em 0; border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 0.4em;
  }
  .share-list li:last-child { border-bottom: 0; }
  .share-list .share-url-row {
    display: flex; gap: 0.5em; align-items: stretch;
    flex-wrap: wrap;
  }
  .share-list input.share-url {
    flex: 1; min-width: 18em;
    padding: 0.5em 0.75em; font-size: 0.92em;
    border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--mono);
    background: var(--inset); color: var(--ink-soft);
  }
  .share-list .share-meta {
    color: var(--muted); font-size: 0.86em;
  }
  .share-list .share-actions {
    display: flex; gap: 0.5em; align-items: center;
  }
  .share-list button.copy {
    padding: 0.5em 0.9em; font-size: 0.9em; font-weight: 600;
    background: var(--surface); color: var(--accent-strong);
    border: 1px solid var(--accent-strong); border-radius: 4px;
    cursor: pointer; font-family: inherit;
    min-height: 44px;  /* L1: share Copy was ~32px tap target */
  }
  .share-list button.copy:hover {
    background: var(--accent-strong); color: #04121f;
  }
  .share-list button.copy.copied {
    background: var(--ok); border-color: var(--ok); color: #04121f;
  }
  .share-list button.revoke {
    padding: 0.5em 0.9em; font-size: 0.9em;
    background: var(--surface); color: var(--danger);
    border: 1px solid var(--danger-line); border-radius: 4px;
    cursor: pointer; font-family: inherit;
    min-height: 44px;  /* L1/L23: share Revoke was ~32px tap target */
  }
  .share-list button.revoke:hover {
    border-color: var(--danger);
  }

  /* API keys management */
  .api-fresh {
    background: var(--ok-tint); border: 1px solid var(--ok-line);
    border-radius: 8px; padding: 1.2em 1.4em; margin: 0 0 1.6em;
  }
  .api-fresh h2 {
    margin: 0 0 0.4em; font-size: 1.05em; color: var(--ok);
  }
  .api-fresh p { margin: 0.4em 0; color: var(--ink-soft); font-size: 0.95em; }
  .api-fresh .secret-row {
    display: flex; gap: 0.5em; align-items: stretch;
    flex-wrap: wrap; margin-top: 0.6em;
  }
  .api-fresh input.secret {
    flex: 1; min-width: 18em;
    /* N10: the one-time secret is read character-by-character; bump
       size + add tracking so the underscores in sk_..._ tokens stay
       legible in JetBrains Mono (they nearly vanished at 0.92em). */
    padding: 0.6em 0.75em; font-size: 1em; letter-spacing: 0.04em;
    border: 1px solid var(--ok-line); border-radius: 4px;
    font-family: var(--mono);
    background: var(--surface); color: var(--ink);
  }
  .api-fresh button.copy {
    padding: 0.55em 1em; font-size: 0.92em; font-weight: 600;
    background: var(--ok); color: #04121f;
    border: 0; border-radius: 4px; cursor: pointer;
    font-family: inherit;
  }
  .api-fresh button.copy:hover { background: var(--ok); filter: brightness(0.9); }
  .api-fresh button.copy.copied { background: var(--ok); filter: brightness(0.8); }

  .key-list { list-style: none; margin: 0; padding: 0; }
  .key-list li {
    padding: 0.95em 0; border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 0.35em;
  }
  .key-list li:last-child { border-bottom: 0; }
  .key-list .key-top {
    display: flex; align-items: baseline; gap: 0.7em;
    flex-wrap: wrap;
  }
  .key-list .key-name { font-weight: 600; color: var(--ink); }
  .key-list .key-prefix {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em; color: var(--muted);
  }
  .key-list .key-meta {
    color: var(--muted); font-size: 0.86em;
    display: flex; gap: 1em; flex-wrap: wrap;
  }
  /* L1: webhook-list Copy button (rendered in .key-meta) had no
     styling, falling to the ~21px browser-default tap target. Give it
     the same small-outline treatment as the share Copy + a 44px touch
     target. N14: let the URL+Copy span wrap and breathe at narrow
     widths so the button doesn't crowd a long webhook URL. */
  .key-list .key-meta button.copy {
    padding: 0.4em 0.85em; font-size: 0.86em; font-weight: 600;
    background: var(--surface); color: var(--accent-strong);
    border: 1px solid var(--accent-strong); border-radius: 4px;
    cursor: pointer; font-family: inherit;
    min-height: 44px; vertical-align: middle;
  }
  .key-list .key-meta button.copy:hover {
    background: var(--accent-strong); color: #04121f;
  }
  .key-list .key-meta button.copy.copied {
    background: var(--ok); border-color: var(--ok); color: #04121f;
  }
  /* N14: the URL + Copy span is the widest item in the meta row; let
     it claim the full row and align its contents so a 768px-wide
     viewport stacks the button under a long URL instead of crowding. */
  .key-list .key-meta > span:first-child {
    display: inline-flex; align-items: center; flex-wrap: wrap;
    gap: 0.3em 0.5em; min-width: 0; max-width: 100%;
  }
  .key-list .key-meta > span:first-child code { word-break: break-all; }
  @media (max-width: 768px) {
    .key-list .key-meta > span:first-child { width: 100%; }
  }
  .key-list li.revoked { opacity: 0.55; }
  .key-list li.revoked .key-name::after {
    content: " · revoked";
    color: var(--danger); font-weight: 400; font-size: 0.85em;
  }
  .scope-badge {
    display: inline-block; padding: 0.08em 0.55em;
    font-size: 0.78em; letter-spacing: 0.03em;
    background: var(--accent-tint); color: var(--accent);
    border-radius: 3px; margin-right: 0.3em;
    font-family: var(--mono);
  }
  .key-list form.revoke-form { display: inline; margin: 0; }
  .key-list button.revoke {
    padding: 0.4em 0.85em; font-size: 0.88em;
    background: var(--surface); color: var(--danger);
    border: 1px solid var(--danger-line); border-radius: 4px;
    cursor: pointer; font-family: inherit;
    min-height: 44px;  /* L1/L23: key Revoke (destructive) was ~29px tap target */
  }
  .key-list button.revoke:hover { border-color: var(--danger); }

  form.app-form .scope-row {
    display: flex; flex-direction: column; gap: 0.4em;
    padding: 0.6em 0; margin: 0;
  }
  form.app-form .scope-row label {
    font-weight: 400; font-size: 0.94em; color: var(--ink-soft);
    display: flex; gap: 0.5em; align-items: flex-start;
  }
  form.app-form .scope-row label code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em; color: var(--accent-strong);
  }
  form.app-form input[type="text"] {
    padding: 0.7em 0.9em; font-size: 1em;
    border: 1px solid var(--line); border-radius: 6px;
    font-family: inherit;
  }
  form.app-form input[type="text"]:focus {
    outline: none; border-color: var(--accent);
  }

  .scope-badge.folder-scope {
    background: var(--warn-tint); color: var(--warn);
    border: 1px solid var(--warn-line);
  }
  .scope-badge.folder-scope.all {
    background: var(--ok-tint); color: var(--ok);
    border-color: var(--ok-line);
  }

  /* Activity feed (Phase 7) */
  .activity-list { list-style: none; margin: 0; padding: 0; }
  .activity-list li {
    padding: 0.85em 0; border-bottom: 1px solid var(--line);
    display: flex; gap: 0.9em; align-items: flex-start;
  }
  .activity-list li:last-child { border-bottom: 0; }
  .activity-list .when {
    flex: 0 0 8em; color: var(--muted);
    font-size: 0.85em; padding-top: 0.1em;
  }
  .activity-list .when abbr {
    text-decoration: none; cursor: help;
    border-bottom: 1px dotted var(--line);
  }
  .activity-list .body { flex: 1; min-width: 0; }
  .activity-list .actor {
    color: var(--ink); font-weight: 500; font-size: 0.95em;
  }
  .activity-list .actor.kind-api { color: var(--sealed); }
  .activity-list .actor.kind-system { color: var(--muted); font-style: italic; }
  .activity-list .actor .api-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
  }
  .activity-list .what {
    color: var(--ink-soft); font-size: 0.94em;
    margin-top: 0.15em; line-height: 1.5;
  }
  .activity-list .what a { color: var(--accent); text-decoration: none; }
  .activity-list .what a:hover { text-decoration: underline; }
  .activity-list .what code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em; color: var(--muted);
  }
  .activity-list .pill {
    display: inline-block; padding: 0.05em 0.5em;
    font-size: 0.74em; letter-spacing: 0.04em;
    background: var(--accent-tint); color: var(--accent);
    border-radius: 3px; text-transform: uppercase;
    margin-left: 0.4em;
  }
  .activity-list .pill.sealed { background: var(--sealed-tint); color: var(--sealed); }
  .activity-list .tombstone {
    color: var(--muted); font-style: italic; font-size: 0.9em;
  }

  /* Phase 8a: proof category pill on the proof page. Default
     ("output") is suppressed; only non-default categories render
     a visible pill so the dashboard stays uncluttered for the
     overwhelmingly common case. */
  .category-pill {
    display: inline-block; padding: 0.18em 0.7em;
    font-size: 0.78em; font-weight: 600; letter-spacing: 0.02em;
    background: var(--warn-tint); color: var(--warn);
    border: 1px solid var(--warn-line); border-radius: 999px;
    margin-left: 0.6em; vertical-align: middle;
  }

  /* Off-chain agent-session grouping key (workspace-only metadata —
     never on chain). Visually distinct from the category pill so the
     reader doesn't conflate "chain-bound" with "operator label". */
  .session-pill {
    display: inline-block; padding: 0.18em 0.7em;
    font-size: 0.78em; font-weight: 600; letter-spacing: 0.02em;
    background: var(--sealed-tint); color: var(--sealed);
    border: 1px solid var(--sealed-line); border-radius: 999px;
    margin-left: 0.6em; vertical-align: middle;
    font-family: var(--mono, monospace);
  }
  .session-pill code { font-family: inherit; }

  /* Phase 8b: manifest leaves table on the proof page. */
  .manifest-summary { margin: 0.4em 0; }
  .manifest-summary code {
    font-size: 0.84em; word-break: break-all;
  }
  .manifest-leaves {
    width: 100%; border-collapse: collapse;
    font-size: 0.9em; margin: 0.6em 0 0;
  }
  .manifest-leaves th, .manifest-leaves td {
    padding: 0.5em 0.6em; text-align: left;
    border-bottom: 1px solid var(--rule);
  }
  .manifest-leaves th {
    background: var(--surface-3); font-weight: 600;
    color: var(--ink-soft); font-size: 0.85em;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .manifest-leaves td.idx { color: var(--muted); font-variant-numeric: tabular-nums; }
  .manifest-leaves td.sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                             font-size: 0.82em; color: var(--ink-soft);
                             word-break: break-all; }
  .manifest-leaves td.label { word-break: break-word; }
  .manifest-leaves tr:hover td { background: var(--surface-3); }
  .manifest-truncated {
    color: var(--muted); font-size: 0.88em; margin-top: 0.4em;
  }

  /* Recipient (no-dashboard) view chrome */
  .recipient-shell {
    max-width: 640px; margin: 0 auto; padding: 2.4em 1.4em 4em;
  }
  .recipient-shell .header {
    color: var(--muted); font-size: 0.9em; margin-bottom: 0.4em;
  }
  .recipient-shell h1 {
    font-size: 1.55em; margin: 0 0 0.4em;
  }
  .recipient-shell .from-line {
    color: var(--ink-soft); margin: 0 0 1.6em;
  }
  .recipient-shell .audit-line {
    margin-top: 1.6em; color: var(--muted); font-size: 0.85em;
  }

  /* Trust footer — appears on every dashboard / login page so a
     procurement-leaning visitor on app.* can reach the privacy
     and security posture pages without bouncing back to apex.
     Cross-vhost links are absolute (multi-vhost gotcha). */
  footer.app-footer {
    border-top: 1px solid var(--line);
    margin-top: 3em; padding: 1.4em 1.2em 2em;
    color: var(--muted); font-size: 0.88em;
  }
  footer.app-footer .app-footer-inner {
    max-width: 920px; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 0.4em 1.4em;
    align-items: baseline;
  }
  footer.app-footer a {
    color: var(--muted); text-decoration: none;
  }
  footer.app-footer a:hover { color: var(--accent); }
  footer.app-footer .sep { color: var(--line); }

  /* Billing: plan-comparison grid + buttons (previously referenced
     classes were undefined, so cards rendered stacked with default
     browser button styling). */
  .modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1em;
  }
  .mode-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1em 1.2em;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  }
  .mode-card h3 {
    margin: 0 0 0.2em; font-size: 1.05em;
    color: var(--ink); letter-spacing: -0.005em;
  }
  .mode-card.standard { border-top: 3px solid var(--accent-strong); }
  .mode-card.sealed { border-top: 3px solid var(--sealed); }
  .mode-card p { color: var(--ink-soft); font-size: 0.94em; margin: 0.35em 0; }
  .mode-card form { margin-top: auto; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.6em 1.1em; font-size: 0.95em; font-weight: 600;
    border-radius: var(--radius-sm); cursor: pointer;
    border: 1px solid transparent; font-family: inherit;
    text-decoration: none; line-height: 1.2;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .btn.primary {
    background: var(--accent-strong); color: #04121f;
    border-color: var(--accent-strong);
    clip-path: polygon(var(--radius-sm) 0, 100% 0, 100% calc(100% - var(--radius-sm)), calc(100% - var(--radius-sm)) 100%, 0 100%, 0 var(--radius-sm));
  }
  .btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
  .btn.ghost {
    background: var(--surface); color: var(--ink);
    border-color: var(--line-strong);
  }
  .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* In-theme destructive confirmation modal (M9). Replaces the native
     confirm() so dark theme + focus order are under our control. */
  .ss-confirm-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 1.2em;
    background: rgba(2, 6, 12, 0.66);
  }
  .ss-confirm-overlay[hidden] { display: none; }
  .ss-confirm-dialog {
    max-width: 26em; width: 100%;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.3em 1.4em 1.2em;
  }
  .ss-confirm-msg {
    margin: 0 0 1.1em; font-size: 0.98em; line-height: 1.5;
    color: var(--ink);
  }
  .ss-confirm-actions {
    display: flex; gap: 0.6em; justify-content: flex-end;
    flex-wrap: wrap;
  }
  .ss-confirm-go {
    padding: 0.6em 1.1em; font-size: 0.95em; font-weight: 600;
    background: var(--danger); color: #1a0606;
    border: 1px solid var(--danger); border-radius: var(--radius-sm);
    cursor: pointer; font-family: inherit; line-height: 1.2;
  }
  .ss-confirm-go:hover { filter: brightness(0.92); }

  /* Styled file-input (M7). The native <input type=file> is visually
     hidden but kept in the DOM (same id/name, still submits + still
     fires the JS hash/HMAC validators). A <label> styled like a ghost
     button drives it; .file-name echoes the chosen file in page text. */
  .file-field {
    display: flex; align-items: center; gap: 0.7em;
    flex-wrap: wrap; margin: 0.3em 0;
  }
  .file-field input[type=file] {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .file-field .file-trigger {
    display: inline-flex; align-items: center;
    padding: 0.5em 1em; font-size: 0.92em; font-weight: 600;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    cursor: pointer; font-family: inherit; line-height: 1.2;
  }
  .file-field .file-trigger:hover {
    border-color: var(--accent); color: var(--accent);
  }
  .file-field input[type=file]:focus + .file-trigger {
    border-color: var(--accent); box-shadow: var(--glow);
  }
  .file-field .file-name {
    font-size: 0.9em; color: var(--muted);
  }

  /* Workspace settings sub-nav band — promoted from the buried meta
     line at the bottom of the dashboard page. Visible on workspace +
     folder pages. */
  .ws-subnav {
    display: flex; flex-wrap: wrap; gap: 0.5em;
    margin: 0.8em 0 1.5em;
    padding: 0.4em 0;
    border-bottom: 1px solid var(--line);
  }
  .ws-subnav a {
    color: var(--muted); text-decoration: none;
    font-size: 0.92em; padding: 0.4em 0.8em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
  }
  .ws-subnav a:hover {
    color: var(--accent); background: var(--accent-tint);
  }
  .ws-subnav a.current {
    color: var(--ink); background: var(--surface-2);
    border-color: var(--line);
  }

  /* Quick-anchor CTA card — primary action surfaced on the workspace
     dashboard so the user doesn't have to drill into a folder first. */
  .quick-anchor {
    display: flex; align-items: center; gap: 1em;
    padding: 1.2em 1.4em;
    background: linear-gradient(135deg,
      var(--accent-tint) 0%, var(--surface) 70%);
    border: 1px solid var(--accent-tint-strong);
    border-left: 4px solid var(--accent-strong);
    border-radius: var(--radius);
    margin: 0 0 1.2em;
  }
  .quick-anchor .qa-body { flex: 1; min-width: 0; }
  .quick-anchor h2 {
    margin: 0 0 0.15em; font-size: 1.05em; color: var(--ink);
    letter-spacing: -0.005em;
  }
  .quick-anchor p {
    margin: 0; color: var(--ink-soft); font-size: 0.93em;
  }
  .quick-anchor .qa-action { flex: 0 0 auto; }
  /* Secondary variant: flat surface, no accent rail — reads as the
     companion action below the primary "Anchor a new proof" card. */
  .quick-anchor.alt {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
  }

  /* Section labels above grouped lists. */
  .section-label {
    font-size: 0.78em; font-weight: 600; letter-spacing: 0.08em;
    color: var(--muted); text-transform: uppercase;
    margin: 0.4em 0 0.5em;
  }
  /* Bold mixed-case card heading (console bottom cards) — matches the rail
     card titles + the concept's "Recent proofs" / "Folders" headings. */
  .section-head {
    font-size: 1.02em; font-weight: 600; color: var(--ink);
    letter-spacing: -0.005em; margin: 0 0 0.85em;
  }
  /* Visually-hidden but screen-reader-available (table action-column
     headers, etc.). */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }

  @media (max-width: 520px) {
    .quick-anchor {
      flex-direction: column; align-items: flex-start; gap: 0.7em;
    }
    .ws-subnav { gap: 0.2em; }
    .ws-subnav a { padding: 0.4em 0.6em; }
  }

  /* Form input restyle: tokenized so both dark + light render. */
  form.app-form input[type="email"],
  form.app-form input[type="text"],
  .inline-form input[type="text"],
  .sealed-fields select {
    background: var(--surface); color: var(--ink);
  }
  form.app-form input[type="email"]::placeholder,
  form.app-form input[type="text"]::placeholder,
  .inline-form input[type="text"]::placeholder {
    color: var(--muted);
  }

  /* ── Dashboard "proof console" geometry. The console gets its OWN wide
     desktop shell (≈1280–1440px), NOT the narrow 760px docs column, so
     the recent-proofs table + right rail have real room. ── */
  main.app-main.app-main--wide {
    max-width: var(--shell-wide, min(1440px, calc(100vw - 64px)));
    padding-left: 1.6em; padding-right: 1.6em;
  }
  /* Keep the nav + footer rails aligned with the wide console (they
     default to the narrower 1040/920 columns used by every other
     dashboard page). Scoped to the wide page via body.dash-wide. */
  body.dash-wide .app-nav-inner,
  body.dash-wide footer.app-footer .app-footer-inner {
    max-width: var(--shell-wide, min(1440px, calc(100vw - 64px)));
  }
  .dash-grid {
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start;
  }
  .dash-main { min-width: 0; }
  /* Single-column page (below the two-column threshold): the rail spreads
     into a row of cards rather than wasting the full width as a stack. */
  .dash-rail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em;
  }
  /* Two-column console ONLY when there's genuine room for a comfortably
     ≥820px main column beside the 320px rail. Threshold 1300px (not 1280)
     so the main column lands ~840px at the breakpoint — real slack, not
     the sub-pixel 820.8px a 1280 cutover would give. Below this the page
     is single-column, never the squeezed ~670px main of the old 1040px
     shell this replaces. */
  @media (min-width: 1300px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .dash-rail { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .dash-rail { grid-template-columns: 1fr; }
  }

  /* Primary anchor "hero" — the dominant action. Links to the anchor
     page (which has the real drag-drop); there is no in-place hashing,
     so the copy says "continue to the anchor screen", not "drag here". */
  a.anchor-hero { display: block; text-decoration: none; margin: 0 0 1.4em; }
  .anchor-hero-zone {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 0.35em; padding: 2em 2.2em;
    min-height: 150px;
    background: linear-gradient(135deg,
      var(--accent-tint) 0%, var(--surface) 75%);
    border: 1.5px dashed var(--accent-tint-strong);
    border-radius: var(--radius);
  }
  a.anchor-hero:hover .anchor-hero-zone {
    border-color: var(--accent); box-shadow: var(--glow);
  }
  .anchor-hero-eyebrow {
    font-size: 0.74em; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
  }
  .anchor-hero-title {
    font-size: 1.5em; font-weight: 700; color: var(--ink);
    letter-spacing: -0.015em; margin: 0.05em 0;
  }
  .anchor-hero-sub {
    color: var(--ink-soft); font-size: 0.95em; max-width: 560px;
  }
  /* CTA matches .btn.primary (same accent bg + ink) — one clear button. */
  .anchor-hero-cta {
    margin-top: 0.7em; display: inline-block;
    padding: 0.5em 1.1em; border-radius: var(--radius-sm);
    background: var(--accent-strong); color: #04121f;
    font-weight: 600; font-size: 0.92em;
  }
  a.anchor-hero:hover .anchor-hero-cta {
    background: var(--accent); box-shadow: var(--glow);
  }

  /* Secondary actions: a card must NEVER collapse into a vertical text
     chunk — enforce a 360px floor, drop to one column on small screens. */
  .action-row {
    display: grid; grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 16px; margin: 0 0 1.4em;
  }
  .action-row .quick-anchor { margin: 0; min-height: 128px; }
  .action-row .quick-anchor .qa-body { max-width: 520px; }
  @media (max-width: 900px) {
    .action-row { grid-template-columns: 1fr; }
  }

  /* Recent-proofs table. */
  .proof-table-wrap { overflow-x: auto; }
  table.proof-table {
    width: 100%; min-width: 520px; border-collapse: collapse;
    font-size: 0.86em; table-layout: auto;
  }
  .proof-table th {
    text-align: left; font-size: 0.72em; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding: 0 0.7em 0.5em 0; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .proof-table td {
    padding: 0.5em 0.55em; border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .proof-table td:first-child, .proof-table th:first-child { padding-left: 0; }
  .proof-table tr:last-child td { border-bottom: 0; }
  .proof-table .pt-time { color: var(--muted); white-space: nowrap; }
  .proof-table .pt-label {
    color: var(--ink); max-width: 160px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .proof-table .pt-label .pt-id,
  .rail-activity .pt-id {
    color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo,
    monospace; font-size: 0.92em;
  }
  /* Fill the cell height so row links are a comfortable hit target,
     without changing the row's visual rhythm (negative margin offsets
     the padding). */
  .proof-table .pt-folder a, .proof-table .pt-actions a {
    display: inline-block; padding: 0.35em 0; margin: -0.35em 0;
  }
  .proof-table .pt-folder a { color: var(--ink-soft); text-decoration: none; }
  .proof-table .pt-folder a:hover { color: var(--accent); }
  .proof-table .pt-actions { text-align: right; white-space: nowrap; }
  .proof-table .pt-actions a { color: var(--accent); text-decoration: none; }
  .status-chip {
    display: inline-block; padding: 0.1em 0.55em; border-radius: 3px;
    font-size: 0.78em; font-weight: 600; border: 1px solid transparent;
    white-space: nowrap;
  }
  .status-chip.ok { background: var(--ok-tint); color: var(--ok);
                    border-color: var(--ok-line); }
  .status-chip.warn { background: var(--warn-tint); color: var(--warn);
                      border-color: var(--warn-line); }
  /* Phase 3b: terminal broadcast failure (anchor_state "failed"). */
  .status-chip.bad { background: var(--danger-tint); color: var(--danger);
                     border-color: var(--danger-line); }
  .empty-hint { color: var(--muted); font-size: 0.93em; margin: 0.3em 0; }

  /* Right-rail cards. */
  .rail-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1em 1.1em;
  }
  .rail-label {
    font-size: 0.72em; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 0.6em;
  }
  .rail-usage-num { font-size: 1.45em; font-weight: 700; color: var(--ink); }
  .rail-usage-unit { color: var(--ink-soft); font-size: 0.9em; }
  .rail-meter {
    height: 5px; border-radius: 3px; background: var(--accent-tint);
    border: 1px solid var(--accent-tint-strong); overflow: hidden;
    margin: 0.6em 0;
  }
  .rail-meter > i { display: block; height: 100%; width: var(--pct, 0%);
                    background: var(--accent); }
  .rail-meter.warn > i { background: var(--warn); }
  .rail-meter.hit > i { background: var(--danger); }
  .rail-line { font-size: 0.9em; color: var(--ink-soft); margin: 0.25em 0; }
  .rail-line .ok { color: var(--ok); }
  .rail-line .warn { color: var(--warn); }
  .rail-line a { color: var(--accent); text-decoration: none; }
  .rail-activity { list-style: none; margin: 0; padding: 0; }
  .rail-activity li { padding: 0.45em 0; border-bottom: 1px solid var(--line); }
  .rail-activity li:last-child { border-bottom: 0; }
  .rail-activity a { color: var(--ink); text-decoration: none;
                     font-size: 0.9em; display: block; }
  .rail-activity a:hover { color: var(--accent); }
  .rail-activity .ra-time { color: var(--muted); font-size: 0.82em; }

  /* Clickable folder rows. */
  .folder-list a.folder-row {
    display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap;
    text-decoration: none; padding: 0.15em 0; color: inherit;
  }
  .folder-list a.folder-row .folder-name { color: var(--ink); }
  .folder-list a.folder-row:hover .folder-name { color: var(--accent); }
  .folder-list a.folder-row .mr-go {
    margin-left: auto; color: var(--accent); font-size: 0.9em;
    opacity: 0; transition: opacity 0.12s;
  }
  .folder-list a.folder-row:hover .mr-go { opacity: 1; }
  @media (max-width: 560px) {
    .folder-list a.folder-row .mr-go { opacity: 1; }
  }

  /* ============================================================
     "Command console" dashboard redesign (concept: concepts/Dashboard.png).
     Workspace-name head row + KPI stat strip + concept hero + icon action
     cards + two-up Recent proofs / Folders-table + restyled rail. New
     surfaces use plain rounded cards (--radius-lg), no clip-path bevel, to
     match the concept's geometry. Copy stays bound to real data — no
     fabricated block heights / unbacked "all systems operational" claims.
     ============================================================ */

  /* Workspace identity head row (replaces the Proof-console h1 + subnav). */
  .dash-head {
    display: flex; align-items: center; gap: 0.4em 0.8em;
    flex-wrap: wrap; margin: 0 0 1.5em;
  }
  .dash-head .dash-ws-name {
    margin: 0; font-size: 1.5em; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15;
  }
  .dash-head .dash-head-pills {
    display: inline-flex; align-items: center; gap: 0.5em; flex-wrap: wrap;
  }

  /* Shared circular icon badge (stat cards, rail, activity). */
  .ico-badge {
    flex: 0 0 auto; display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-tint); color: var(--accent);
    border: 1px solid var(--accent-tint-strong);
  }
  .ico-badge svg { stroke: currentColor; fill: none;
                   stroke-width: 1.8; stroke-linecap: round;
                   stroke-linejoin: round; }
  .ico-badge.ok { background: var(--ok-tint); color: var(--ok);
                  border-color: var(--ok-line); }
  .ico-badge.warn { background: var(--warn-tint); color: var(--warn);
                    border-color: var(--warn-line); }
  .ico-badge.sealed { background: var(--sealed-tint); color: var(--sealed);
                      border-color: var(--sealed-line); }

  /* ---- Proof detail page (the post-anchor proof proof) ---- */
  .rcpt-head { display: flex; gap: 1em; align-items: flex-start;
               margin: 0.4em 0 1.6em; }
  .rcpt-head .ico-badge { width: 46px; height: 46px; }
  .rcpt-head .ico-badge svg { width: 24px; height: 24px; }
  .rcpt-head-main { flex: 1; min-width: 0; }
  .rcpt-head-main h1 { margin: 0; font-size: 1.5em; font-weight: 700;
                       letter-spacing: -0.01em; color: var(--ink); }
  .rcpt-head-sub { margin: 0.35em 0 0; color: var(--muted); font-size: 0.95em;
                   line-height: 1.5; max-width: 64ch; }
  .rcpt-head-actions { flex: 0 0 auto; display: flex; gap: 0.6em;
                       align-items: center; flex-wrap: wrap; }
  .rcpt-back {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.5em 0.95em; font-size: 0.9em; font-weight: 600;
    color: var(--ink); background: var(--surface-1);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    text-decoration: none;
  }
  .rcpt-back:hover { border-color: var(--accent); color: var(--accent); }

  .pill-anchored {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.2em 0.6em; border-radius: 999px; font-size: 0.8em;
    font-weight: 600; background: var(--ok-tint); color: var(--ok);
    border: 1px solid var(--ok-line);
  }
  .pill-pending {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.2em 0.6em; border-radius: 999px; font-size: 0.8em;
    font-weight: 600; background: var(--warn-tint); color: var(--warn);
    border: 1px solid var(--warn-line);
  }
  /* Phase 3b: terminal broadcast failure (anchor_state "failed") —
     same pill geometry, the dashboard's danger tokens. */
  .pill-failed {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.2em 0.6em; border-radius: 999px; font-size: 0.8em;
    font-weight: 600; background: var(--danger-tint); color: var(--danger);
    border: 1px solid var(--danger-line);
  }
  .pill-mode {
    display: inline-block; padding: 0.15em 0.55em; border-radius: 5px;
    font-size: 0.8em; font-weight: 600; background: var(--accent-tint);
    color: var(--accent-strong); border: 1px solid var(--accent-tint-strong);
  }
  .pill-mode.sealed { background: var(--sealed-tint); color: var(--sealed);
                      border-color: var(--sealed-line); }

  .rcpt-summary-head { display: flex; align-items: center; gap: 0.7em;
                       margin: 0 0 1.1em; }
  .rcpt-summary-head .ico-badge { width: 40px; height: 40px; }
  .rcpt-summary-head .ico-badge svg { width: 21px; height: 21px; }
  /* Hexagon icon frame (concept's shield-in-hex). clip-path replaces the
     circle; border is dropped (clip-path would shear it). */
  .ico-badge.hex { border-radius: 0; border: 0;
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%,
                       75% 93.3%, 25% 93.3%, 0 50%); }
  .rcpt-summary-title { font-size: 1.1em; font-weight: 700; color: var(--ink); }
  .rcpt-summary-body { display: flex; gap: 1.6em; align-items: flex-start; }
  .rcpt-summary-body .rcpt-fields { flex: 1; min-width: 0; }
  .rcpt-qr-wrap { flex: 0 0 auto; text-align: center; }
  .rcpt-qr { width: 112px; height: 112px; background: #fff; border-radius: 8px;
             padding: 7px; box-sizing: border-box; }
  .rcpt-qr svg { width: 100%; height: 100%; display: block; }
  .rcpt-qr-cap { display: block; margin-top: 0.45em; font-size: 0.74em;
                 color: var(--muted); max-width: 112px; line-height: 1.3; }
  @media (max-width: 560px) {
    .rcpt-summary-body { flex-direction: column-reverse; align-items: center; }
  }
  .rcpt-fields {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1em 1.4em;
  }
  .rcpt-field { min-width: 0; }
  .rcpt-field .k {
    display: block; font-size: 0.72em; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
    margin-bottom: 0.25em;
  }
  .rcpt-field .v { font-size: 0.95em; color: var(--ink); word-break: break-word; }
  .rcpt-field .v code { font-size: 0.86em; color: var(--ink-soft); }
  .rcpt-field .v a { color: var(--accent); text-decoration: none; }
  .rcpt-field .v a:hover { text-decoration: underline; }
  @media (max-width: 640px) {
    .rcpt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .rcpt-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; margin: 1.2em 0 0;
  }
  @media (max-width: 560px) { .rcpt-actions { grid-template-columns: 1fr; } }
  .rcpt-action {
    display: flex; flex-direction: column; gap: 0.55em;
    padding: 1.15em 1.25em; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .rcpt-action-head { display: flex; align-items: center; gap: 0.6em; }
  .rcpt-action-head .ico-badge { width: 34px; height: 34px; }
  .rcpt-action-head .ico-badge svg { width: 18px; height: 18px; }
  .rcpt-action h3 { margin: 0; font-size: 1em; font-weight: 600;
                    color: var(--ink); letter-spacing: -0.005em; }
  .rcpt-action p { margin: 0; color: var(--muted); font-size: 0.88em;
                   line-height: 1.45; }
  .rcpt-action .btn-row {
    display: flex; flex-direction: column; gap: 0.5em;
    margin-top: auto; padding-top: 0.35em;
  }
  .rcpt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4em; padding: 0.55em 0.9em; border-radius: 6px;
    font-size: 0.9em; font-weight: 600; text-decoration: none;
    font-family: inherit; cursor: pointer; line-height: 1.2;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  }
  .rcpt-btn.primary { background: var(--accent-strong); color: #04121f; border: 0; }
  .rcpt-btn.primary:hover { background: var(--accent); box-shadow: var(--glow); }
  .rcpt-btn.ghost { background: transparent; color: var(--ink);
                    border: 1px solid var(--line-strong); }
  .rcpt-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
  .rcpt-btn.ok { background: var(--ok); color: #04140c; border: 0; }
  .rcpt-btn.ok:hover { filter: brightness(1.08); box-shadow: var(--glow); }
  .rcpt-btn.sealed { background: var(--sealed); color: #150f25; border: 0; }
  .rcpt-btn.sealed:hover { filter: brightness(1.08); box-shadow: var(--glow); }

  /* Per-card accent theming (concept: green/blue/purple/amber). A faint tint
     wash + a colored icon badge; buttons carry the matching variant above. */
  .rcpt-action.c-keep   { background: color-mix(in srgb, var(--ok-tint) 32%, var(--surface)); }
  .rcpt-action.c-share  { background: color-mix(in srgb, var(--accent-tint) 45%, var(--surface)); }
  .rcpt-action.c-verify { background: color-mix(in srgb, var(--sealed-tint) 32%, var(--surface)); }
  .rcpt-action.c-proves { background: color-mix(in srgb, var(--warn-tint) 30%, var(--surface)); }

  /* Inline share link + Copy inside the Share card (concept card 2). */
  .rcpt-share-inline { display: flex; gap: 0.5em; margin-top: 0.1em; }
  .rcpt-share-url {
    flex: 1; min-width: 0; padding: 0.5em 0.7em; font-size: 0.8em;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: 6px; color: var(--ink-soft);
  }
  .rcpt-share-url:focus { outline: none; border-color: var(--accent); }
  .rcpt-link-down {
    display: inline-block; margin-top: 0.5em; color: var(--accent);
    font-size: 0.82em; font-weight: 600; text-decoration: none;
  }
  .rcpt-link-down:hover { text-decoration: underline; }

  .rcpt-checklist { list-style: none; margin: 0; padding: 0;
                    display: flex; flex-direction: column; gap: 0.45em; }
  .rcpt-checklist li { display: flex; gap: 0.5em; align-items: flex-start;
                       color: var(--ink-dim); font-size: 0.88em; line-height: 1.4; }
  .rcpt-checklist li svg { flex: 0 0 auto; width: 16px; height: 16px;
                           color: var(--ok); stroke: currentColor; fill: none;
                           stroke-width: 2.2; stroke-linecap: round;
                           stroke-linejoin: round; margin-top: 0.1em; }
  .rcpt-checklist.amber li svg { color: var(--warn); }

  .rcpt-journey { list-style: none; margin: 0; padding: 0; }
  .rcpt-journey li { position: relative; display: flex; gap: 0.7em;
                     padding: 0 0 1.1em; }
  .rcpt-journey li:last-child { padding-bottom: 0; }
  .rcpt-journey li:not(:last-child)::before {
    content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 0;
    width: 1px; background: var(--line-strong);
  }
  .rcpt-journey .jrny-dot {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ok-tint); color: var(--ok); border: 1px solid var(--ok-line);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
  }
  .rcpt-journey .jrny-dot svg { width: 13px; height: 13px; stroke: currentColor;
                                fill: none; stroke-width: 2.4;
                                stroke-linecap: round; stroke-linejoin: round; }
  .rcpt-jrny-main { flex: 1; min-width: 0; }
  .rcpt-jrny-title { display: block; font-size: 0.9em; font-weight: 600;
                     color: var(--ink); }
  .rcpt-jrny-sub { display: block; font-size: 0.82em; color: var(--muted);
                   margin-top: 0.1em; }
  .rcpt-jrny-time { flex: 0 0 auto; font-size: 0.78em; color: var(--muted); }

  .rcpt-help { list-style: none; margin: 0; padding: 0; }
  .rcpt-help li { display: flex; align-items: center; gap: 0.65em;
                  padding: 0.55em 0; border-bottom: 1px solid var(--line); }
  .rcpt-help li:last-child { border-bottom: 0; }
  .rcpt-help-ico { width: 28px; height: 28px; flex: 0 0 auto; }
  .rcpt-help-ico svg { width: 15px; height: 15px; }
  .rcpt-help a { color: var(--ink); text-decoration: none; font-size: 0.9em;
                 font-weight: 500; }
  .rcpt-help a:hover { color: var(--accent); }

  .rcpt-activity { width: 100%; border-collapse: collapse; font-size: 0.9em; }
  .rcpt-activity th {
    text-align: left; padding: 0.5em 0.6em; color: var(--muted);
    font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 600; border-bottom: 1px solid var(--line);
  }
  .rcpt-activity td { padding: 0.65em 0.6em; color: var(--ink-dim);
                      border-bottom: 1px solid var(--line); vertical-align: top; }
  .rcpt-activity tr:last-child td { border-bottom: 0; }

  /* KPI stat strip. */
  .stat-strip {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px; margin: 0 0 1.6em;
  }
  .stat-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.15em 1.2em 1em;
    box-shadow: var(--shadow-sm);
  }
  .stat-card-top { display: flex; gap: 0.8em; align-items: flex-start; }
  .stat-card .ico-badge { width: 38px; height: 38px; }
  .stat-card .ico-badge svg { width: 19px; height: 19px; }
  .stat-body { min-width: 0; }
  .stat-label { margin: 0; font-size: 0.82em; color: var(--ink-dim);
                line-height: 1.3; }
  .stat-value {
    margin: 0.05em 0 0; font-size: 1.7em; font-weight: 700;
    color: var(--ink); line-height: 1.12; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; word-break: break-word;
  }
  .stat-value.ok { color: var(--ok); }
  .stat-value.warn { color: var(--warn); }
  .stat-value.sealed { color: var(--sealed); }
  .stat-sub { margin: 0.25em 0 0; font-size: 0.84em; color: var(--muted); }
  .stat-foot { margin-top: auto; padding-top: 0.95em; }
  .stat-foot a {
    color: var(--accent); text-decoration: none;
    font-size: 0.85em; font-weight: 500;
  }
  .stat-foot a:hover { color: var(--accent-strong); text-decoration: underline; }
  @media (max-width: 1300px) {
    .stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 440px) {
    .stat-strip { grid-template-columns: 1fr; }
  }

  /* File-proof hero — cloud icon + copy above the inline anchor form
     (the embedded shared #anchor-form). The in-browser hashing + anchor
     submit now run right here; the folder <select> steers the form's POST
     action. (Older folder-only routing styles below are kept for reuse.) */
  .hero-anchor {
    background: linear-gradient(135deg, var(--accent-tint) 0%, var(--surface) 72%);
    border: 1.5px dashed var(--accent-tint-strong);
    border-radius: var(--radius-lg);
    padding: 1.5em 1.6em; margin: 0 0 1.4em;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .hero-anchor.drag { border-color: var(--accent); box-shadow: var(--glow); }
  .hero-top { display: flex; gap: 1em; align-items: flex-start; }
  .hero-ico {
    flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-tint); color: var(--accent);
    border: 1px solid var(--accent-tint-strong);
  }
  .hero-ico svg { width: 27px; height: 27px; stroke: currentColor;
                  fill: none; stroke-width: 1.7; stroke-linecap: round;
                  stroke-linejoin: round; }
  .hero-copy { min-width: 0; }
  .hero-copy h2 {
    margin: 0; font-size: 1.2em; font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em;
  }
  .hero-lead { margin: 0.25em 0 0; color: var(--ink); font-size: 0.96em; }
  .hero-lead .hero-browse {
    color: var(--accent-strong); text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer;
  }
  .hero-sub { margin: 0.15em 0 0; color: var(--muted); font-size: 0.88em; }
  .hero-controls {
    display: flex; gap: 1.1em; align-items: flex-end;
    flex-wrap: wrap; margin-top: 1.3em;
  }
  .hero-field { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
  .hero-field-label {
    font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted); font-weight: 600;
  }
  .hero-select-wrap { position: relative; display: inline-flex; }
  .hero-select-wrap .sel-folder-ico {
    position: absolute; left: 0.7em; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
    stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  select.hero-select {
    appearance: none; -webkit-appearance: none;
    font-family: inherit; font-size: 0.92em; color: var(--ink);
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.55em 2em 0.55em 2.2em; cursor: pointer;
    min-width: 11em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23828d9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7em center;
  }
  select.hero-select:focus { outline: none; border-color: var(--accent); }
  .seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .seg label {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.42em 0.85em; font-size: 0.86em; font-weight: 600;
    color: var(--ink-dim); border-radius: 6px; cursor: pointer;
    line-height: 1; transition: background 0.12s, color 0.12s;
  }
  .seg label svg { width: 13px; height: 13px; stroke: currentColor;
                   fill: none; stroke-width: 1.9; stroke-linecap: round;
                   stroke-linejoin: round; }
  .seg input { position: absolute; width: 1px; height: 1px;
               opacity: 0; pointer-events: none; }
  .seg label:has(input:checked) {
    background: var(--accent-strong); color: #04121f;
  }
  .seg label.seg-sealed:has(input:checked) {
    background: var(--sealed); color: #150f25;
  }
  /* Visible keyboard-focus ring on the segmented control — accent (not the
     near-black accent-tint) so it clears 3:1 non-text contrast (WCAG 1.4.11)
     and stays distinct from the checked-state fill. */
  .seg label:focus-within {
    box-shadow: 0 0 0 2px var(--accent-strong);
  }
  .seg label.seg-sealed:focus-within {
    box-shadow: 0 0 0 2px var(--sealed);
  }
  .hero-go {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.6em 1.3em; font-size: 0.95em; font-weight: 600;
    background: var(--accent-strong); color: #04121f;
    border: 0; border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; text-decoration: none; line-height: 1.2;
    transition: background 0.12s, box-shadow 0.12s;
  }
  .hero-go:hover { background: var(--accent); box-shadow: var(--glow); }
  @media (max-width: 700px) {
    .hero-controls { gap: 0.9em; }
    .hero-field, .hero-select-wrap, select.hero-select { width: 100%; }
    .hero-go { margin-left: 0; width: 100%; justify-content: center; }
  }

  /* Icon action cards (Create disclosure bundle / Verify a proof). */
  .action-card {
    display: flex; align-items: center; gap: 1em;
    padding: 1.15em 1.3em; min-height: 96px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .action-card .ico-badge { width: 42px; height: 42px; border-radius: 12px; }
  .action-card .ico-badge svg { width: 21px; height: 21px; }
  .action-body { flex: 1; min-width: 0; }
  .action-body h2 {
    margin: 0 0 0.18em; font-size: 1.02em; font-weight: 600;
    color: var(--ink); letter-spacing: -0.005em;
  }
  .action-body p { margin: 0; color: var(--muted); font-size: 0.9em;
                   line-height: 1.45; }
  .action-go { flex: 0 0 auto; }

  /* Create cluster — one shared Folder selector above a dominant file-proof
     tile (the dashed drop-zone hero) and three stacked PEER tiles: seal
     provenance / disclose / verify. Provenance is a separate create action,
     not a Standard|Sealed sub-mode of the file path — its input is a
     structured manifest, not a file — so it gets its own tile and routes to
     the existing /seal-provenance page. */
  .create-cluster { margin: 0 0 1.4em; }
  .create-folder-bar {
    display: flex; align-items: center; gap: 0.7em; margin: 0 0 0.9em;
    flex-wrap: wrap;
  }
  .create-folder-bar .hero-field-label { margin: 0; }
  .create-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px;
    align-items: stretch;
  }
  .create-grid .hero-anchor { margin: 0; height: 100%; }
  .create-secondary { display: flex; flex-direction: column; gap: 14px; }
  .hero-mode-note {
    margin: 1em 0 0; color: var(--muted); font-size: 0.82em; line-height: 1.45;
  }
  /* Inline anchor form embedded in the file-proof hero tile. The hero is
     now a solid panel (its own .file-drop is the drop target), so drop the
     dashed-zone border; neutralize the page-level .anchor-card padding/clip
     so the shared form sits flush inside the hero's own padding. */
  .hero-anchor--form { border-style: solid; }
  .hero-anchor .hero-anchor-card { margin-top: 1.15em; }
  .hero-anchor .anchor-card { padding: 0; clip-path: none; }
  .hero-anchor .anchor-card .mode-picker { margin-bottom: 0.9em; }
  .hero-anchor .anchor-card button[type="submit"] { width: 100%; }
  /* Peer tiles (provenance / disclose / verify) — compact VERTICAL cards
     (icon+title / description / CTA), each the whole clickable target. The
     2-up horizontal .action-card layout cramps in this narrower column. */
  .create-tile {
    display: flex; flex-direction: column; gap: 0.5em; flex: 1 1 0;
    padding: 1.05em 1.15em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    text-decoration: none; color: inherit;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .create-tile:hover { border-color: var(--accent-tint-strong); box-shadow: var(--glow); }
  .create-tile:focus-visible { outline: none; border-color: var(--accent);
                               box-shadow: 0 0 0 2px var(--accent-strong); }
  .create-tile-head { display: flex; align-items: center; gap: 0.6em; }
  .create-tile .ico-badge { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
  .create-tile .ico-badge svg { width: 18px; height: 18px; }
  .create-tile-title {
    font-size: 1em; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
  }
  .create-tile-desc { color: var(--muted); font-size: 0.86em; line-height: 1.45; }
  .create-tile-go {
    margin-top: auto; padding-top: 0.2em; color: var(--accent);
    font-size: 0.86em; font-weight: 600;
  }
  @media (max-width: 900px) {
    .create-grid { grid-template-columns: 1fr; }
  }

  /* Unified Integrations page — section nav + per-section headers. */
  .int-nav { display: flex; gap: 1.3em; margin: 0 0 1.6em; flex-wrap: wrap; }
  .int-nav a { color: var(--accent); text-decoration: none;
               font-size: 0.92em; font-weight: 600; }
  .int-nav a:hover { text-decoration: underline; }
  /* Integrations redesign — summary cards, dev-tools catalog, rail extras.
     Only backed values are rendered (no health %/sparklines/automations). */
  .int-summary { display: grid; gap: 1em; margin: 1.4em 0 1.8em;
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .int-card { background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 1.1em 1.2em; display: flex;
    flex-direction: column; gap: 0.18em; }
  .int-card-ico { width: 38px; height: 38px; border-radius: 10px;
    background: var(--surface-2); display: inline-flex; align-items: center;
    justify-content: center; color: var(--accent); margin-bottom: 0.5em; }
  .int-card-ico svg { width: 19px; height: 19px; }
  .int-card-num { font-size: 1.9em; font-weight: 700; color: var(--ink);
    line-height: 1.05; }
  .int-card-label { color: var(--ink-soft); font-size: 0.9em;
    font-weight: 600; }
  .int-card-sub { color: var(--muted); font-size: 0.8em; }
  .int-card-link { color: var(--accent); text-decoration: none;
    font-size: 0.82em; font-weight: 600; margin-top: 0.7em; }
  .int-card-link:hover { color: var(--accent-strong); }
  .int-grid { margin-bottom: 1.8em; }
  .int-section-head { display: flex; align-items: baseline;
    justify-content: space-between; gap: 1em; }
  .int-head-link { color: var(--accent); text-decoration: none;
    font-size: 0.85em; font-weight: 600; }
  .int-head-link:hover { color: var(--accent-strong); }
  .int-section-sub { color: var(--muted); font-size: 0.88em;
    margin: 0.1em 0 1.1em; }
  .int-tools { display: grid; gap: 0.9em;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .int-tool { background: var(--surface-1); border: 1px solid var(--line);
    border-radius: 12px; padding: 0.95em 1em; display: flex;
    flex-direction: column; gap: 0.4em; }
  .int-tool-name { margin: 0; font-weight: 700; color: var(--ink);
    font-size: 0.95em; }
  .int-tool-pkg { font-size: 0.78em; color: var(--accent);
    background: var(--surface-3); padding: 0.1em 0.4em; border-radius: 6px;
    font-weight: 500; }
  .int-tool-desc { margin: 0; color: var(--ink-soft); font-size: 0.84em;
    line-height: 1.45; flex: 1 1 auto; }
  .int-tool-foot { display: flex; align-items: center; gap: 0.4em;
    margin-top: 0.3em; }
  .int-tool-install { font-size: 0.74em; color: var(--muted);
    background: var(--surface-3); padding: 0.3em 0.5em; border-radius: 7px;
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .int-tool-copy, .int-tool-docs { flex: 0 0 auto; font-size: 0.76em;
    font-weight: 600; }
  .int-tool-docs { color: var(--accent); text-decoration: none; }
  .int-tool-docs:hover { color: var(--accent-strong); }
  .int-rail-sub { color: var(--muted); font-size: 0.82em;
    margin: 0 0 0.7em; }
  .int-steps { list-style: none; margin: 0 0 1em; padding: 0;
    display: flex; flex-direction: column; gap: 0.85em; }
  .int-steps li { display: flex; gap: 0.7em; align-items: flex-start; }
  .int-step-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-3); color: var(--accent); font-size: 0.78em;
    font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; }
  .int-step-body { display: flex; flex-direction: column; gap: 0.15em; }
  .int-step-body b { color: var(--ink); font-size: 0.88em; }
  .int-step-desc { color: var(--muted); font-size: 0.8em; line-height: 1.4; }
  .int-api-base { display: flex; align-items: center; gap: 0.4em;
    margin: 0 0 1em; }
  .int-api-base code { flex: 1 1 auto; background: var(--surface-3);
    padding: 0.45em 0.6em; border-radius: 8px; font-size: 0.78em;
    color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .int-api-curl { background: var(--surface-3); border: 1px solid var(--line);
    border-radius: 8px; padding: 0.7em 0.8em; margin: 0 0 1em; overflow-x: auto; }
  .int-api-curl code { font-size: 0.74em; color: var(--ink-soft);
    white-space: pre; }
  /* Per-card icon tints (decorative only) to echo the concept's coloured
     summary tiles — no semantic meaning attached. */
  .int-card.t-key .int-card-ico { background: var(--accent-tint);
    color: var(--accent-strong); }
  .int-card.t-hook .int-card-ico { background: #221a33; color: #b69bff; }
  .int-card.t-tool .int-card-ico { background: #0e2a2a; color: #5fd3c4; }
  .int-card.t-quota .int-card-ico { background: var(--ok-tint); color: var(--ok); }
  /* Section panels (API keys / Webhooks) — header row + read-oriented table. */
  .int-panel { padding: 1.3em 1.4em; margin: 0 0 1.5em; }
  .int-section-head { display: flex; align-items: flex-start;
    justify-content: space-between; gap: 1.2em; margin: 0 0 1.1em; }
  .int-section-headtext { min-width: 0; }
  .int-section-head .section-head { margin: 0; }
  .int-section-head .int-section-sub { margin: 0.25em 0 0; max-width: 52ch; }
  /* "+ Create" disclosure: <summary> styled as a button, form drops below. */
  .int-create { position: relative; flex: 0 0 auto; }
  .int-create > summary { list-style: none; cursor: pointer;
    white-space: nowrap; }
  .int-create > summary::-webkit-details-marker { display: none; }
  .int-create[open] > summary.int-create-btn { background: var(--surface-2);
    color: var(--ink); border-color: var(--line-strong); }
  .int-create-form { margin-top: 1em; padding: 1.1em; background: var(--surface-1);
    border: 1px solid var(--line); border-radius: 12px; }
  @media (min-width: 720px) {
    .int-create[open] .int-create-form { position: absolute; right: 0;
      top: calc(100% + 0.5em); width: 460px; max-width: 80vw; z-index: 20;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
  }
  .int-table-wrap { overflow-x: auto; }
  .int-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
  .int-table thead th { text-align: left; font-weight: 600; color: var(--muted);
    font-size: 0.82em; padding: 0 0.9em 0.6em; border-bottom: 1px solid var(--line);
    white-space: nowrap; }
  .int-table tbody td { padding: 0.75em 0.9em; border-bottom: 1px solid var(--line);
    color: var(--ink-soft); vertical-align: top; }
  .int-table tbody tr:last-child td { border-bottom: 0; }
  .int-table tbody tr.revoked { opacity: 0.55; }
  .int-td-name { min-width: 180px; }
  .int-td-name .key-name { display: block; color: var(--ink);
    font-weight: 600; }
  .int-mono { display: block; font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.86em; color: var(--muted); margin-top: 0.15em; }
  .int-wh-url { display: flex; align-items: center; gap: 0.4em; }
  .int-wh-url code { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 30ch; }
  .int-td-scope { max-width: 280px; }
  .int-scope-cell { display: flex; flex-wrap: wrap; gap: 0.3em;
    align-items: center; }
  .int-td-date { white-space: nowrap; color: var(--muted); }
  .int-td-actions { text-align: right; white-space: nowrap; }
  .int-td-actions .revoke-form, .int-td-actions .inline-form {
    display: inline-block; margin: 0 0 0 0.3em; }
  .int-status { display: inline-flex; align-items: center; gap: 0.4em;
    font-size: 0.85em; font-weight: 600; white-space: nowrap; }
  .int-status::before { content: ""; width: 7px; height: 7px;
    border-radius: 50%; background: currentColor; }
  .int-status.ok { color: var(--ok); }
  .int-status.revoked { color: var(--muted); }
  .int-empty { color: var(--muted); text-align: center; padding: 1.6em 0; }
  /* Developer-tools cards — icon, package chip, install + repo footer. */
  .int-tool-ico { width: 34px; height: 34px; border-radius: 9px;
    background: var(--surface-3); color: var(--accent); display: inline-flex;
    align-items: center; justify-content: center; margin-bottom: 0.15em; }
  .int-tool-ico svg { width: 17px; height: 17px; }
  @media (max-width: 1180px) {
    .int-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .int-summary { grid-template-columns: 1fr; }
    .int-create[open] .int-create-form { width: 100%; }
  }
  .int-section { margin: 0 0 2.4em; scroll-margin-top: 1em; }
  .int-section-title {
    font-size: 1.25em; font-weight: 700; color: var(--ink);
    letter-spacing: -0.01em; margin: 0 0 0.5em;
    padding-bottom: 0.45em; border-bottom: 1px solid var(--line);
  }

  /* Two-up bottom row: Recent proofs (wider) beside Folders table. Side-by-
     side only when the main column is genuinely wide enough for the proofs
     table (the wide shell caps at 1440px, so below ~1500px viewport the main
     column would force the table to scroll); below that it stacks full-width,
     which reads cleanly and keeps the table un-cramped. */
  .dash-bottom {
    display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 0.4em;
  }
  @media (min-width: 1500px) {
    .dash-bottom { grid-template-columns: 1.6fr 1fr; }
  }
  .dash-bottom .app-card { margin: 0; }
  /* Grid children must be allowed to shrink below their content size, or the
     Recent-proofs table's min-width blows the track out and the card overflows
     into the right rail. min-width:0 lets the table-wrap scroll instead. The
     tighter padding (vs the default app-card) also matches the concept's denser
     bottom cards and reclaims width for the proofs table. */
  .dash-bottom > .app-card { min-width: 0; padding: 1.1em 1.25em; }
  .dash-bottom .inline-form { min-width: 0; }
  .dash-bottom .inline-form input[type="text"] { min-width: 0; }
  /* Concept cards are plain rounded rects — drop the bevel on console cards
     so the stat strip, hero, and bottom cards share one geometry. */
  .dash-main .app-card, .dash-grid .rail-card {
    clip-path: none; border-radius: var(--radius-lg);
  }
  .card-foot-link {
    display: block; text-align: center; margin-top: 0.9em;
    padding-top: 0.9em; border-top: 1px solid var(--line);
  }
  .card-foot-link a { color: var(--accent); text-decoration: none;
                      font-size: 0.88em; font-weight: 500; }
  .card-foot-link a:hover { text-decoration: underline; }

  /* Folders-as-table. */
  table.folder-table {
    width: 100%; border-collapse: collapse; font-size: 0.9em;
  }
  .folder-table th {
    text-align: left; font-size: 0.72em; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding: 0 0.6em 0.55em 0; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .folder-table th.ft-num, .folder-table td.ft-count { text-align: right; }
  .folder-table td {
    padding: 0.6em 0.6em; border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .folder-table th:first-child, .folder-table td:first-child { padding-left: 0; }
  .folder-table th:last-child, .folder-table td:last-child {
    padding-right: 0; text-align: right;
  }
  .folder-table tr:last-child td { border-bottom: 0; }
  .folder-table .ft-name a {
    color: var(--ink); font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5em;
  }
  .folder-table .ft-name a:hover { color: var(--accent); }
  .folder-table .ft-count { color: var(--ink-soft);
                            font-variant-numeric: tabular-nums; }
  .folder-table .ft-activity { color: var(--muted); white-space: nowrap; }
  .folder-table .ft-open { color: var(--accent); text-decoration: none;
                           font-size: 0.9em; white-space: nowrap; }
  .folder-table .ft-open:hover { text-decoration: underline; }

  /* ---- Folders index page (concept: Image #5) ---- */
  .fld-toolbar {
    display: flex; align-items: center; gap: 0.8em; margin: 0 0 1.1em;
    flex-wrap: wrap;
  }
  .fld-search-wrap { position: relative; flex: 1; min-width: 220px; }
  .fld-search-ico {
    position: absolute; left: 0.8em; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--muted); pointer-events: none;
    stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
    stroke-linejoin: round;
  }
  .fld-search {
    width: 100%; box-sizing: border-box; font-family: inherit;
    font-size: 0.92em; color: var(--ink); background: var(--surface-1);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0.6em 0.9em 0.6em 2.4em;
  }
  .fld-search:focus { outline: none; border-color: var(--accent); }
  .fld-search::placeholder { color: var(--muted); }
  .fld-toolbar-actions { display: flex; gap: 0.6em; flex: 0 0 auto; }
  .fld-btn {
    display: inline-flex; align-items: center; gap: 0.4em;
    padding: 0.6em 1.1em; font-size: 0.9em; font-weight: 600;
    border-radius: var(--radius-sm); text-decoration: none;
    font-family: inherit; cursor: pointer; line-height: 1.2;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  }
  .fld-btn.primary { background: var(--accent-strong); color: #04121f; border: 0; }
  .fld-btn.primary:hover { background: var(--accent); box-shadow: var(--glow); }
  .fld-btn.ghost { background: var(--surface-1); color: var(--ink);
                   border: 1px solid var(--line-strong); }
  .fld-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

  /* Folders table — same column rhythm as .folder-table, plus selectable rows. */
  table.fld-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
  .fld-table th {
    text-align: left; font-size: 0.72em; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding: 0 0.7em 0.6em 0.7em; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .fld-table th.ft-num, .fld-table td.ft-count { text-align: right; }
  .fld-table td {
    padding: 0.7em; border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .fld-table th:last-child, .fld-table td:last-child { text-align: right; }
  .fld-table tr:last-child td { border-bottom: 0; }
  .fld-row { cursor: pointer; transition: background 0.1s; }
  .fld-row:hover { background: var(--surface-2); }
  .fld-row.is-selected { background: var(--accent-tint); }
  .fld-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent-strong); }
  .fld-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .fld-table .ft-name { display: flex; align-items: center; gap: 0.55em; }
  .fld-ico { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted); }
  .fld-ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
                 stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .fld-table .ft-name a { color: var(--ink); font-weight: 600;
                          text-decoration: none; }
  .fld-table .ft-name a:hover { color: var(--accent); }
  .fld-table .ft-count { color: var(--ink-soft);
                         font-variant-numeric: tabular-nums; }
  .fld-table .ft-activity { color: var(--muted); white-space: nowrap; }
  .fld-table .ft-open { color: var(--accent); text-decoration: none;
                        font-size: 0.9em; white-space: nowrap; }
  .fld-table .ft-open:hover { text-decoration: underline; }

  /* Right-rail folder detail panel. */
  .fld-detail-head { display: flex; align-items: center; gap: 0.55em;
                     margin: 0 0 0.9em; }
  .fld-detail-head .ico-badge { width: 34px; height: 34px; }
  .fld-detail-head .ico-badge svg { width: 17px; height: 17px; }
  .fld-detail-name { font-size: 1.02em; font-weight: 700; color: var(--ink);
                     min-width: 0; word-break: break-word; }
  .rail-subhead {
    margin: 1.1em 0 0.5em; font-size: 0.72em; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
  }
  .fld-id-copy {
    margin-left: 0.4em; padding: 0.1em 0.5em; font-size: 0.78em;
    font-family: inherit; font-weight: 600; cursor: pointer;
    background: var(--surface-1); color: var(--accent);
    border: 1px solid var(--line-strong); border-radius: 5px;
  }
  .fld-id-copy:hover { border-color: var(--accent); }
  .fld-id-copy.copied { color: var(--ok); border-color: var(--ok-line); }
  .fld-actions { display: flex; flex-direction: column; gap: 0.5em;
                 margin-top: 0.3em; }
  .fld-actions .fld-btn { justify-content: center; }

  /* File-cell (recent-proofs table): icon + label. */
  .proof-table .pt-file {
    display: inline-flex; align-items: center; gap: 0.5em; min-width: 0;
  }
  .proof-table .pt-file .ft-doc-ico {
    flex: 0 0 auto; width: 15px; height: 15px; color: var(--muted);
    stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .proof-table .pt-file a {
    color: var(--accent-strong); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .proof-table .pt-file a:hover { color: var(--accent); }
  .proof-table .r-mode.sealed-ico { display: inline-flex; align-items: center;
                                     gap: 0.3em; }

  /* Restyled right-rail cards (titles + key/value rows + footer). */
  .rail-card { padding: 1.2em 1.3em; border-radius: var(--radius-lg); }
  .rail-title {
    margin: 0 0 0.85em; font-size: 1.02em; font-weight: 600; color: var(--ink);
    letter-spacing: -0.005em;
  }
  .rail-kv {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1em; padding: 0.34em 0; font-size: 0.9em;
  }
  .rail-kv .k { color: var(--muted); }
  .rail-kv .v { color: var(--ink); font-weight: 500; text-align: right;
                font-variant-numeric: tabular-nums; }
  .rail-kv .v .dim { color: var(--muted); font-weight: 400; }
  .rail-divider { height: 1px; background: var(--line); margin: 0.7em 0; }
  .rail-btn {
    display: block; text-align: center; margin-top: 1em;
    padding: 0.55em 1em; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); color: var(--ink);
    text-decoration: none; font-size: 0.9em; font-weight: 600;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
  }
  .rail-btn:hover { border-color: var(--accent); color: var(--accent);
                    background: var(--accent-tint); }
  .rail-status { display: flex; align-items: center; gap: 0.5em; margin: 0 0 0.5em; }
  .rail-status .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ok); flex: 0 0 auto;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
  }
  .rail-status.warn .dot { background: var(--warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
  .rail-status .rail-status-label { font-weight: 700; color: var(--ok);
                                    font-size: 0.98em; }
  .rail-status.warn .rail-status-label { color: var(--warn); }
  .rail-status-note { margin: 0 0 0.8em; color: var(--ink-dim);
                      font-size: 0.88em; line-height: 1.45; }

  /* Recent-activity rows with icon + two lines + time. */
  .rail-activity li {
    display: flex; gap: 0.7em; align-items: flex-start;
    padding: 0.6em 0; border-bottom: 1px solid var(--line);
  }
  .rail-activity li:last-child { border-bottom: 0; }
  .rail-activity .ra-ico { width: 30px; height: 30px; border-radius: 9px; }
  .rail-activity .ra-ico svg { width: 15px; height: 15px; }
  .rail-activity a, .rail-activity > li > div.ra-row {
    display: flex; gap: 0.7em; align-items: flex-start;
    width: 100%; text-decoration: none; color: inherit;
  }
  .rail-activity .ra-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
  }
  .rail-activity .ra-title {
    color: var(--ink); font-size: 0.88em; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail-activity a:hover .ra-title { color: var(--accent); }
  .rail-activity .ra-sub {
    color: var(--muted); font-size: 0.8em; margin-top: 0.1em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail-activity .ra-time { color: var(--muted); font-size: 0.78em;
                            white-space: nowrap; flex: 0 0 auto;
                            padding-top: 0.1em; }

  /* ===================================================================
     Proofs console (the cross-folder Proofs screen). Three panes:
     folder rail + table + detail side-panel. All interactive behaviour
     is client-side in /static/proofs.js. ================================ */
  .mono { font-family: var(--mono); }
  .pc-ico, .pc-ico-sm { stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .pc-ico { width: 16px; height: 16px; }
  .pc-ico-sm { width: 14px; height: 14px; }

  /* Header */
  .pc-top { margin-bottom: 1.1em; }
  .pc-breadcrumb { color: var(--muted); font-size: 0.86em; margin: 0 0 0.5em;
    display: flex; align-items: center; gap: 0.4em; }
  .pc-breadcrumb a { color: var(--ink-dim); text-decoration: none; }
  .pc-breadcrumb a:hover { color: var(--accent); }
  .pc-breadcrumb .sep { color: var(--line-strong); }
  .pc-titlerow { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
  .pc-title { margin: 0; }
  .pc-headpills { margin-left: auto; display: flex; align-items: center;
    gap: 0.5em; flex-wrap: wrap; }

  /* Toolbar: filters + actions */
  .pc-toolbar { display: flex; align-items: center; gap: 0.9em;
    flex-wrap: wrap; margin-bottom: 1em; }
  .pc-filters { display: flex; align-items: center; gap: 0.7em;
    flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
  .pc-toolbar-actions { display: flex; gap: 0.6em; flex: 0 0 auto; }
  .pc-toolbar-actions .btn { display: inline-flex; align-items: center;
    gap: 0.45em; }
  .pc-search { position: relative; display: flex; align-items: center;
    flex: 1 1 260px; min-width: 200px; max-width: 380px; }
  .pc-search-ico { position: absolute; left: 0.7em; color: var(--muted);
    pointer-events: none; }
  .pc-search input { width: 100%; padding: 0.55em 0.8em 0.55em 2.3em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--ink); font: inherit;
    font-size: 0.9em; }
  .pc-search input:focus { outline: none; border-color: var(--accent);
    box-shadow: var(--ring); }
  .pc-filter { display: inline-flex; flex-direction: column; gap: 0.2em; }
  .pc-filter-lbl { font-size: 0.66em; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding-left: 0.2em; }
  .pc-select { position: relative; display: inline-flex; align-items: center; }
  .pc-select select { appearance: none; -webkit-appearance: none;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); color: var(--ink-soft); font: inherit;
    font-size: 0.86em; font-weight: 600; padding: 0.45em 2em 0.45em 0.75em;
    cursor: pointer; }
  .pc-select select:focus { outline: none; border-color: var(--accent);
    box-shadow: var(--ring); }
  .pc-select-chev { position: absolute; right: 0.6em; color: var(--muted);
    pointer-events: none; }

  /* Three-pane grid. When the panel is open the body gets .pc-has-panel. */
  .pc-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr);
    gap: 1.1em; align-items: start; }
  .pc-grid.pc-has-panel { grid-template-columns: 232px minmax(0, 1fr) 332px; }

  /* Folder rail */
  .pc-folders { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 0.9em; position: sticky;
    top: 1em; }
  .pc-folders-head { display: flex; align-items: center;
    justify-content: space-between; margin: 0 0 0.7em; padding: 0 0.2em;
    font-size: 0.82em; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; }
  .pc-folders-new { display: inline-flex; align-items: center; gap: 0.25em;
    color: var(--accent); text-decoration: none; font-size: 0.92em;
    text-transform: none; letter-spacing: 0; font-weight: 600; }
  .pc-folders-new:hover { color: var(--accent-strong); }
  .pc-folders-list { display: flex; flex-direction: column; gap: 0.1em; }
  .pc-fold { display: flex; align-items: center; gap: 0.6em; width: 100%;
    text-align: left; background: none; border: 0; cursor: pointer;
    padding: 0.5em 0.55em; border-radius: var(--radius); color: var(--ink-soft);
    font: inherit; text-decoration: none; }
  .pc-fold:hover { background: var(--accent-tint); color: var(--ink); }
  .pc-fold.active { background: var(--accent-tint-strong);
    color: var(--accent-strong); }
  .pc-fold-ico { width: 17px; height: 17px; stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto; opacity: 0.85; }
  .pc-fold-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .pc-fold-name { font-size: 0.9em; font-weight: 600; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .pc-fold-pin { margin-left: 0.45em; font-size: 0.66em; font-weight: 700;
    color: var(--muted); background: var(--surface-3); padding: 0.05em 0.4em;
    border-radius: var(--radius-pill); text-transform: uppercase;
    letter-spacing: 0.03em; vertical-align: middle; }
  .pc-fold-act { font-size: 0.74em; color: var(--muted); margin-top: 0.05em; }
  .pc-fold-n { font-size: 0.8em; color: var(--muted); font-variant-numeric:
    tabular-nums; flex: 0 0 auto; }
  .pc-fold.active .pc-fold-n { color: var(--accent-strong); }
  .pc-folders-all { display: block; margin-top: 0.7em; padding: 0.55em 0.2em 0.2em;
    text-align: center; color: var(--accent); text-decoration: none;
    font-size: 0.86em; font-weight: 600; border-top: 1px solid var(--line); }
  .pc-folders-all:hover { color: var(--accent-strong); }

  /* Main column: bulk bar + table + footer */
  .pc-main { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); min-width: 0; overflow: hidden; }
  .pc-bulkbar { display: flex; align-items: center; gap: 1em;
    padding: 0.6em 0.9em; background: var(--accent-tint);
    border-bottom: 1px solid var(--accent-dim); }
  /* [hidden] must beat the class's display:flex (more specific selector). */
  .pc-bulkbar[hidden], .pc-panel[hidden] { display: none; }
  .pc-bulk-count { font-size: 0.88em; color: var(--ink-soft); }
  .pc-bulk-count b { color: var(--accent-strong); }
  .pc-bulk-actions { display: flex; align-items: center; gap: 0.4em;
    margin-left: auto; flex-wrap: wrap; }
  .pc-bulk-btn { display: inline-flex; align-items: center; gap: 0.4em;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink-soft); border-radius: var(--radius); cursor: pointer;
    font: inherit; font-size: 0.82em; font-weight: 600; padding: 0.4em 0.7em; }
  .pc-bulk-btn:hover:not(:disabled) { border-color: var(--accent);
    color: var(--accent); }
  .pc-bulk-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .pc-bulk-clear:hover { border-color: var(--line-strong);
    color: var(--ink); }
  .pc-move-wrap { position: relative; }
  .pc-move-menu { position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 20; min-width: 180px; max-height: 280px; overflow-y: auto;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 0.35em; }
  .pc-move-menu-h { margin: 0.2em 0.5em 0.4em; font-size: 0.72em;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
    font-weight: 700; }
  .pc-move-opt { display: block; width: 100%; text-align: left; background: none;
    border: 0; color: var(--ink-soft); font: inherit; font-size: 0.86em;
    padding: 0.45em 0.55em; border-radius: var(--radius-sm); cursor: pointer; }
  .pc-move-opt:hover { background: var(--accent-tint); color: var(--ink); }

  .pc-table-wrap { overflow-x: auto; }
  table.pc-table { width: 100%; min-width: 720px; border-collapse: collapse;
    font-size: 0.86em; }
  .pc-table th { text-align: left; font-size: 0.7em; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    padding: 0.7em 0.6em; border-bottom: 1px solid var(--line);
    white-space: nowrap; background: var(--surface-1); }
  .pc-table th.pc-th-sort { cursor: pointer; user-select: none; }
  .pc-table th.pc-th-sort:hover { color: var(--ink-soft); }
  .pc-table th.pc-th-sort.sorted::after { content: " \2193"; color: var(--accent); }
  .pc-table th.pc-th-sort.sorted.asc::after { content: " \2191"; }
  .pc-table th.pc-th-ico { text-align: center; }
  .pc-table td { padding: 0.55em 0.6em; border-bottom: 1px solid var(--line);
    vertical-align: middle; }
  .pc-table tbody tr:last-child td { border-bottom: 0; }
  .pc-row { cursor: pointer; }
  .pc-row:hover { background: var(--accent-tint); }
  .pc-row.selected { background: var(--accent-tint-strong); }
  .pc-row.selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
  .pc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .pc-table .pc-check { width: 1%; }
  .pc-rowcheck, #pc-all { accent-color: var(--accent); cursor: pointer;
    width: 15px; height: 15px; }
  .pc-name-cell { display: flex; align-items: center; gap: 0.55em;
    max-width: 280px; }
  .pc-name-ico { width: 16px; height: 16px; stroke: var(--muted); fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto; }
  .pc-name-txt { color: var(--ink); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .pc-folder-link { color: var(--ink-dim); text-decoration: none;
    font-size: 0.96em; }
  a.pc-folder-link:hover { color: var(--accent); }
  .pc-created { color: var(--ink-soft); white-space: nowrap;
    font-variant-numeric: tabular-nums; }
  .pc-created-abs { display: block; font-size: 0.96em; }
  .pc-created-rel { display: block; color: var(--muted); font-size: 0.84em;
    margin-top: 0.05em; }
  .pc-qcell { text-align: center; width: 1%; }
  .pc-q { display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    color: var(--accent); text-decoration: none; }
  .pc-q:hover { background: var(--accent-tint); color: var(--accent-strong); }
  .pc-q .pc-ico { width: 16px; height: 16px; }
  .pc-menu-a { color: var(--muted); }
  .pc-menu-a:hover { color: var(--ink); }
  .pc-q-none { color: var(--line-strong); }
  .pc-no-results { padding: 2.2em 1em; text-align: center; color: var(--muted);
    font-size: 0.92em; }

  .pc-foot { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap;
    padding: 0.7em 0.9em; border-top: 1px solid var(--line);
    font-size: 0.83em; color: var(--muted); }
  .pc-foot-note { color: var(--ink-dim); }
  .pc-foot-spacer { flex: 1 1 auto; }
  .pc-pager { display: flex; align-items: center; gap: 0.25em; }
  .pc-page { display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 0.5em; box-sizing: border-box;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--ink-soft); border-radius: var(--radius-sm); cursor: pointer;
    text-decoration: none; font-size: 0.86em; font-variant-numeric: tabular-nums; }
  a.pc-page:hover { border-color: var(--accent); color: var(--accent); }
  .pc-page.active { background: var(--accent); border-color: var(--accent);
    color: #04121f; font-weight: 700; }
  .pc-page.disabled { opacity: 0.4; cursor: default; }
  .pc-page.gap { border: 0; background: none; cursor: default; }
  .pc-perpage .pc-select select { padding: 0.35em 1.9em 0.35em 0.6em;
    font-size: 0.82em; }

  /* Detail side-panel */
  .pc-panel { background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 1.1em; position: sticky;
    top: 1em; }
  .pc-panel-head { display: flex; align-items: flex-start; gap: 0.6em;
    margin-bottom: 0.7em; }
  .pc-panel-title { font-weight: 700; color: var(--ink); font-size: 0.98em;
    line-height: 1.35; word-break: break-word; flex: 1; }
  .pc-panel-x { flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: var(--muted); padding: 0.2em; border-radius: var(--radius-sm);
    display: inline-flex; }
  .pc-panel-x:hover { color: var(--ink); background: var(--surface-3); }
  .pc-panel-statusrow { display: flex; align-items: center; gap: 0.6em;
    margin-bottom: 1em; }
  .pc-panel-statustime { color: var(--muted); font-size: 0.83em; }
  .pc-panel-fields { display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.9em 1em; margin: 0 0 1.2em; }
  .pc-panel-fields > div { min-width: 0; }
  .pc-panel-fields .pc-panel-wide { grid-column: 1 / -1; }
  .pc-panel-fields dt { font-size: 0.7em; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); font-weight: 600;
    margin-bottom: 0.2em; }
  .pc-panel-fields dd { margin: 0; color: var(--ink-soft); font-size: 0.88em;
    overflow-wrap: anywhere; }
  .pc-panel-fields dd a { color: var(--accent); text-decoration: none; }
  .pc-panel-fields dd a:hover { color: var(--accent-strong); }
  .pc-panel-fields dd.mono { font-size: 0.82em; }
  .pc-panel-actions { display: flex; flex-direction: column; gap: 0.5em; }
  .pc-pbtn { display: inline-flex; align-items: center; justify-content: center;
    gap: 0.45em; padding: 0.6em 0.9em; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--surface-2);
    color: var(--ink-soft); text-decoration: none; font-size: 0.86em;
    font-weight: 600; cursor: pointer; font-family: inherit; }
  .pc-pbtn:hover { border-color: var(--accent); color: var(--accent); }
  .pc-pbtn.primary { background: var(--accent-strong); border-color: var(--accent-strong);
    color: #04121f; }
  .pc-pbtn.primary:hover { background: var(--accent); border-color: var(--accent);
    color: #04121f; box-shadow: var(--glow); }
  .pc-pbtn.danger { color: var(--danger); }
  .pc-pbtn.danger:hover { border-color: var(--danger-line);
    background: var(--danger-tint); color: var(--danger); }
  /* Library lead + the two folder-inspector/proof-inspector panels share the
     .pc-panel slot — only one is ever visible (the other carries [hidden]). */
  .pc-lead { margin: 0.35em 0 0; color: var(--muted); font-size: 0.92em; }
  .pc-folder-panel .fld-detail { margin: 0; }
  .pc-folder-panel .fld-detail-head { margin-top: 0; }
  /* Inline "New folder" modal. */
  .pc-modal[hidden] { display: none; }
  .pc-modal { position: fixed; inset: 0; z-index: 60; display: flex;
    align-items: center; justify-content: center; padding: 1.5em; }
  .pc-modal-backdrop { position: absolute; inset: 0;
    background: rgba(2, 8, 16, 0.62); }
  .pc-modal-card { position: relative; z-index: 1; width: 100%;
    max-width: 420px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 1.4em;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
  .pc-modal-head { display: flex; align-items: center;
    justify-content: space-between; margin: 0 0 0.9em; }
  .pc-modal-head h2 { font-size: 1.05em; margin: 0; color: var(--ink); }
  .pc-modal-form label { display: block; font-size: 0.78em; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 0.4em; }
  .pc-modal-form input[type=text] { width: 100%; box-sizing: border-box;
    background: var(--surface-1); border: 1px solid var(--line);
    border-radius: 9px; padding: 0.6em 0.7em; color: var(--ink);
    font-size: 0.95em; font-family: inherit; }
  .pc-modal-form input[type=text]:focus { outline: none;
    border-color: var(--accent); box-shadow: var(--glow); }
  .pc-modal-actions { display: flex; justify-content: flex-end; gap: 0.6em;
    margin-top: 1.2em; }

  @media (max-width: 1180px) {
    .pc-grid, .pc-grid.pc-has-panel { grid-template-columns: 200px minmax(0, 1fr); }
    /* On narrow widths the detail panel drops below the table full-width. */
    .pc-grid.pc-has-panel .pc-panel { grid-column: 1 / -1; position: static; }
  }
  @media (max-width: 760px) {
    .pc-grid, .pc-grid.pc-has-panel { grid-template-columns: minmax(0, 1fr); }
    .pc-folders { position: static; }
    .pc-headpills { margin-left: 0; }
    .pc-toolbar-actions { flex: 1 1 100%; }
  }