@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/outfit.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/hanken-grotesk-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); }

/* Evergreen: Hanken Grotesk reads, Outfit speaks (titles, headings, big
   numbers), JetBrains Mono labels and lines up figures. */
html {
    --fr-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fr-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Palette: change a value in the light block and in BOTH dark blocks (a test keeps those two identical), and in
   partner.css, whose --pp-* mirror these. The sidebar is navy in both themes. */
:root {
    --fr-bg: #f4f6f3;
    --fr-surface: #ffffff;
    --fr-border: #dde3df;
    --fr-line-soft: #eef2ee;
    --fr-text: #0f2540;
    --fr-text-muted: #5b6878;
    --fr-text-faint: #b9c3ce;
    --fr-accent: #2f7d3f;
    --fr-accent-ink: color-mix(in srgb, var(--fr-accent) 80%, black);
    --fr-range: #4ca65a;
    --fr-sidebar-bg: #0f2540;
    --fr-sidebar-text: #a9b8cb;
    --fr-sidebar-active: #6cc47a;
    --fr-feature-bg: #0f2540;
    --fr-on-accent: #ffffff;

    /* The stacked chart's other series: navy against the green, silver for
       the quiet one. A green and a navy survive every color blindness. */
    --fr-series-2: #0f2540;
    --fr-series-3: #b9c3ce;

    --fr-success: #2f7d3f;
    --fr-success-bg: #e6efe4;
    --fr-success-tint: rgba(47, 125, 63, 0.12);
    --fr-success-border: #b7d3b4;
    --fr-danger: #b9542e;
    --fr-danger-bg: #f8e3dc;
    --fr-danger-border: #b9542e;
    --fr-danger-tint: rgba(185, 84, 46, 0.1);
    --fr-danger-border-soft: #e7b9a8;
    --fr-info: #2f5d8a;
    --fr-info-bg: #e9eef4;
    --fr-info-tint: rgba(47, 93, 138, 0.12);
    --fr-warn: #8a5a0e;
    --fr-warn-fill: #d99a2b;
    --fr-warn-bg: #fbefd9;
    --fr-warn-tint: rgba(217, 154, 43, 0.18);
    --fr-neutral-tint: #e9edf1;

    --fr-shadow-md: rgba(15, 37, 64, 0.12);
    --fr-shadow-lg: rgba(15, 37, 64, 0.22);
    --fr-overlay: rgba(7, 17, 31, 0.55);
    --fr-hover-tint: rgba(15, 37, 64, 0.06);

    /* Tells the browser to theme what CSS cannot reach: select popups,
       scrollbars, autofill, date pickers. */
    color-scheme: light;
}

/* Dark theme.
 *
 * Two selectors, identical bodies, and they must stay in sync: an explicit
 * choice stamps data-theme on <html> server-side, while "system" defers to the
 * OS. Resolving system in JS instead would paint the light theme first and
 * snap to dark on load. Cards sit on navy, the page under them darker still,
 * and green turns to mint, the brand's green on navy. */
:root[data-theme="dark"] {
    --fr-bg: #07111f;
    --fr-surface: #0f2540;
    --fr-border: #1e3a5c;
    --fr-line-soft: #18324f;
    --fr-text: #eef3f0;
    --fr-text-muted: #a9b8cb;
    --fr-text-faint: #3d5577;
    --fr-accent: #6cc47a;
    --fr-accent-ink: var(--fr-accent);
    --fr-range: #6cc47a;
    --fr-sidebar-bg: #0a1a2e;
    --fr-sidebar-text: #a9b8cb;
    --fr-sidebar-active: #6cc47a;
    --fr-feature-bg: #143259;
    --fr-on-accent: #07111f;

    --fr-series-2: #8fb0d6;
    --fr-series-3: #3d5577;

    --fr-success: #6cc47a;
    --fr-success-bg: rgba(108, 196, 122, 0.14);
    --fr-success-tint: rgba(108, 196, 122, 0.18);
    --fr-success-border: rgba(108, 196, 122, 0.36);
    --fr-danger: #e08a68;
    --fr-danger-bg: rgba(224, 138, 104, 0.14);
    --fr-danger-border: rgba(224, 138, 104, 0.6);
    --fr-danger-tint: rgba(224, 138, 104, 0.18);
    --fr-danger-border-soft: rgba(224, 138, 104, 0.34);
    --fr-info: #8fb0d6;
    --fr-info-bg: rgba(143, 176, 214, 0.14);
    --fr-info-tint: rgba(143, 176, 214, 0.18);
    --fr-warn: #e8b660;
    --fr-warn-fill: #d99a2b;
    --fr-warn-bg: rgba(217, 154, 43, 0.14);
    --fr-warn-tint: rgba(217, 154, 43, 0.2);
    --fr-neutral-tint: rgba(169, 184, 203, 0.14);

    --fr-shadow-md: rgba(0, 0, 0, 0.45);
    --fr-shadow-lg: rgba(0, 0, 0, 0.6);
    --fr-overlay: rgba(2, 7, 14, 0.7);
    --fr-hover-tint: rgba(255, 255, 255, 0.06);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --fr-bg: #07111f;
        --fr-surface: #0f2540;
        --fr-border: #1e3a5c;
        --fr-line-soft: #18324f;
        --fr-text: #eef3f0;
        --fr-text-muted: #a9b8cb;
        --fr-text-faint: #3d5577;
        --fr-accent: #6cc47a;
        --fr-accent-ink: var(--fr-accent);
        --fr-range: #6cc47a;
        --fr-sidebar-bg: #0a1a2e;
        --fr-sidebar-text: #a9b8cb;
        --fr-sidebar-active: #6cc47a;
        --fr-feature-bg: #143259;
        --fr-on-accent: #07111f;

        --fr-series-2: #8fb0d6;
        --fr-series-3: #3d5577;

        --fr-success: #6cc47a;
        --fr-success-bg: rgba(108, 196, 122, 0.14);
        --fr-success-tint: rgba(108, 196, 122, 0.18);
        --fr-success-border: rgba(108, 196, 122, 0.36);
        --fr-danger: #e08a68;
        --fr-danger-bg: rgba(224, 138, 104, 0.14);
        --fr-danger-border: rgba(224, 138, 104, 0.6);
        --fr-danger-tint: rgba(224, 138, 104, 0.18);
        --fr-danger-border-soft: rgba(224, 138, 104, 0.34);
        --fr-info: #8fb0d6;
        --fr-info-bg: rgba(143, 176, 214, 0.14);
        --fr-info-tint: rgba(143, 176, 214, 0.18);
        --fr-warn: #e8b660;
        --fr-warn-fill: #d99a2b;
        --fr-warn-bg: rgba(217, 154, 43, 0.14);
        --fr-warn-tint: rgba(217, 154, 43, 0.2);
        --fr-neutral-tint: rgba(169, 184, 203, 0.14);

        --fr-shadow-md: rgba(0, 0, 0, 0.45);
        --fr-shadow-lg: rgba(0, 0, 0, 0.6);
        --fr-overlay: rgba(2, 7, 14, 0.7);
        --fr-hover-tint: rgba(255, 255, 255, 0.06);
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fr-font);
    font-size: 14px;
    line-height: 1.5;
    background: var(--fr-bg);
    -webkit-font-smoothing: antialiased;
    color: var(--fr-text);
}

/* Headings and big numbers speak in Outfit, tight; labels and figures that
   line up in columns are mono. */
h1, h2, h3,
.fr-page-title,
.stat__n,
.fr-stat-value,
.fr-import-stat__n {
    font-family: var(--fr-font-display);
    letter-spacing: -0.02em;
}

.stat__n,
.fr-stat-value,
.fr-import-stat__n,
.fr-num,
.fr-mono-num {
    font-variant-numeric: tabular-nums;
}

.fr-num,
.fr-mono-num {
    font-family: var(--fr-font-mono);
    font-size: 12.5px;
}

.fr-table th,
.fr-card-meta,
.fr-stat-label,
.fr-label {
    font-family: var(--fr-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-text-muted);
}

.fr-key {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--fr-range);
}

.fr-key--2 {
    background: var(--fr-series-2);
}

.fr-key--3 {
    background: var(--fr-series-3);
}

.fr-admin-shell {
    display: flex;
    min-height: 100vh;
}

.fr-viewas-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 32px;
    padding: 0 1rem;
    background: linear-gradient(var(--fr-warn-bg), var(--fr-warn-bg)), var(--fr-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--fr-warn-fill) 55%, transparent);
    color: var(--fr-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.fr-viewas-bar svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--fr-warn);
}

.fr-viewas-bar strong {
    color: var(--fr-warn);
    font-weight: 650;
}

.fr-viewas-bar form {
    margin: 0;
}

.fr-viewas-exit {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
}

.fr-viewas-exit:hover {
    color: var(--fr-warn);
}

/* On a phone the bar scrolls away in normal flow, so it never covers the menu button or the drawer. */
@media (max-width: 768px) {
    .fr-viewas-bar {
        position: static;
    }
}

/* The sidebar is pinned to the viewport, so it starts below the bar instead of under it. */
@media (min-width: 769px) {
    body:has(.fr-viewas-bar) .fr-sidebar {
        top: 32px;
        height: calc(100vh - 32px);
    }
}

.fr-sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--fr-sidebar-bg);
    color: var(--fr-sidebar-text);
    padding: 22px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Pinned to the viewport, not stretched to the document: as a plain flex
       child it grew to the height of the tallest page, which parked the
       account menu at the bottom of the dashboard instead of on screen.
       The mobile drawer overrides this to position: fixed further down. */
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.fr-sidebar-nav-scroll {
    flex: 1;
    /* Without this a flex child refuses to shrink below its content, so a nav
       taller than the viewport would push the account menu off the bottom. */
    min-height: 0;
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
}

/* The lockup as live type: the Gauge, then Funding light and Range heavy. */
.fr-sidebar-brand,
.fr-mobile-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.fr-sidebar-brand {
    padding: 0 6px;
}

.fr-gauge {
    flex: none;
    width: 32px;
    height: 32px;
}

.fr-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--fr-font-display);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.03em;
}

.fr-wordmark span {
    font-weight: 300;
}

.fr-wordmark b {
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--fr-sidebar-active);
}

.fr-sidebar-role {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-sidebar-role span {
    margin-right: 8px;
    font-family: var(--fr-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-sidebar-active);
}

.fr-nav-group {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fr-nav-group a,
.fr-nav-has-children summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--fr-sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.fr-nav-group a:hover,
.fr-nav-has-children summary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.fr-nav-group a.active {
    color: #fff;
    font-weight: 600;
    background: color-mix(in srgb, var(--fr-sidebar-active) 16%, transparent);
}

.fr-nav-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.fr-side-icon {
    flex: none;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.fr-nav-has-children details.is-active > summary .fr-side-icon,
.fr-nav-group a.active .fr-side-icon {
    opacity: 1;
    color: var(--fr-sidebar-active);
}

.fr-nav-group a.active .fr-nav-dot,
.fr-nav-has-children details.is-active > summary .fr-nav-dot {
    background: var(--fr-sidebar-active);
    border-color: var(--fr-sidebar-active);
}

.fr-nav-has-children details.is-active > summary {
    color: #fff;
}

.fr-nav-has-children summary {
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
}

.fr-nav-icon-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fr-nav-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--fr-sidebar-text);
    opacity: 0.7;
}

html.fr-nav-ready .fr-nav-chevron {
    transition: transform 0.15s ease;
}

.fr-nav-has-children details[open] > summary .fr-nav-chevron {
    transform: rotate(90deg);
}

.fr-nav-has-children summary::-webkit-details-marker {
    display: none;
}

.fr-nav-has-children ul {
    list-style: none;
    margin: 0 0 8px 14.5px;
    padding: 0 0 0 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.fr-nav-has-children ul a {
    padding: 7px 10px;
    font-size: 13.5px;
}

.fr-nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--fr-sidebar-active);
    color: var(--fr-sidebar-bg);
    font-family: var(--fr-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

/* The platform's pulse under the nav: the engine's mode and how much of each cap is spent. */
.fr-pulse {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
}

.fr-pulse-label {
    font-family: var(--fr-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fr-pulse-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
}

.fr-pulse-row b {
    font-family: var(--fr-font-mono);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.fr-pulse-row b.is-on {
    color: var(--fr-sidebar-active);
}

.fr-pulse-bar {
    display: block;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.fr-pulse-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--fr-sidebar-active);
}

.fr-pulse-bar > span.is-warn {
    background: var(--fr-warn-fill);
}

.fr-sidebar-foot {
    position: relative;
}

.fr-account-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: 12px;
    color: var(--fr-sidebar-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fr-account-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
}

.fr-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fr-success-bg);
    color: var(--fr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fr-font-display);
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.fr-account-trigger .fr-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
    background: var(--fr-sidebar-active);
    color: var(--fr-sidebar-bg);
}

.fr-avatar > span {
    position: relative;
    z-index: 0;
}

.fr-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.fr-avatar--md {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.fr-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.fr-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fr-name-cell > div {
    min-width: 0;
}

.fr-account-who {
    flex: 1;
    min-width: 0;
    display: grid;
    line-height: 1.25;
}

.fr-account-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-account-standing {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-account-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.fr-account-trigger[aria-expanded="true"] .fr-account-chevron {
    transform: rotate(180deg);
}

.fr-account-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--fr-sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    z-index: 20;
}

.fr-account-menu[hidden] {
    display: none;
}

.fr-account-menu-header {
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fr-account-menu-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.fr-account-menu-email {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-sidebar-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-account-menu a,
.fr-account-menu .fr-nav-signout button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--fr-sidebar-text);
    text-decoration: none;
    font-size: 14px;
}

.fr-account-menu a:hover,
.fr-account-menu .fr-nav-signout button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Sign out is a POST form so it can carry a CSRF token; it still has to read
   as one more item in the menu, not as a button. */
.fr-account-menu .fr-nav-signout {
    margin: 0;
}

.fr-account-menu .fr-nav-signout button {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.fr-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.fr-main {
    flex: 1;
    min-width: 0;
    padding: 28px 36px 48px;
}

.fr-table-wrap {
    position: relative;
    overflow-x: auto;
}

.tk-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 14px;
    border-top: 1px solid var(--fr-border);
}

.tk-pager > span {
    font-size: 0.72rem;
    color: var(--fr-text-muted);
    opacity: 0.7;
    letter-spacing: 0.01em;
}

.tk-pager[hidden] {
    display: none;
}

.tk-panel-body:has(> .tk-pager:not([hidden]):last-child),
.tk-panel-body:has(> .fr-table-wrap:last-child) {
    padding-bottom: 0;
}

.tk-pager-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.tk-pager button,
.tk-pager a,
.tk-pager-pages span {
    all: unset;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--fr-border);
    color: var(--fr-text-muted);
    font-family: var(--fr-font-mono);
    font-size: 0.76rem;
    line-height: 1.4;
}

.tk-pager button,
.tk-pager a {
    cursor: pointer;
}

.tk-pager-pages span {
    border-color: transparent;
    padding: 4px 2px;
}

.tk-pager button:hover,
.tk-pager a:hover {
    color: var(--fr-text);
    border-color: var(--fr-text-muted);
}

.tk-pager button.active,
.tk-pager a.active {
    color: var(--fr-accent-ink);
    border-color: var(--fr-accent-ink);
}

.tk-pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Every cell on one line; the wrapper scrolls sideways instead. */
.fr-table--nowrap th,
.fr-table--nowrap td {
    white-space: nowrap;
}

.fr-mobile-topbar {
    display: none;
}

.fr-nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .fr-admin-shell {
        display: block;
    }

    .fr-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--fr-sidebar-bg);
        color: #fff;
        padding: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .fr-mobile-topbar-brand {
        order: 1;
    }

    .fr-mobile-topbar-brand .fr-gauge {
        width: 26px;
        height: 26px;
    }

    .fr-mobile-topbar-brand .fr-wordmark {
        font-size: 19px;
    }

    .fr-nav-toggle {
        background: none;
        border: none;
        color: #fff;
        padding: 4px;
        cursor: pointer;
        line-height: 0;
        order: 2;
    }

    .fr-nav-toggle svg {
        width: 22px;
        height: 22px;
    }

    .fr-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 30;
        overflow-y: auto;
    }

    .fr-sidebar.fr-sidebar-open {
        transform: translateX(0);
    }

    .fr-nav-backdrop.fr-nav-backdrop-visible {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--fr-overlay);
        z-index: 25;
    }

    .fr-main {
        max-width: 100%;
        padding: 20px 16px 40px;
    }

    .fr-page-title {
        font-size: 25px;
    }
}

.fr-page-title {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.fr-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.fr-card h2 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
}

/* ── Auth pages (login / forgot / reset / two-factor) ──────────── */
/* Paper, a white card, and the stacked lockup above it. */
.fr-auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    padding-bottom: 12vh;
    background: radial-gradient(ellipse at top, var(--fr-success-bg), transparent 60%), var(--fr-bg);
}

.fr-auth-wrap {
    width: 100%;
    max-width: 400px;
}

.fr-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin: 0 auto 24px;
    color: var(--fr-text);
    text-decoration: none;
}

.fr-auth-brand .fr-gauge {
    width: 56px;
    height: 56px;
}

.fr-auth-brand .fr-wordmark {
    font-size: 30px;
}

.fr-auth-brand .fr-wordmark b {
    color: var(--fr-accent);
}

.fr-auth-brand .fr-gauge__track {
    stroke: var(--fr-border);
}

.fr-auth-brand .fr-gauge__fill {
    stroke: var(--fr-range);
}

.fr-auth-brand .fr-gauge__needle {
    stroke: var(--fr-text);
}

.fr-auth-brand .fr-gauge__hub {
    fill: var(--fr-text);
}

.fr-auth-wrap .fr-card {
    margin-bottom: 16px;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 18px 44px var(--fr-shadow-md);
}

.fr-auth-wrap .fr-card h2 {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.fr-auth-wrap .fr-field input {
    max-width: none;
}

.fr-auth-foot {
    text-align: center;
    font-size: 12px;
    color: var(--fr-text-muted);
}

/* "Back to sign in" sits under the card, centered, not a raw browser link. */
.fr-auth-link {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
}

.fr-auth-inline-link,
.fr-auth-signout button,
.fr-auth-link a {
    color: var(--fr-accent-ink);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
}

button.fr-auth-inline-link {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.fr-auth-inline-link:hover,
.fr-auth-signout button:hover,
.fr-auth-link a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fr-auth-signout {
    display: inline;
    margin: 0;
}

.fr-auth-signout button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* ── Dashboard: stat cards ─────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat {
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat__n {
    font-size: 32px;
    font-weight: 800;
    color: var(--fr-text);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.stat__l {
    font-family: var(--fr-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-text-muted);
}

.stat__sub {
    font-size: 12px;
    color: var(--fr-text-muted);
}

.stat--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat--link:hover {
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 1px var(--fr-accent);
}

.stat--link:focus-visible {
    outline: none;
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 45%, transparent);
}

.delta {
    font-weight: 700;
}

.delta--up {
    color: var(--fr-success);
}

.delta--down {
    color: var(--fr-danger);
}

/* ── Dashboard: charts ─────────────────────────────────────────── */
.fr-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* A card that is nothing but a table: title row on top, then dividers that
   run the full width, the way the tracking panels read. */
.fr-card--table {
    padding: 0;
    overflow: hidden;
}

.fr-card--table .fr-card-head {
    align-items: center;
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--fr-border);
}

/* A second section in the same card starts on a divider. */
.fr-card--table .fr-table-wrap + .fr-card-head {
    border-top: 1px solid var(--fr-border);
}

.fr-card--table .fr-table th,
.fr-card--table .fr-table td {
    padding: 12px;
}

.fr-card--table .fr-table th:first-child,
.fr-card--table .fr-table td:first-child {
    padding-left: 20px;
}

.fr-card--table .fr-table th:last-child,
.fr-card--table .fr-table td:last-child {
    padding-right: 20px;
}

.fr-card--table .fr-table th {
    font-weight: 600;
}

.fr-card--table .fr-empty {
    padding: 40px 20px;
}

.fr-card--table > :not(.fr-card-head):not(.fr-table-wrap):not(.fr-empty) {
    margin-left: 20px;
    margin-right: 20px;
}

.fr-card--table .fr-card-head + :not(.fr-table-wrap):not(.fr-empty) {
    margin-top: 16px;
}

.fr-card--table > :last-child:not(.fr-table-wrap):not(.fr-empty):not(.tk-pager) {
    margin-bottom: 16px;
}

.fr-card--table .fr-table-wrap + .fr-card-foot {
    margin-top: 12px;
}

.fr-card-head h2 {
    margin: 0;
    font-size: 18px;
}

.fr-dash-grid > .tk-panel {
    margin-bottom: 0;
}

.fr-chart-empty {
    margin: 0;
    padding: 56px 0;
    text-align: center;
    font-size: 14px;
    color: var(--fr-text-muted);
}

.chart {
    position: relative;
    height: 260px;
}

@media (max-width: 560px) {
    .chart {
        height: 210px;
    }
}

.fr-card-foot {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--fr-text-muted);
}

.fr-card-foot a {
    color: var(--fr-accent-ink);
    font-weight: 600;
    text-decoration: none;
}

.fr-card-foot a:hover {
    text-decoration: underline;
}

/* ── Data tables ────────────────────────────────────────────────── */
.fr-table tbody tr:hover {
    background: var(--fr-bg);
}

.fr-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--fr-text-muted);
}

.fr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--fr-font-mono);
    letter-spacing: 0.08em;
}

.fr-badge-yes {
    background: var(--fr-success-tint);
    color: var(--fr-success);
}

.fr-badge-no {
    background: var(--fr-neutral-tint);
    color: var(--fr-text-muted);
}

.fr-badge-test {
    background: var(--fr-neutral-tint);
    color: var(--fr-text-muted);
}

.fr-badge-new {
    background: color-mix(in srgb, var(--fr-accent) 16%, transparent);
    color: var(--fr-accent-ink);
}

.fr-badge-offer {
    background: var(--fr-warn-tint);
    color: var(--fr-warn);
}

.fr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.fr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--fr-border);
    background: var(--fr-surface);
    color: var(--fr-text-muted);
    cursor: pointer;
    padding: 0;
}

.fr-icon-btn svg {
    width: 15px;
    height: 15px;
    margin-right: 0;
}

.fr-icon-btn:hover {
    background: var(--fr-bg);
    color: var(--fr-text);
}

.fr-icon-btn-danger:hover {
    background: var(--fr-danger-tint);
    color: var(--fr-danger);
    border-color: var(--fr-danger-border);
}

.fr-icon-btn.is-on {
    color: var(--fr-accent-ink);
    border-color: var(--fr-accent);
}

/* The lead card's way into the report: the Gauge, then the range itself, tinted by the rating. */
.fr-range-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 13px 0 10px;
    border: 1px solid var(--fr-border);
    border-radius: 999px;
    background: var(--fr-surface);
    color: var(--fr-text);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.fr-range-btn:hover {
    box-shadow: 0 6px 16px var(--fr-shadow-md);
}

.fr-range-btn svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.fr-range-btn span {
    font-family: var(--fr-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-text-muted);
}

.fr-range-btn b {
    font-family: var(--fr-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fr-range-btn.is-green {
    border-color: var(--fr-success-border);
    background: var(--fr-success-bg);
}

.fr-range-btn.is-green svg,
.fr-range-btn.is-green b {
    color: var(--fr-accent-ink);
}

.fr-range-btn.is-yellow {
    border-color: color-mix(in srgb, var(--fr-warn-fill) 45%, transparent);
    background: var(--fr-warn-bg);
}

.fr-range-btn.is-yellow svg {
    color: var(--fr-warn);
}

.fr-range-btn.is-red {
    border-color: var(--fr-danger-border-soft);
    background: var(--fr-danger-bg);
}

.fr-range-btn.is-red svg {
    color: var(--fr-danger);
}

a.fr-icon-btn {
    text-decoration: none;
}

/* ── Lead detail modal ─────────────────────────────────────────── */
.fr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--fr-overlay);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.fr-modal-overlay.open {
    display: flex;
}

.fr-modal h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
}

.fr-modal-sub {
    font-size: 13px;
    color: var(--fr-text-muted);
    margin: 0 0 16px;
}

.fr-modal-form {
    margin: 0 0 16px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--fr-border);
    border-bottom: 1px solid var(--fr-border);
}

.fr-modal-form .fr-field {
    margin-bottom: 10px;
}

.fr-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fr-note-mark {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--fr-text-muted);
}

.fr-note-mark svg {
    width: 14px;
    height: 14px;
}

.fr-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--fr-text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.fr-modal {
    --fr-modal-pad: 24px;
    position: relative;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 18px;
    padding: var(--fr-modal-pad);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}

.fr-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--fr-border);
    margin-bottom: 20px;
}

.fr-tabs > a {
    padding: 10px 16px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--fr-text-muted);
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.fr-tabs > a.active {
    color: var(--fr-text);
    border-bottom-color: var(--fr-accent-ink);
    font-weight: 600;
}

/* ── Page head: title + subtitle on the left, actions on the right ── */
.fr-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fr-page-head .fr-page-title {
    margin-bottom: 0;
}

.fr-page-head-sub {
    margin: 4px 0 0;
    color: var(--fr-text-muted);
    font-size: 14px;
}

.fr-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fr-page-head-actions .fr-btn {
    padding: 8px 14px;
    font-size: 13px;
}

/* Keeps a segmented control in the head exactly as tall as the buttons
   beside it: 4px here plus the group's own 4px matches the button's 8px. */
.fr-page-head-actions .fr-filter-tab {
    padding: 4px 12px;
}

/* ── Filter bar: status tabs + a date-range select ─────────────────── */
.fr-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* A card or a stat grid carries no bottom margin, so a filter bar that follows
   one needs its own space to match the gap every other page gives it. */
.fr-card + .fr-filter-bar,
.fr-dash-grid + .fr-filter-bar {
    margin-top: 16px;
}

.fr-filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--fr-surface);
    border: 1px solid var(--fr-border);
    border-radius: 10px;
    padding: 3px;
}

.fr-filter-tab {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--fr-text-muted);
    white-space: nowrap;
}

.fr-filter-tab:hover {
    color: var(--fr-text);
    background: var(--fr-bg);
}

.fr-filter-tab.active {
    background: var(--fr-text);
    color: var(--fr-surface);
}

/* Two date filters on one page ask two different questions, so each select
   is named. Without the labels the pair reads as one control duplicated. */
.fr-filter-selects {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}

.fr-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fr-text-muted);
}

.fr-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 32px 8px 10px;
    border: 1px solid var(--fr-border);
    border-radius: 10px;
    background-color: var(--fr-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: inherit;
    font-size: 13px;
    font-family: inherit;
}

.fr-filter-select:focus {
    outline: none;
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 22%, transparent);
}

/* ── Import job card: live status ──────────────────────────────────── */
.fr-job-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--fr-text-muted);
}

.fr-job-dot--queued {
    background: var(--fr-warn);
    animation: fr-job-pulse 2s infinite;
}

.fr-job-dot--running {
    background: var(--fr-accent);
    animation: fr-job-pulse 2s infinite;
}

.fr-job-dot--done {
    background: var(--fr-success);
}

.fr-job-dot--failed {
    background: var(--fr-danger);
}

@keyframes fr-job-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .fr-job-dot {
        animation: none;
    }
}

.fr-job-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin: 0 0 16px;
    border: 0;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--fr-border);
    overflow: hidden;
}

.fr-job-bar::-webkit-progress-bar {
    background: var(--fr-border);
}

.fr-job-bar::-webkit-progress-value {
    background: var(--fr-accent);
    transition: width 0.4s;
}

.fr-job-bar::-moz-progress-bar {
    background: var(--fr-accent);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.fr-empty {
    text-align: center;
    padding: 44px 20px;
}

.fr-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--fr-success-bg);
    border: 0;
    color: var(--fr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fr-empty-icon svg {
    width: 24px;
    height: 24px;
}

.fr-empty h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
}

.fr-empty p {
    margin: 0 auto 18px;
    max-width: 440px;
    color: var(--fr-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.fr-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.fr-empty--rich {
    padding: 56px 24px 52px;
}

.fr-empty--rich .fr-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--fr-accent) 9%, transparent);
}

.fr-empty--rich .fr-empty-icon svg {
    width: 30px;
    height: 30px;
}

/* A faded sketch of the range that will land here: the page is blank but it shows what it is for. */
.fr-empty-ghost {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 380px;
    margin: 0 auto 22px;
    opacity: 0.6;
}

.fr-empty-ghost b {
    font-size: 22px;
    font-weight: 800;
    color: var(--fr-text-faint);
}

.fr-empty-ghost i {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--fr-border) 0 7px, transparent 7px 13px);
}

/* ── Shared admin table ────────────────────────────────────────────── */
.fr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fr-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--fr-border);
    white-space: nowrap;
}

.fr-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--fr-line-soft);
    vertical-align: middle;
}

.fr-table tbody tr:last-child td {
    border-bottom: none;
}

.fr-type-title {
    font-weight: 600;
}

.fr-type-slug {
    font-size: 12px;
    color: var(--fr-text-muted);
}

/* nowrap: the actions cell gets squeezed by a long description column and
   would otherwise stack the icons vertically. .fr-table-wrap scrolls. */
.fr-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
}

.fr-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.fr-card-meta-link {
    font-size: 13px;
    color: var(--fr-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.fr-card-meta-link:hover {
    color: var(--fr-accent-ink);
}

.fr-dash-none {
    color: var(--fr-text-muted);
    font-size: 14px;
    margin: 0;
}

.fr-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.fr-subcard {
    border: 1px solid var(--fr-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--fr-bg);
}

/* ── Dialog (distinct from the older .fr-modal on leads) ─────────────────────────────────────────────────────────── */
.fr-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--fr-overlay);
    padding: 24px;
    overflow-y: auto;
}

.fr-dialog.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.fr-dialog-panel {
    background: var(--fr-surface);
    border-radius: 18px;
    width: 100%;
    max-width: 700px;
    margin: auto;
    box-shadow: 0 24px 60px var(--fr-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.fr-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--fr-border);
}

.fr-dialog-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.fr-dialog-body {
    padding: 20px;
    overflow-y: auto;
}

.fr-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--fr-border);
}

.fr-dialog--confirm {
    z-index: 120;
    align-items: center;
}

.fr-dialog--confirm .fr-dialog-panel {
    max-width: 440px;
    border-radius: 18px;
}

.fr-dialog-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fr-text-muted);
}

.fr-req {
    color: var(--fr-danger);
}

@media (max-width: 640px) {
    .fr-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Status pills ──────────────────────────────────────────────────── */
.fr-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    background: var(--fr-bg);
    color: var(--fr-text-muted);
    font-family: var(--fr-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fr-status-confirmed {
    background: var(--fr-success-bg);
    color: var(--fr-success);
}

.fr-status-pending {
    background: var(--fr-warn-bg);
    color: var(--fr-warn);
}

.fr-status-canceled {
    background: var(--fr-danger-bg);
    color: var(--fr-danger);
}

/* Deliberately switched off is not an error: muted, not red. */
.fr-status-off {
    background: var(--fr-bg);
    color: var(--fr-text-muted);
}

.fr-status-completed {
    background: var(--fr-info-bg);
    color: var(--fr-info);
}

.fr-field {
    margin-bottom: 16px;
}

.fr-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.fr-field input[type="text"],
.fr-field input[type="email"],
.fr-field input[type="password"],
.fr-field input[type="date"],
.fr-field input[type="datetime-local"],
.fr-field input[type="time"],
.fr-field select,
.fr-field textarea {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1px solid var(--fr-border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--fr-surface);
    color: inherit;
}

.fr-field textarea {
    resize: vertical;
}

.fr-field input:focus,
.fr-field select:focus,
.fr-field textarea:focus {
    outline: none;
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 25%, transparent);
}

.fr-field input:disabled,
.fr-field select:disabled,
.fr-field textarea:disabled {
    background: var(--fr-bg);
    color: var(--fr-text-muted);
    cursor: not-allowed;
}

.fr-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.fr-input-inline {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fr-border);
    border-radius: 10px;
    background: var(--fr-surface);
    color: inherit;
    font-size: 14px;
    font-family: inherit;
}

.fr-input-inline:focus {
    outline: none;
    border-color: var(--fr-accent);
}

.fr-field .fr-hint {
    font-size: 12px;
    color: var(--fr-text-muted);
    margin-top: 4px;
    /* Fields are ~420px in a full-width card; without a cap a long hint runs
       the whole 1100px and reads at twice a comfortable measure. */
    max-width: 640px;
}

.fr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--fr-border);
    background: var(--fr-surface);
    color: var(--fr-text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fr-btn:hover {
    background: var(--fr-hover-tint);
}

.fr-btn-primary {
    background: var(--fr-accent);
    border-color: var(--fr-accent);
    color: var(--fr-on-accent);
}

.fr-btn-primary:hover {
    background: color-mix(in srgb, var(--fr-accent) 84%, black);
    border-color: color-mix(in srgb, var(--fr-accent) 84%, black);
}

.fr-btn:disabled,
.fr-btn-primary:disabled,
.fr-btn-primary:disabled:hover {
    background: var(--fr-surface);
    border-color: var(--fr-border);
    color: var(--fr-text-muted);
    cursor: not-allowed;
}

.fr-btn-danger {
    background: var(--fr-surface);
    color: var(--fr-danger);
    border: 1px solid var(--fr-danger-border-soft);
}

.fr-status-connected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fr-success);
    font-weight: 600;
    font-size: 14px;
}

.fr-status-disconnected {
    color: var(--fr-text-muted);
    font-size: 14px;
}

.fr-alert {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.fr-alert-success {
    background: var(--fr-success-bg);
    color: var(--fr-success);
    border-color: var(--fr-success-border);
}

.fr-alert-error {
    background: var(--fr-danger-bg);
    color: var(--fr-danger);
    border-color: var(--fr-danger-border-soft);
}

.fr-nowrap {
    white-space: nowrap;
}

.fr-cell-muted {
    color: var(--fr-text-muted);
}

/* Needs to outrank `.fr-table th`, which sets text-align: left at equal
   specificity, or the header stays left while its cells centre. */
.fr-cell-center,
.fr-table th.fr-cell-center {
    text-align: center;
}

/* Inherits the cell's colour so a linked value stays as quiet as an unlinked
   one; the affordance shows up on hover instead. */
.fr-cell-link {
    color: inherit;
    text-decoration: none;
}

.fr-cell-link:hover {
    color: var(--fr-accent-ink);
    text-decoration: underline;
}

/* A plain link in a table reads as the row's name, not as browser blue. */
.fr-table td > a:not([class*="fr-"]) {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.fr-table td > a:not([class*="fr-"]):hover {
    color: var(--fr-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Links in running text: forest, underlined only under the cursor. */
.fr-card p a,
.fr-card .fr-hint a,
.fr-meter__note a,
.fr-page-head-sub a {
    color: var(--fr-accent-ink);
    font-weight: 600;
    text-decoration: none;
}

.fr-card p a:hover,
.fr-card .fr-hint a:hover,
.fr-meter__note a:hover,
.fr-page-head-sub a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A timestamp that is context rather than the point of the row. */
.fr-cell-date {
    font-size: 12px;
    color: var(--fr-text-muted);
    white-space: nowrap;
}

/* One line, ellipsis, full text in title=. The tooltip is a fallback for
   overflow, not the way the text is meant to be read: descriptions are
   written short enough to fit, since title= is invisible on touch. */
.fr-cell-truncate {
    max-width: 1px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* ── Dashboard: wizard funnel, partner table, live rows ─────────── */
.fr-dash-grid--funnel {
    margin-bottom: 20px;
    align-items: stretch;
}

.fr-dash-grid > .fr-card,
.fr-dash-grid > .tk-panel {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.fr-dash-grid > .tk-panel > .tk-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.fr-dash-grid .tk-empty {
    flex: 1;
    justify-content: center;
}

.fr-dash-grid > .fr-card > .fr-card-foot {
    margin-top: auto;
}

.fr-table th.fr-num,
.fr-table td.fr-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.fr-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-page-actions form { margin: 0; }

.fr-modal--wide { max-width: 840px; }

.fr-import-report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }

.fr-import-stat { border: 1px solid var(--fr-border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fr-import-stat--new { border-color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 8%, transparent); }
.fr-import-stat__n { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.fr-import-stat__l { font-size: 12px; color: var(--fr-text-muted); }
.fr-import-note { font-size: 13px; color: var(--fr-text-muted); margin: 0 0 16px; max-width: 640px; }
.fr-import-step { font-size: 11px; font-weight: 600; color: var(--fr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; }
.fr-import-details { margin-bottom: 16px; }
.fr-import-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fr-text-muted); }
.fr-import-details ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--fr-text-muted); }
.fr-import-file { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--fr-border); border-radius: 10px; margin: 0 0 18px; }
.fr-import-file.is-picked { border-style: solid; border-color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 6%, transparent); }
.fr-import-file__icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 12%, transparent); }
.fr-import-file__icon svg { width: 18px; height: 18px; }
.fr-import-file__body { flex: 1; min-width: 0; }
.fr-import-file__name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-import-file__hint { display: block; font-size: 12px; color: var(--fr-text-muted); margin-top: 2px; }
.fr-import-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fr-import-file .fr-btn { flex: none; }
.fr-import-label { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.fr-import-files { margin: -8px 0 18px; padding: 10px 12px; border: 1px solid var(--fr-border); border-radius: 10px; }
.fr-import-files .u-check { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.fr-import-files__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 0; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--fr-border) 60%, transparent); }
.fr-import-files__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fr-import-files__rows { font-size: 12px; color: var(--fr-text-muted); font-variant-numeric: tabular-nums; }
.fr-import-files__row input { grid-column: 1 / -1; width: 100%; padding: 6px 10px; border: 1px solid var(--fr-border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--fr-text); background: var(--fr-surface); }
.fr-import-files:not(:has(input[name="source_each"]:checked)) .fr-import-files__row input { display: none; }
.fr-import-line__src { margin-left: 6px; font-size: 12px; color: var(--fr-text-muted); }
.fr-import-run-lines { margin-bottom: 16px; }
.fr-import-run-head { margin: 0 0 8px; font-family: var(--fr-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-text-muted); }
.fr-import-run-row td { font-size: 12px; font-weight: 600; color: var(--fr-text-muted); background: color-mix(in srgb, var(--fr-border) 25%, transparent); }
.fr-export-presets.fr-export-presets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-export-presets.fr-export-presets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 16px; }
.fr-import-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.fr-import-fields input, .fr-import-consent input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid var(--fr-border); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 400; color: var(--fr-text); background: var(--fr-surface); }
.fr-import-fields input:focus, .fr-import-consent input[type="text"]:focus { outline: none; border-color: var(--fr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 22%, transparent); }
.fr-import-fields .fr-filter-select { width: 100%; font-weight: 400; }
.fr-import-fields[hidden] { display: none; }
.fr-import-fields .tk-note { grid-column: 1 / -1; margin: 0; }
.fr-import-opt { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--fr-border) 60%, transparent); }
.fr-import-opt:last-child { border-bottom: 0; }
.fr-import-opt .u-check { margin: 0; font-weight: 600; flex: 0 1 auto; }
.fr-import-opt__hint { font-size: 12px; color: var(--fr-text-muted); text-align: right; flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .fr-import-opt { flex-wrap: wrap; } .fr-import-opt__hint { flex-basis: 100%; text-align: left; } }
.fr-import-need { cursor: default; }
.fr-import-need.is-ok { border-color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 8%, transparent); }
.fr-import-need .fr-export-preset__label { display: flex; align-items: center; gap: 6px; }
.fr-import-need__tick { width: 14px; height: 14px; color: var(--fr-accent); flex: none; }
.fr-import-need:not(.is-ok) .fr-import-need__tick { display: none; }
.fr-import-maps { max-height: 46vh; overflow-y: auto; }

.fr-import-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 220px; align-items: center; gap: 16px; padding: 10px 6px; border-bottom: 1px solid color-mix(in srgb, var(--fr-border) 60%, transparent); }
.fr-import-map:last-child { border-bottom: 0; }
.fr-import-map--head { position: sticky; top: 0; z-index: 1; background: var(--fr-surface); padding-top: 8px; padding-bottom: 8px; font-family: var(--fr-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fr-text-muted); }
.fr-import-map__name { font-size: 13px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-import-map.is-ignored .fr-import-map__name { color: var(--fr-text-muted); font-weight: 500; }
.fr-import-map__samples { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-import-map__sample { font-size: 12px; color: var(--fr-text-muted); font-family: var(--fr-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-import-map .fr-filter-select { width: 100%; }
.fr-import-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 6px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--fr-border) 60%, transparent); }
.fr-import-line:last-child { border-bottom: 0; }
.fr-import-line__n { color: var(--fr-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.fr-import-why { margin: 0; padding: 0 6px 12px 26px; font-size: 12.5px; color: var(--fr-text-muted); }
.fr-import-consent { border: 1px solid var(--fr-border); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.fr-import-consent:has(input[type="checkbox"]:checked) { border-color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 6%, transparent); }
.fr-import-consent .u-check { font-weight: 600; margin: 0; }
.fr-import-consent__note { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--fr-text-muted); }
@media (max-width: 720px) {
    .fr-import-fields, .fr-export-presets.fr-export-presets--3 { grid-template-columns: 1fr; }
    .fr-import-map { grid-template-columns: 1fr; gap: 6px; }
    .fr-import-map--head { display: none; }
}
@media (max-width: 640px) {
    .fr-import-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fr-export-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}
.fr-export-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px;
    min-width: 0;
    border: 1px solid var(--fr-border);
    border-radius: 8px;
    cursor: pointer;
}
.fr-export-preset input { position: absolute; opacity: 0; pointer-events: none; }
.fr-export-preset:has(input:checked) { border-color: var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 8%, transparent); }
.fr-export-preset__label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fr-export-preset__hint { font-size: 11.5px; color: var(--fr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-export-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 14px;
    font-size: 13px;
}
.fr-export-dates__label { font-weight: 600; }
.fr-export-dates__to { color: var(--fr-text-muted); }
.fr-filter-selects .fr-export-dates { margin: 0; }
.fr-export-dates input[type="date"] {
    width: 128px;
    field-sizing: content;
    padding: 7px 10px;
    border: 1px solid var(--fr-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--fr-text);
    background: var(--fr-surface);
    font-variant-numeric: tabular-nums;
}
.fr-export-dates input[type="date"]:focus { outline: none; border-color: var(--fr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 22%, transparent); }
.fr-export-dates input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; margin-left: 4px; }
.fr-export-dates input[type="date"]::-webkit-datetime-edit { padding: 0; }
:root[data-theme="dark"] .fr-export-dates input[type="date"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .fr-export-dates input[type="date"] { color-scheme: dark; } }
.fr-export-dates__clear { font-size: 12px; color: var(--fr-text-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.fr-export-dates__clear:hover { color: var(--fr-text); text-decoration: underline; }
.fr-export-groups {
    margin: 0 0 16px;
    border-top: 1px solid var(--fr-border);
    border-bottom: 1px solid var(--fr-border);
}
.fr-export-group { border-bottom: 1px solid color-mix(in srgb, var(--fr-border) 60%, transparent); }
.fr-export-group:last-child { border-bottom: 0; }
.fr-export-group__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    list-style: none;
    cursor: pointer;
}
.fr-export-group__row::-webkit-details-marker { display: none; }
.fr-export-group__row:hover { background: color-mix(in srgb, var(--fr-text) 3%, transparent); }
.fr-export-group__head { font-weight: 600; font-size: 13px; margin: 0; flex: 1; }
.fr-export-group__count { font-size: 12px; color: var(--fr-text-muted); font-variant-numeric: tabular-nums; }
.fr-export-group.is-partial .fr-export-group__count { color: var(--fr-accent); }
.fr-export-group.is-off .fr-export-group__head { color: var(--fr-text-muted); }
.fr-export-group__chev { width: 16px; height: 16px; color: var(--fr-text-muted); transition: transform 0.15s ease; }
.fr-export-group[open] .fr-export-group__chev { transform: rotate(180deg); }
.fr-export-group__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 20px;
    padding: 2px 6px 12px 34px;
}
.fr-export-group__cols .u-check { font-size: 12.5px; color: var(--fr-text-muted); }
.fr-export-group__cols .u-check:has(input:checked) { color: var(--fr-text); }
.fr-export-summary { font-size: 12.5px; color: var(--fr-text-muted); }
.fr-export-buttons { display: flex; gap: 8px; flex: none; }
.fr-export-buttons form { display: contents; }
@media (max-width: 720px) {
    .fr-export-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-export-preset__label, .fr-export-preset__hint { white-space: normal; }
    .fr-export-group__cols { grid-template-columns: 1fr; padding-left: 30px; }
    .fr-modal--wide { --fr-modal-pad: 16px; padding: 20px var(--fr-modal-pad); }
    .fr-modal-actions:has(.fr-export-buttons) { flex-wrap: wrap; }
    .fr-export-buttons { width: 100%; justify-content: flex-end; }
}

.fr-details { margin-top: 10px; }
.fr-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--fr-text-muted); }
.fr-details p { margin: 8px 0 0; }

/* ---- Toasts ----
   Feedback about something you just did, as opposed to .fr-alert, which can
   also describe the state of what is on screen and stays put. The markup is
   built by assets/js/toast.js out of a server-rendered
   .fr-alert[data-toast], so nothing here may hide anything: a rule only
   JavaScript can undo would take the message away wherever the script did
   not run. */
.fr-toast-region {
    position: fixed;
    z-index: 9500;
    left: calc(50% + 110px);
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(368px, calc(100vw - 40px));
    pointer-events: none;
}

@media (max-width: 768px) {
    .fr-toast-region {
        left: 50%;
    }
}

.fr-toast {
    pointer-events: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--fr-border);
    border-radius: 14px;
    background: var(--fr-surface);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: var(--fr-text);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 12px 28px var(--fr-shadow-md);
    /* An animation, not a transition from opacity 0. The resting state has to
       be visible, or a background tab that never runs the animation would hold
       an invisible toast the page cannot get rid of. */
    animation: fr-toast-in 0.2s ease both;
}

/* Color lands on the surface and the icon, never on the text, so the message
   keeps full contrast. */
.fr-toast--ok {
    border-color: var(--fr-success-border);
    background: linear-gradient(var(--fr-success-bg), var(--fr-success-bg)), var(--fr-surface);
}

.fr-toast--error {
    border-color: var(--fr-danger-border-soft);
    background: linear-gradient(var(--fr-danger-bg), var(--fr-danger-bg)), var(--fr-surface);
}

.fr-toast__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.fr-toast__icon svg {
    width: 14px;
    height: 14px;
}

.fr-toast--ok .fr-toast__icon {
    background: var(--fr-success-tint);
    color: var(--fr-success);
}

.fr-toast--error .fr-toast__icon {
    background: var(--fr-danger-tint);
    color: var(--fr-danger);
}

/* Sync and database errors arrive as one unbroken string long enough to push
   the close button off the toast. */
.fr-toast__body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fr-toast__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--fr-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fr-toast__close svg {
    width: 15px;
    height: 15px;
}

.fr-toast--error .fr-toast__close {
    color: var(--fr-text);
    background: var(--fr-hover-tint);
}

.fr-toast__close:hover {
    background: var(--fr-hover-tint);
    color: var(--fr-text);
}

.fr-toast__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 45%, transparent);
}

@keyframes fr-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes fr-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.fr-toast.is-out {
    animation: fr-toast-out 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .fr-toast { animation: none; }
    .fr-toast.is-out { animation: none; opacity: 0; }
}

@media (max-width: 640px) {
    /* Near full width along the bottom edge: a 368px card pinned to one corner
       of a phone is a cramped box with two words per line. */
    .fr-toast-region {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        transform: none;
        align-items: stretch;
    }

    .fr-toast__close {
        width: 44px;
        height: 44px;
        margin: -8px -8px 0 0;
    }
}

.fr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Theme picker (account menu) ---- */
.fr-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    /* Separator sits below, not above: the picker now follows the identity
       header, and the links below it end on Sign out. */
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Lives inside the sidebar, which is dark in both themes, so this styles
   against the sidebar palette rather than the page surface tokens. */
.fr-theme-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--fr-sidebar-text);
    font-family: inherit;
    cursor: pointer;
}

.fr-theme-opt svg {
    width: 16px;
    height: 16px;
}

.fr-theme-opt:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.fr-theme-opt.is-active {
    background: color-mix(in srgb, var(--fr-sidebar-active) 16%, transparent);
    border-color: color-mix(in srgb, var(--fr-sidebar-active) 40%, transparent);
    color: var(--fr-sidebar-active);
}

.fr-theme-opt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fr-sidebar-active) 50%, transparent);
}

/* The same picker on a page (an owner's Profile), against the page surface rather than the sidebar. */
.fr-theme-picker--page {
    max-width: 240px;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 0;
}

.fr-theme-picker--page .fr-theme-opt {
    border-color: var(--fr-border);
    color: var(--fr-text-muted);
}

.fr-theme-picker--page .fr-theme-opt:hover {
    background: var(--fr-hover-tint);
    color: var(--fr-text);
}

.fr-theme-picker--page .fr-theme-opt.is-active {
    background: var(--fr-success-tint);
    border-color: var(--fr-accent);
    color: var(--fr-accent);
}

/* Docs: the glossary on each shell's help center */
.fr-docs-terms dt { font-weight: 600; color: var(--fr-text); }
.fr-docs-terms dd { margin: 2px 0 14px; color: var(--fr-text-muted); }

/* System: errors, logs, two-factor */
.fr-dash-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .fr-dash-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fixed 2 columns, not auto-fit: a single leftover card should sit in the
   first slot, not stretch to fill the row. */
.fr-dash-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .fr-dash-grid--2 { grid-template-columns: 1fr; } }
.fr-stat-value { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; margin-top: 6px; }
.fr-level { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--fr-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fr-neutral-tint); color: var(--fr-text-muted); }
.fr-level-fatal, .fr-level-error { background: var(--fr-danger-bg); color: var(--fr-danger); }
.fr-level-warning { background: var(--fr-warn-bg); color: var(--fr-warn); }
.fr-level-deprecated { background: var(--fr-info-bg); color: var(--fr-info); }
.fr-recovery-codes { font-size: 15px; line-height: 1.8; letter-spacing: .04em; padding: 14px 18px; border: 1px dashed var(--fr-border); border-radius: 8px; margin: 12px 0 16px; }
.fr-qr { width: 180px; height: 180px; margin: 12px 0 16px; padding: 8px; background: #fff; border-radius: 8px; }
.fr-qr img, .fr-qr canvas { display: block; }
.fr-secret-key { letter-spacing: .06em; }

.fr-btn-block { width: 100%; }

/* Funnel admin */
.fr-inline-check { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 6px 0 0; }
.fr-inline-check input { width: auto; }
.fr-table .fr-input-inline { width: 100%; min-width: 140px; }

.fr-row-actions-end { display: flex; justify-content: flex-end; margin-top: 8px; }

/* Machine data reads in mono, the house convention. */
code, .fr-type-slug, .fr-recovery-codes, .fr-secret-key { font-family: var(--fr-font-mono); }
code { font-size: 0.92em; }

/* Utility classes: the CSP forbids inline style attributes, so one-off layout hints live here. */
.u-cell { padding: 8px 4px; }
.u-cell--actions { padding: 8px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.u-w-auto { width: auto; }
.u-w-full { width: 100%; }
.u-check { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.u-check--tight { margin-bottom: 0; }
.u-offscreen { position: absolute; left: -9999px; }
.u-inline { display: inline; }
.u-fw-normal { font-weight: normal; }
.u-th { text-align: left; border-bottom: 1px solid var(--fr-border); }
.u-row { border-bottom: 1px solid var(--fr-border); }

.u-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.u-mono { font-family: monospace; }

.u-muted-14 { font-size: 14px; color: var(--fr-text-muted); }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-6 { display: flex; gap: 6px; align-items: center; }

/* Wizard accordion, a copy of the reference's steps table: one card per step, its options inside. */
.fr-inline-form { display: inline; margin: 0; }

.fr-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--fr-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; white-space: nowrap; }
.fr-pill--on { background: var(--fr-success-tint); color: var(--fr-success); }
.fr-pill--warning { background: var(--fr-warn-tint); color: var(--fr-warn); }
.fr-switch { width: 34px; height: 19px; border: none; border-radius: 999px; background: var(--fr-border); position: relative; cursor: pointer; padding: 0; transition: background 0.15s; vertical-align: middle; }
.fr-switch::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fr-text-muted); transition: left 0.15s, background 0.15s; }
.fr-switch.is-on { background: var(--fr-accent); }
.fr-switch.is-on::after { left: 17px; background: var(--fr-on-accent); }

.fr-field-error { margin-top: 6px; font-size: 13px; color: var(--fr-danger); }

.fr-page-head-actions .fr-btn svg { flex: none; }

/* Pills, chat log, tool details, knowledge budget meter, native dialog: the AI pages on the base tokens. */
.fr-pill--muted { background: var(--fr-neutral-tint); color: var(--fr-text-muted); }
.fr-pill--info { background: var(--fr-info-tint); color: var(--fr-info); }
/* The knowledge table reads as a scale: accent is in the prompt, green is
   in and pinned so it can never be evicted, muted is out. Info blue was a
   fourth hue on a page that uses no other blue. */
.fr-pill--accent { background: color-mix(in srgb, var(--fr-accent) 16%, transparent); color: var(--fr-accent-ink); }
.fr-card + .fr-card { margin-top: 0; }
.fr-card h2 + .fr-hint { margin-top: -8px; margin-bottom: 16px; max-width: 640px; }
.fr-field input[type="number"], .fr-field input[type="url"], .fr-field input[type="tel"], .fr-field input[type="search"] { width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid var(--fr-border); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--fr-surface); color: inherit; }

.himodal { width: min(560px, calc(100vw - 32px)); max-height: min(85vh, 820px); border: 1px solid var(--fr-border); border-radius: 18px; background: var(--fr-surface); color: var(--fr-text); padding: 20px 22px; overflow-y: auto; box-shadow: 0 24px 60px var(--fr-shadow-lg); }
.himodal::backdrop { background: var(--fr-overlay); }
.himodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.himodal__head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.himodal__close { border: 0; background: none; color: var(--fr-text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; text-decoration: none; }
.himodal__close:hover { color: var(--fr-text); background: var(--fr-hover-tint); }
.himodal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 45%, transparent); }
.himodal__head h2:focus { outline: none; }
.himodal input[type="file"] { font: inherit; font-size: 13px; color: var(--fr-text-muted); max-width: 100%; }
.himodal input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; color: var(--fr-text); background: var(--fr-surface); border: 1px solid var(--fr-border); border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.himodal input[type="file"]::file-selector-button:hover { background: var(--fr-hover-tint); }
.himodal.himodal--wide { width: min(840px, calc(100vw - 32px)); }
.fr-fr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fr-fr-hero { display: grid; grid-template-columns: 160px 1fr; gap: 12px; margin-bottom: 14px; }
.fr-fr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fr-fr-hero .tk-stat-card { padding: 12px 14px; border-radius: 8px; }
.fr-fr-hero .tk-stat-value { font-size: 22px; }
.fr-fr-tiles .tk-stat-label { min-height: 2lh; }
.fr-fr-hero .fr-fr-score .tk-stat-value { font-size: 40px; line-height: 1.1; }
.fr-fr-hero .fr-fr-green { border-color: var(--fr-success); }
.fr-fr-hero .fr-fr-green .tk-stat-value, .fr-fr-why.fr-fr-green strong { color: var(--fr-success); }
.fr-fr-hero .fr-fr-yellow { border-color: var(--fr-warn); }
.fr-fr-hero .fr-fr-yellow .tk-stat-value, .fr-fr-why.fr-fr-yellow strong { color: var(--fr-warn); }
.fr-fr-hero .fr-fr-red { border-color: var(--fr-danger); }
.fr-fr-hero .fr-fr-red .tk-stat-value, .fr-fr-why.fr-fr-red strong { color: var(--fr-danger); }
.fr-fr-why { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--fr-border); border-radius: 8px; font-size: 13px; }
.fr-fr-fold { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fr-border); }
.fr-fr-fold > summary { cursor: pointer; margin-bottom: 0; list-style: none; }
.fr-fr-fold > summary::-webkit-details-marker { display: none; }
.fr-fr-fold > summary::before { content: "\25B6"; display: inline-block; margin-right: 6px; font-size: 9px; line-height: 1; vertical-align: 1px; }
.fr-fr-fold[open] > summary::before { content: "\25BC"; }
.fr-fr-fold[open] > summary { margin-bottom: 10px; }
.fr-fr-fold > summary.fr-fr-alert { color: var(--fr-danger); }
.fr-fr-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fr-fr-pills li { padding: 2px 10px; border: 1px solid var(--fr-border); border-radius: 999px; font-size: 12px; }
.himodal .fr-fr-foot { margin: 14px 0 0; font-size: 12px; color: var(--fr-text-muted); text-align: right; }
.fr-fr-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.fr-fr-grade { display: grid; grid-template-columns: 9em 1fr 1em; align-items: center; gap: 10px; font-size: 13px; }
.fr-fr-grade-avg { font-weight: 600; }
.fr-fr-grade-bar { height: 6px; border-radius: 999px; background: var(--fr-border); overflow: hidden; }
.fr-fr-grade-fill { display: block; width: 0; height: 100%; border-radius: 999px; }
.fr-fr-grade-1 { width: 20%; }
.fr-fr-grade-2 { width: 40%; }
.fr-fr-grade-3 { width: 60%; }
.fr-fr-grade-4 { width: 80%; }
.fr-fr-grade-5 { width: 100%; }
.fr-fr-grade.fr-fr-green .fr-fr-grade-fill { background: var(--fr-success); }
.fr-fr-grade.fr-fr-yellow .fr-fr-grade-fill { background: var(--fr-warn); }
.fr-fr-grade.fr-fr-red .fr-fr-grade-fill { background: var(--fr-danger); }
.fr-fr-grade-value { text-align: right; font-variant-numeric: tabular-nums; }
.fr-fr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fr-fr-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--fr-border); border-radius: 10px; }
.fr-fr-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fr-fr-card-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.fr-fr-card-sub { font-size: 12px; color: var(--fr-text-muted); }
.fr-fr-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.fr-fr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.fr-fr-facts dt { font-size: 11px; color: var(--fr-text-muted); }
.fr-fr-facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fr-fr-hist-label { margin-bottom: 4px; font-size: 11px; color: var(--fr-text-muted); }
.fr-fr-hist { display: flex; flex-wrap: wrap; gap: 3px; }
.fr-fr-sq { width: 10px; height: 10px; border: 1px solid var(--fr-border); border-radius: 2px; }
.fr-fr-sq-ok { border-color: var(--fr-success); background: var(--fr-success); }
.fr-fr-sq-warn { border-color: var(--fr-warn); background: var(--fr-warn); }
.fr-fr-sq-bad { border-color: var(--fr-danger); background: var(--fr-danger); }
@media (max-width: 640px) {
    .fr-fr-hero { grid-template-columns: 1fr; }
    .fr-fr-tiles { grid-template-columns: repeat(2, 1fr); }
    .fr-fr-grades { grid-template-columns: 1fr; }
    .fr-fr-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .fr-fr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.himodal.himodal--review { overflow: hidden; }
.himodal.himodal--review[open] { display: flex; flex-direction: column; }
.himodal--review > * { flex-shrink: 0; }
.himodal--review .himodal__scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; margin: 0 0 8px; border: 1px solid var(--fr-border); border-radius: 8px; }
.himodal--review .himodal__scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--fr-surface); }

@keyframes fr-drawer-in { from { transform: translateX(100%); } }

.fr-form-actions { margin-top: 18px; gap: 8px; justify-content: flex-start; }

/* An actions row is not a field. Inside the two-column card grid it was landing
   in a column beside the last field, so Save sat halfway up the card next to an
   unrelated input instead of closing it off. */
.fr-grid-2 > .fr-form-actions { grid-column: 1 / -1; }
.fr-card .fr-inline-check { margin-top: 14px; }
.fr-inline-check.fr-check-flush { display: flex; align-items: center; gap: 8px; }
.fr-inline-check.fr-check-flush input { margin: 0; }

.fr-grid-2 .fr-field input,
.fr-grid-2 .fr-field select,
.fr-grid-2 .fr-field textarea {
    max-width: 100%;
}

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--fr-accent); }

/* Selection and keyboard focus follow the theme, never the browser's blue. Focus-visible only, so a mouse click
   shows no ring; a component with its own ring (.fr-filter-select, .tk-btn, .himodal__close) keeps it. */
::selection { background: color-mix(in srgb, var(--fr-accent) 30%, transparent); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible,
.fr-btn:focus-visible, .fr-icon-btn:focus-visible, .tk-sort-btn:focus-visible {
    outline: 2px solid var(--fr-accent);
    outline-offset: 2px;
}


.fr-users-table .fr-input-inline { width: 120px; min-width: 0; height: 36px; }
.fr-users-table td.u-cell:first-child, .fr-users-table th.u-cell:first-child { padding-right: 20px; }
.fr-users-table .u-flex-6 .fr-btn { height: 36px; padding: 0 14px; font-size: 13px; }
.fr-users-you { margin-left: 6px; vertical-align: 1px; }
.fr-users-table .u-cell--actions { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; padding-right: 8px; }
.fr-icon-btn--danger { color: var(--fr-danger); }
.fr-icon-btn--danger:hover { background: color-mix(in srgb, var(--fr-danger) 14%, transparent); color: var(--fr-danger); }
dialog .fr-field input[type="text"], dialog .fr-field input[type="url"], dialog .fr-field input[type="number"], dialog .fr-field select, dialog .fr-field textarea { max-width: none; }

.fr-code-block { display: block; padding: 10px 12px; border: 1px solid var(--fr-border); border-radius: 8px; background: var(--fr-bg); font-family: var(--fr-font-mono); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
#setup-sheet .fr-field + .fr-field { margin-top: 18px; }
#setup-sheet form.fr-field { margin-top: 18px; }
#setup-sheet .fr-table td:last-child { white-space: normal; }

.fr-error-sample { margin-top: 6px; max-width: 760px; color: var(--fr-text-muted); font-family: var(--fr-font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.fr-code-label { font-size: 12px; font-weight: 600; color: var(--fr-text-muted); margin: 12px 0 6px; }
#setup-sheet form.fr-field .fr-btn { margin-top: 10px; }

/* Support tickets. The sidebar count is the only nav element that carries a
   number, so it lives on the accent rather than the sidebar's own greys. */
/* One line per fact: the label and value read left, the timestamp or the
   controls for that fact sit right, so the card is four tight rows instead of
   a grid with buttons stacked under every value. */
.fr-ticket-meta { display: flex; flex-direction: column; margin: 0; }
/* A fixed label column so the four values start on one line, and a min-height
   so the rows carrying buttons do not tower over the rows that do not. */
.fr-ticket-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 30px;
  padding: 2px 0;
  border-bottom: 1px solid var(--fr-border);
}
.fr-ticket-fact:last-child { border-bottom: 0; }
.fr-ticket-fact-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; min-width: 0; }
.fr-ticket-fact-label { width: 64px; flex: none; color: var(--fr-text-muted); font-size: 13px; }
.fr-ticket-fact-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
/* Text links, not buttons: a button inside a hairline-separated row crowds the
   rules above and below it and reads heavier than the fact it belongs to. */
.fr-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fr-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fr-linkbtn:hover { color: var(--fr-text); }
.fr-ticket-fact-side .fr-linkbtn + form .fr-linkbtn { margin-left: 4px; }
.fr-ticket-fact-side form { margin: 0; }
.fr-ticket-body { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .fr-ticket-fact { align-items: flex-start; flex-direction: column; gap: 6px; }
    .fr-ticket-fact-side { margin-left: 0; }
}

/* The search sits on the filter bar's own row. .fr-input-inline is 100% wide,
   so without a flex row the button wraps under the field. */
.fr-ticket-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.fr-ticket-search .fr-input-inline { width: 260px; }
.fr-search { position: relative; width: 280px; max-width: 100%; margin: 0 0 0 auto; }
.fr-search .fr-search__input { padding-left: 34px; padding-right: 34px; -webkit-appearance: none; appearance: none; }
.fr-search__input::-webkit-search-cancel-button { display: none; }
.fr-search__go, .fr-search__clear { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fr-text-muted); cursor: pointer; }
.fr-search__go { left: 4px; }
.fr-search__clear { right: 4px; }
.fr-search__go:hover, .fr-search__clear:hover { color: var(--fr-text); background: var(--fr-hover-tint); }
.fr-search__input:placeholder-shown ~ .fr-search__clear { display: none; }
.fr-search-hint { margin-bottom: 12px; font-size: 13px; color: var(--fr-text-muted); }
.fr-search-hint a { color: var(--fr-accent-ink); text-decoration: none; }
.fr-search-hint a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .fr-card-head:has(.fr-search), .tk-panel-head:has(.fr-search) { flex-wrap: wrap; }
    .fr-search { width: 100%; }
    .fr-search .fr-search__input { font-size: 16px; }
}
/* Ours and theirs read apart at a glance, not by hunting for the chip. */
.fr-ticket-msg--staff { border-left: 3px solid var(--fr-accent); }
.fr-ticket-msg .fr-ticket-body { margin-top: 2px; }
#reply-body { width: 100%; max-width: 100%; }

/* The whole row opens the ticket. One anchor still, with an overlay rather than
   a second link, so the markup stays valid and a screen reader hears it once.
   The row action sits above the overlay or it would never be clickable. */
.fr-table tbody tr:has(.fr-row-link) { position: relative; cursor: pointer; }
.fr-row-link::after { content: ""; position: absolute; inset: 0; }
.fr-table tbody tr:has(.fr-row-link) form,
.fr-table tbody tr:has(.fr-row-link) .fr-icon-btn { position: relative; z-index: 1; }

/* ── Usage: capacity meters, day columns, fact lists ───────────── */
.fr-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.fr-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.fr-meter__label { font-weight: 600; color: var(--fr-text); }
.fr-meter__val { color: var(--fr-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-meter__track { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--fr-border) 60%, transparent); overflow: hidden; }
.fr-meter__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--fr-range); }
.fr-meter__fill.is-warn { background: var(--fr-warn-fill); }
.fr-meter__fill.is-high { background: var(--fr-danger); }
.fr-meter__note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--fr-text-muted); }
.fr-meter__note strong { color: var(--fr-text); }
.fr-meter--inline { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.fr-meter--inline .fr-meter__track { flex: 1; }
.fr-meter__pct { width: 36px; text-align: right; font-size: 12px; color: var(--fr-text-muted); font-variant-numeric: tabular-nums; }

.fr-facts { margin: 0; }
.fr-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--fr-border); font-size: 13px; }
.fr-facts > div:last-child { border-bottom: 0; }
.fr-facts dt { color: var(--fr-text-muted); }
.fr-facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--fr-text); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .fr-meters { grid-template-columns: 1fr; }
}


/* ── Overview: the super admin's platform view ─────────────────── */
.fr-ov {
    display: grid;
    gap: 18px;
}

.fr-ov-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.fr-ov-head > div:first-child {
    display: grid;
    gap: 6px;
}

.fr-ov-head .fr-page-title {
    margin: 0;
    font-size: 34px;
}

.fr-ov-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fr-ov-mode {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--fr-border);
    border-radius: 999px;
    background: var(--fr-surface);
    font-family: var(--fr-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-warn);
}

.fr-ov-mode__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fr-warn-fill);
}

.fr-ov-mode.is-live {
    color: var(--fr-accent-ink);
}

.fr-ov-mode.is-live .fr-ov-mode__dot {
    background: var(--fr-range);
    animation: fr-ov-pulse 1.6s ease-in-out infinite;
}

@keyframes fr-ov-pulse {
    50% { box-shadow: 0 0 0 6px var(--fr-success-tint); }
}

.fr-ov-chips .fr-filter-tab {
    font-family: var(--fr-font-mono);
    font-size: 11px;
}

.fr-ov-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fr-ov-tile,
.fr-ov-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px 24px;
    border: 1px solid var(--fr-border);
    border-radius: 18px;
    background: var(--fr-surface);
}

.fr-ov-tile--link {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fr-ov-tile--link:hover {
    border-color: var(--fr-accent);
    box-shadow: 0 8px 22px var(--fr-shadow-md);
}

.fr-ov-tile__top,
.fr-ov-tile__mid,
.fr-ov-card__head,
.fr-ov-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.fr-ov-tile__top,
.fr-ov-card__head {
    align-items: center;
    flex-wrap: wrap;
}

.fr-ov-tile__mid {
    align-items: flex-end;
}

.fr-ov-tile__n {
    font-family: var(--fr-font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fr-ov-tile__sub,
.fr-ov-note {
    font-size: 12.5px;
    color: var(--fr-text-muted);
}

.fr-ov-delta,
.fr-ov-note--good {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-success);
}

.fr-ov-delta.is-down,
.fr-ov-note--bad {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    color: var(--fr-danger);
}

.fr-spark {
    flex: none;
    width: 104px;
    height: 38px;
    overflow: visible;
}

.fr-spark__area {
    fill: var(--fr-success-tint);
}

.fr-spark__line {
    fill: none;
    stroke: var(--fr-range);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.fr-spark__dot {
    fill: var(--fr-range);
    stroke: var(--fr-surface);
    stroke-width: 2;
}

.fr-spark--navy .fr-spark__area {
    fill: var(--fr-hover-tint);
}

.fr-spark--navy .fr-spark__line {
    stroke: var(--fr-series-2);
}

.fr-spark--navy .fr-spark__dot {
    fill: var(--fr-series-2);
}

.fr-ov-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
}

.fr-ov-row--3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
}

.fr-ov-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--fr-line-soft);
    font-size: 12.5px;
    color: var(--fr-text-muted);
}

.fr-ov-foot b {
    color: var(--fr-text);
    font-weight: 600;
}

/* Empty states read as the widget waiting, not as an error: the range rail with no ends, ghost rows, ghost bars. */
.fr-ov-empty {
    display: grid;
    gap: 10px;
    align-content: center;
    min-height: 180px;
    padding: 18px;
    border-radius: 14px;
    background: var(--fr-bg);
}

.fr-ov-empty p {
    margin: 0;
    max-width: 46ch;
    font-size: 13px;
    color: var(--fr-text-muted);
}

.fr-ov-empty__range {
    font-family: var(--fr-font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--fr-text-faint);
}

.fr-ov-empty__rail {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--fr-border);
}

.fr-ov-ghost {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--fr-border);
}

.fr-ov-ghost:nth-child(2) {
    width: 82%;
}

.fr-ov-ghost:nth-child(3) {
    width: 64%;
}

.fr-ov-empty--bars {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    align-items: end;
    gap: 4px;
}

.fr-ov-empty--bars p {
    grid-column: 1 / -1;
}

.fr-ov-ghostbar {
    display: block;
    height: 28px;
    border-radius: 3px;
    background: var(--fr-border);
}

.fr-ov-ghostbar:nth-child(3n) {
    height: 46px;
}

.fr-ov-ghostbar:nth-child(4n + 1) {
    height: 18px;
}

.fr-feed__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1.3fr) 128px 84px 44px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--fr-line-soft);
    font-size: 13px;
    animation: fr-ov-in 0.5s ease-out both;
}

.fr-feed__row--head {
    padding-top: 0;
    border-top: 0;
    font-size: 10px;
    animation: none;
}

@keyframes fr-ov-in {
    from { opacity: 0; transform: translateY(-6px); }
}

.fr-feed__account {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-feed__account a,
.fr-attn__title {
    color: inherit;
    text-decoration: none;
}

.fr-feed__account a:hover,
a.fr-attn__title:hover {
    color: var(--fr-accent-ink);
    text-decoration: underline;
}

.fr-feed__who {
    color: var(--fr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-feed__range {
    font-family: var(--fr-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fr-accent-ink);
    white-space: nowrap;
}

.fr-feed__range.is-none {
    color: var(--fr-danger);
}

.fr-hist {
    width: 100%;
    height: 230px;
    overflow: visible;
}

.fr-hist__bar {
    fill: var(--fr-range);
    transform-box: fill-box;
    transform-origin: bottom;
    animation: fr-ov-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.fr-hist__bar.is-median {
    fill: var(--fr-series-2);
}

@keyframes fr-ov-grow {
    from { transform: scaleY(0); }
}

.fr-hist__label,
.fr-hist__n {
    font-family: var(--fr-font-mono);
    font-size: 10px;
    fill: var(--fr-text-muted);
}

.fr-hist__n {
    fill: var(--fr-text);
}

.fr-ov-table td {
    font-size: 13px;
}

.fr-ov-good {
    color: var(--fr-success);
}

.fr-ov-cap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.fr-ov-cap__track,
.fr-aud__track {
    flex: 1;
    display: block;
    height: 6px;
    border-radius: 99px;
    background: var(--fr-success-bg);
    overflow: hidden;
}

.fr-ov-cap__fill,
.fr-aud__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--fr-range);
}

.fr-ov-cap__fill.is-warn {
    background: var(--fr-warn-fill);
}

.fr-ov-cap__fill.is-high {
    background: var(--fr-danger);
}

.fr-ov-cap .fr-num {
    width: 36px;
    text-align: right;
    font-size: 11px;
    color: var(--fr-text-muted);
}

.fr-attn {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fr-attn__item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid var(--fr-line-soft);
}

.fr-attn__item:first-child {
    border-top: 0;
    padding-top: 2px;
}

.fr-attn__item > div {
    display: grid;
    gap: 3px;
}

.fr-attn__tag {
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: var(--fr-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    background: var(--fr-neutral-tint);
    color: var(--fr-text-muted);
}

.fr-attn__tag--warn {
    background: var(--fr-warn-bg);
    color: var(--fr-warn);
}

.fr-attn__tag--bad {
    background: var(--fr-danger-bg);
    color: var(--fr-danger);
}

.fr-attn__tag--ok {
    background: var(--fr-success-bg);
    color: var(--fr-success);
}

.fr-attn__title {
    font-size: 13.5px;
    font-weight: 600;
}

.fr-attn__line {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fr-text-muted);
}

.fr-ov-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    color: var(--fr-text-muted);
}

.fr-ov-legend li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fr-key--4 {
    background: var(--fr-info);
}

.fr-key--warn {
    background: var(--fr-warn-fill);
}

.fr-ov-chart {
    height: 200px;
}

.fr-aud {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.fr-aud__list {
    display: grid;
    gap: 9px;
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fr-aud__list li {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: center;
    font-size: 12.5px;
}

.fr-aud__list li.fr-aud__state {
    grid-template-columns: 30px minmax(0, 1fr) 36px;
}

.fr-aud__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-aud__list .fr-num {
    font-size: 11px;
    text-align: right;
}

.fr-aud__list .fr-num:first-child {
    text-align: left;
}

.fr-aud__fill--navy {
    background: var(--fr-series-2);
}

/* The book: navy in both themes, the Gauge's needle on the share of pulls that found a file. */
.fr-book {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 22px;
    border-radius: 18px;
    background: var(--fr-feature-bg);
    color: #fff;
}

.fr-book .fr-label {
    color: var(--fr-sidebar-text);
}

.fr-book__top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fr-book__gauge {
    flex: none;
    width: 92px;
    height: 92px;
    overflow: visible;
}

.fr-book__track,
.fr-book__fill {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.fr-book__track {
    stroke: rgba(255, 255, 255, 0.22);
}

.fr-book__fill {
    stroke: var(--fr-sidebar-active);
}

.fr-book__needle {
    stroke: #fff;
    stroke-width: 7;
    stroke-linecap: round;
}

.fr-book__hub {
    fill: #fff;
}

.fr-book__sum {
    display: grid;
    gap: 4px;
}

.fr-book__n {
    font-family: var(--fr-font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.fr-book__sub {
    font-size: 12px;
    color: var(--fr-sidebar-text);
}

.fr-book__facts {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
}

.fr-book__facts > div {
    display: flex;
    justify-content: space-between;
}

.fr-book__facts dt {
    color: var(--fr-sidebar-text);
}

.fr-book__facts dd {
    margin: 0;
    font-family: var(--fr-font-mono);
}

.fr-book__facts dd.is-on {
    color: var(--fr-sidebar-active);
}

@media (prefers-reduced-motion: reduce) {
    .fr-feed__row,
    .fr-hist__bar,
    .fr-ov-mode.is-live .fr-ov-mode__dot {
        animation: none;
    }
}

@media (max-width: 1180px) {
    .fr-ov-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fr-ov-row,
    .fr-ov-row--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .fr-ov-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .fr-ov-head .fr-page-title {
        font-size: 26px;
    }

    .fr-ov-tile,
    .fr-ov-card {
        padding: 18px;
    }

    .fr-feed__row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .fr-feed__row > :nth-child(3),
    .fr-feed__row > :nth-child(5),
    .fr-feed__row > :nth-child(6) {
        display: none;
    }

    .fr-aud {
        grid-template-columns: minmax(0, 1fr);
    }
}