/* =========================================================
   F3M — Mod Manager  |  Dark Theme
   ========================================================= */

/* Syne's digits are small and odd next to its capitals, so headings take theirs from DM Sans (the same file
   index.html already loads for body text). Should the URL ever stop working, headings fall back to Syne's digits. */
@font-face {
    font-family: 'F3M Figures';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
    unicode-range: U+0030-0039;
}

:root {
    --f3m-bg: #0d0e10;
    --f3m-surface: #17191c;
    --f3m-surface-2: #1e2124;
    --f3m-border: rgba(255,255,255,.08);
    --f3m-amber: #ffc107;
    --f3m-amber-dim: rgba(255,193,7,.1);
    --f3m-text: #e2e4e8;
    --f3m-muted: #6b7280;
    /* Charts (statistics page): two series take blue and orange, validated against the dark surface for colour-blind
       readers too; status colours only mark states and always come with a label. */
    --f3m-series-1: #3987e5;
    --f3m-series-2: #d95926;
    --f3m-status-good: #0ca30c;
    --f3m-status-warning: #fab219;
    --f3m-status-serious: #ec835a;
    --f3m-status-critical: #d03b3b;
    --f3m-status-neutral: #6b7280;
    --f3m-radius: 10px;
    --f3m-font-h: 'F3M Figures', 'Syne', sans-serif;
    --f3m-font-b: 'DM Sans', sans-serif;
    --tr: .18s ease;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--f3m-font-b);
    background: var(--f3m-bg);
    color: var(--f3m-text);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f3m-font-h);
}

/* App.razor moves focus to the page title after each navigation (for screen readers); it isn't something to click. */
h1:focus {
    outline: none;
}

a {
    color: var(--f3m-amber);
    text-decoration: none;
}

    a:hover {
        color: #ffe082;
    }

/* ── Layout ─────────────────────────────────────────────── */
.f3m-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.f3m-main {
    flex: 1;
}

/* ── Navbar ─────────────────────────────────────────────── */
.f3m-navbar {
    background: rgba(13,14,16,.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--f3m-border);
    /* At least the bar's height; on small screens the opened menu makes it taller. */
    min-height: 56px;
}

@media (min-width: 992px) {
    .f3m-navbar {
        height: 56px;
    }
}

/* Small screens: the menu opens inside the bar, as full-width rows that are easy to tap. */
@media (max-width: 991.98px) {
    .f3m-navbar .navbar-collapse {
        border-top: 1px solid var(--f3m-border);
        margin-top: .4rem;
        padding: .4rem 0 .75rem;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

        .f3m-navbar .navbar-collapse.show, .f3m-navbar .navbar-collapse.collapsing {
            display: flex;
            flex-direction: column;
        }

    /* Both lists take the full width (on wide screens the second one sits on the right). */
    .f3m-navbar .navbar-collapse > .navbar-nav {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .f3m-navbar .navbar-nav .nav-link {
        padding: .65rem .75rem !important;
        font-size: .95rem;
    }

    .f3m-navbar .navbar-nav .btn {
        width: 100%;
        margin: .4rem 0 0 !important;
        padding: .55rem .75rem;
    }

    /* The version line goes small, last in the menu. */
    .f3m-nav-version {
        order: 99;
        padding: .6rem .75rem 0 !important;
        margin: 0 !important;
    }

        .f3m-nav-version h4 {
            font-family: var(--f3m-font-b);
            font-size: .75rem;
            color: var(--f3m-muted);
        }
}

.f3m-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    background: var(--f3m-amber);
    color: #000;
    font-weight: 800;
    font-size: 2rem;
    border-radius: 8px;
}

.f3m-brand-text {
    font-family: var(--f3m-font-h);
    font-weight: 700;
    font-size: .9rem;
    color: var(--f3m-text) !important;
}

.navbar-nav .nav-link {
    font-family: var(--f3m-font-h);
    font-weight: 600;
    font-size: .85rem;
    color: var(--f3m-muted) !important;
    transition: color var(--tr);
    border-radius: 6px;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--f3m-amber) !important;
    }

/* ── Page header (filter bar) ───────────────────────────── */
.f3m-page-header {
    background: var(--f3m-surface);
    border-bottom: 1px solid var(--f3m-border);
}

/* ── Category chips ─────────────────────────────────────── */
.f3m-chip {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 99px;
    font-family: var(--f3m-font-h);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--f3m-border);
    background: transparent;
    color: var(--f3m-muted);
    cursor: pointer;
    transition: all var(--tr);
}

    .f3m-chip:hover {
        border-color: var(--f3m-amber);
        color: var(--f3m-amber);
    }

    .f3m-chip.active {
        background: var(--f3m-amber);
        color: #000;
        border-color: var(--f3m-amber);
    }

/* ── Browse page: header and filters ────────────────────── */
.f3m-browse-head {
    position: relative;
    border-bottom: 1px solid var(--f3m-border);
    background:
        radial-gradient(900px 260px at 10% -40%, rgba(255,193,7,.10), transparent 70%),
        radial-gradient(700px 240px at 95% -60%, rgba(57,135,229,.07), transparent 70%),
        var(--f3m-surface);
}

.f3m-browse-title {
    font-family: var(--f3m-font-h);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    letter-spacing: -.01em;
    margin: 0;
}

.f3m-browse-count {
    color: var(--f3m-muted);
    font-size: .9rem;
}

    .f3m-browse-count strong {
        color: var(--f3m-amber);
        font-family: var(--f3m-font-h);
        font-weight: 700;
    }

.f3m-filter-panel {
    padding: .75rem;
    border: 1px solid var(--f3m-border);
    border-radius: 14px;
    background: rgba(13,14,16,.55);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

.f3m-filter-main {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 210px;
    gap: .6rem;
}

/* One look for the search box, the tag box and the sort menu: an icon, then the control without its own frame. */
.f3m-filter-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: 0 .4rem 0 .85rem;
    border: 1px solid var(--f3m-border);
    border-radius: 10px;
    background: var(--f3m-surface-2);
    transition: border-color var(--tr), box-shadow var(--tr);
}

    .f3m-filter-field:focus-within {
        border-color: var(--f3m-amber);
        box-shadow: 0 0 0 3px var(--f3m-amber-dim);
    }

    .f3m-filter-field > .bi {
        color: var(--f3m-muted);
        flex-shrink: 0;
    }

    .f3m-filter-field:focus-within > .bi {
        color: var(--f3m-amber);
    }

.f3m-filter-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--f3m-text);
    font-size: .95rem;
}

    .f3m-filter-search input::placeholder {
        color: var(--f3m-muted);
    }

    /* The box has its own clear button. */
    .f3m-filter-search input::-webkit-search-cancel-button {
        display: none;
    }

.f3m-filter-clear {
    border: 0;
    background: transparent;
    color: var(--f3m-muted);
    padding: .25rem .4rem;
    border-radius: 6px;
}

    .f3m-filter-clear:hover, .f3m-filter-clear:focus-visible {
        color: var(--f3m-text);
    }

.f3m-filter-tags .f3m-tag-picker {
    flex: 1;
    min-width: 0;
}

.f3m-filter-tags .f3m-tag-picker-control,
.f3m-filter-tags .f3m-tag-picker.open .f3m-tag-picker-control,
.f3m-filter-tags .f3m-tag-picker-control:focus-within {
    min-height: 44px;
    padding-left: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

.f3m-filter-sort .f3m-select-menu {
    flex: 1;
    min-width: 0;
}

    .f3m-filter-sort .f3m-select-menu .form-select {
        height: 44px;
        padding-left: 0;
        border: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

.f3m-filter-types {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--f3m-border);
}

.f3m-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.f3m-type-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--f3m-border);
    border-radius: 99px;
    background: var(--f3m-surface-2);
    color: var(--f3m-text);
    font-size: .82rem;
    font-weight: 500;
    transition: border-color var(--tr), color var(--tr), background var(--tr);
}

    .f3m-type-pill .bi {
        color: var(--f3m-muted);
        transition: color var(--tr);
    }

    .f3m-type-pill:hover, .f3m-type-pill:focus-visible {
        border-color: rgba(255,193,7,.45);
    }

    .f3m-type-pill.active {
        border-color: var(--f3m-amber);
        background: var(--f3m-amber-dim);
        color: var(--f3m-amber);
        font-weight: 600;
    }

        .f3m-type-pill.active .bi {
            color: var(--f3m-amber);
        }

.f3m-type-pill-count {
    min-width: 1.4rem;
    padding: 0 .35rem;
    border-radius: 99px;
    background: rgba(255,255,255,.06);
    color: var(--f3m-muted);
    font-family: var(--f3m-font-h);
    font-size: .7rem;
    text-align: center;
}

.f3m-type-pill.active .f3m-type-pill-count {
    background: rgba(255,193,7,.18);
    color: var(--f3m-amber);
}

.f3m-filter-reset {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--f3m-muted);
    font-size: .82rem;
    padding: .35rem .5rem;
    border-radius: 8px;
}

    .f3m-filter-reset:hover, .f3m-filter-reset:focus-visible {
        color: var(--f3m-amber);
    }

@media (max-width: 991.98px) {
    .f3m-filter-main {
        grid-template-columns: minmax(0, 1fr) 190px;
    }

    .f3m-filter-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .f3m-filter-panel {
        padding: .6rem;
    }

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

    /* Sideways scrolling instead of three rows of pills. */
    .f3m-type-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -.6rem;
        padding: 0 .6rem .15rem;
        scrollbar-width: none;
    }

    .f3m-type-pill {
        flex-shrink: 0;
    }

    .f3m-filter-reset {
        margin-left: 0;
    }
}

/* The picked type on the browse page: what it is, and its F95zone thread. */
.f3m-type-about {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .85rem;
    margin-top: .75rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(255,193,7,.25);
    border-radius: 10px;
    background: var(--f3m-amber-dim);
}

.f3m-type-about-icon {
    font-size: 1.3rem;
    color: var(--f3m-amber);
}

.f3m-type-about-text {
    color: var(--f3m-muted);
}

.f3m-type-about-logo {
    width: 16px;
    height: 16px;
    margin-right: .4rem;
    vertical-align: -3px;
}

/* ── Mod grid ───────────────────────────────────────────── */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* ── Mod card ───────────────────────────────────────────── */
.mod-card {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: var(--f3m-radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}

    .mod-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,193,7,.25);
        box-shadow: 0 8px 30px rgba(0,0,0,.4);
    }

.mod-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--f3m-surface-2);
    overflow: hidden;
}

    .mod-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: transform .5s ease;
    }

.mod-card:hover .mod-card-image img {
    transform: scale(1.04);
}

.mod-card-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--f3m-muted);
    font-size: 2rem;
}

.mod-card-category {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    color: var(--f3m-amber);
    font-family: var(--f3m-font-h);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 4px;
    border: 1px solid rgba(255,193,7,.2);
}

.mod-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mod-card-title {
    font-family: var(--f3m-font-h);
    font-size: .95rem;
    font-weight: 700;
    color: var(--f3m-text);
    margin-bottom: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mod-card-author {
    font-size: .75rem;
    color: var(--f3m-muted);
    margin-bottom: 4px;
}

    .mod-card-author span {
        color: var(--f3m-amber);
    }

.mod-card-desc {
    font-size: .78rem;
    color: var(--f3m-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mod-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: .7rem;
    color: var(--f3m-muted);
    border-top: 1px solid var(--f3m-border);
    padding-top: 8px;
}

    /* The spans' icons only: the desktop button's icon has no text beside it and stays centred. */
    .mod-card-meta > span i {
        color: var(--f3m-amber);
        margin-right: 3px;
    }

.mod-card-version {
    margin-left: auto;
}

/* ── Download in the desktop app ────────────────────────── */
.f3m-desktop-btn {
    padding: 1px 7px;
    font-size: .75rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    /* On touch screens: large enough to hit with a finger. */
    @media (pointer: coarse) {
        .f3m-desktop-btn {
            min-width: 40px;
            min-height: 32px;
        }
    }

    /* Bootstrap Icons sit their glyphs a little low for running text; alone in the button that's off-centre. */
    .f3m-desktop-btn i::before {
        vertical-align: 0;
    }

.f3m-desktop-missing {
    font-size: .7rem;
    color: var(--f3m-muted);
    margin-top: 6px;
}

    .mod-card-meta .f3m-desktop-missing {
        flex-basis: 100%;
        margin-top: 0;
    }

    .f3m-desktop-missing a {
        color: var(--f3m-amber);
    }

/* ── Mod page: the two download buttons ─────────────────── */
/* Side by side and equally wide while both labels fit; one above the other when the column is too narrow
   (a flex item can't shrink below its unwrapped button text, so the row wraps instead of the text spilling). */
.f3m-download-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

    .f3m-download-choices > * {
        flex: 1 1 0;
    }

/* ── Mod page: the uploader's profiles ──────────────────── */
.f3m-profile-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Next to the author on the mod page: registered on F3M, or not yet (unclaimed import). */
.f3m-author-verified,
.f3m-author-unregistered {
    margin-left: .3rem;
    cursor: help;
}

.f3m-author-verified {
    color: #0dcaf0;
}

.f3m-author-unregistered {
    color: #9ca3af;
}

.f3m-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 1px solid var(--f3m-border);
    border-radius: 999px;
    font-size: .75rem;
    color: var(--f3m-text);
    text-decoration: none;
    background: var(--f3m-surface);
}

    .f3m-profile-link:hover {
        border-color: var(--f3m-amber);
        color: var(--f3m-amber);
    }

    .f3m-profile-link .f3m-profile-site {
        font-weight: 700;
        color: var(--f3m-amber);
    }

/* ── Skeleton loaders ───────────────────────────────────── */
.mod-card-skeleton {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: var(--f3m-radius);
    overflow: hidden;
    animation: shimmer 1.6s ease-in-out infinite;
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--f3m-surface-2);
}

.skeleton-body {
    padding: 12px 14px 14px;
    /* As tall as a real card's body (title, author, two description lines, meta), so the placeholders don't jump
       and the browse page can measure how many cards fit on the screen. */
    min-height: 7.95rem;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: var(--f3m-surface-2);
    margin-bottom: 6px;
}

    .skeleton-line.w-75 {
        width: 75%;
    }

    .skeleton-line.w-50 {
        width: 50%;
    }

    .skeleton-line.w-90 {
        width: 90%;
    }

    .skeleton-line.w-full {
        width: 100%;
    }

@keyframes shimmer {
    0%,100% {
        opacity: .6;
    }

    50% {
        opacity: 1;
    }
}

/* ── Mod detail image ───────────────────────────────────── */
.mod-detail-image {
    border-radius: var(--f3m-radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--f3m-surface-2);
}

    .mod-detail-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.mod-detail-no-image {
    border-radius: var(--f3m-radius);
    aspect-ratio: 16/9;
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--f3m-muted);
    font-size: 3rem;
}

/* ── Mini stats ─────────────────────────────────────────── */
.f3m-stat-mini {
    text-align: center;
}

/* Mod detail: a mod imported from F95zone that its uploader has not claimed yet. */
.f3m-import-notice {
    padding: .85rem 1rem;
    border: 1px solid rgba(255,193,7,.25);
    border-left: 3px solid var(--f3m-amber);
    border-radius: .5rem;
    background: rgba(255,193,7,.06);
}

.f3m-stat-mini-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--f3m-text);
}

.f3m-stat-mini-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--f3m-muted);
    margin-top: 2px;
}

/* ── Auth pages ─────────────────────────────────────────── */
.f3m-auth-page {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.f3m-auth-card {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: 14px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.f3m-auth-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.f3m-auth-card-wide {
    max-width: 480px;
}

.f3m-auth-sub {
    color: var(--f3m-muted) !important;
}

.f3m-auth-url {
    font-family: 'Courier New', Courier, monospace;
    color: var(--f3m-text);
}

    .f3m-auth-url strong {
        color: var(--f3m-amber);
    }

.f3m-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.75rem 0 1rem;
    color: var(--f3m-muted);
    font-size: .8rem;
    font-weight: 600;
}

    .f3m-auth-divider::before, .f3m-auth-divider::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--f3m-border);
    }

/* Step indicator on the sign-up page */
.f3m-steps {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    list-style: none;
    padding: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--f3m-muted);
}

    .f3m-steps li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        text-align: center;
    }

        .f3m-steps li span {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--f3m-border);
            background: var(--f3m-surface-2);
        }

        .f3m-steps li.active {
            color: var(--f3m-amber);
        }

            .f3m-steps li.active span {
                border-color: var(--f3m-amber);
                background: var(--f3m-amber-dim);
            }

        .f3m-steps li.done {
            color: var(--f3m-text);
        }

            .f3m-steps li.done span {
                background: var(--f3m-amber);
                border-color: var(--f3m-amber);
                color: #000;
            }

/* "Your username will be ..." */
.f3m-name-preview {
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    border-left: 3px solid var(--f3m-amber);
    border-radius: var(--f3m-radius);
    padding: .6rem .9rem;
    font-size: .875rem;
}

.f3m-howto {
    color: var(--f3m-muted);
    padding-left: 1.2rem;
    line-height: 1.8;
}

/* ── Upload dropzone ────────────────────────────────────── */
.f3m-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--f3m-border);
    border-radius: var(--f3m-radius);
    padding: 2rem 1rem;
    background: var(--f3m-surface-2);
    text-align: center;
    transition: border-color var(--tr), background var(--tr);
}

    .f3m-dropzone:hover {
        border-color: var(--f3m-amber);
        background: var(--f3m-amber-dim);
    }

/* Preview thumbnail */
.f3m-preview-thumb {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
}

    .f3m-preview-thumb img {
        display: block;
        max-width: 100%;
        max-height: 200px;
        border-radius: 8px;
        object-fit: contain;
    }

.f3m-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,.7);
    border: none;
    border-radius: 6px;
    color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .75rem;
    transition: background var(--tr);
}

    .f3m-preview-remove:hover {
        background: rgba(220,53,69,.85);
    }

/* ── Surface utility ────────────────────────────────────── */
.f3m-surface {
    background: var(--f3m-surface);
}

/* ── Pagination ─────────────────────────────────────────── */
.f3m-pagination .page-link {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    color: var(--f3m-muted);
    border-radius: 7px !important;
    font-family: var(--f3m-font-h);
    font-weight: 600;
    font-size: .82rem;
    padding: .4rem .8rem;
    transition: all var(--tr);
}

    .f3m-pagination .page-link:hover {
        background: var(--f3m-amber-dim);
        color: var(--f3m-amber);
        border-color: var(--f3m-amber);
    }

.f3m-pagination .page-item.active .page-link {
    background: var(--f3m-amber);
    border-color: var(--f3m-amber);
    color: #000;
}

.f3m-pagination .page-item.disabled .page-link {
    opacity: .35;
    pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────── */
/* Stays at the bottom of the window while the page scrolls, like the navbar at the top. Below the modals (1050+). */
.f3m-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: var(--f3m-surface);
    border-top: 1px solid var(--f3m-border);
}

/* On a phone the links wrap to three lines, too much to keep on screen all the time: the footer ends the page there. */
@media (max-width: 767.98px) {
    .f3m-footer {
        position: static;
    }
}

/* ── Bootstrap overrides ────────────────────────────────── */
.btn-warning {
    background: var(--f3m-amber);
    border-color: var(--f3m-amber);
    color: #000;
    font-family: var(--f3m-font-h);
    font-weight: 700;
    border-radius: 8px;
    transition: all var(--tr);
}

    .btn-warning:hover {
        background: #ffe082;
        border-color: #ffe082;
        color: #000;
    }

.btn-outline-warning {
    border-color: var(--f3m-amber);
    color: var(--f3m-amber);
    font-family: var(--f3m-font-h);
    font-weight: 700;
    border-radius: 8px;
    transition: all var(--tr);
}

    .btn-outline-warning:hover {
        background: var(--f3m-amber);
        color: #000;
    }

.btn-outline-secondary {
    border-color: var(--f3m-border);
    color: var(--f3m-muted);
    border-radius: 8px;
    font-family: var(--f3m-font-h);
    font-weight: 600;
    background: transparent;
    transition: all var(--tr);
}

    .btn-outline-secondary:hover {
        background: var(--f3m-surface-2);
        color: var(--f3m-text);
        border-color: rgba(255,255,255,.15);
    }

.form-control, .form-select {
    border-radius: 8px;
}

.f3m-input, .f3m-select {
    background: var(--f3m-surface-2) !important;
    border: 1px solid var(--f3m-border) !important;
    color: var(--f3m-text) !important;
    border-radius: 8px !important;
    transition: border-color var(--tr), box-shadow var(--tr);
}

    .f3m-input::placeholder {
        color: var(--f3m-muted) !important;
    }

    .f3m-input:focus, .f3m-select:focus {
        border-color: var(--f3m-amber) !important;
        box-shadow: 0 0 0 3px var(--f3m-amber-dim) !important;
        outline: none;
    }

    .f3m-select option {
        background: var(--f3m-surface-2);
    }

.f3m-search-icon {
    background: var(--f3m-surface-2) !important;
    border: 1px solid var(--f3m-border) !important;
    border-right: none !important;
    color: var(--f3m-muted) !important;
    border-radius: 8px 0 0 8px !important;
}

.f3m-search-input {
    background: var(--f3m-surface-2) !important;
    border: 1px solid var(--f3m-border) !important;
    border-left: none !important;
    color: var(--f3m-text) !important;
    border-radius: 0 8px 8px 0 !important;
}

    .f3m-search-input:focus {
        border-color: var(--f3m-amber) !important;
        box-shadow: 0 0 0 3px var(--f3m-amber-dim) !important;
    }

    .f3m-search-input::placeholder {
        color: var(--f3m-muted) !important;
    }

.badge.bg-secondary {
    background: var(--f3m-surface-2) !important;
    color: var(--f3m-muted);
    border: 1px solid var(--f3m-border);
}

.alert-danger {
    background: rgba(220,53,69,.1);
    border-color: rgba(220,53,69,.25);
    color: #f28b8b;
    border-radius: 8px;
}

.alert-success {
    background: rgba(40,167,69,.1);
    border-color: rgba(40,167,69,.25);
    color: #6ecf97;
    border-radius: 8px;
}

.alert-warning {
    background: var(--f3m-amber-dim);
    border-color: rgba(255,193,7,.25);
    color: #ffd666;
    border-radius: 8px;
}

.alert-info {
    background: rgba(13,202,240,.08);
    border-color: rgba(13,202,240,.25);
    color: #7fd8ec;
    border-radius: 8px;
}

.alert-secondary {
    background: var(--f3m-surface-2);
    border-color: var(--f3m-border);
    color: var(--f3m-text);
    border-radius: 8px;
}

    /* Links and bold text take the box's colour instead of Bootstrap's darker shade for light boxes. */
    .alert-warning .alert-link, .alert-info .alert-link, .alert-secondary .alert-link {
        color: inherit;
    }

.progress {
    background: var(--f3m-surface-2);
    border-radius: 99px;
}

.progress-bar.bg-warning {
    background: var(--f3m-amber) !important;
}

.spinner-border {
    border-color: rgba(255,255,255,.2);
    border-right-color: var(--f3m-amber);
}

/* Boot splash */
#app:has(.f3m-boot) { /* nothing, handled inline */
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--f3m-bg);
}

::-webkit-scrollbar-thumb {
    background: #2a2d32;
    border-radius: 3px;
}

/* Error UI */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem 1.5rem;
    background: #c0392b;
    color: #fff;
    font-size: .85rem;
    z-index: 9999;
}

/* ── Upload: multi-file entries ─────────────────────────── */
.f3m-file-entry {
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    overflow: hidden;
}

.f3m-file-entry-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.f3m-file-entry-path {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 10px;
    border-top: 1px solid var(--f3m-border);
}

.f3m-path-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--f3m-muted);
    font-size: .78rem;
    font-family: var(--f3m-font-b);
}

    .f3m-path-input::placeholder {
        color: rgba(107,114,128,.5);
    }

    .f3m-path-input:focus {
        color: var(--f3m-text);
    }

/* ── Upload: the type of each file ─────────────────────── */
.f3m-type-select {
    background: transparent;
    border: none;
    outline: none;
    color: var(--f3m-text);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

    .f3m-type-select option {
        background: var(--f3m-surface-2);
        color: var(--f3m-text);
    }

.f3m-type-hint {
    font-size: .7rem;
    color: var(--f3m-muted);
}

/* ── Upload: "where will the files end up" ──────────────── */
.f3m-file-entry-target {
    padding: 0 12px 8px 34px;
    font-size: .72rem;
    color: var(--f3m-muted);
}

.f3m-preview {
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    padding: 10px 12px;
}

.f3m-pv-tree {
    max-height: 320px;
    overflow: auto;
    overscroll-behavior: contain; /* reaching the end of the tree must not scroll the page */
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.f3m-pv-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-top: 1px;
    padding-bottom: 1px;
    white-space: nowrap;
}

.f3m-pv-toggle {
    background: none;
    border: 0;
    padding: 0;
    color: var(--f3m-text);
    display: inline-flex;
    align-items: center;
}

.f3m-pv-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.f3m-pv-meta {
    color: var(--f3m-muted);
    margin-left: auto;
    padding-left: 1rem;
    font-size: .7rem;
}

.f3m-pv-conflict .f3m-pv-name {
    color: #f87171;
}

.f3m-dropzone-sm {
    padding: .75rem 1rem !important;
    flex-direction: row !important;
    justify-content: center;
    min-height: unset;
    border-radius: 8px;
}

/* ── Detail: file rows ──────────────────────────────────── */
.f3m-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--f3m-border);
    background: var(--f3m-surface-2);
    cursor: pointer;
    transition: border-color var(--tr);
}

    .f3m-file-row:hover {
        border-color: rgba(255,193,7,.3);
    }

    .f3m-file-row.active {
        border-color: var(--f3m-amber);
    }

.f3m-file-row-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}

.f3m-install-path {
    font-size: .66rem;
    color: var(--f3m-muted);
    margin-top: 2px;
    font-family: monospace;
    letter-spacing: .02em;
}

    .f3m-install-path i {
        margin-right: 3px;
    }

/* ── Dropdown menus (the version picker, SelectMenu) ────── */
.f3m-dropdown-menu {
    background: var(--f3m-surface) !important;
    border: 1px solid var(--f3m-border) !important;
    border-radius: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

    .f3m-dropdown-menu .dropdown-item {
        color: var(--f3m-text);
        padding: .5rem .9rem;
        font-size: .85rem;
        transition: background var(--tr);
    }

        .f3m-dropdown-menu .dropdown-item:hover, .f3m-dropdown-menu .dropdown-item:focus {
            background: var(--f3m-surface-2);
            color: var(--f3m-text);
        }

        .f3m-dropdown-menu .dropdown-item.active {
            background: var(--f3m-amber-dim) !important;
            color: var(--f3m-amber) !important;
        }

.f3m-version-dropdown {
    min-width: 220px;
}

.f3m-select-placeholder {
    color: var(--f3m-muted);
}

/* ── Tags (chips on mods, the picker, the admin page) ───── */
.f3m-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.f3m-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: .1rem .5rem;
    border-radius: 99px;
    border: 1px solid var(--f3m-border);
    background: var(--f3m-surface-2);
    color: var(--f3m-text);
    font-size: .72rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color var(--tr), color var(--tr);
}

a.f3m-tag:hover, a.f3m-tag:focus-visible {
    border-color: var(--f3m-amber);
    color: var(--f3m-amber);
}

.f3m-tag-more {
    color: var(--f3m-muted);
}

.mod-card-tags {
    margin: -4px 0 10px;
}

.f3m-tag-picker {
    position: relative;
}

.f3m-tag-picker-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: .25rem .5rem;
    background: var(--f3m-surface-2) !important;
    border: 1px solid var(--f3m-border) !important;
    color: var(--f3m-text) !important;
    cursor: text;
    transition: border-color var(--tr), box-shadow var(--tr);
}

.f3m-tag-picker.open .f3m-tag-picker-control, .f3m-tag-picker-control:focus-within {
    border-color: var(--f3m-amber) !important;
    box-shadow: 0 0 0 3px var(--f3m-amber-dim);
}

.f3m-tag-picker.disabled .f3m-tag-picker-control {
    opacity: .65;
    cursor: default;
}

.f3m-tag-picked {
    font-size: .8rem;
    padding-right: .2rem;
}

.f3m-tag-remove {
    border: 0;
    background: none;
    color: var(--f3m-muted);
    padding: 0 .1rem;
    line-height: 1;
    border-radius: 50%;
}

    .f3m-tag-remove:hover, .f3m-tag-remove:focus-visible {
        color: var(--f3m-amber);
    }

.f3m-tag-picker-input {
    flex: 1;
    min-width: 8rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--f3m-text);
    font-size: .9rem;
    padding: .2rem 0;
}

    .f3m-tag-picker-input::placeholder {
        color: var(--f3m-muted);
    }

.f3m-tag-picker-full {
    color: var(--f3m-muted);
}

.f3m-tag-picker-list {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    max-height: 280px;
}

    .f3m-tag-picker-list .dropdown-item {
        display: flex;
        align-items: baseline;
        gap: .5rem;
        white-space: normal;
    }

.f3m-tag-picker-parents {
    color: var(--f3m-muted);
}

.f3m-tag-picker-count {
    margin-left: auto;
    color: var(--f3m-muted);
}

.f3m-tag-picker-empty {
    padding: .5rem .9rem;
    color: var(--f3m-muted);
}

.f3m-tag-admin-list {
    max-height: 70vh;
    overflow-y: auto;
}

.f3m-tag-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .45rem .75rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--f3m-text);
    text-align: left;
    font-size: .88rem;
    transition: background var(--tr);
}

    .f3m-tag-admin-row:hover, .f3m-tag-admin-row:focus-visible {
        background: var(--f3m-surface-2);
    }

    .f3m-tag-admin-row.active {
        background: var(--f3m-amber-dim);
        color: var(--f3m-amber);
    }

.f3m-tag-admin-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
}

.f3m-tag-admin-type {
    padding: 0 .4rem;
    border-radius: 4px;
    border: 1px solid rgba(255,193,7,.25);
    color: var(--f3m-amber);
    font-family: var(--f3m-font-h);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* A tag that counts through visitors' votes (a suggestion past the limit), not the mod's own. */
.f3m-tag-community {
    border-style: dashed;
    border-color: rgba(255,193,7,.45);
}

/* A requested tag that doesn't exist yet. */
.f3m-tag-request {
    gap: 3px;
    border-style: dotted;
    color: var(--f3m-muted);
}

/* ── Tag suggestions (mod page, admin queue) ────────────── */
.f3m-suggestion-muted {
    color: var(--f3m-muted);
}

.f3m-suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--f3m-border);
}

    .f3m-suggestion:last-child {
        border-bottom: 0;
    }

.f3m-suggestion-tag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

.f3m-suggestion-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.f3m-suggestion-score {
    min-width: 1.5rem;
    text-align: center;
    font-family: var(--f3m-font-h);
    font-weight: 700;
    font-size: .85rem;
}

.f3m-vote {
    border: 1px solid var(--f3m-border);
    background: transparent;
    color: var(--f3m-muted);
    border-radius: 6px;
    padding: .1rem .4rem;
    line-height: 1.4;
    transition: color var(--tr), border-color var(--tr);
}

    .f3m-vote:hover:not(:disabled), .f3m-vote:focus-visible {
        color: var(--f3m-text);
        border-color: var(--f3m-muted);
    }

    .f3m-vote.active {
        color: var(--f3m-status-good);
        border-color: var(--f3m-status-good);
    }

    .f3m-vote.down.active {
        color: var(--f3m-status-critical);
        border-color: var(--f3m-status-critical);
    }

/* The unit after a number box ("points", "a day"). */
.f3m-input-unit {
    background: var(--f3m-surface-2);
    border-color: var(--f3m-border);
    color: var(--f3m-muted);
}

.f3m-suggest-form {
    padding: .75rem;
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    background: var(--f3m-surface-2);
}

/* A suggestion on the mod page: a tag chip with its score. */
.f3m-suggestion-chip {
    gap: .35rem;
    cursor: pointer;
}

    .f3m-suggestion-chip:hover, .f3m-suggestion-chip:focus-visible {
        border-color: var(--f3m-amber);
    }

.f3m-suggestion-chip-score {
    font-family: var(--f3m-font-h);
    font-weight: 700;
    color: var(--f3m-amber);
}

.min-w-0 {
    min-width: 0;
}

/* ── Tag dialog (mod page) ──────────────────────────────── */
.f3m-tagdlg {
    display: flex;
    flex-direction: column;
    width: min(1040px, calc(100vw - 2rem));
    height: min(760px, calc(100vh - 2rem));
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
    overflow: hidden;
    outline: none;
}

.f3m-tagdlg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--f3m-border);
}

.f3m-tagdlg-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.f3m-tagdlg-tree {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 1rem 0 1.25rem;
    border-right: 1px solid var(--f3m-border);
}

.f3m-tagdlg-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -.5rem;
    padding: 0 .5rem 1rem;
}

.f3m-tagdlg-side {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.f3m-tagdlg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: .5rem;
    color: var(--f3m-muted);
}

.f3m-tagdlg-compose {
    padding: .85rem;
    border: 1px solid var(--f3m-border);
    border-radius: 10px;
    background: var(--f3m-surface-2);
}

.f3m-tagdlg-item {
    padding: .7rem .75rem;
    margin-bottom: .5rem;
    border: 1px solid var(--f3m-border);
    border-radius: 10px;
    transition: border-color var(--tr);
}

    .f3m-tagdlg-item.selected {
        border-color: rgba(255,193,7,.5);
    }

    .f3m-tagdlg-item button.f3m-tag {
        cursor: pointer;
    }

.f3m-tagdlg-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.f3m-tagdlg-progress {
    height: 4px;
    border-radius: 99px;
    background: var(--f3m-surface-2);
    overflow: hidden;
}

.f3m-tagdlg-progress-bar {
    height: 100%;
    background: var(--f3m-muted);
    transition: width var(--tr);
}

    .f3m-tagdlg-progress-bar.done {
        background: var(--f3m-amber);
    }

/* Stacked on small screens: the tree on top, the list below, the whole dialog scrolls. */
@media (max-width: 767.98px) {
    .f3m-tagdlg {
        height: calc(100vh - 1rem);
        width: calc(100vw - 1rem);
    }

    .f3m-tagdlg-body {
        display: block;
        overflow-y: auto;
    }

    .f3m-tagdlg-tree {
        border-right: 0;
        border-bottom: 1px solid var(--f3m-border);
        padding-bottom: .5rem;
    }

    .f3m-tagdlg-scroll {
        max-height: 45vh;
    }

    .f3m-tagdlg-side {
        overflow: visible;
    }
}

/* ── Tag tree ───────────────────────────────────────────── */
.f3m-tree, .f3m-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.f3m-tree-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 2rem;
    padding: 0 .35rem 0 calc(.25rem + var(--depth, 0) * 1.15rem);
    border-radius: 7px;
    transition: background var(--tr);
}

    .f3m-tree-row:hover {
        background: rgba(255,255,255,.035);
    }

    .f3m-tree-row.selected {
        background: var(--f3m-amber-dim);
    }

    .f3m-tree-row.on-mod .f3m-tree-name {
        color: var(--f3m-status-good);
        font-weight: 600;
    }

    .f3m-tree-row.muted .f3m-tree-name {
        color: var(--f3m-muted);
    }

    .f3m-tree-row.suggested .f3m-tree-name {
        color: var(--f3m-amber);
    }

.f3m-tree-fold {
    flex: 0 0 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4rem;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--f3m-muted);
    font-size: .75rem;
}

    button.f3m-tree-fold:hover:not(:disabled) {
        color: var(--f3m-text);
        background: var(--f3m-surface-2);
    }

.f3m-tree-name {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    color: var(--f3m-text);
    padding: .2rem .1rem;
    text-align: left;
    font-size: .875rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.f3m-tree-match {
    color: var(--f3m-amber);
    font-weight: 600;
}

.f3m-tree-count {
    font-size: .68rem;
    color: var(--f3m-muted);
    border: 1px solid var(--f3m-border);
    border-radius: 99px;
    padding: 0 .35rem;
}

.f3m-tree-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.f3m-tree-state {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    color: var(--f3m-muted);
    white-space: nowrap;
}

    .f3m-tree-state.good {
        color: var(--f3m-status-good);
    }

    .f3m-tree-state.counts {
        color: var(--f3m-amber);
        font-weight: 600;
    }

.f3m-tree-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--f3m-border);
    border-radius: 6px;
    background: transparent;
    color: var(--f3m-text);
    font-size: .72rem;
    padding: .1rem .45rem;
    transition: border-color var(--tr), color var(--tr), opacity var(--tr);
}

    .f3m-tree-btn:hover:not(:disabled), .f3m-tree-btn:focus-visible {
        border-color: var(--f3m-amber);
        color: var(--f3m-amber);
    }

    .f3m-tree-btn:disabled {
        opacity: .4;
    }

/* A tag users created that's still voted on. */
.f3m-tree-new {
    display: inline-block;
    padding: 0 .35rem;
    border-radius: 99px;
    border: 1px dashed rgba(255,193,7,.5);
    color: var(--f3m-amber);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* The "new tag under this one" button only shows up on the row you're on (always on touch screens). */
.f3m-tree-btn-quiet {
    border-color: transparent;
    color: var(--f3m-muted);
    opacity: 0;
}

    .f3m-tree-row:hover .f3m-tree-btn-quiet, .f3m-tree-row.selected .f3m-tree-btn-quiet, .f3m-tree-btn-quiet:focus-visible {
        opacity: 1;
    }

@media (hover: none) {
    .f3m-tree-btn-quiet {
        opacity: 1;
    }
}

/* Tabs on admin pages (the tags page's Tags | Suggestions). */
.f3m-tabs {
    border-color: var(--f3m-border);
}

    .f3m-tabs .nav-link {
        color: var(--f3m-muted);
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
    }

        .f3m-tabs .nav-link:hover {
            color: var(--f3m-text);
        }

        .f3m-tabs .nav-link.active {
            color: var(--f3m-amber);
            border-bottom-color: var(--f3m-amber);
            background: transparent;
        }

.f3m-tag-locked {
    gap: 4px;
    font-size: .8rem;
    color: var(--f3m-amber);
    border-color: rgba(255,193,7,.25);
}

    .f3m-tag-locked i {
        font-size: .65rem;
    }

.f3m-tag-admin-branch {
    color: var(--f3m-muted);
    font-size: .75rem;
}

.f3m-tag-admin-note, .f3m-tag-admin-count {
    color: var(--f3m-muted);
}

.f3m-tag-admin-count {
    flex-shrink: 0;
    white-space: nowrap;
}

.f3m-tag-preview {
    display: grid;
    gap: .25rem;
    padding: .6rem .75rem;
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    background: var(--f3m-surface-2);
}

/* SelectMenu's button looks like the form fields; the arrow is the light one, for the dark background. */
.f3m-select-menu .form-select {
    background-color: var(--f3m-surface-2) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
}

/* ── Detail: version history timeline ───────────────────── */
.f3m-version-history {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--f3m-border);
    margin-left: 7px;
    padding-left: 0;
}

.f3m-version-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    margin-left: -1px;
    transition: background var(--tr);
    position: relative;
}

    .f3m-version-row:hover {
        background: var(--f3m-surface-2);
    }

    .f3m-version-row.selected {
        background: var(--f3m-amber-dim);
    }

.f3m-version-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--f3m-border);
    border: 2px solid var(--f3m-surface);
    flex-shrink: 0;
    margin-left: -6px;
    transition: background var(--tr);
}

    .f3m-version-dot.latest {
        background: var(--f3m-amber);
    }

/* ── Admin panel ─────────────────────────────────────────── */
/* The admin area (Shared/AdminLayout): the sidebar beside the page on wide screens, a row of links above it otherwise. */
.f3m-admin-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.25rem 16px 3rem;
}

.f3m-admin-content {
    min-width: 0;
}

.f3m-admin-nav {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--f3m-border);
    scrollbar-width: thin;
}

.f3m-admin-nav-title, .f3m-admin-nav .f3m-admin-nav-group {
    display: none;
}

.f3m-admin-nav-group {
    font-family: var(--f3m-font-h);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--f3m-muted);
}

.f3m-admin-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    padding: .45rem .75rem;
    border-radius: 8px;
    color: var(--f3m-text);
    font-size: .88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tr), color var(--tr);
}

    .f3m-admin-nav-link i {
        color: var(--f3m-muted);
        transition: color var(--tr);
    }

    .f3m-admin-nav-link:hover, .f3m-admin-nav-link:focus-visible {
        background: var(--f3m-surface-2);
        color: var(--f3m-text);
    }

    .f3m-admin-nav-link.active {
        background: var(--f3m-amber-dim);
        color: var(--f3m-amber);
        font-weight: 600;
    }

        .f3m-admin-nav-link.active i {
            color: var(--f3m-amber);
        }

@media (min-width: 992px) {
    .f3m-admin-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 2rem;
        padding: 2rem 1.5rem 3rem;
    }

    .f3m-admin-nav {
        flex-direction: column;
        align-self: start;
        position: sticky;
        top: calc(56px + 1.5rem);
        max-height: calc(100vh - 56px - 3rem);
        overflow-y: auto;
        padding: .75rem;
        border: 1px solid var(--f3m-border);
        border-radius: var(--f3m-radius);
        background: var(--f3m-surface);
    }

    .f3m-admin-nav-title {
        display: block;
        padding: .25rem .75rem .5rem;
        font-family: var(--f3m-font-h);
        font-weight: 700;
    }

    .f3m-admin-nav .f3m-admin-nav-group {
        display: block;
        padding: .9rem .75rem .3rem;
    }
}

/* The overview's tiles, one per admin page. */
.f3m-admin-tile {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--f3m-border);
    border-radius: var(--f3m-radius);
    background: var(--f3m-surface);
    color: var(--f3m-muted);
    text-decoration: none;
    transition: border-color var(--tr), transform var(--tr);
}

    .f3m-admin-tile:hover, .f3m-admin-tile:focus-visible {
        border-color: rgba(255,193,7,.35);
        color: var(--f3m-muted);
        transform: translateY(-2px);
    }

.f3m-admin-tile-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--f3m-text);
    font-family: var(--f3m-font-h);
    font-weight: 700;
}

.f3m-admin-table {
    background: transparent !important;
    color: var(--f3m-text);
    font-size: .85rem;
}

    .f3m-admin-table thead th {
        background: var(--f3m-surface-2);
        color: var(--f3m-muted);
        font-family: var(--f3m-font-h);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        border: none;
        padding: .75rem 1rem;
    }

    .f3m-admin-table tbody td {
        border-color: var(--f3m-border);
        padding: .7rem 1rem;
        vertical-align: middle;
    }

    .f3m-admin-table tbody tr:hover td {
        background: var(--f3m-surface-2);
    }

.f3m-admin-row td {
    background: rgba(255,193,7,.03);
}

.f3m-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f3m-font-h);
    font-size: .75rem;
    font-weight: 700;
    color: var(--f3m-muted);
    flex-shrink: 0;
}

    .f3m-user-avatar.admin {
        background: var(--f3m-amber-dim);
        border-color: rgba(255,193,7,.3);
        color: var(--f3m-amber);
    }

.f3m-badge-admin {
    background: var(--f3m-amber-dim);
    color: var(--f3m-amber);
    border: 1px solid rgba(255,193,7,.25);
    font-size: .7rem;
}

/* Delete confirm modal */
.f3m-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
}

.f3m-modal {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: 14px;
    padding: 1.75rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
}

/* ═══════════════════════════════════════════════════════════
   Save File Dialog
   ═══════════════════════════════════════════════════════════ */

/* Lock page scroll while a modal overlay is open (pure CSS, no JS).
   Give any future overlay the `f3m-scroll-lock` class to opt in. */
html:has(.sfd-backdrop, .f3m-scroll-lock) {
    overflow: hidden;
    scrollbar-gutter: stable; /* keep the layout from shifting when the scrollbar disappears */
}

.sfd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.sfd-dialog {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: 14px;
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0,0,0,.6);
    overflow: hidden;
    outline: none; /* suppress focus ring on the container */
}

/* Title bar */
.sfd-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .9rem 1rem .85rem;
    background: var(--f3m-surface-2);
    border-bottom: 1px solid var(--f3m-border);
    flex-shrink: 0;
}

.sfd-titlebar-icon {
    color: var(--f3m-amber);
    font-size: 1rem;
}

.sfd-title {
    font-family: var(--f3m-font-h);
    font-weight: 700;
    font-size: .9rem;
    color: var(--f3m-text);
    flex: 1;
}

.sfd-close {
    background: none;
    border: none;
    color: var(--f3m-muted);
    font-size: .8rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color var(--tr), background var(--tr);
    line-height: 1;
}

    .sfd-close:hover {
        color: var(--f3m-text);
        background: rgba(255,255,255,.06);
    }

/* Toolbar / breadcrumbs */
.sfd-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--f3m-border);
    background: var(--f3m-surface);
    flex-shrink: 0;
}

.sfd-toolbtn {
    background: none;
    border: 1px solid var(--f3m-border);
    color: var(--f3m-muted);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: .8rem;
    cursor: pointer;
    transition: color var(--tr), border-color var(--tr), background var(--tr);
    line-height: 1.4;
    flex-shrink: 0;
}

    .sfd-toolbtn:hover:not(:disabled) {
        color: var(--f3m-amber);
        border-color: var(--f3m-amber);
        background: var(--f3m-amber-dim);
    }

    .sfd-toolbtn:disabled {
        opacity: .3;
        cursor: not-allowed;
    }

.sfd-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.sfd-crumb {
    background: none;
    border: none;
    font-family: var(--f3m-font-h);
    font-size: .78rem;
    font-weight: 600;
    color: var(--f3m-muted);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    white-space: nowrap;
    transition: color var(--tr);
}

    .sfd-crumb:hover {
        color: var(--f3m-amber);
    }

    .sfd-crumb.active {
        color: var(--f3m-text);
        cursor: default;
    }

.sfd-crumb-sep {
    color: var(--f3m-muted);
    font-size: .65rem;
    opacity: .5;
}

/* File pane */
.sfd-pane {
    flex: 1;
    min-height: 220px;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .4rem;
    background: var(--f3m-surface-2);
    border-bottom: 1px solid var(--f3m-border);
}

    .sfd-pane::-webkit-scrollbar {
        width: 4px;
    }

    .sfd-pane::-webkit-scrollbar-thumb {
        background: #2a2d32;
        border-radius: 2px;
    }

.sfd-entry {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    font-size: .84rem;
    color: var(--f3m-text);
    transition: background var(--tr);
}

    .sfd-entry:hover {
        background: rgba(255,255,255,.05);
    }

    .sfd-entry.selected {
        background: var(--f3m-amber-dim);
        color: var(--f3m-amber);
    }

        .sfd-entry.selected .sfd-icon-dir {
            color: var(--f3m-amber);
        }

        .sfd-entry.selected .sfd-icon-file {
            color: var(--f3m-amber);
        }

.sfd-icon-dir {
    color: #e6b84a;
    font-size: .9rem;
    flex-shrink: 0;
}

.sfd-icon-file {
    color: var(--f3m-muted);
    font-size: .9rem;
    flex-shrink: 0;
}

.sfd-entry-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfd-new-folder-entry {
    gap: 6px;
}

.sfd-inline-input {
    flex: 1;
    min-width: 0;
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-amber);
    border-radius: 5px;
    color: var(--f3m-text);
    font-size: .82rem;
    padding: 2px 7px;
    outline: none;
}

.sfd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 160px;
    color: var(--f3m-muted);
    font-size: .82rem;
}

.sfd-empty-icon {
    font-size: 2.2rem;
    opacity: .3;
}

/* Filename row */
.sfd-filename-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--f3m-border);
    flex-shrink: 0;
}

.sfd-label {
    font-family: var(--f3m-font-h);
    font-size: .78rem;
    font-weight: 600;
    color: var(--f3m-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.sfd-filename-input {
    flex: 1;
    background: var(--f3m-surface-2) !important;
    border: 1px solid var(--f3m-border) !important;
    color: var(--f3m-text) !important;
    border-radius: 7px !important;
    font-size: .85rem;
    padding: .3rem .65rem;
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
}

    .sfd-filename-input:focus {
        border-color: var(--f3m-amber) !important;
        box-shadow: 0 0 0 3px var(--f3m-amber-dim) !important;
    }

/* Path preview */
.sfd-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: .4rem .85rem;
    font-size: .72rem;
    color: var(--f3m-muted);
    border-bottom: 1px solid var(--f3m-border);
    background: var(--f3m-surface-2);
    flex-shrink: 0;
    min-height: 28px;
}

.sfd-preview-path {
    font-family: monospace;
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--f3m-amber);
    opacity: .8;
}

/* ── F95 Verification GUID box ──────────────────────────────────────────────── */
.f3m-guid-box {
    background: var(--f3m-surface-2);
    border: 1px solid var(--f3m-border);
    border-radius: var(--f3m-radius);
    padding: 1rem 1.25rem;
    text-align: center;
}

.f3m-guid-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--f3m-amber);
    word-break: break-all;
    user-select: all;
    padding: .5rem .75rem;
    background: var(--f3m-amber-dim);
    border-radius: 6px;
    border: 1px dashed rgba(255, 193, 7, .35);
}

/* ── Admin: F95zone import ─────────────────────────────── */
.f3m-import-muted {
    color: #9ca3af;
}

.f3m-import-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
}

    .f3m-import-step + .f3m-import-step {
        border-top: 1px solid var(--f3m-border);
    }

.f3m-import-step-no {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--f3m-amber-dim);
    color: var(--f3m-amber);
    font-family: var(--f3m-font-h);
    font-weight: 800;
}

.f3m-import-progress {
    background: var(--f3m-surface-2);
    border-radius: 8px;
    padding: .75rem 1rem;
}

.f3m-import-attention {
    border-color: rgba(255,193,7,.35) !important;
}

.f3m-import-problems {
    border-color: rgba(220,53,69,.4) !important;
}

.f3m-import-heldback {
    display: flex;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: .5rem;
    border-radius: 8px;
    background: var(--f3m-surface-2);
    cursor: pointer;
}

    .f3m-import-heldback:last-child {
        margin-bottom: 0;
    }

.f3m-import-details {
    border-color: var(--f3m-border) !important;
}

    .f3m-import-details > summary {
        cursor: pointer;
    }

.f3m-import-log {
    max-height: 360px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .f3m-import-step {
        flex-wrap: wrap;
    }

        .f3m-import-step > .btn {
            width: 100%;
        }
}

/* ── Admin: error reports ───────────────────────────────── */
.f3m-error-report {
    border-top: 1px solid var(--f3m-border);
    padding: .5rem 0;
}

    .f3m-error-report > summary {
        cursor: pointer;
        display: flex;
        gap: .75rem;
        align-items: baseline;
        list-style: none;
    }

    .f3m-error-report > summary::-webkit-details-marker {
        display: none;
    }

.f3m-error-time {
    flex-shrink: 0;
    font-size: .78rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

.f3m-error-message {
    min-width: 0;
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f3m-error-report[open] .f3m-error-message {
    white-space: normal;
    overflow-wrap: anywhere;
}

.f3m-error-stack {
    max-height: 320px;
    overflow: auto;
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    background: var(--f3m-surface-2);
    border-radius: 6px;
    font-size: .72rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.f3m-log-level {
    flex-shrink: 0;
    min-width: 3.6rem;
    font-size: .68rem;
}

.f3m-log-filter {
    width: auto;
}

.f3m-log-search {
    flex: 1 1 14rem;
    width: auto;
}

@media (max-width: 575.98px) {
    /* Time, level and source on one line, the message below. */
    .f3m-error-report > summary {
        flex-wrap: wrap;
        gap: .1rem .5rem;
    }

    .f3m-error-message {
        flex-basis: 100%;
    }

    .f3m-log-filter {
        flex: 1 1 45%;
    }
}

/* ── Admin: site setup ─────────────────────────────────── */
.f3m-setup-check {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 0;
}

    .f3m-setup-check + .f3m-setup-check {
        border-top: 1px solid var(--f3m-border);
    }

.f3m-setup-table {
    --bs-table-bg: transparent;
}

    .f3m-setup-table td:first-child {
        white-space: nowrap;
    }

/* ── Optional files: upload form, preview, mod page ─────── */
/* Bootstrap's muted grey is unreadable on the dark surface; these editors explain a lot in it. */
.f3m-optional-groups .text-muted,
.f3m-generated-paths .text-muted {
    color: #9ca3af !important;
}

.f3m-optional-group {
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: var(--f3m-surface-2);
}

.f3m-pv-optional .f3m-pv-name {
    color: #9ca3af;
}

.f3m-pv-optional-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--f3m-font-b);
    font-size: .66rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--f3m-amber-dim);
    color: var(--f3m-amber);
}

    .f3m-pv-optional-badge.mixed {
        background: transparent;
        border: 1px dashed rgba(255,193,7,.45);
    }

.f3m-pv-badge-remove {
    background: none;
    border: 0;
    padding: 0 0 0 .15rem;
    color: inherit;
    line-height: 1;
}

.f3m-pv-mark {
    background: none;
    border: 0;
    padding: 0 .2rem;
    color: var(--f3m-muted);
    opacity: 0;
    flex-shrink: 0;
}

.f3m-pv-row:hover .f3m-pv-mark,
.f3m-pv-mark:focus-visible,
.f3m-pv-mark.open {
    opacity: 1;
    color: var(--f3m-amber);
}

/* Touch screens have no hover: keep the bookmark visible there. */
@media (hover: none) {
    .f3m-pv-mark {
        opacity: .7;
    }
}

.f3m-pv-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: .3rem 0 .4rem;
    font-family: var(--f3m-font-b);
    white-space: normal;
}

.f3m-optional-parts {
    border-top: 1px solid var(--f3m-border);
    padding-top: .6rem;
}

.f3m-optional-part {
    font-size: .72rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--f3m-amber-dim);
    color: var(--f3m-amber);
}

.f3m-optional-hint {
    font-size: .7rem;
    color: #9ca3af;
}

/* ── Statistics page (admin): tiles and charts ───────────── */
.f3m-stat-tile {
    background: var(--f3m-surface);
    border: 1px solid var(--f3m-border);
    border-radius: var(--f3m-radius);
    padding: .9rem 1rem;
}

.f3m-stat-tile-label {
    font-size: .78rem;
    color: #8b919c;
}

/* Proportional figures for the big number; the body font, like the rest of the numbers on the page. */
.f3m-stat-tile-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    margin: .15rem 0;
}

.f3m-stat-tile-note, .f3m-stat-tile-delta {
    font-size: .75rem;
    color: #8b919c;
}

    .f3m-stat-tile-delta.good {
        color: #3fbf5f;
    }

    .f3m-stat-tile-delta.bad {
        color: #f28b8b;
    }

.f3m-chart-muted, .f3m-chart-empty-text {
    color: #8b919c;
}

.f3m-chart-card h2 {
    font-family: var(--f3m-font-b);
}

.f3m-chart {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .f3m-chart svg {
        display: block;
        max-width: 100%;
    }

.f3m-chart-grid {
    stroke: rgba(255,255,255,.07);
    stroke-width: 1;
}

.f3m-chart-axis {
    stroke: rgba(255,255,255,.18);
    stroke-width: 1;
}

.f3m-chart-crosshair {
    stroke: rgba(255,255,255,.3);
    stroke-width: 1;
}

/* The 2px ring in the surface colour keeps the dot readable where it sits on the line. */
.f3m-chart-dot {
    stroke: var(--f3m-surface);
    stroke-width: 2;
}

.f3m-chart-tick {
    fill: #8b919c;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.f3m-chart-empty {
    fill: #8b919c;
    font-size: 12px;
}

.f3m-chart-tooltip {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    min-width: 150px;
    padding: .45rem .6rem;
    background: var(--f3m-surface-2);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    font-size: .75rem;
    pointer-events: none;
    z-index: 2;
}

    .f3m-chart-tooltip .border-top {
        border-color: rgba(255,255,255,.12) !important;
    }

.f3m-chart-tooltip-total {
    color: #8b919c;
}

.f3m-chart-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.f3m-legend li {
    color: var(--f3m-text);
}

.f3m-barlist-row {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .3rem 0;
    font-size: .82rem;
}

    .f3m-barlist-row:hover {
        background: rgba(255,255,255,.03);
    }

.f3m-barlist-label a {
    color: var(--f3m-text);
    text-decoration: none;
}

    .f3m-barlist-label a:hover {
        color: var(--f3m-amber);
    }

.f3m-barlist-track {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Thin bar, square at the baseline and rounded at its end. */
.f3m-barlist-bar {
    display: block;
    flex: 0 0 auto;
    min-width: 2px;
    height: 10px;
    border-radius: 0 4px 4px 0;
}

.f3m-barlist-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.f3m-sharebar {
    display: flex;
    gap: 2px;
    height: 14px;
}

.f3m-sharebar-part {
    min-width: 3px;
}

    .f3m-sharebar-part:first-child {
        border-radius: 4px 0 0 4px;
    }

    .f3m-sharebar-part:last-child {
        border-radius: 0 4px 4px 0;
    }

    .f3m-sharebar-part:only-child {
        border-radius: 4px;
    }

.f3m-sharebar-legend li {
    padding: .2rem 0;
}

.f3m-num-table td, .f3m-num-table th {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.f3m-chart-table {
    max-height: 260px;
    overflow-y: auto;
}

/* While a new period loads, the old numbers stay but fade. */
.f3m-stats-reloading {
    opacity: .55;
    transition: opacity .2s;
}

/* ── Admin: server update ───────────────────────────────── */
.f3m-update-log, .f3m-update-command {
    background: var(--f3m-bg);
    border: 1px solid var(--f3m-border);
    border-radius: 8px;
    padding: .6rem .75rem;
    color: var(--f3m-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.f3m-update-log {
    max-height: 320px;
    overflow-y: auto;
}

.f3m-update-commits li {
    padding: .15rem 0;
}

.f3m-update-commits code {
    color: var(--f3m-amber);
}