/* Base for previews and pages */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.fn-stage { padding: var(--space-5); }
.fn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.fn-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fn-muted { color: var(--ink-muted); }

/* Logo */
.fn-logo { display: inline-flex; gap: 10px; align-items: center; font: 600 15px/1.2 var(--font-sans); letter-spacing: -.05em; color: var(--ink); text-decoration: none; }
.fn-logo-mark { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: skewY(-18deg); }
.fn-logo-mark i { background: currentColor; display: block; }
.fn-logo-mark i:nth-child(2) { opacity: .55; }
.fn-logo-mark i:nth-child(3) { grid-column: 1 / 3; width: 65%; }

/* Button */
.fn-btn { display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 13px 17px; font: 10px/1.2 var(--font-mono); text-transform: uppercase; color: var(--ink); background: transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.fn-btn:hover { background: var(--surface-selected); }
.fn-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fn-btn--primary:hover { background: var(--accent); filter: brightness(1.06); }
.fn-btn--nav { padding: 10px 14px; }
.fn-btn:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 4px; }
.fn-btn--sm { padding: 8px 12px; font-size: 9px; }
.fn-btn--lg { padding: 16px 22px; font-size: 11px; }
.fn-btn--block { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.fn-btn--ghost { border-color: transparent; }
.fn-btn--ghost:hover { border-color: var(--line); background: transparent; }
.fn-btn--icon { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; font-size: 13px; }
.fn-btn[disabled], .fn-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.fn-btn[aria-busy="true"] { cursor: progress; }
.fn-btn[aria-busy="true"]::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: fn-pulse 1s ease-in-out infinite; }
.fn-link { color: var(--ink); text-decoration: none; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 0 0 1px; cursor: pointer; background: none; font: inherit; }
.fn-link:hover { border-color: var(--ink); }
.fn-link:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }
@keyframes fn-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fn-btn[aria-busy="true"]::after { animation: none; } }

/* Kicker and section head */
.fn-kicker { font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-subtle); margin-bottom: 25px; }
.fn-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.fn-section-title { font-size: clamp(45px, 6vw, 95px); line-height: .85; letter-spacing: -.075em; font-weight: 500; margin: 0; max-width: 800px; }
.fn-section-desc { font-size: 13px; line-height: 1.65; color: var(--ink-muted); max-width: var(--desc-max); margin: 20px 0 0; }
@media (max-width: 800px) { .fn-section-head { display: block; } }

/* Headline with serif accent */
.fn-headline { font-weight: 500; letter-spacing: -.09em; line-height: .8; margin: 0; }
.fn-headline em, .fn-headline .fn-accent { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.05em; }
.fn-headline .fn-accent { font-style: normal; }

/* Pro tag */
.fn-tag { display: inline-block; padding: 6px 11px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.fn-rule-accent { border-top: 2px solid var(--accent); padding-top: var(--space-5); }

/* Status dot */
.fn-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px var(--accent); }

/* Comparison table */
.fn-table { border-top: 1px solid var(--line); }
.fn-table-row { display: grid; grid-template-columns: 1.05fr repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.fn-table-row > * { padding: 17px 22px 17px 0; font-size: 14px; line-height: 1.45; }
.fn-table-row > * + * { padding-left: 22px; border-left: 1px solid var(--line); }
.fn-table-cap { font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); padding-top: 20px !important; }
.fn-table-no { color: var(--ink-faint); }
.fn-table .is-featured { background: var(--surface-raised); }
.fn-table-head > * { padding-top: 30px; padding-bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.fn-table-head h3 { font-size: clamp(34px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.07em; line-height: .9; margin: 0; }
.fn-table-head .is-featured h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.05em; }
.fn-table-head .is-featured { box-shadow: inset 0 2px 0 var(--accent); }
.fn-table-head p { margin: 10px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.fn-table-head .fn-btn { align-self: flex-start; }
.fn-price { font-size: 26px; letter-spacing: -.05em; }
.fn-price small { display: block; font: 10px/1.5 var(--font-mono); color: var(--ink-subtle); letter-spacing: 0; margin-top: 5px; }
@media (max-width: 800px) {
  .fn-table-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-table-cap { grid-column: 1 / -1; padding: 18px 0 4px !important; }
  .fn-table-row > * + * { padding-left: 0; border-left: 0; }
  .fn-table-row > * + * + * { padding-left: 10px; border-left: 1px solid var(--line); }
}

/* Plan picker and token equation */
.fn-equation { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 clamp(14px, 2.4vw, 40px); padding: 0 0 26px; }
.fn-term b { display: block; font-weight: 500; font-size: clamp(56px, 9.5vw, 150px); line-height: .8; letter-spacing: -.08em; font-variant-numeric: tabular-nums; }
.fn-term small { display: block; margin-top: 14px; font: 10px var(--font-mono); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .08em; }
.fn-term.is-total b { color: var(--accent-text); }
.fn-op { font-family: var(--font-serif); font-size: clamp(36px, 5.5vw, 90px); line-height: 1; color: var(--ink-faint); }
.fn-plans { border: 0; margin: 0; padding: 0; min-width: 0; }
.fn-plans legend { padding: 0; margin-bottom: 14px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-plan-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fn-plan-list label { position: relative; cursor: pointer; padding: 16px 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s; }
.fn-plan-list input { position: absolute; opacity: 0; }
.fn-plan-list b { display: block; font-weight: 500; font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -.05em; }
.fn-plan-list small { display: block; margin-top: 6px; font: 10px var(--font-mono); color: var(--ink-subtle); }
.fn-plan-list label:hover { background: var(--surface-raised); }
.fn-plan-list label:has(input:checked) { background: var(--surface-selected); box-shadow: inset 0 2px 0 var(--accent); }
.fn-plan-list label:has(input:checked) b { color: var(--accent-text); }
.fn-plan-list label:has(input:focus-visible) { outline: 1px solid var(--focus-ring); outline-offset: -4px; }
@media (max-width: 800px) { .fn-plan-list { grid-template-columns: 1fr 1fr; } }

/* Waitlist form */
.fn-waitlist { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 580px; }
.fn-input { flex: 1 1 260px; min-width: 0; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 13px 20px; color: var(--ink); font: 14px var(--font-sans); }
.fn-input::placeholder { color: var(--ink-subtle); }
.fn-input:focus { outline: none; border-color: var(--focus-ring); }
.fn-footnote { margin: 14px 0 0; font: 11px/1.7 var(--font-mono); color: var(--ink-subtle); }

/* Trust list */
.fn-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: var(--space-5); border-top: 1px solid var(--line); padding-top: 26px; }
.fn-trust b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.02em; margin-bottom: 8px; }
.fn-trust p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
@media (max-width: 800px) { .fn-trust { grid-template-columns: 1fr; gap: 22px; } }

/* Framed image */
.fn-frame { margin: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-frame); transform: rotate(2deg); background: var(--green-100); }
.fn-frame img { display: block; width: 100%; height: auto; }

/* Pipeline card */
.fn-card { width: 230px; height: 310px; box-sizing: border-box; border: 1px solid rgba(216,243,220,.17); background: var(--surface-glass); backdrop-filter: blur(14px); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: var(--green-50); }
.fn-card-index { font: 9px var(--font-mono); color: var(--green-300); text-transform: uppercase; }
.fn-card-name { font-size: 30px; letter-spacing: -.06em; margin-bottom: 6px; }
.fn-card-data { font: 10px/2 var(--font-mono); color: var(--green-200); }
.fn-card-data strong { color: var(--green-300); font-weight: 400; }

/* Skeleton */
.fn-sk { display: inline-block; width: 3.2em; height: .62em; border-radius: var(--radius-sm); background: var(--skeleton); vertical-align: middle; }

/* Orbit */
.fn-orbit { position: absolute; border: 1px solid var(--orbit); border-radius: 50%; pointer-events: none; }

/* Text field */
.fn-field { display: grid; gap: 8px; min-width: 0; }
.fn-field-label { display: flex; justify-content: space-between; gap: 12px; font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-field-label a, .fn-field-label button { text-transform: none; letter-spacing: 0; font: 11px var(--font-mono); }
.fn-field .fn-input { flex: none; width: 100%; box-sizing: border-box; }
.fn-field-hint { font-size: 12px; line-height: 1.5; color: var(--ink-muted); margin: 0; }
.fn-field.is-invalid .fn-input { border-width: 2px; border-color: var(--error-text); padding: 12px 19px; }
.fn-field.is-invalid .fn-field-hint { color: var(--error-text); }
.fn-field.is-invalid .fn-field-hint::before { content: "Check this: "; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.fn-input:disabled { opacity: .45; cursor: not-allowed; }
.fn-input-wrap { position: relative; }
.fn-input-wrap .fn-input { padding-right: 70px; }
.fn-input-wrap .fn-input-action { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 10px var(--font-mono); text-transform: uppercase; color: var(--ink-subtle); background: none; border: 0; cursor: pointer; padding: 4px; }
.fn-input-wrap .fn-input-action:hover { color: var(--ink); }

/* Checkbox */
/* Checkbox: the input itself is the custom box (appearance: none), so any markup around it keeps working.
   .fn-checkbox is the same control inline, for filter rows with a single line of text. */
.fn-check, .fn-checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-muted); cursor: pointer; }
.fn-checkbox { display: inline-flex; align-items: center; gap: 10px; }
.fn-check input[type="checkbox"], .fn-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.fn-checkbox input[type="checkbox"] { margin: 0; }
.fn-check input[type="checkbox"]::after, .fn-checkbox input[type="checkbox"]::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; box-sizing: border-box; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px) scale(0); opacity: 0; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .12s ease; }
.fn-check:hover input[type="checkbox"]:not(:disabled), .fn-checkbox:hover input[type="checkbox"]:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.fn-check input[type="checkbox"]:checked, .fn-checkbox input[type="checkbox"]:checked,
.fn-check input[type="checkbox"]:indeterminate, .fn-checkbox input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); }
.fn-check input[type="checkbox"]:checked::after, .fn-checkbox input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) translate(-1px, -1px) scale(1); }
.fn-check input[type="checkbox"]:indeterminate::after, .fn-checkbox input[type="checkbox"]:indeterminate::after { left: 3px; top: 7px; width: 8px; height: 0; border-width: 0 0 2px 0; opacity: 1; transform: none; }
.fn-check input[type="checkbox"]:focus-visible, .fn-checkbox input[type="checkbox"]:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }
.fn-check input[type="checkbox"]:disabled, .fn-checkbox input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.fn-check input[type="checkbox"]:disabled:checked, .fn-checkbox input[type="checkbox"]:disabled:checked { background: var(--line-strong); border-color: var(--line-strong); }
.fn-field.is-invalid .fn-check input[type="checkbox"], .fn-check.is-invalid input[type="checkbox"] { border-width: 2px; border-color: var(--error-text); }
.fn-check:has(input:disabled), .fn-checkbox:has(input:disabled) { cursor: not-allowed; }
.fn-check b { color: var(--ink); font-weight: 500; }
.fn-check small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.fn-check.is-disabled { cursor: not-allowed; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .fn-check input[type="checkbox"], .fn-checkbox input[type="checkbox"], .fn-check input[type="checkbox"]::after, .fn-checkbox input[type="checkbox"]::after { transition: none; } }

/* Search field */
.fn-search { max-width: 560px; }
.fn-search-box { position: relative; }
.fn-search .fn-input { width: 100%; box-sizing: border-box; padding-left: 46px; padding-right: 64px; }
.fn-search-icon { position: absolute; left: 20px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: 1.5px solid var(--ink-subtle); border-radius: 50%; pointer-events: none; }
.fn-search-icon::after { content: ""; position: absolute; width: 6px; height: 1.5px; background: var(--ink-subtle); right: -5px; bottom: -2px; transform: rotate(45deg); }
.fn-kbd { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); min-width: 20px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: 10px/1.4 var(--font-mono); color: var(--ink-subtle); text-align: center; }
.fn-search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-subtle); font-size: 16px; cursor: pointer; }
.fn-search-clear:hover { color: var(--ink); background: var(--surface-selected); }
.fn-results { margin: 8px 0 0; padding: 6px 0; list-style: none; border: 1px solid var(--line); background: var(--surface); }
.fn-results li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 18px; cursor: pointer; }
.fn-results li[aria-selected="true"], .fn-results li:hover { background: var(--surface-selected); }
.fn-results b { font-weight: 500; font-size: 14px; }
.fn-results mark { background: none; color: var(--accent-text); font-weight: 600; }
.fn-results span { font: 10px var(--font-mono); color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.fn-results small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-muted); }
.fn-results-empty { padding: 14px 18px; font-size: 13px; color: var(--ink-muted); }

/* Skeleton table */
.fn-sktable { width: 100%; border-collapse: collapse; }
.fn-sktable th { text-align: left; font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); font-weight: 400; padding: 0 16px 12px 0; border-bottom: 1px solid var(--line); }
.fn-sktable td { padding: 17px 16px 17px 0; border-bottom: 1px solid var(--line); }
.fn-sktable .fn-sk { display: block; height: 10px; }
.fn-sktable .fn-sk--pill { width: 64px; height: 18px; border-radius: var(--radius-pill); }
.fn-shimmer .fn-sk { animation: fn-shimmer 1.6s ease-in-out infinite; }
@keyframes fn-shimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fn-shimmer tr:nth-child(2) .fn-sk { animation-delay: .15s; }
.fn-shimmer tr:nth-child(3) .fn-sk { animation-delay: .3s; }
.fn-shimmer tr:nth-child(4) .fn-sk { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .fn-shimmer .fn-sk { animation: none; } }
.fn-status { display: inline-flex; align-items: center; gap: 8px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); white-space: nowrap; }
.fn-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-strong); }
.fn-status--on { color: var(--accent-text); }
.fn-status--on::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent); }
.fn-status--wait::before { border-style: dashed; }

/* Auth forms */
.fn-auth { width: 100%; max-width: 380px; box-sizing: border-box; display: grid; gap: 18px; }
.fn-auth h2 { margin: 0; font-size: 44px; font-weight: 500; letter-spacing: -.07em; line-height: .9; }
.fn-auth h2 em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.04em; }
.fn-auth-lead { margin: -4px 0 4px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.fn-divider { display: flex; align-items: center; gap: 12px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-divider::before, .fn-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.fn-auth-foot { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.fn-auth-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font: 10px var(--font-mono); color: var(--ink-subtle); }
.fn-auth-rules li::before { content: "○ "; }
.fn-auth-rules li.is-met { color: var(--accent-text); }
.fn-auth-rules li.is-met::before { content: "● "; }

/* Link subscription */
.fn-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fn-steps li { padding: 14px 16px 0 0; font-size: 13px; color: var(--ink-muted); }
.fn-steps li span { display: block; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); margin-bottom: 4px; }
.fn-steps li[aria-current="step"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
.fn-steps li.is-done span::after { content: "  ✓"; color: var(--accent-text); }
.fn-subs { margin: 0; padding: 0; border: 0; min-width: 0; }
.fn-subs legend { padding: 0; margin-bottom: 12px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-sub { display: grid; grid-template-columns: 18px 1fr auto; gap: 16px; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.fn-subs .fn-sub:first-of-type { border-top: 1px solid var(--line); }
.fn-sub:hover { background: var(--surface-raised); }
.fn-sub:has(input:checked) { background: var(--surface-selected); }
.fn-sub .fn-check { display: contents; }
.fn-sub b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.02em; color: var(--ink); }
.fn-sub small { display: block; margin-top: 3px; font: 10px var(--font-mono); color: var(--ink-subtle); }
.fn-sub.is-disabled { cursor: default; }
.fn-sub.is-disabled b { color: var(--ink-muted); }
.fn-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin: 22px 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.fn-note::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.fn-note b { color: var(--ink); font-weight: 500; }
.fn-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@media (max-width: 800px) { .fn-steps { grid-template-columns: 1fr; } .fn-steps li { padding-bottom: 10px; } }

/* Select */
.fn-select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 11px 36px 11px 16px; color: var(--ink); font: 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 14px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.fn-select:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }
.fn-select option { background: var(--surface); color: var(--ink); }

/* Scrollbars: thin and themed. every pre (code block) and combobox list has it built in; .fn-scroll opts any other overflow container in. */
.fn-code { --scrollbar-thumb: rgba(116,198,157,.38); --scrollbar-thumb-hover: rgba(116,198,157,.7); }
.fn-scroll, pre, .fn-combobox-list { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
.fn-scroll::-webkit-scrollbar, pre::-webkit-scrollbar, .fn-combobox-list::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
.fn-scroll::-webkit-scrollbar-track, pre::-webkit-scrollbar-track, .fn-combobox-list::-webkit-scrollbar-track { background: transparent; }
.fn-scroll::-webkit-scrollbar-corner, pre::-webkit-scrollbar-corner, .fn-combobox-list::-webkit-scrollbar-corner { background: transparent; }
.fn-scroll::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb, .fn-combobox-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); }
.fn-scroll::-webkit-scrollbar-thumb:hover, pre::-webkit-scrollbar-thumb:hover, .fn-combobox-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }

/* Select (styled single-choice dropdown, a select-only combobox; behaviour in select.js, or in React) */
.fn-combobox { position: relative; display: block; min-width: 0; }
.fn-combobox--inline { display: inline-block; }
.fn-combobox-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; }
.fn-combobox-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; padding: 12px 18px 12px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 14px/1.4 var(--font-sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.fn-combobox-trigger:hover { background: var(--surface-selected); }
.fn-combobox-trigger:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }
.fn-combobox-trigger[aria-expanded="true"] { border-color: var(--focus-ring); }
.fn-combobox-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-combobox-value.is-placeholder { color: var(--ink-subtle); }
.fn-combobox-trigger .fn-icon { flex: none; width: 12px; height: 12px; color: var(--ink-subtle); transition: transform .2s; }
.fn-combobox-trigger[aria-expanded="true"] .fn-icon { transform: rotate(180deg); }
.fn-combobox-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(420px, 90vw); max-height: 280px; overflow-y: auto; box-sizing: border-box; margin: 0; padding: 6px 0; list-style: none; }
.fn-combobox-list[hidden] { display: none; }
.fn-combobox--up .fn-combobox-list { top: auto; bottom: calc(100% + 6px); }
.fn-combobox-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; color: var(--ink); font: 13px/1.4 var(--font-sans); cursor: pointer; }
.fn-combobox-option.is-active { background: var(--surface-selected); }
.fn-combobox-option[aria-selected="true"]::after { content: ""; flex: none; width: 14px; height: 14px; background: var(--accent-text); -webkit-mask: var(--fn-check-mask) center / contain no-repeat; mask: var(--fn-check-mask) center / contain no-repeat; }
.fn-combobox-option[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.fn-combobox {  --fn-check-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12.5 10 17.5 19 7"/%3E%3C/svg%3E'); }
.fn-combobox.is-disabled .fn-combobox-trigger, .fn-combobox-trigger:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.fn-combobox--sm .fn-combobox-trigger { padding: 8px 14px 8px 16px; font-size: 13px; }
.fn-field.is-invalid .fn-combobox-trigger { border-width: 2px; border-color: var(--error-text); padding: 11px 17px 11px 19px; }
@media (prefers-reduced-motion: reduce) { .fn-combobox-trigger, .fn-combobox-trigger .fn-icon { transition: none; } }

/* Filter chips */
.fn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-chip { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 13px; background: transparent; color: var(--ink-muted); font: 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.fn-chip:hover { color: var(--ink); background: var(--surface-raised); }
.fn-chip[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--accent); color: var(--ink); }
.fn-chip[aria-pressed="true"]::before { content: "● "; color: var(--accent-text); }
.fn-chip:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

/* Search bar */
.fn-searchbar { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fn-searchbar-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.fn-searchbar-row .fn-search { flex: 1 1 320px; max-width: none; }
.fn-searchbar-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.fn-count { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-count b { color: var(--ink); font-weight: 400; }

/* Pagination */
.fn-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.fn-pages { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fn-page { min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); font: 12px var(--font-mono); text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.fn-page:hover { color: var(--ink); border-color: var(--line); }
.fn-page[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); cursor: default; }
.fn-page:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 2px; }
.fn-page-gap { min-width: 22px; text-align: center; color: var(--ink-faint); font: 12px var(--font-mono); }
.fn-page-step { padding-left: 14px; padding-right: 14px; }
.fn-page-size { display: flex; align-items: center; gap: 10px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-page-size .fn-select { padding-top: 8px; padding-bottom: 8px; }
.fn-loadmore { display: grid; justify-items: center; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .fn-pages .fn-page-num { display: none; } .fn-pages .fn-page-num[aria-current="page"] { display: inline-grid; } .fn-page-gap { display: none; } }

/* Icon: 24px grid, 1.5px round strokes, drawn as a mask so it takes currentColor */
.fn-icon { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--fn-i) center / contain no-repeat; mask: var(--fn-i) center / contain no-repeat; }
.fn-icon--sm { width: 12px; height: 12px; vertical-align: -1px; }
.fn-icon--lg { width: 20px; height: 20px; vertical-align: -4px; }
.fn-icon--xl { width: 32px; height: 32px; }
.fn-icon-muted { color: var(--ink-subtle); }
.fn-icon-accent { color: var(--accent-text); }
.fn-icon--search { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="10.5" cy="10.5" r="6.5"/%3E%3Cpath d="M15.5 15.5 20.5 20.5"/%3E%3C/svg%3E'); }
.fn-icon--close { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 6l12 12M18 6 6 18"/%3E%3C/svg%3E'); }
.fn-icon--check { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12.5 10 17.5 19 7"/%3E%3C/svg%3E'); }
.fn-icon--plus { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14M5 12h14"/%3E%3C/svg%3E'); }
.fn-icon--minus { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E'); }
.fn-icon--chevron-down { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9l6 6 6-6"/%3E%3C/svg%3E'); }
.fn-icon--chevron-up { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 15l6-6 6 6"/%3E%3C/svg%3E'); }
.fn-icon--chevron-left { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M15 6l-6 6 6 6"/%3E%3C/svg%3E'); }
.fn-icon--chevron-right { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 6l6 6-6 6"/%3E%3C/svg%3E'); }
.fn-icon--arrow-right { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 12h15M13 6l6 6-6 6"/%3E%3C/svg%3E'); }
.fn-icon--arrow-up-right { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 17 17 7M8.5 7H17v8.5"/%3E%3C/svg%3E'); }
.fn-icon--external { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M13 5h6v6M19 5l-8 8M17 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 4 18.5v-10A1.5 1.5 0 0 1 5.5 7H10"/%3E%3C/svg%3E'); }
.fn-icon--copy { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="8.5" y="8.5" width="11.5" height="11.5" rx="1.5"/%3E%3Cpath d="M15.5 8.5V5.5A1.5 1.5 0 0 0 14 4H5.5A1.5 1.5 0 0 0 4 5.5V14a1.5 1.5 0 0 0 1.5 1.5h3"/%3E%3C/svg%3E'); }
.fn-icon--calendar { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="5.5" width="16" height="14.5" rx="1.5"/%3E%3Cpath d="M4 10h16M8.5 3.5v4M15.5 3.5v4"/%3E%3C/svg%3E'); }
.fn-icon--clock { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="M12 7.5V12l3 2"/%3E%3C/svg%3E'); }
.fn-icon--info { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="M12 11v5M12 8v.01"/%3E%3C/svg%3E'); }
.fn-icon--alert { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 4 21 19.5H3z"/%3E%3Cpath d="M12 10v4M12 17v.01"/%3E%3C/svg%3E'); }
.fn-icon--filter { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6.5h16M7 12h10M10 17.5h4"/%3E%3C/svg%3E'); }
.fn-icon--sliders { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h9M19 7h1M4 17h1M11 17h9"/%3E%3Ccircle cx="16" cy="7" r="2.5"/%3E%3Ccircle cx="8" cy="17" r="2.5"/%3E%3C/svg%3E'); }
.fn-icon--refresh { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3"/%3E%3Cpath d="M19.5 4.5V9H15"/%3E%3C/svg%3E'); }
.fn-icon--play { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7.5 5.5v13l11-6.5z"/%3E%3C/svg%3E'); }
.fn-icon--trash { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 7h15M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5"/%3E%3C/svg%3E'); }
.fn-icon--more { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5.5 12h.01M12 12h.01M18.5 12h.01" stroke-width="3"/%3E%3C/svg%3E'); }
.fn-icon--link { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/%3E%3Cpath d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/%3E%3C/svg%3E'); }
.fn-icon--eye { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E'); }
.fn-icon--cloud { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 18.5h10.5a4 4 0 0 0 .5-7.97A6 6 0 0 0 6.4 11.9 3.3 3.3 0 0 0 7 18.5z"/%3E%3C/svg%3E'); }
.fn-icon--code { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8.5 7 3.5 12l5 5M15.5 7l5 5-5 5"/%3E%3C/svg%3E'); }
.fn-icon--terminal { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5" width="17" height="14" rx="1.5"/%3E%3Cpath d="M7.5 10l2.5 2-2.5 2M12.5 14.5h4"/%3E%3C/svg%3E'); }
.fn-icon--euro { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M17.5 6.8A7 7 0 1 0 17.5 17.2M4.5 10.5h9M4.5 13.5h9"/%3E%3C/svg%3E'); }
.fn-icon--user { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8.5" r="3.5"/%3E%3Cpath d="M5 20a7 7 0 0 1 14 0"/%3E%3C/svg%3E'); }
.fn-icon--bell { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15z"/%3E%3Cpath d="M10 20.5h4"/%3E%3C/svg%3E'); }
.fn-icon--logout { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M9 4H5.5A1.5 1.5 0 0 0 4 5.5v13A1.5 1.5 0 0 0 5.5 20H9"/%3E%3Cpath d="M14.5 15.5 19 11l-4.5-4.5"/%3E%3Cpath d="M19 11H9"/%3E%3C/svg%3E'); }
.fn-icon--menu { --fn-i: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h16M4 12h16M4 17h16"/%3E%3C/svg%3E'); }
.fn-btn .fn-icon { margin: -4px 6px -3px 0; width: 13px; height: 13px; }

/* Icon button */
.fn-iconbtn { position: relative; width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; transition: background .2s, color .2s; }
.fn-iconbtn:hover { background: var(--surface-selected); color: var(--ink); }
.fn-iconbtn:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 2px; }
.fn-iconbtn--outline { border-color: var(--line-strong); color: var(--ink); }
.fn-iconbtn--primary { background: var(--accent); color: var(--on-accent); }
.fn-iconbtn--primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.06); }
.fn-iconbtn--sm { width: 28px; height: 28px; }
.fn-iconbtn--sm .fn-icon { width: 13px; height: 13px; }
.fn-iconbtn--lg { width: 44px; height: 44px; }
.fn-iconbtn--lg .fn-icon { width: 20px; height: 20px; }
.fn-iconbtn[aria-pressed="true"] { background: var(--surface-selected); color: var(--accent-text); border-color: var(--accent); }
.fn-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

/* Tooltip */
.fn-tip { position: relative; display: inline-flex; }
.fn-tip-body { position: absolute; z-index: 20; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); width: max-content; max-width: 240px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--ink); color: var(--surface); font: 12px/1.45 var(--font-sans); text-align: left; box-shadow: var(--shadow-popover); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; }
.fn-tip-body::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.fn-tip-body kbd { font: 10px var(--font-mono); opacity: .75; margin-left: 6px; }
.fn-tip:hover .fn-tip-body, .fn-tip:focus-within .fn-tip-body, .fn-tip.is-open .fn-tip-body { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fn-tip--below .fn-tip-body { bottom: auto; top: calc(100% + 10px); }
.fn-tip--below .fn-tip-body::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
.fn-term-tip { border-bottom: 1px dashed var(--line-strong); cursor: help; }

/* Tag */
.fn-tag--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-muted); padding: 5px 10px; }
.fn-tag--subtle { background: var(--surface-selected); color: var(--ink); }
.fn-tag--sm { padding: 3px 8px; font-size: 9px; }
.fn-tag .fn-icon { width: 11px; height: 11px; margin: -2px 5px -1px 0; }
.fn-tag-remove { margin: -4px -6px -4px 6px; width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; }
.fn-tag-remove:hover { background: var(--surface-selected); }
.fn-tag-remove:focus-visible { outline: 1px solid var(--focus-ring); }
.fn-tag-remove .fn-icon { width: 10px; height: 10px; margin: 0; }
.fn-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Textarea */
.fn-textarea { width: 100%; box-sizing: border-box; min-height: 112px; resize: vertical; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 14px 18px; color: var(--ink); font: 14px/1.6 var(--font-sans); }
.fn-textarea::placeholder { color: var(--ink-subtle); }
.fn-textarea:focus { outline: none; border-color: var(--focus-ring); }
.fn-textarea--code { font: 12px/1.8 var(--font-mono); }
.fn-field.is-invalid .fn-textarea { border-width: 2px; border-color: var(--error-text); padding: 13px 17px; }
.fn-field-foot { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fn-field-count { font: 10px var(--font-mono); color: var(--ink-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-field-count.is-over { color: var(--ink); font-weight: 500; }

/* Checkbox: indeterminate and groups */
.fn-checkgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.fn-checkgroup legend { padding: 0; margin-bottom: 12px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-checkgroup .fn-checkgroup-items { display: grid; gap: 10px; padding-left: 30px; }

/* Datetime display */
.fn-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-time--mono { font: 11px var(--font-mono); color: var(--ink-muted); }
.fn-time-rel { border-bottom: 1px dotted var(--line-strong); cursor: default; }
.fn-time-zone { font: 10px var(--font-mono); color: var(--ink-subtle); margin-left: 4px; }
.fn-datetime-list { display: grid; grid-template-columns: 160px 1fr; margin: 0; border-top: 1px solid var(--line); }
.fn-datetime-list dt, .fn-datetime-list dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fn-datetime-list dt { font: 10px/1.8 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-datetime-list dd { font-size: 14px; }

/* Popover surface (dropdown menus, date picker) */
.fn-popover { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); }

/* Datetime picker */
.fn-dp { position: relative; max-width: 300px; }
.fn-dp-trigger { position: relative; }
.fn-dp-trigger .fn-input { width: 100%; box-sizing: border-box; padding-right: 48px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.fn-dp-trigger .fn-icon { position: absolute; right: 18px; top: 50%; margin-top: -8px; color: var(--ink-subtle); pointer-events: none; }
.fn-cal { width: 300px; box-sizing: border-box; padding: 16px; margin-top: 8px; }
.fn-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fn-cal-head b { font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.fn-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fn-cal-grid abbr { text-decoration: none; text-align: center; font: 9px/24px var(--font-mono); text-transform: uppercase; color: var(--ink-subtle); }
.fn-day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink); font: 12px var(--font-sans); cursor: pointer; font-variant-numeric: tabular-nums; padding: 0; }
.fn-day:hover { background: var(--surface-selected); }
.fn-day.is-outside { color: var(--ink-faint); }
.fn-day.is-today { border-color: var(--line-strong); }
.fn-day[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.fn-day:disabled { color: var(--ink-faint); opacity: .5; cursor: not-allowed; background: none; }
.fn-day:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 1px; }
.fn-cal-time { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fn-cal-time label { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); margin-right: auto; }
.fn-cal-time .fn-input, .fn-field .fn-cal-time .fn-input { width: 56px; text-align: center; padding: 8px 6px; flex: none; font-variant-numeric: tabular-nums; }
.fn-cal-time span { color: var(--ink-subtle); }
.fn-cal-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }

/* Dropdown menu */
.fn-dropdown { position: relative; display: inline-block; }
.fn-dropdown-trigger .fn-icon { margin: -4px -2px -3px 8px; width: 12px; height: 12px; transition: transform .2s; }
.fn-dropdown-trigger[aria-expanded="true"] .fn-icon { transform: rotate(180deg); }
.fn-menu { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; min-width: 220px; margin: 0; padding: 6px 0; list-style: none; }
.fn-menu--right { left: auto; right: 0; }
.fn-menu[hidden] { display: none; }
.fn-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 14px; border: 0; background: transparent; color: var(--ink); font: 13px var(--font-sans); text-align: left; cursor: pointer; }
.fn-menu-item:hover, .fn-menu-item:focus-visible { background: var(--surface-selected); outline: none; }
.fn-menu-item .fn-icon { color: var(--ink-subtle); }
.fn-menu-item kbd { margin-left: auto; font: 10px var(--font-mono); color: var(--ink-subtle); }
.fn-menu-item[aria-checked="true"]::after, .fn-menu-item[aria-selected="true"]::after { content: ""; margin-left: auto; width: 14px; height: 14px; background: var(--accent-text); -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12.5 10 17.5 19 7"/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12.5 10 17.5 19 7"/%3E%3C/svg%3E') center / contain no-repeat; }
.fn-menu-item[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.fn-menu-label { padding: 8px 14px 4px; font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-menu-sep { height: 1px; margin: 6px 0; background: var(--line); }

/* Loader */
.fn-spinner { position: relative; display: inline-block; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 50%; animation: fn-orbit 1.1s linear infinite; }
.fn-spinner::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.fn-spinner--sm { width: 16px; height: 16px; }
.fn-spinner--sm::after { width: 5px; height: 5px; margin-left: -2.5px; top: -3px; }
.fn-spinner--lg { width: 56px; height: 56px; }
.fn-spinner--lg::after { width: 9px; height: 9px; margin-left: -4.5px; top: -5px; }
@keyframes fn-orbit { to { transform: rotate(360deg); } }
.fn-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.fn-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: fn-pulse 1s ease-in-out infinite; }
.fn-dots i:nth-child(2) { animation-delay: .15s; }
.fn-dots i:nth-child(3) { animation-delay: .3s; }
.fn-progress { display: grid; gap: 8px; }
.fn-progress-head { display: flex; justify-content: space-between; gap: 12px; font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-subtle); }
.fn-progress-head b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.fn-progress-track { position: relative; height: 3px; background: var(--line); overflow: hidden; border-radius: var(--radius-sm); }
.fn-progress-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: inherit; transition: width .4s ease-out; }
.fn-progress--indeterminate .fn-progress-fill { width: 30%; animation: fn-slide 1.4s ease-in-out infinite; }
@keyframes fn-slide { from { left: -30%; } to { left: 100%; } }
.fn-loading { display: grid; justify-items: center; gap: 16px; padding: 40px 20px; text-align: center; }
.fn-loading p { margin: 0; font-size: 13px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .fn-spinner, .fn-dots i, .fn-progress--indeterminate .fn-progress-fill { animation: none; } .fn-progress--indeterminate .fn-progress-fill { left: 0; width: 100%; opacity: .5; } }

/* Stepper (vertical) and number stepper */
.fn-steps--vertical { display: block; border-top: 0; counter-reset: fn-step; }
.fn-steps--vertical li { position: relative; padding: 0 0 22px 44px; counter-increment: fn-step; }
.fn-steps--vertical li::before { content: counter(fn-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font: 11px var(--font-mono); color: var(--ink-subtle); background: var(--surface); z-index: 1; }
.fn-steps--vertical li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.fn-steps--vertical li[aria-current="step"] { box-shadow: none; }
.fn-steps--vertical li[aria-current="step"]::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fn-steps--vertical li.is-done::before { content: "✓"; color: var(--accent-text); border-color: var(--accent); }
.fn-steps--vertical li.is-done span::after { content: none; }
.fn-steps--vertical li span { display: block; padding-top: 5px; margin: 0; font: 500 14px/1.4 var(--font-sans); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.fn-steps--vertical li p { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.fn-numstep { justify-self: start; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px; }
.fn-numstep input { width: 48px; border: 0; background: transparent; color: var(--ink); text-align: center; font: 500 15px var(--font-sans); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.fn-numstep input::-webkit-outer-spin-button, .fn-numstep input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fn-numstep input:focus { outline: none; }
.fn-numstep:focus-within { border-color: var(--focus-ring); }

/* Code sample */
.fn-code { background: var(--green-900); color: var(--green-50); border: 1px solid rgba(216,243,220,.13); border-radius: var(--radius-md); overflow: hidden; }
.fn-code-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(216,243,220,.13); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--green-300); }
.fn-code-head .fn-code-title { margin-right: auto; }
.fn-code-head .fn-iconbtn { color: var(--green-200); }
.fn-code-head .fn-iconbtn:hover { background: rgba(116,198,157,.12); color: var(--green-50); }
.fn-code-copied { color: var(--green-300); opacity: 0; transition: opacity .2s; }
.fn-code.is-copied .fn-code-copied { opacity: 1; }
.fn-code pre { margin: 0; padding: 16px 0; overflow-x: auto; font: 12px/1.9 var(--font-mono); counter-reset: fn-line; }
.fn-code code { display: block; min-width: max-content; }
.fn-code .ln { display: block; padding: 0 20px 0 0; }
.fn-code .ln::before { counter-increment: fn-line; content: counter(fn-line); display: inline-block; width: 28px; margin-right: 16px; text-align: right; color: var(--green-500); user-select: none; }
.fn-code .ln.is-hl { background: rgba(116,198,157,.1); box-shadow: inset 2px 0 0 var(--green-300); }
.fn-code .k { color: var(--green-300); }
.fn-code .s { color: var(--green-200); }
.fn-code .f { color: var(--green-100); }
.fn-code .c { color: var(--green-400); font-style: italic; }
.fn-code .p { color: var(--green-400); user-select: none; }
.fn-code-foot { padding: 10px 16px; border-top: 1px solid rgba(216,243,220,.13); font: 12px/1.5 var(--font-sans); color: var(--green-200); }
.fn-code--inline { display: inline; padding: 2px 6px; border-radius: var(--radius-sm); font: 12px var(--font-mono); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); }

/* Status helpers */
.fn-tone-info { --tone: var(--info-text); --tone-bg: var(--info-surface); --tone-fill: var(--accent); }
.fn-tone-warning { --tone: var(--warning-text); --tone-bg: var(--warning-surface); --tone-fill: var(--warning); }
.fn-tone-error { --tone: var(--error-text); --tone-bg: var(--error-surface); --tone-fill: var(--error); }

/* Banner */
.fn-banner { --tone: var(--info-text); --tone-bg: var(--info-surface); --tone-fill: var(--accent); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: start; padding: 14px 10px 14px 16px; background: var(--tone-bg); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--tone-fill); color: var(--ink); }
.fn-banner--warning { --tone: var(--warning-text); --tone-bg: var(--warning-surface); --tone-fill: var(--warning); }
.fn-banner--error { --tone: var(--error-text); --tone-bg: var(--error-surface); --tone-fill: var(--error); }
.fn-banner > .fn-icon { color: var(--tone); margin-top: 2px; width: 18px; height: 18px; }
.fn-banner-body { min-width: 0; }
.fn-banner-title { display: block; font-weight: 500; font-size: 14px; letter-spacing: -.01em; color: var(--tone); }
.fn-banner-text { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.fn-banner-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 13px; }
.fn-banner .fn-iconbtn { margin: -6px 0 -6px 0; }
.fn-banner--page { border-width: 0 0 1px; box-shadow: inset 0 3px 0 var(--tone-fill); padding: 12px 7vw; grid-template-columns: auto 1fr auto auto; align-items: center; }
.fn-banner--page .fn-banner-text { margin: 0; display: inline; }
.fn-banner--page .fn-banner-title { display: inline; margin-right: 6px; }
.fn-banner--page .fn-banner-actions { margin: 0; }

/* Toast */
.fn-toasts { position: fixed; z-index: 50; right: 24px; bottom: 24px; display: grid; gap: 10px; width: min(380px, calc(100vw - 48px)); margin: 0; padding: 0; list-style: none; }
.fn-toasts--static { position: static; }
.fn-toast { --tone: var(--info-text); --tone-fill: var(--accent); position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: start; padding: 14px 8px 14px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); color: var(--ink); animation: fn-toast-in .25s ease-out; }
.fn-toast--warning { --tone: var(--warning-text); --tone-fill: var(--warning); }
.fn-toast--error { --tone: var(--error-text); --tone-fill: var(--error); }
.fn-toast > .fn-icon { color: var(--tone); margin-top: 1px; }
.fn-toast b { display: block; font-weight: 500; font-size: 14px; letter-spacing: -.01em; }
.fn-toast p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.fn-toast-actions { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; }
.fn-toast .fn-iconbtn { margin: -6px 0; }
.fn-toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tone-fill); transform-origin: left; animation: fn-toast-timer var(--toast-life, 5s) linear forwards; }
.fn-toast:hover .fn-toast-timer, .fn-toast:focus-within .fn-toast-timer { animation-play-state: paused; }
.fn-toast.is-leaving { animation: fn-toast-out .2s ease-in forwards; }
@keyframes fn-toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fn-toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes fn-toast-timer { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .fn-toast, .fn-toast.is-leaving { animation: none; } .fn-toast-timer { display: none; } }

/* Tabs */
.fn-tabs { display: flex; gap: 26px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.fn-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 14px; border: 0; background: none; color: var(--ink-muted); font: 14px var(--font-sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.fn-tab:hover { color: var(--ink); }
.fn-tab[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.fn-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.fn-tab:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: -2px; }
.fn-tab[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.fn-tab .fn-icon { color: var(--ink-subtle); }
.fn-tabpanel { padding-top: 20px; font-size: 14px; color: var(--ink-muted); }
.fn-tabpanel:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 4px; }
.fn-tabs--pill { display: inline-flex; width: max-content; max-width: 100%; justify-self: start; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.fn-tabs--pill .fn-tab { padding: 8px 14px; border-radius: var(--radius-pill); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.fn-tabs--pill .fn-tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 400; }
.fn-tabs--pill .fn-tab[aria-selected="true"]::after { content: none; }

/* Counter badge */
.fn-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-selected); color: var(--ink); font: 600 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; vertical-align: middle; }
.fn-badge--accent { background: var(--accent); color: var(--on-accent); }
.fn-badge--warning { background: var(--warning); color: var(--on-warning); }
.fn-badge--error { background: var(--error); color: var(--on-error); }
.fn-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-muted); }
.fn-badge--sm { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.fn-badge--dot { min-width: 0; width: 9px; height: 9px; padding: 0; }
.fn-badge-anchor { position: relative; display: inline-flex; }
.fn-badge-anchor > .fn-badge { position: absolute; top: -3px; right: -5px; box-shadow: 0 0 0 2px var(--surface); }
.fn-badge-anchor > .fn-badge--dot { top: 3px; right: 3px; }
.fn-badge.is-bumped { animation: fn-bump .35s ease-out; }
@keyframes fn-bump { 40% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .fn-badge.is-bumped { animation: none; } }

/* App shell: topbar, sidebar and page structure for signed-in product UI - shared by every Finimbus app that
   has one (the product app, the account area). Page content below it (cards, tables, forms) stays local. */
.fn-app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.fn-app-topbar { height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 20px; gap: 14px; background: var(--surface); }
.fn-app-topbar__spacer { flex: 1; }
.fn-app-avatar { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-raised); color: var(--ink-muted); font-weight: 600; font-size: 12px; text-decoration: none; transition: background .2s, color .2s; }
.fn-app-avatar:hover { background: var(--surface-selected); color: var(--ink); text-decoration: none; }
.fn-app-avatar__initials { display: flex; align-items: center; justify-content: center; }
/* The full name beside the initials, on screens wide enough for it (put .fn-app-avatar--named on the avatar and the name in .fn-app-avatar__name). Phones keep the compact circle. */
.fn-app-avatar__name { display: none; }
@media (min-width: 801px) {
  .fn-app-avatar--named { width: auto; padding: 0 14px 0 0; gap: 8px; border-radius: var(--radius-pill); }
  .fn-app-avatar--named .fn-app-avatar__initials { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-selected); }
  .fn-app-avatar--named .fn-app-avatar__name { display: inline; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink); }
}
.fn-app-body { display: flex; flex: 1; min-width: 0; }
.fn-app-sidebar { width: 236px; flex-shrink: 0; padding: 20px 12px; border-right: 1px solid var(--line); }
.fn-sidegroup { font: 10px var(--font-mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); padding: 16px 12px 6px; }
.fn-sidegroup:first-child { padding-top: 0; }
.fn-sidelink { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-pill); font-size: 13.5px; color: var(--ink-muted); }
.fn-sidelink:hover { background: var(--surface-selected); color: var(--ink); text-decoration: none; }
.fn-sidelink[aria-current="page"] { background: var(--surface-selected); color: var(--ink); font-weight: 500; }
.fn-sidelink--danger { color: var(--error-text); }
/* Space between links, so a hovered link never touches the current one. */
.fn-sidelink + .fn-sidelink { margin-top: 6px; }
/* The plan of the account, under the links: a label and the tier. */
.fn-sidetier { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding: 16px 12px 0; border-top: 1px solid var(--line); font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.fn-app-main { flex: 1; min-width: 0; padding: 36px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fn-tile-min, 420px)), 1fr)); column-gap: 24px; row-gap: 0; align-content: start; }
/* The main area fills the space beside the sidebar. Page content spans all of it; a .fn-tile (a card, a panel) flows
   into as many columns as fit, side by side like a bento grid, and stacks on a narrow screen. */
.fn-app-main > * { grid-column: 1 / -1; min-width: 0; }
.fn-app-main > .fn-tile { grid-column: auto; margin-bottom: 24px; }
.fn-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.fn-page-header h1 { font-size: 24px; margin: 0 0 6px; }
.fn-page-header p { margin: 0; font-size: 14px; color: var(--ink-muted); max-width: 60ch; }
/* The menu button opens the sidebar as a drawer on narrow screens; it does not exist on wide ones. Each app toggles
   .is-nav-open on .fn-app-shell (and aria-expanded on the button): a class, so it works on any stack. */
.fn-app-menubtn { display: none; }
.fn-app-scrim { display: none; }
@media (max-width: 800px) {
  .fn-app-menubtn { display: inline-grid; margin-left: -8px; }
  .fn-app-topbar { padding: 0 12px; gap: 8px; }
  .fn-app-topbar .fn-logo { flex-shrink: 0; }
  .fn-app-sidebar { display: none; }
  .fn-app-main { padding: 24px 16px; }
  .fn-app-shell.is-nav-open .fn-app-sidebar { display: block; position: fixed; z-index: 40; top: 60px; bottom: 0; left: 0; width: min(280px, 82vw); overflow-y: auto; background: var(--surface); box-shadow: var(--shadow-popover); }
  .fn-app-shell.is-nav-open .fn-app-scrim { display: block; position: fixed; z-index: 39; inset: 60px 0 0 0; background: color-mix(in srgb, var(--ink) 40%, transparent); }
}

/* Theme switcher: a pill of three fn-iconbtn (light / dark / system). Behaviour lives in theme-switcher.js,
   next to this file - see its README for why this one component ships JS. */
.fn-theme-switcher { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px; gap: 2px; }

/* Nimbi, the mascot: always on paper, edges faded into the ground */
.fn-mascot-ground { position: relative; overflow: hidden; background: var(--green-50); color: var(--green-900); }
.fn-mascot { display: block; max-width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.fn-mascot--front { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); }
.fn-mascot-ground .fn-orbit { border-color: rgba(8,28,21,.1); }

/* Scenes: Nimbi illustrations rendered twice, on a light and on a dark ground. Both <img>s sit in the markup and
   the theme picks one (the custom properties inherit, so a Paper section inside a Dark page still works). A scene
   with only a light render shows it on any theme, and its ground turns paper so the render never floats on dark.
   Dark and Paper only: the renders' grounds don't match Deep. */
:root, [data-theme="dark"], [data-theme="deep"] { --scene-dark: block; --scene-light: none; }
[data-theme="paper"] { --scene-dark: none; --scene-light: block; }
.fn-scene-ground { position: relative; overflow: hidden; background: var(--surface); color: var(--ink); }
.fn-scene-ground:not(:has(.fn-scene--dark)) { --surface: var(--green-50); --ink: var(--green-900); --ink-muted: var(--green-600); --ink-subtle: var(--green-600); --line: rgba(8,28,21,.13); --orbit: rgba(8,28,21,.1); }
/* Scenes are 1408px wide and are never scaled up: their backgrounds match the panel, so a scene that is smaller than the panel just sits centred on it (its faded edges disappear into the panel) instead of being blown up soft. */
:root { --scene-max-width: 1408px; }
.fn-scene { max-width: 100%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-composite: intersect; }
.fn-scene--dark { display: var(--scene-dark); }
.fn-scene--light { display: var(--scene-light); }
.fn-scene:only-of-type { display: block; }
/* Contrast panel (fn-scene-ground--inverse): the panel shows the render opposite to the theme, on the opposite ground:
   the light render on a paper ground when the theme is Dark, the dark render on a dark ground when it is Paper. The
   panel then stands out from the page beside it. AuthScreen and StatusPage use it. A scene with a light render only
   keeps its paper ground on every theme (the rule above wins, it is more specific). */
:root, [data-theme="dark"], [data-theme="deep"] { --scene-flip-surface: var(--green-50); --scene-flip-ink: var(--green-900); --scene-flip-ink-muted: var(--green-600); --scene-flip-ink-subtle: var(--green-600); --scene-flip-line: rgba(8,28,21,.13); --scene-flip-orbit: rgba(8,28,21,.1); }
[data-theme="paper"] { --scene-flip-surface: var(--green-900); --scene-flip-ink: var(--green-50); --scene-flip-ink-muted: var(--green-200); --scene-flip-ink-subtle: var(--green-300); --scene-flip-line: rgba(216,243,220,.13); --scene-flip-orbit: rgba(116,198,157,.13); }
.fn-scene-ground--inverse { --surface: var(--scene-flip-surface); --ink: var(--scene-flip-ink); --ink-muted: var(--scene-flip-ink-muted); --ink-subtle: var(--scene-flip-ink-subtle); --line: var(--scene-flip-line); --orbit: var(--scene-flip-orbit); }
.fn-scene-ground--inverse .fn-scene--dark:not(:only-of-type) { display: var(--scene-light); }
.fn-scene-ground--inverse .fn-scene--light:not(:only-of-type) { display: var(--scene-dark); }

/* AuthScreen: the scene panel on the left, the form on the dark ground. The screen is one viewport tall (100dvh) and the
   scene is laid over the art panel, not stacked in it: the scene's height follows its width, so in the flow it pushed the
   page past the viewport and made it scroll. It is centred behind the logo, the claim and the promises, which sit in the
   flow on top of it (claim near the top, over the scene's empty upper part). Only a form taller than the viewport can
   make the page scroll. */
.fn-auth-screen { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 100vh; min-height: 100dvh; background: var(--green-900); color: var(--green-50); }
.fn-auth-screen__art { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: 44px 56px; border-right: 1px solid var(--line); }
.fn-auth-screen__art > .fn-logo, .fn-auth-screen__art > .fn-auth-screen__claim, .fn-auth-screen__art > .fn-auth-screen__promises { position: relative; z-index: 1; }
.fn-auth-screen__art .fn-scene { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(115%, 150dvh, var(--scene-max-width)); max-width: none; }
.fn-auth-screen__claim { margin: clamp(16px, 5dvh, 56px) 0 0; font-size: 60px; font-size: clamp(40px, 5.6dvh, 60px); font-weight: 500; line-height: .88; letter-spacing: -.075em; max-width: 560px; }
.fn-auth-screen__claim em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.05em; }
.fn-auth-screen__promises { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: auto 0 0; padding: 34px 0 0; list-style: none; border-top: 1px solid var(--line); font: 10px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-subtle); }
.fn-auth-screen__form { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 44px 72px; }
@media (max-width: 800px) {
  .fn-auth-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fn-auth-screen__art { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fn-auth-screen__art .fn-scene { position: static; transform: none; align-self: center; width: 460px; max-width: 100%; }
  .fn-auth-screen__claim { display: none; }
  .fn-auth-screen__promises { align-self: stretch; margin-top: 0; padding-top: 14px; gap: 14px; justify-content: space-between; font-size: 9px; letter-spacing: .12em; }
  .fn-auth-screen__form { padding: 30px 24px; justify-content: flex-start; }
}

/* StatusPage: an HTTP status page, the same split as AuthScreen (scene left, message right) */
.fn-status-page { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 100vh; min-height: 100dvh; background: var(--surface); color: var(--ink); }
.fn-status-page__art { position: relative; display: flex; flex-direction: column; padding: 44px 56px; border-right: 1px solid var(--line); }
.fn-status-page__art > .fn-logo { position: relative; z-index: 1; }
/* Laid over the panel like AuthScreen's (in the flow its height, which follows its width, pushed the page past the viewport) */
.fn-status-page__art .fn-scene { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(115%, 150dvh, var(--scene-max-width)); max-width: none; }
.fn-status-page__body { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 44px 72px; }
.fn-status-page__title { font-size: clamp(44px, 5vw, 72px); line-height: .86; }
.fn-status-page__lead { margin: 26px 0 30px; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.fn-status-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fn-status-page__ref { margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font: 10px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }
@media (max-width: 800px) {
  .fn-status-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fn-status-page__art { padding: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fn-status-page__art .fn-scene { position: static; transform: none; align-self: center; width: 460px; max-width: 100%; margin: 0; }
  .fn-status-page__body { padding: 30px 24px 44px; justify-content: flex-start; }
}