/* NXT design system — components layer. One rule set per component; every component reads only
   tokens, so it follows the product theme and light/dark automatically. Usage: docs/DESIGN-SYSTEM.md. */

@layer components {
  /* ---------- Buttons: primary › secondary › tertiary (quiet) › ghost › danger ---------- */
  .btn {
    --b-bg: var(--c-primary); --b-fg: var(--c-on-primary); --b-bd: transparent; --b-hover: var(--c-primary-hover);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--b-bd); border-radius: var(--r-sm);
    background: var(--b-bg); color: var(--b-fg); font: 600 var(--t-body)/1 var(--font-sans); letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(0 0 0 / 0.12);
    transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-instant) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
  }
  /* Never wider than its container: on phones a long label wraps instead of widening the page. */
  .btn { max-width: 100%; }
  @media (max-width: 480px) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; } .btn.btn-icon, .btn-sm .kbd-group { white-space: nowrap; } }
  .btn:hover { background: var(--b-hover); text-decoration: none; color: var(--b-fg); }
  .btn:active { transform: translateY(1px) scale(0.99); }
  .btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-focus-inner); }
  .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; }
  .btn[aria-busy='true'] { color: transparent; pointer-events: none; }
  .btn[aria-busy='true'] .spinner { position: absolute; inset: 0; margin: auto; color: var(--b-fg); }
  .btn > .i { margin-inline: -2px; }
  .btn-secondary { --b-bg: var(--c-surface); --b-fg: var(--c-text); --b-bd: var(--c-border-strong); --b-hover: var(--c-surface2); box-shadow: 0 1px 1px rgb(0 0 0 / 0.04); }
  .btn-quiet, .btn-tertiary { --b-bg: transparent; --b-fg: var(--c-link); --b-hover: var(--c-primary-soft); box-shadow: none; padding-inline: var(--s-3); }
  .btn-ghost { --b-bg: transparent; --b-fg: var(--c-muted); --b-hover: var(--c-surface2); box-shadow: none; }
  .btn-ghost:hover { --b-fg: var(--c-text); }
  /* Destructive: never colour alone — square corners, heavy border, a leading alert glyph and an explicit verb label. */
  .btn-danger { --b-bg: var(--c-surface); --b-fg: var(--c-text); --b-bd: var(--c-text); --b-hover: var(--c-error-soft); border-width: 2px; border-radius: 0; box-shadow: none; font-weight: 700; }
  .btn-danger::before { content: ''; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-danger) center / contain no-repeat; mask: var(--i-danger) center / contain no-repeat; }
  .btn-danger:hover { --b-bg: var(--c-text); --b-fg: var(--c-bg); --b-hover: var(--c-text); }
  .btn-danger.btn-icon::before, .btn-danger:has(> .i)::before { display: none; }
  .btn-sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-small); gap: 6px; }
  .btn-lg { min-height: 48px; padding: 0 var(--s-6); font-size: 1rem; }
  .btn-block { width: 100%; }
  .btn-icon { padding: 0; width: 40px; }
  .btn-icon.btn-sm { width: 32px; }
  .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nxt-spin 0.7s linear infinite; }
  @keyframes nxt-spin { to { transform: rotate(360deg); } }
  form[data-busy][aria-busy='true'] button[type='submit'] { opacity: 0.6; cursor: progress; }

  /* ---------- Forms ---------- */
  .form { display: grid; gap: var(--s-5); max-width: 520px; }
  .form.wide { max-width: none; }
  .form.center { margin-inline: auto; }
  .form .row { align-items: flex-end; }
  .field { display: grid; gap: 6px; min-width: 0; }
  .field > label, .label { font-weight: 600; font-size: var(--t-small); color: var(--c-text); }
  .field .hint { font-size: var(--t-small); color: var(--c-muted); margin: 0; }
  .field .error, p.error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-small); color: var(--c-error); margin: 0; font-weight: 600; }
  .field .success { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-small); color: var(--c-success); margin: 0; font-weight: 600; }
  .field .error .i, .field .success .i { margin-top: 1px; }
  .input, .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .field select, .field textarea, .select select {
    width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--c-input-border, color-mix(in srgb, var(--c-text) 34%, var(--c-surface)));
    border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: 400 var(--t-body)/1.4 var(--font-sans);
    transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out); appearance: none;
  }
  .field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--c-text) 55%, var(--c-surface)); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible, .select select:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 2px var(--c-focus-inner), 0 0 0 4px var(--c-focus); }
  .field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--c-muted); opacity: 0.8; }
  .field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--c-surface2); color: var(--c-muted); cursor: not-allowed; }
  .field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: var(--c-error); border-width: 2px; padding-inline: 11px; box-shadow: none; background-image: repeating-linear-gradient(-45deg, var(--c-error-soft) 0 2px, transparent 2px 6px); }
  .field[data-valid] input { border-color: var(--c-success); }
  .select { position: relative; }
  .select select { padding-right: 36px; cursor: pointer; }
  .select > .i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--c-muted); }
  .input-icon { position: relative; }
  .input-icon > .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--c-muted); pointer-events: none; }
  .input-icon input { padding-left: 38px !important; width: 100%; }
  .code-input { font-family: var(--font-mono) !important; font-size: 1.5rem !important; letter-spacing: 0.4em; text-align: center; }

  .check, .radio { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-body); cursor: pointer; }
  .check input, .radio input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-primary); flex: none; cursor: pointer; }
  .check-hint { display: block; color: var(--c-muted); font-size: var(--t-small); margin-top: 2px; }
  .choice-group { display: grid; gap: var(--s-3); }
  .choice-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .choice-cards legend { grid-column: 1 / -1; }
  .choice-cards .radio { padding: var(--s-4); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); transition: border-color var(--d-fast), background-color var(--d-fast); }
  .choice-cards .radio:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); }
  .radio-label { font-weight: 600; }

  .switch-field { display: grid; gap: 4px; }
  .switch { display: inline-flex; gap: var(--s-3); align-items: center; cursor: pointer; font-weight: 500; }
  .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .switch-track { position: relative; width: 36px; height: 20px; flex: none; border-radius: var(--r-round); background: color-mix(in srgb, var(--c-text) 28%, var(--c-surface)); transition: background-color var(--d-base) var(--ease-out); }
  .switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: transform var(--d-base) var(--ease-spring); }
  .switch input:checked + .switch-track { background: var(--c-primary); }
  .switch input:checked + .switch-track::after { transform: translateX(16px); }
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
  .switch input:disabled + .switch-track { opacity: 0.5; }

  .segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-sm); background: var(--c-surface2); border: 1px solid var(--c-border); }
  .segmented label { position: relative; }
  .segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .segmented span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s-4); border-radius: 4px; font-weight: 600; font-size: var(--t-small); color: var(--c-muted); transition: background-color var(--d-fast), color var(--d-fast); }
  .segmented input:checked + span { background: var(--c-surface); color: var(--c-text); box-shadow: var(--e-1); }
  .segmented input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 1px; }

  /* ---------- Alerts, badges, pills, toasts ---------- */
  .alert { --a: var(--c-info); --a-bg: var(--c-info-soft); display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--a-bg); border: 1px solid var(--c-border-strong); margin: 0 0 var(--s-5); color: var(--c-text); position: relative; }
  .alert .alert-icon { color: var(--a); margin-top: 1px; }
  .alert-body { display: grid; gap: 2px; min-width: 0; }
  .alert p { margin: 0; }
  .alert ul { margin: var(--s-2) 0 0; }
  /* States are monochrome: meaning is carried by icon + label + treatment, never by colour. */
  .alert-success { --a: var(--c-text); --a-bg: var(--c-surface); border-color: var(--c-text); }
  .alert-warning { --a: var(--c-text); --a-bg: var(--c-surface); border: 1px dashed var(--c-text); padding-left: calc(var(--s-4) + 8px); overflow: hidden; }
  .alert-warning::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: repeating-linear-gradient(-45deg, var(--c-text) 0 2px, transparent 2px 5px); }
  .alert-error { --a: var(--c-on-error); --a-bg: var(--c-error); border-color: var(--c-error); color: var(--c-on-error); }
  .alert-error a { color: inherit; text-decoration: underline; }
  .alert-info { --a: var(--c-muted); --a-bg: var(--c-surface2); border-color: var(--c-border); }
  .alert:focus { outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-focus-inner); }
  .review-note { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-warning-soft); border: 1px solid color-mix(in srgb, var(--c-warning) 30%, transparent); margin-bottom: var(--s-6); }

  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-xs); font-size: var(--t-caption); font-weight: 600; line-height: 18px; background: var(--c-surface2); color: var(--c-muted); border: 1px solid var(--c-border); white-space: nowrap; vertical-align: middle; }
  .badge-ok { color: var(--c-text); background: var(--c-surface); border-color: var(--c-text); }
  .badge-warn { color: var(--c-text); background: var(--c-surface); border: 1px dashed var(--c-text); }
  .badge-bad { color: var(--c-on-error); background: var(--c-error); border-color: var(--c-error); }
  .badge-info { color: var(--c-text); background: var(--c-surface2); border-color: var(--c-border-strong); }
  .badge-brand { color: var(--c-on-primary); background: var(--c-primary); border-color: var(--c-primary); }
  .pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-caption); font-weight: 600; color: var(--c-muted); white-space: nowrap; }
  .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .pill-ok, .pill-warn, .pill-bad, .pill-info, .pill-brand { color: var(--c-text); }
  /* Dot shape carries the state: ok = disc, warn = triangle, bad = square, info/plain = ring. */
  .pill-warn .pill-dot { border-radius: 0; width: 9px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .pill-bad .pill-dot { border-radius: 1px; }
  .pill-info .pill-dot, .pill-plain .pill-dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .pill-dot.is-live { box-shadow: 0 0 0 0 currentColor; animation: nxt-ping 2.4s var(--ease-out) infinite; }
  @keyframes nxt-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

  .toast-region { position: fixed; z-index: var(--z-toast); right: var(--s-5); bottom: var(--s-5); display: grid; gap: var(--s-2); width: min(400px, calc(100vw - 32px)); pointer-events: none; }
  .toast { pointer-events: auto; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-elevated); color: var(--c-text); border: 1px solid var(--c-border); box-shadow: var(--e-3); font-weight: 500; font-size: var(--t-small); animation: nxt-toast-in var(--d-slow) var(--ease-out); }
  .toast .i { color: var(--c-text); }
  .toast[data-tone='error'] { background: var(--c-error); color: var(--c-on-error); border-color: var(--c-error); }
  .toast[data-tone='error'] .i { color: var(--c-on-error); }
  .toast[data-tone='info'] .i { color: var(--c-muted); }
  .toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--d-base), transform var(--d-base); }
  @keyframes nxt-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

  /* ---------- Progress, meters, rings, skeletons, loading mark ---------- */
  .meter { height: 6px; background: var(--c-surface2); border-radius: var(--r-round); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
  .meter > i { display: block; height: 100%; background: color-mix(in srgb, var(--c-text) 62%, var(--c-surface)); border-radius: inherit; transform-origin: left; animation: nxt-grow var(--d-slower) var(--ease-out); }
  .meter[data-level='high'] > i { background: repeating-linear-gradient(-45deg, var(--c-text) 0 2px, color-mix(in srgb, var(--c-text) 30%, var(--c-surface)) 2px 4px); }
  .meter[data-level='full'] { box-shadow: inset 0 0 0 1px var(--c-text); }
  .meter[data-level='full'] > i { background: var(--c-text); }
  @keyframes nxt-grow { from { transform: scaleX(0); } }
  .usage, .progress { display: grid; gap: 6px; }
  .usage + .usage { margin-top: var(--s-4); }
  .ring { position: relative; display: inline-grid; place-items: center; flex: none; }
  .ring svg { transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 4; }
  .ring-track { stroke: var(--c-surface2); }
  .ring-value { stroke: var(--c-primary); stroke-linecap: round; transition: stroke-dashoffset var(--d-slower) var(--ease-out); }
  .ring-text { position: absolute; font-size: 0.6875rem; font-weight: 700; }
  .skel { display: grid; gap: var(--s-2); }
  .skel i { display: block; height: 12px; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--c-surface2) 0%, color-mix(in srgb, var(--c-surface2) 60%, var(--c-surface)) 50%, var(--c-surface2) 100%); background-size: 200% 100%; animation: nxt-shimmer 1.4s ease-in-out infinite; }
  .skel i:nth-child(3n) { width: 62%; } .skel i:nth-child(3n+2) { width: 84%; }
  .skel-card i:first-child { height: 64px; width: 100%; border-radius: var(--r-md); }
  .skel-stat i:first-child { width: 40%; } .skel-stat i:last-child { height: 28px; width: 60%; }
  .skel-table i { height: 36px; width: 100% !important; }
  @keyframes nxt-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .loading { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-12) var(--s-4); }
  .mark-loading .mk-n { animation: nxt-node 1.2s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes nxt-node { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -4px); } }

  /* ---------- Empty & error states ---------- */
  .empty { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-10) var(--s-8); border-radius: var(--r-lg); background: var(--c-surface); border: 1px dashed var(--c-border-strong); overflow: hidden; isolation: isolate; }
  .empty-compact { padding: var(--s-6); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-link); }
  .empty-motif { position: absolute; right: -10%; top: 50%; translate: 0 -50%; width: 55%; height: 160%; color: var(--c-link); opacity: 0.16; z-index: -1; }
  .empty-copy { max-width: 52ch; }
  .empty :is(h2, h3, h4) { font: 600 var(--t-h3)/1.3 var(--font-sans); margin-bottom: var(--s-2); letter-spacing: -0.01em; }
  .empty .row { margin-top: var(--s-4); }
  .motif .motif-node { fill: var(--pa, var(--c-accent)); }
  .error-state { max-width: 640px; padding: var(--s-16) 0; }
  .error-state h1, .error-state h2 { margin: var(--s-4) 0 var(--s-3); }
  .error-code { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-error-soft); color: var(--c-error); }
  .error-state .row { margin-top: var(--s-6); }
  .error-ref { margin-top: var(--s-6); }

  /* ---------- Page header & breadcrumbs ---------- */
  .page-head { margin-bottom: var(--s-8); }
  .page-head-row { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: flex-end; }
  .page-head-text { min-width: 0; max-width: 72ch; }
  .page-head h1 { font: var(--fw-h2) clamp(1.625rem, 1.3rem + 1vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -0.028em; overflow-wrap: break-word; }
  .page-head .eyebrow { margin-bottom: var(--s-2); }
  .page-lede, .page-head p { margin: var(--s-2) 0 0; color: var(--c-muted); max-width: 64ch; }
  .page-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
  .page-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--s-3); font-size: var(--t-small); color: var(--c-muted); }
  .crumbs li { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
  .crumbs li + li::before { content: '/'; color: var(--c-border-strong); }
  .crumbs a { color: var(--c-muted); text-decoration: none; }
  .crumbs a:hover { color: var(--c-text); }

  /* ---------- Panels & cards (by role) ---------- */
  .panel { position: relative; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); background: var(--c-surface); box-shadow: var(--e-0); min-width: 0; }
  .panel + .panel, .panel + section, section + .panel { margin-top: var(--s-5); }
  .panel-head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-5); flex-wrap: wrap; }
  .panel-head > div:first-child { min-width: 0; flex: 1 1 260px; }
  .panel-head :is(h2, h3) { font: 600 var(--t-h3)/1.3 var(--font-sans); letter-spacing: -0.012em; }
  .panel-head p { margin: 4px 0 0; color: var(--c-muted); font-size: var(--t-small); }
  .panel > h2:first-child, .panel > h3:first-child { font: 600 var(--t-h3)/1.3 var(--font-sans); margin-bottom: var(--s-4); }
  .card { position: relative; display: block; border-radius: var(--r-md); color: var(--c-text); text-decoration: none; }
  .card-inset { padding: var(--s-4); background: var(--c-surface2); border: 1px solid var(--c-border); }
  .card-feature { padding: var(--s-5); }
  .card-action { padding: var(--s-5); border: 1px solid var(--c-border); background: var(--c-surface); transition: border-color var(--d-fast), transform var(--d-base) var(--ease-out), box-shadow var(--d-base); }
  a.card-action:hover { border-color: var(--c-border-strong); transform: translateY(-2px); box-shadow: var(--e-2); text-decoration: none; }
  .card-go { position: absolute; right: var(--s-4); top: var(--s-5); color: var(--c-muted); transition: transform var(--d-base) var(--ease-out); }
  a.card-action:hover .card-go { transform: translateX(3px); color: var(--c-link); }
  .card-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-link); margin-bottom: var(--s-3); }
  .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-3) var(--s-6); margin: 0; font-size: var(--t-body); }
  .kv dt { color: var(--c-muted); }
  .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .kv-section { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); margin: var(--s-6) 0 var(--s-2); }
  .secret-box { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-4); background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-code); word-break: break-all; }
  .codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); font-family: var(--font-mono); padding: var(--s-4) var(--s-5); background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
  .qr svg { width: 200px; height: 200px; padding: var(--s-3); background: #fff; border-radius: var(--r-md); }
  .h-xs { font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; margin: var(--s-2) 0 0; color: var(--c-muted); }
  .h-sm { font: 600 1.0625rem/1.3 var(--font-sans); margin: 0; }
  .divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-3); align-items: center; color: var(--c-muted); font-size: var(--t-small); }
  .divider::before, .divider::after { content: ''; height: 1px; background: var(--c-border); }
  hr.divider { display: block; }
  hr.divider::before, hr.divider::after { display: none; }

  /* ---------- Stat cards (a strip, not ten identical boxes) ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; margin: 0 0 var(--s-6); background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
  .stat { display: grid; align-content: start; gap: 6px; padding: var(--s-5); background: var(--c-surface); color: var(--c-text); text-decoration: none; min-width: 0; }
  .stats > .stat { border: 0; border-radius: 0; }
  .stat:not(.stats > .stat) { border: 1px solid var(--c-border); border-radius: var(--r-md); }
  a.stat:hover, .stat-link:hover { background: var(--c-primary-soft); text-decoration: none; }
  .stat-label { display: flex; gap: 6px; align-items: center; font-size: var(--t-small); color: var(--c-muted); font-weight: 500; }
  .stat strong, .stat-value { display: block; font: var(--fw-numeric) var(--t-numeric)/var(--lh-numeric) var(--ff-numeric); letter-spacing: var(--tr-numeric); font-variant-numeric: tabular-nums lining-nums; }
  .stat-suffix { font-size: var(--t-small); color: var(--c-muted); }
  .stat-hint { font-size: var(--t-small); color: var(--c-muted); }
  .stat-delta { font-size: var(--t-small); font-weight: 600; }
  .tone-ok, .tone-bad, .tone-warn, .tone-brand { color: var(--c-text); } .tone-plain, .tone-info { color: var(--c-muted); } .tone-bad { font-weight: 700; }
  .stat a { color: inherit; }
  .stat .chart { margin-top: var(--s-2); }

  /* ---------- Tabs ---------- */
  .tabset { min-width: 0; } /* as a grid/flex item, never let the scrolling tab row widen it */
  .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--s-6); overflow-x: auto; scrollbar-width: none; }
  .tabs a, .tabs [role='tab'] { position: relative; display: inline-flex; gap: 6px; align-items: center; padding: var(--s-3) var(--s-3); border: 0; background: none; color: var(--c-muted); font-weight: 600; font-size: var(--t-small); text-decoration: none; white-space: nowrap; cursor: pointer; }
  .tabs a:hover, .tabs [role='tab']:hover { color: var(--c-text); }
  .tabs a[aria-current='page'], .tabs [aria-selected='true'] { color: var(--c-text); }
  .tabs a[aria-current='page']::after, .tabs [aria-selected='true']::after { content: ''; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--c-primary); }
  .tab-count { font-size: var(--t-caption); padding: 0 6px; border-radius: var(--r-xs); background: var(--c-surface2); color: var(--c-muted); }
  .tabset.is-enhanced .tab-panel:not(.is-active) { display: none; }

  /* ---------- Menus (details/summary), tooltips ---------- */
  .menu { position: relative; display: inline-block; }
  .menu > summary { list-style: none; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu-caret { transition: transform var(--d-base) var(--ease-out); }
  .menu[open] .menu-caret { transform: rotate(180deg); }
  .menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); display: grid; gap: 1px; min-width: 220px; max-width: min(320px, 92vw); padding: 6px; background: var(--c-elevated); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--e-3); transform-origin: top right; animation: nxt-pop var(--d-base) var(--ease-out); }
  .menu-start .menu-list { right: auto; left: 0; transform-origin: top left; }
  @keyframes nxt-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
  .menu-list hr { margin: 4px 0; }
  .menu-item { display: flex; gap: var(--s-3); align-items: center; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); font-size: var(--t-small); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
  .menu-item .i { color: var(--c-muted); }
  .menu-item:hover, .menu-item:focus-visible { background: var(--c-surface2); text-decoration: none; outline: none; }
  .menu-item .kbd-group { margin-left: auto; }
  .menu-item.is-danger, .menu-item.is-danger .i { color: var(--c-error); }
  .menu-item.check { gap: var(--s-2); }
  .menu-who { display: grid; padding: 8px 10px; gap: 2px; }
  .menu-list form { margin: 0; }
  .tip { position: relative; display: inline-flex; }
  .tip-text { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; z-index: var(--z-dropdown); width: max-content; max-width: 260px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-text); color: var(--c-bg); font-size: var(--t-caption); font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity var(--d-fast), translate var(--d-fast) var(--ease-out); }
  .tip:hover .tip-text, .tip:focus-within .tip-text { opacity: 1; translate: -50% 0; }

  /* ---------- Dialogs & sheets (<dialog>) ---------- */
  dialog { color: var(--c-text); }
  .dialog, dialog:not([class]) { width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 900px); padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-elevated); box-shadow: var(--e-4); overflow: hidden; display: none; flex-direction: column; }
  .dialog[open], dialog:not([class])[open] { display: flex; animation: nxt-dialog-in var(--d-slow) var(--ease-out); }
  .dialog-sm { width: min(420px, calc(100vw - 24px)); } .dialog-lg { width: min(840px, calc(100vw - 24px)); }
  dialog::backdrop { background: rgb(0 0 0 / 0.56); backdrop-filter: blur(3px); animation: nxt-fade var(--d-base) ease-out; }
  @keyframes nxt-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
  @keyframes nxt-fade { from { opacity: 0; } }
  .dialog-head { display: flex; gap: var(--s-4); align-items: flex-start; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-border); }
  .dialog-head form { margin: 0; }
  .dialog-title { margin: 0; font: 600 var(--t-h4)/1.35 var(--font-sans); }
  .dialog-body { padding: var(--s-5); overflow-y: auto; display: grid; gap: var(--s-4); }
  .dialog-foot { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--c-border); background: var(--c-surface); }
  .sheet { max-width: 100vw; max-height: 100dvh; padding: 0; border: 1px solid var(--c-border); background: var(--c-elevated); color: var(--c-text); box-shadow: var(--e-4); overflow: hidden; }
  .sheet[open] { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: none; width: min(480px, 100vw); border-radius: var(--r-lg) 0 0 var(--r-lg); animation: nxt-sheet-in var(--d-slow) var(--ease-out); }
  @keyframes nxt-sheet-in { from { transform: translateX(24px); opacity: 0; } }
  @media (max-width: 767px) {
    .sheet[open] { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 90dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation-name: nxt-sheet-up; }
    @keyframes nxt-sheet-up { from { transform: translateY(32px); opacity: 0; } }
  }

  /* ---------- Avatars, files, feeds, timeline, onboarding ---------- */
  .avatar { --av: #525252; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--av) 22%, var(--c-surface)); color: color-mix(in srgb, var(--av) 70%, var(--c-text)); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 30%, transparent); }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; } .avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
  /* Avatars: grey steps, never hue (initials carry identity). */
  .hue-0 { --av: #000000; } .hue-1 { --av: #262626; } .hue-2 { --av: #404040; } .hue-3 { --av: #595959; } .hue-4 { --av: #737373; } .hue-5 { --av: #1A1A1A; } .hue-6 { --av: #333333; } .hue-7 { --av: #4D4D4D; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .avatar { --av: #D4D4D4; } }
  :root[data-theme='dark'] .avatar { --av: #D4D4D4; }
  .file { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); min-width: 0; }
  .file-thumb { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-sm); background: var(--c-surface2); color: var(--c-muted); overflow: hidden; }
  .file-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .file-image, .file-video, .file-audio, .file-pdf { color: var(--c-text); }
  .file-info { min-width: 0; flex: 1; }
  .file-name { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file-actions { display: flex; gap: var(--s-1); }
  .feed { list-style: none; padding: 0; margin: 0; display: grid; }
  .feed-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; margin: 0; border-bottom: 1px solid var(--c-border); }
  .feed-item:last-child { border-bottom: 0; }
  .feed-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--c-surface2); }
  .feed-icon .mark { width: 28px; height: 28px; }
  .feed-title { margin: 0; font-weight: 500; }
  .feed-title a { color: var(--c-text); text-decoration: none; }
  .feed-title a:hover { color: var(--c-link); text-decoration: underline; }
  .feed-meta { margin: 2px 0 0; font-size: var(--t-small); color: var(--c-muted); }
  .feed-text { margin: 4px 0 0; font-size: var(--t-small); }
  .is-unread .feed-title { font-weight: 700; }
  .is-unread .feed-title::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--c-primary); vertical-align: middle; }
  .timeline { list-style: none; padding: 0; margin: 0; position: relative; }
  .tl-item { position: relative; padding: 0 0 var(--s-5) var(--s-8); margin: 0; }
  .tl-item::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--c-border); }
  .tl-item:last-child::before { display: none; }
  .tl-dot { position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 3px; background: var(--c-surface); border: 2px solid currentColor; color: var(--c-border-strong); }
  .tl-item.tone-ok .tl-dot { color: var(--c-success); } .tl-item.tone-bad .tl-dot { color: var(--c-error); } .tl-item.tone-brand .tl-dot { color: var(--c-primary); }
  .tl-item.is-current .tl-dot { background: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
  .tl-when { margin: 0; font-size: var(--t-caption); color: var(--c-muted); font-family: var(--font-mono); }
  .tl-title { margin: 2px 0 0; font-weight: 600; }
  .tl-body { margin: 4px 0 0; color: var(--c-muted); font-size: var(--t-small); }
  .onboarding { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
  .onboarding-head { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-5); border-bottom: 1px solid var(--c-border); background: linear-gradient(120deg, var(--p-soft, var(--c-primary-soft)), transparent 70%); }
  .onboarding-head > div { flex: 1; min-width: 0; }
  .onboarding-head :is(h2, h3) { font: 600 var(--t-h3)/1.3 var(--font-sans); }
  .onboarding-head p { margin: 2px 0 0; }
  .onboarding-steps { list-style: none; margin: 0; padding: 0; }
  .onboarding-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); margin: 0; border-top: 1px solid var(--c-border); }
  .onboarding-steps li:first-child { border-top: 0; }
  .step-check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--c-surface2); color: var(--c-muted); }
  .is-done .step-check { background: var(--c-success-soft); color: var(--c-success); }
  .is-done .step-title { color: var(--c-muted); text-decoration: line-through; }
  .step-title { margin: 0; font-weight: 600; }
  .onboarding-steps p { margin: 0; }
  @media (max-width: 640px) { .onboarding-steps li { grid-template-columns: 28px minmax(0, 1fr); } .onboarding-steps .btn { grid-column: 2; justify-self: start; } }

  /* ---------- Tables ---------- */
  .table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
  .panel .table-wrap { border-radius: var(--r-sm); }
  table { font-size: var(--t-small); }
  th, td { text-align: left; padding: 10px var(--s-4); border-bottom: 1px solid var(--c-border); vertical-align: top; }
  th { font-weight: 600; font-size: var(--t-caption); letter-spacing: 0.02em; color: var(--c-muted); background: var(--c-surface2); white-space: nowrap; }
  tbody tr { transition: background-color var(--d-fast); }
  tbody tr:hover { background: color-mix(in srgb, var(--c-primary-soft) 55%, transparent); }
  tbody tr:last-child td { border-bottom: 0; }
  td.num, th.num { text-align: right; }
  td a { font-weight: 500; }
  th[data-sortable] { padding: 0; }
  th[data-sortable] button { display: flex; width: 100%; gap: 4px; align-items: center; padding: 10px var(--s-4); border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
  th.num[data-sortable] button { justify-content: flex-end; }
  th[data-sortable] button:hover { color: var(--c-text); }
  th[data-sortable] button::after { content: ''; width: 8px; height: 8px; opacity: 0.35; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
  th[aria-sort='ascending'] button::after { opacity: 1; transform: rotate(-135deg) translate(-2px, -2px); }
  th[aria-sort='descending'] button::after { opacity: 1; }
  .dt { display: grid; gap: var(--s-3); }
  .dt-bar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
  .dt-search { flex: 1 1 220px; max-width: 360px; }
  .dt-search input { width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); }
  .dt-search input:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 28%, transparent); }
  .dt-count { margin-left: auto; }
  .dt-bulk { display: flex; gap: var(--s-2); align-items: center; padding: 4px 4px 4px 12px; border-radius: var(--r-sm); background: var(--c-primary-soft); }
  .dt-check { width: 40px; }
  .dt-pager { display: flex; gap: var(--s-3); align-items: center; justify-content: flex-end; }
  .dt-caption { caption-side: top; text-align: left; padding: 0 0 var(--s-2); font-weight: 600; }
  @media (max-width: 640px) {
    .dt table, .dt tbody, .dt tr, .dt td { display: block; }
    .dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .dt tr { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-border); }
    .dt td { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--s-2); padding: 4px 0; border: 0; text-align: left !important; }
    .dt td::before { content: attr(data-label); color: var(--c-muted); font-size: var(--t-caption); font-weight: 600; }
    .dt td.dt-check::before { content: ''; }
  }

  /* ---------- Charts ---------- */
  .chart-fig { position: relative; margin: 0; display: grid; gap: var(--s-2); }
  .chart { width: 100%; height: auto; overflow: visible; }
  .chart-fig .chart { height: 200px; }
  .chart-grid { stroke: var(--c-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .chart-line { fill: none; stroke: var(--c-primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  /* Series: s0 solid, s1 dashed, s2 dotted — distinguishable without colour. */
  .chart-line { stroke: var(--c-text); }
  .chart-line.s1 { stroke: color-mix(in srgb, var(--c-text) 75%, var(--c-surface)); }
  .chart-line.s2 { stroke: var(--c-muted); }
  .chart-area { fill: color-mix(in srgb, var(--c-text) 9%, transparent); stroke: none; }
  .chart-area.s1, .chart-area.s2 { fill: none; }
  .chart-bar { fill: color-mix(in srgb, var(--c-text) 38%, var(--c-surface)); transform-box: fill-box; transform-origin: bottom; }
  .chart-bar.is-hl { fill: var(--c-text); }
  .spark-line { height: 32px; }
  .spark-line.tone-ok .chart-line, .spark-line.tone-bad .chart-line { stroke: var(--c-text); }
  .spark-line .chart-area { fill: color-mix(in srgb, currentColor 0%, color-mix(in srgb, var(--c-primary) 10%, transparent)); }
  [data-chart].is-pending .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  [data-chart].is-pending .chart-bar { transform: scaleY(0); }
  [data-chart].is-pending .chart-area { opacity: 0; }
  [data-chart].is-pending .rank-bar i { transform: scaleX(0); }
  [data-chart].is-drawn .chart-line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }
  [data-chart].is-drawn .chart-bar { transition: transform var(--d-slower) var(--ease-out); }
  [data-chart].is-drawn .chart-area { transition: opacity var(--d-slower) var(--ease-out) 0.3s; }
  [data-chart].is-drawn .rank-bar i { transition: transform var(--d-slower) var(--ease-out); }
  .chart-line.s1, [data-chart].is-pending .chart-line.s1, [data-chart].is-drawn .chart-line.s1, .spark-line.tone-bad .chart-line, [data-chart].is-drawn.spark-line.tone-bad .chart-line, [data-chart].is-pending.spark-line.tone-bad .chart-line { stroke-dasharray: 0.02 0.012; stroke-dashoffset: 0; }
  .chart-line.s2, [data-chart].is-pending .chart-line.s2, [data-chart].is-drawn .chart-line.s2 { stroke-dasharray: 0.001 0.012; stroke-dashoffset: 0; stroke-width: 2.5; }
  .chart-axis { position: absolute; left: 0; top: 0; height: 200px; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.6875rem; color: var(--c-muted); pointer-events: none; }
  .chart-axis span { background: color-mix(in srgb, var(--c-surface) 80%, transparent); padding-right: 4px; }
  .chart-x { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--c-muted); }
  .chart-legend { display: flex; gap: var(--s-4); font-size: var(--t-caption); color: var(--c-muted); }
  .lg { color: var(--c-text); }
  .lg::before { content: ''; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--c-text); }
  .lg.s1::before { border-top-style: dashed; border-top-color: color-mix(in srgb, var(--c-text) 75%, var(--c-surface)); } .lg.s2::before { border-top: 3px dotted var(--c-muted); }
  .rank { display: grid; gap: var(--s-2); }
  .rank-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 72px; gap: var(--s-3); align-items: center; font-size: var(--t-small); }
  .rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank-bar { height: 8px; border-radius: var(--r-round); background: var(--c-surface2); overflow: hidden; }
  .rank-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-text); transform-origin: left; }
  .rank-val { text-align: right; color: var(--c-muted); }
  .heat { position: relative; margin: 0; display: grid; gap: var(--s-2); overflow-x: auto; }
  .heat-grid { display: grid; grid-template-columns: auto repeat(var(--heat-cols, 24), minmax(10px, 1fr)); gap: 3px; align-items: center; font-size: 0.625rem; color: var(--c-muted); }
  .heat-col { text-align: center; }
  .heat-row { padding-right: 6px; }
  .heat-cell { display: block; aspect-ratio: 1; min-width: 10px; border-radius: 2px; background: var(--c-surface2); }
  .heat-cell.l1 { background: color-mix(in srgb, var(--c-text) 22%, var(--c-surface2)); } .heat-cell.l2 { background: color-mix(in srgb, var(--c-text) 45%, var(--c-surface2)); }
  .heat-cell.l3 { background: color-mix(in srgb, var(--c-text) 70%, var(--c-surface2)); } .heat-cell.l4 { background: var(--c-text); }
  .heat-legend { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
  .heat-legend .heat-cell { width: 10px; }
  .spark { display: block; width: 100%; height: 48px; margin-bottom: var(--s-4); }
  .spark-ok { fill: color-mix(in srgb, var(--c-text) 45%, var(--c-surface)); } .spark-bad { fill: var(--c-text); }
  .bars { display: grid; gap: var(--s-2); }
  .bar { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) 80px; gap: var(--s-3); align-items: center; font-size: var(--t-small); }
  .bar .meter { height: 8px; }

  /* ---------- Product identity helpers ---------- */
  .pname { display: inline-flex; gap: var(--s-2); align-items: center; font: 650 1rem/1 var(--font-display); letter-spacing: -0.01em; color: var(--c-text); }
  .pname-word span { color: var(--p-ink); }
  .mark { flex: none; border-radius: 22%; }
  /* Marks are black tiles with white ink; on dark grounds they invert (white tile, black ink). */
  .mark .mk-t, .mark .mk-f, .mark .mk-l, .mark .mk-n { transition: fill var(--d-fast); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .mark .mk-t { fill: #FFFFFF; } :root:not([data-theme='light']) .mark .mk-f { fill: #DEDEDE; }
    :root:not([data-theme='light']) .mark :is(.mk-l, .mk-n) { fill: #000000; } :root:not([data-theme='light']) .mark .mk-g { stroke: #000000; }
  }
  :root[data-theme='dark'] .mark .mk-t, :is(.hero, .sec-night, .cta-band, .auth-side, .phero, .gf:not(.gf-slim), .is-home .gh-site) .mark .mk-t { fill: #FFFFFF; }
  :root[data-theme='dark'] .mark .mk-f, :is(.hero, .sec-night, .cta-band, .auth-side, .phero, .gf:not(.gf-slim), .is-home .gh-site) .mark .mk-f { fill: #DEDEDE; }
  :root[data-theme='dark'] .mark :is(.mk-l, .mk-n), :is(.hero, .sec-night, .cta-band, .auth-side, .phero, .gf:not(.gf-slim), .is-home .gh-site) .mark :is(.mk-l, .mk-n) { fill: #000000; }
  :root[data-theme='dark'] .mark .mk-g, :is(.hero, .sec-night, .cta-band, .auth-side, .phero, .gf:not(.gf-slim), .is-home .gh-site) .mark .mk-g { stroke: #000000; }

  /* ---------- Shared app building blocks used across products ---------- */
  .mini-tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .mini-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast), transform var(--d-base) var(--ease-out); }
  .mini-tile:hover { border-color: var(--c-border-strong); transform: translateY(-1px); text-decoration: none; }
  .mini-tile strong { display: block; }
  .mini-tile small { display: block; color: var(--c-muted); }
  .slash-list { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); }
  .slash-list li { position: relative; padding-left: 22px; margin: 0; }
  .slash-list li::before { content: ''; position: absolute; left: 2px; top: 0.5em; width: 7px; height: 7px; border-radius: 2px; background: var(--c-primary); }
  .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
  .checklist li { display: flex; gap: var(--s-2); align-items: center; margin: 0; }
  .checklist .done { text-decoration: line-through; color: var(--c-muted); }
  .inline-form { display: inline-flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }
  .inline-form .field { min-width: 160px; }
  .rec-filters { align-items: flex-end; margin-bottom: var(--s-4); }
  .rec-filters .field { margin: 0; }
  .rec-filters .spacer, .spacer { flex: 1; }
  .pipeline { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .pipeline-col { background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-2); align-content: start; }
  .pipeline-col h3 { font-size: var(--t-small); margin: 0 0 var(--s-1); display: flex; justify-content: space-between; color: var(--c-muted); }
  .pipeline-card { display: block; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); color: var(--c-text); text-decoration: none; box-shadow: var(--e-1); transition: border-color var(--d-fast), transform var(--d-fast); }
  .pipeline-card:hover { border-color: var(--c-primary); transform: translateY(-1px); text-decoration: none; }
  pre.code { white-space: pre-wrap; word-break: break-word; max-height: 32rem; overflow: auto; margin: 0; }
  pre.code:empty { display: none; }
  pre.code.is-error { color: var(--c-error); }
  td pre.code { max-height: 12rem; font-size: var(--t-small); }
  .status-note { display: inline-flex; gap: var(--s-2); align-items: center; font-size: var(--t-small); font-weight: 600; padding: 2px 10px; border-radius: var(--r-xs); background: var(--c-primary-soft); color: var(--c-link); width: fit-content; }
  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); margin-right: var(--s-2); }
  .dot { background: var(--c-text); }
  .dot[data-state='degraded'] { border-radius: 0; width: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .dot[data-state='outage'] { border-radius: 1px; outline: 2px solid var(--c-text); outline-offset: 1px; } .dot[data-state='unknown'] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-muted); }
  .ai-ask { background: var(--c-surface2); }
  .ai-reply .prose { max-width: none; }
  .cf-turnstile { min-height: 65px; }

  /* ---------- Account & membership patterns (shared by the account area and product settings) ---------- */
  .attn-list { list-style: none; margin: 0; padding: 0; display: grid; }
  .attn-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; margin: 0; border-top: 1px solid var(--c-border); }
  .attn-list li:first-child { border-top: 0; padding-top: 0; }
  .attn-list p { margin: 0; }
  .attn-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-surface2); }
  .attn-list .tone-bad .attn-icon { background: var(--c-error-soft); color: var(--c-error); }
  .attn-list .tone-warn .attn-icon { background: var(--c-warning-soft); color: var(--c-warning); }
  .attn-list .tone-info .attn-icon { background: var(--c-info-soft); color: var(--c-info); }
  .attn-list li[class^='tone-'] .step-title, .attn-list li[class^='tone-'] { color: var(--c-text); }
  .attention { border-left: 3px solid var(--c-warning); }
  @media (max-width: 640px) { .attn-list li { grid-template-columns: 36px minmax(0, 1fr); } .attn-list li > :last-child { grid-column: 2; justify-self: start; } .stat { padding: var(--s-4); } }
  .overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
  .overview-grid > .stack > * + * { margin-top: var(--s-5); }
  @media (max-width: 1100px) { .overview-grid { grid-template-columns: minmax(0, 1fr); } }
  .prod-list { list-style: none; padding: 0; margin: 0 calc(var(--s-3) * -1); display: grid; }
  .prod-list li { margin: 0; }
  .prod-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 16px; gap: var(--s-3); align-items: center; padding: 10px var(--s-3); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; }
  .prod-row:hover { background: var(--p-soft, var(--c-surface2)); text-decoration: none; }
  .prod-row > .i { color: var(--c-muted); }
  .prod-main { display: grid; min-width: 0; }
  .prod-main strong { font-size: var(--t-small); }
  .prod-main small { color: var(--c-muted); font-size: var(--t-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
  .settings-aside { position: sticky; top: calc(var(--layout-header) + var(--s-6)); }
  @media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } .settings-aside { position: static; } }
  .pname-who { display: flex; gap: var(--s-3); align-items: center; margin: var(--s-2) 0; }
  .pname-who > span { display: grid; min-width: 0; }
  .pname-cell { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 600; }
  .link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); font-size: var(--t-small); }
  .sec-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
  .sec-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); margin: 0; }
  .sec-facts .i { color: var(--c-link); margin-top: 2px; }
  .danger-zone { border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-border)); }
  .danger-zone .panel-head h2 { color: var(--c-error); }
  .data-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
  @media (max-width: 640px) { .data-cols { grid-template-columns: minmax(0, 1fr); } }
  .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--t-small); }
  .ticks li { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
  .ticks .i { color: var(--c-success); margin-top: 3px; }
  .limits { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--t-small); }
  .limits li { margin: 0; display: flex; gap: 8px; }
  .limits li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 0.55em; border-radius: 1px; background: var(--c-muted); }
  .member-group + .member-group { margin-top: var(--s-8); }
  .member-group > .overline { margin-bottom: var(--s-3); }
  .member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
  .member { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .member.is-active { border-top: 3px solid var(--p); }
  .member:not(.is-active) { background: transparent; border-style: dashed; }
  .member-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  .member-head h3 { font: 650 1rem/1.2 var(--font-display); }
  .member-head p { margin: 2px 0 0; }
  .member-plan { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .member-usage { display: grid; gap: var(--s-3); }
  .member-usage .usage + .usage { margin-top: 0; }
  .usage-cap { margin: 0; }
  .member-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .integrations { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
  .integration { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  .integration .card-icon { margin: 0; }
  .integration h2 { font: 600 var(--t-h4)/1.3 var(--font-sans); }
  .integration p { margin: 2px 0 0; }
  .integration-side { display: flex; gap: var(--s-3); align-items: center; }
  @media (max-width: 640px) { .integration { grid-template-columns: 36px minmax(0, 1fr); } .integration-side { grid-column: 2; } }
  .app-note { margin-top: var(--s-10); }
}