/* ==========================================================================
   Ponyfolio
   Everything here is written against MudBlazor's palette variables
   (--mud-palette-*) so light and dark both work from one set of rules.
   ========================================================================== */

:root {
    --pf-radius: 16px;
    --pf-radius-lg: 22px;
    --pf-shadow: 0 1px 2px rgba(36, 29, 61, .06), 0 8px 24px -12px rgba(36, 29, 61, .18);
    --pf-shadow-hover: 0 2px 6px rgba(36, 29, 61, .08), 0 18px 40px -18px rgba(36, 29, 61, .28);
    --pf-gap: 20px;
    --pf-maxline: 62ch;
}

html, body {
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
}

.pf-muted { color: var(--mud-palette-text-secondary) !important; }

/* Pixel art must never be smoothed when scaled up. */
.pf-pony {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Layout scaffolding
   -------------------------------------------------------------------------- */

/* MudMainContent's own top padding is what clears the fixed app bar. Don't zero it —
   doing that is what made page content slide underneath the navbar. */
/* +1px for the app bar's bottom border, which adds to its rendered height. */
.pf-main { padding-top: calc(var(--mud-appbar-height, 68px) + 1px); }

.pf-section { padding-block: 56px; }
.pf-section:first-child { padding-top: 40px; }

.pf-appbar {
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
    gap: 8px;
}

.pf-only-mobile { display: none !important; }
.pf-only-desktop { display: flex !important; }

/* Brand -------------------------------------------------------------------- */

.pf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.pf-brand-mark {
    /* Square, so a square glyph gets the same breathing room on every side. */
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    padding: 3px;
    background: var(--mud-palette-primary);
    box-shadow: 0 4px 12px -4px var(--mud-palette-primary);
}

.pf-brand-word {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Top nav ------------------------------------------------------------------ */

.pf-topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 22px;
}

/* Note: colour properties are deliberately not transitioned anywhere in this file.
   They resolve from --mud-palette-* variables, and a transition on a palette-derived
   colour gets wedged at its old value when the theme is switched at runtime.
   Transform, shadow and opacity are safe and carry all the hover affordance. */
.pf-topnav-link {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .93rem;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pf-topnav-link:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.pf-topnav-link.is-active {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-search { max-width: 380px; width: 100%; }
.pf-search .mud-input-outlined .mud-input-outlined-border { border-radius: 999px; }
.pf-search .mud-input-root { border-radius: 999px; }

.pf-upload-btn { margin-inline: 4px; }

.pf-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 4px;
    cursor: pointer;
    border-width: 2px; border-style: solid; border-color: var(--mud-palette-divider);
    transition: transform .15s ease;
}

.pf-avatar-btn:hover {
    transform: translateY(-1px);
    border-color: var(--mud-palette-primary);
}

/* User menu — hand-rolled dropdown, plain Blazor click handling. */

.pf-usermenu { position: relative; display: inline-flex; }

.pf-usermenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.pf-usermenu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1401;
    min-width: 268px;
    padding: 6px;
    box-shadow: var(--pf-shadow-hover);
    animation: pf-menu-in .12s ease-out;
}

@keyframes pf-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-usermenu-panel { animation: none; }
}

.pf-usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.pf-usermenu-head:hover { background: var(--mud-palette-action-default-hover); }

.pf-usermenu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 5px;
    flex-shrink: 0;
}

.pf-usermenu-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-usermenu-id strong { font-size: .92rem; }
.pf-usermenu-id span { font-size: .78rem; }

.pf-usermenu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--mud-palette-divider);
}

.pf-usermenu-panel > .pf-usermenu-sep:last-child { display: none; }

.pf-usermenu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
}

.pf-usermenu-item:hover { background: var(--mud-palette-action-default-hover); }
.pf-usermenu-item .mud-icon-root { color: var(--mud-palette-text-secondary); }

.pf-drawer-head {
    padding: 22px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-navmenu { padding-inline: 8px; }
.pf-navmenu .mud-nav-link { border-radius: 12px; margin-bottom: 2px; }

/* Buttons ------------------------------------------------------------------ */

.pf-btn-pill {
    border-radius: 999px !important;
    text-transform: none;
    font-weight: 700;
    padding-inline: 20px;
}

/* Cards -------------------------------------------------------------------- */

.pf-card {
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.pf-hero {
    position: relative;
    overflow: hidden;
    padding-block: 72px 88px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
    background:
        radial-gradient(1200px 420px at 12% -10%, var(--mud-palette-primary-hover), transparent 60%),
        radial-gradient(900px 380px at 88% 0%, var(--mud-palette-secondary-hover), transparent 62%),
        var(--mud-palette-background);
}

.pf-hero-glow {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 520px;
    background: radial-gradient(closest-side, var(--mud-palette-primary), transparent);
    opacity: .10;
    filter: blur(20px);
    pointer-events: none;
}

.pf-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
}

.pf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
}

.pf-hero-title {
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    line-height: 1.06;
    margin: 20px 0 18px;
}

.pf-grad {
    background: linear-gradient(100deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pf-hero-sub {
    max-width: var(--pf-maxline);
    color: var(--mud-palette-text-secondary);
    font-size: 1.06rem;
}

.pf-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.pf-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 40px;
}

.pf-hero-stats div { display: flex; flex-direction: column; }
.pf-hero-stats strong { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.pf-hero-stats span { font-size: .84rem; color: var(--mud-palette-text-secondary); }

/* Floating preview cluster */

.pf-hero-art {
    position: relative;
    height: 400px;
}

.pf-float {
    position: absolute;
    border-radius: var(--pf-radius-lg);
    padding: 16px;
    box-shadow: var(--pf-shadow-hover);
    border: 1px solid rgba(255, 255, 255, .35);
    animation: pf-bob 7s ease-in-out infinite;
}

.pf-float-0 { width: 47%; top: 2%;  left: 4%;  animation-delay: 0s; }
.pf-float-1 { width: 40%; top: 24%; right: 2%; animation-delay: .9s; }
.pf-float-2 { width: 38%; bottom: 6%; left: 16%; animation-delay: 1.8s; }
.pf-float-3 { width: 32%; bottom: 22%; right: 14%; animation-delay: 2.7s; }

@keyframes pf-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-float { animation: none; }
}

/* --------------------------------------------------------------------------
   Section headings, bands
   -------------------------------------------------------------------------- */

.pf-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pf-section-title { font-weight: 800; letter-spacing: -.02em; }

.pf-band {
    padding-block: 56px;
    background: var(--mud-palette-background-gray);
    border-block-width: 1px; border-block-style: solid; border-block-color: var(--mud-palette-divider);
}

.pf-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.pf-page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-page-title { font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Grids and skin cards
   -------------------------------------------------------------------------- */

.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: var(--pf-gap);
}

.pf-grid-dense { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.pf-grid-creators { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }

.pf-skin-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pf-skin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pf-shadow-hover);
    border-color: var(--mud-palette-primary);
}

.pf-skin-art {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 22px 18px;
    overflow: hidden;
}

/* A real screenshot fills the tile edge to edge; the generated fallback keeps its padding. */
.pf-skin-art.has-shot { padding: 0; }

.pf-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-shot-missing {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-art-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
}

.pf-art-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-art-flag.is-featured { color: var(--mud-palette-primary); }

.pf-art-flag.is-gif {
    color: #fff;
    background: var(--mud-palette-secondary);
    letter-spacing: .04em;
}

.pf-art-count {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: rgba(20, 15, 40, .62);
    backdrop-filter: blur(4px);
}

.pf-skin-hover {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(transparent, rgba(20, 15, 40, .72));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}

.pf-skin-card:hover .pf-skin-hover { opacity: 1; transform: translateY(0); }

.pf-skin-body {
    padding: 14px 16px 6px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.pf-skin-titles { min-width: 0; }

.pf-skin-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--mud-palette-text-primary) !important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-skin-title:hover { color: var(--mud-palette-primary) !important; }

.pf-skin-by {
    font-size: .83rem;
    color: var(--mud-palette-text-secondary) !important;
}

.pf-swatches { display: flex; gap: 4px; flex-shrink: 0; padding-top: 4px; }

.pf-swatches span {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-skin-foot {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px 10px;
}

.pf-stat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    
}

.pf-stat-btn:hover { background: var(--mud-palette-action-default-hover); }
.pf-stat-btn.is-on { color: var(--mud-palette-secondary); }
.pf-stat-static { cursor: default; margin-left: auto; }
.pf-stat-static:hover { background: transparent; }

/* --------------------------------------------------------------------------
   Creator cards
   -------------------------------------------------------------------------- */

.pf-creator-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.pf-creator-card:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow-hover); }

.pf-creator-banner { height: 76px; }

.pf-creator-avatar {
    display: block;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 18px;
    padding: 7px;
    border-radius: 20px;
    border-width: 3px; border-style: solid; border-color: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-creator-body { padding: 12px 18px 18px; }

.pf-creator-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.pf-creator-display {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary) !important;
}

.pf-creator-display:hover { color: var(--mud-palette-primary) !important; }

.pf-creator-tagline {
    margin: 10px 0 12px;
    color: var(--mud-palette-text-secondary);
    min-height: 42px;
}

.pf-creator-meta {
    display: flex;
    gap: 7px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 14px;
}

.pf-creator-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tier badges -------------------------------------------------------------- */

.pf-tier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.6;
}

.pf-tier .mud-icon-root { font-size: .95rem; }
.pf-tier-pro { color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-tier-superpro { color: var(--mud-palette-secondary); background: var(--mud-palette-secondary-hover); }

/* Commission pills --------------------------------------------------------- */

.pf-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.pf-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pf-pill-open {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.pf-pill-waitlist {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.pf-pill-closed {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-divider);
}

/* --------------------------------------------------------------------------
   Filters and tags
   -------------------------------------------------------------------------- */

.pf-filterbar {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pf-filter-search { flex: 1 1 260px; }
.pf-filter-sort { flex: 0 1 200px; }
.pf-budget { flex: 1 1 200px; padding-top: 2px; }

.pf-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.pf-tagrow-inline { margin: 16px 0 0; }

.pf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .15s ease;
}

.pf-tag:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pf-tag.is-on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pf-tag:disabled { opacity: .45; cursor: not-allowed; }
.pf-tag-clear { color: var(--mud-palette-error); border-style: dashed; }

.pf-loadmore { display: flex; justify-content: center; margin-top: 36px; }

/* Empty state -------------------------------------------------------------- */

.pf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 64px 24px;
    border-width: 1px; border-style: dashed; border-color: var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-empty-icon { color: var(--mud-palette-text-disabled); }
.pf-empty-text { max-width: 42ch; }

/* --------------------------------------------------------------------------
   Skin detail
   -------------------------------------------------------------------------- */

.pf-crumbs { padding-inline: 0; margin-bottom: 14px; }

.pf-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pf-detail-main { display: flex; flex-direction: column; gap: 18px; }
.pf-detail-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

.pf-detail-art {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--pf-radius-lg);
    padding: 40px;
    overflow: hidden;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
}

.pf-detail-art.has-shot { padding: 0; }
.pf-detail-art.has-shot .pf-shot { object-fit: contain; }

/* Gallery ------------------------------------------------------------------ */

.pf-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    opacity: .85;
}

.pf-gallery-nav:hover { opacity: 1; }
.pf-gallery-nav.is-prev { left: 12px; }
.pf-gallery-nav.is-next { right: 12px; }

.pf-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    background: rgba(20, 15, 40, .62);
    backdrop-filter: blur(4px);
}

.pf-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pf-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 70px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.pf-thumb.is-on { border-color: var(--mud-palette-primary); }
.pf-thumb:hover { border-color: var(--mud-palette-primary); }

.pf-thumb-gif {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-secondary);
}

.pf-thumb-caption { display: block; margin-top: 8px; }

.pf-palette { padding: 16px 18px; }
.pf-palette-head { margin-bottom: 12px; }
.pf-palette-row { display: flex; gap: 22px; flex-wrap: wrap; }

.pf-palette-chip { display: flex; align-items: center; gap: 10px; }

.pf-palette-chip > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-palette-chip div { display: flex; flex-direction: column; }
.pf-palette-chip strong { font-size: .82rem; }
.pf-palette-chip code { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.pf-detail-desc { padding: 22px; }
.pf-detail-header { padding: 22px; }
.pf-detail-title { font-weight: 800; letter-spacing: -.025em; }

.pf-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.pf-detail-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
}

.pf-detail-stats div { display: flex; flex-direction: column; }
.pf-detail-stats strong { font-size: 1.2rem; font-weight: 800; }
.pf-detail-stats span { font-size: .78rem; color: var(--mud-palette-text-secondary); }

/* Share code --------------------------------------------------------------- */

.pf-sharecode {
    padding: 18px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-sharecode-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    margin-bottom: 12px;
}

.pf-sharecode-free {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.pf-sharecode-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.pf-sharecode-row code {
    flex: 1 1 220px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-size: .9rem;
    overflow-x: auto;
    white-space: nowrap;
}

.pf-creator-inline { padding: 16px; display: flex; align-items: center; gap: 12px; }

.pf-creator-inline-avatar {
    width: 52px;
    height: 52px;
    padding: 6px;
    border-radius: 16px;
    flex-shrink: 0;
}

.pf-creator-inline-text { flex: 1; min-width: 0; }

.pf-commission-nudge { padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pf-related { margin-top: 48px; }

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */

.pf-profile-banner { height: 210px; }
.pf-profile-wrap { padding-bottom: 56px; }

/* Only the avatar breaks into the banner. Pulling the whole header up put the name,
   stats and buttons on top of the gradient, where they were unreadable and fought
   the banner for attention. */
.pf-profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: flex-start;
    padding-top: 18px;
    margin-bottom: 28px;
}

.pf-profile-avatar {
    width: 132px;
    height: 132px;
    margin-top: -78px;
    padding: 0;
    overflow: hidden;
    border-radius: 30px;
    border-width: 4px; border-style: solid; border-color: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    background-color: var(--mud-palette-surface);
}

.pf-profile-identity { padding-bottom: 4px; }
.pf-profile-name { font-weight: 800; letter-spacing: -.03em; }
.pf-profile-tagline { margin-top: 8px; max-width: var(--pf-maxline); }

.pf-profile-stats { display: flex; gap: 28px; margin-top: 14px; }
.pf-profile-stats div { display: flex; flex-direction: column; }
.pf-profile-stats strong { font-size: 1.25rem; font-weight: 800; }
.pf-profile-stats span { font-size: .8rem; color: var(--mud-palette-text-secondary); }

.pf-profile-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 6px;
}

.pf-profile-tabs .mud-tabs-toolbar { background: transparent; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider); }
.pf-profile-tabs .mud-tab { text-transform: none; font-weight: 700; letter-spacing: 0; }
.pf-profile-tabs .mud-tabs-panels { padding: 28px 0 0; }

.pf-about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pf-about-main { padding: 24px; }
.pf-about-side { padding: 24px; }
.pf-about-subhead { margin: 20px 0 10px; }

.pf-linklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.pf-linklist li { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
.pf-report-btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Commissions
   -------------------------------------------------------------------------- */

.pf-commission-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.pf-commission-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
.pf-commission-list { display: flex; flex-direction: column; gap: 18px; }

.pf-commission-card { padding: 22px; }

.pf-commission-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

.pf-commission-avatar {
    width: 56px;
    height: 56px;
    padding: 7px;
    border-radius: 16px;
    flex-shrink: 0;
}

.pf-commission-headtext { flex: 1; min-width: 0; }
.pf-commission-title { font-weight: 800; }
.pf-commission-by { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.pf-commission-price { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
.pf-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.pf-commission-price .pf-muted { font-size: .74rem; }
.pf-commission-desc { color: var(--mud-palette-text-secondary); }

.pf-includes {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 18px;
}

.pf-includes li { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.pf-includes .mud-icon-root { color: var(--mud-palette-success); }

.pf-commission-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.pf-commission-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pf-slot-bar { height: 6px; margin-bottom: 16px; }

.pf-commission-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-side-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pf-side-card > .mud-button-root { align-self: stretch; }

.pf-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: .89rem; }
.pf-steps li { color: var(--mud-palette-text-secondary); }
.pf-steps strong { color: var(--mud-palette-text-primary); }

.pf-side-safety { border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--mud-palette-divider)); }

.pf-side-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

/* --------------------------------------------------------------------------
   Upload
   -------------------------------------------------------------------------- */

.pf-upload { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.pf-upload-form { display: flex; flex-direction: column; gap: 18px; }
.pf-upload-preview { position: relative; }
.pf-sticky { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.pf-preview-label { color: var(--mud-palette-text-secondary); }
.pf-preview-note { padding: 16px; }

.pf-form-card { padding: 24px; }
.pf-form-hint { margin-bottom: 16px; }
.pf-field { margin-bottom: 18px; }

.pf-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 44px 24px;
    border-width: 2px; border-style: dashed; border-color: var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    text-align: center;
    
}

.pf-dropzone:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-dropzone.has-file { border-style: solid; border-color: var(--mud-palette-success); }
.pf-dropzone.has-file .mud-icon-root { color: var(--mud-palette-success); }
.pf-dropzone .mud-icon-root { color: var(--mud-palette-primary); }
.pf-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.pf-dropzone.compact { padding: 24px; }

/* Pending upload list ------------------------------------------------------ */

.pf-gif-upsell {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-gif-upsell > .mud-icon-root { color: var(--mud-palette-primary); flex-shrink: 0; }
.pf-gif-upsell > div { display: flex; flex-direction: column; flex: 1; }
.pf-gif-upsell strong { font-size: .9rem; }
.pf-gif-upsell span { font-size: .82rem; }

.pf-imagelist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-imagelist-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-imagelist-row.is-primary { border-color: var(--mud-palette-primary); }

.pf-imagelist-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.pf-imagelist-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }

.pf-imagelist-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-imagelist-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .86rem; }
.pf-imagelist-name .pf-muted { font-size: .78rem; }

.pf-primary-flag {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.pf-imagelist-inputs { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-imagelist-inputs > *:first-child { flex: 1 1 220px; }
.pf-kind-select { flex: 0 0 140px; }
.pf-imagelist-actions { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 767px) {
    .pf-imagelist-row { flex-wrap: wrap; }
    .pf-imagelist-actions { flex-direction: row; }
}

.pf-colorrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.pf-form-alert { margin-top: 18px; }
.pf-form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Support / plans
   -------------------------------------------------------------------------- */

.pf-support-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: 66px 44px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
    background:
        radial-gradient(900px 340px at 50% -20%, var(--mud-palette-primary-hover), transparent 65%),
        var(--mud-palette-background);
}

.pf-support-hero-inner { position: relative; }
.pf-support-title { font-weight: 800; letter-spacing: -.03em; margin: 18px 0 14px; font-size: clamp(2rem, 4.4vw, 3rem); }
.pf-support-sub { color: var(--mud-palette-text-secondary); max-width: 60ch; margin: 0 auto; }

.pf-billing-toggle {
    display: inline-flex;
    gap: 4px;
    margin-top: 30px;
    padding: 5px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-billing-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.pf-billing-toggle button.is-on {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow);
}

.pf-save-flag {
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.pf-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: start;
}

.pf-plan { padding: 26px; position: relative; display: flex; flex-direction: column; }

.pf-plan.is-featured {
    border-color: var(--pf-plan-accent);
    box-shadow: 0 0 0 1px var(--pf-plan-accent), var(--pf-shadow-hover);
}

.pf-plan-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: var(--pf-plan-accent);
    white-space: nowrap;
}

.pf-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.pf-plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--pf-plan-accent);
    background: color-mix(in srgb, var(--pf-plan-accent) 14%, transparent);
    flex-shrink: 0;
}

.pf-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-plan-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.pf-plan-save {
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.pf-plan-cta { margin-bottom: 6px; }
.pf-plan-divider { margin: 18px 0; }

.pf-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pf-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .89rem; }
.pf-plan-features .mud-icon-root { color: var(--pf-plan-accent); margin-top: 1px; flex-shrink: 0; }

.pf-compare { padding: 26px; margin-top: 48px; }
.pf-table-scroll { overflow-x: auto; }
.pf-compare-table { min-width: 620px; }
.pf-compare-table th { font-weight: 800; }
.pf-compare-table td, .pf-compare-table th { text-align: center; }
.pf-compare-label { text-align: left !important; font-weight: 600; }
.pf-cell-yes { color: var(--mud-palette-success); font-weight: 800; font-size: 1.05rem; }
.pf-cell-no { color: var(--mud-palette-text-disabled); }
.pf-cell-text { font-weight: 700; }

.pf-faq { margin-top: 52px; }
.pf-faq-panels { background: transparent; }
.pf-faq-panel { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.pf-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.pf-stat-tile { padding: 20px; display: flex; flex-direction: column; gap: 4px; }

.pf-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--pf-tile-accent);
    background: color-mix(in srgb, var(--pf-tile-accent) 14%, transparent);
}

.pf-stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pf-stat-label { font-size: .84rem; color: var(--mud-palette-text-secondary); }

.pf-stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; margin-top: 6px; }
.pf-stat-delta.is-up { color: var(--mud-palette-success); }
.pf-stat-delta.is-down { color: var(--mud-palette-text-secondary); }

.pf-dash { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-dash-main { display: flex; flex-direction: column; gap: 22px; }
.pf-dash-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

.pf-dash-cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pf-queue-table { min-width: 620px; }
.pf-queue-client { display: flex; align-items: center; gap: 9px; }

.pf-queue-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    padding: 4px;
    flex-shrink: 0;
}

.pf-right { text-align: right; }
.pf-overdue { color: var(--mud-palette-error); font-weight: 700; }

.pf-stage {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.pf-stage-sketch   { color: var(--mud-palette-info);    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); }
.pf-stage-progress { color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-stage-review   { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.pf-stage-done     { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.pf-stage-waiting  { color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); }

.pf-upgrade { border-color: var(--mud-palette-secondary); }

.pf-upgrade-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-secondary);
    background: var(--mud-palette-secondary-hover);
}

.pf-toplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pf-toplist li { display: flex; align-items: center; gap: 11px; }

.pf-toplist-art {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 5px;
    flex-shrink: 0;
}

.pf-toplist-text { display: flex; flex-direction: column; min-width: 0; }
.pf-toplist-text a { font-weight: 700; font-size: .89rem; color: var(--mud-palette-text-primary); text-decoration: none; }
.pf-toplist-text a:hover { color: var(--mud-palette-primary); }
.pf-toplist-text span { font-size: .78rem; }

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.pf-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.pf-settings-single { max-width: 640px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pf-settings-save { justify-content: flex-end; margin-top: 28px; }
.pf-plan-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-danger { border-color: color-mix(in srgb, var(--mud-palette-error) 40%, var(--mud-palette-divider)); margin-top: 20px; max-width: 640px; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */

.pf-auth {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    overflow: hidden;
    background:
        radial-gradient(700px 400px at 20% 0%, var(--mud-palette-primary-hover), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, var(--mud-palette-secondary-hover), transparent 60%),
        var(--mud-palette-background);
}

.pf-auth-card {
    position: relative;
    width: 100%;
    max-width: 428px;
    padding: 34px;
    display: flex;
    flex-direction: column;
}

.pf-auth-brand { align-self: center; margin-bottom: 22px; }
.pf-auth-title { font-weight: 800; text-align: center; }
.pf-auth-sub { text-align: center; margin-bottom: 26px; }
.pf-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pf-auth-check { margin-bottom: 20px; }
.pf-auth-alt { text-align: center; margin-top: 20px; }

/* --------------------------------------------------------------------------
   Docs / guidelines
   -------------------------------------------------------------------------- */

.pf-doc-alert { margin-bottom: 34px; }
.pf-doc-section { margin-bottom: 38px; scroll-margin-top: 92px; }
.pf-doc-section h5, .pf-doc-section .mud-typography-h5 { font-weight: 800; margin-bottom: 14px; }
.pf-doc-section ul, .pf-doc-section ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.pf-doc-section li { color: var(--mud-palette-text-secondary); }
.pf-doc-section p, .pf-doc-section .mud-typography-body1 { max-width: var(--pf-maxline); margin-bottom: 14px; }
.pf-doc-footer { padding: 24px; }

/* Not found ---------------------------------------------------------------- */

.pf-notfound { text-align: center; display: flex; flex-direction: column; align-items: center; padding-block: 90px; }
.pf-notfound-art { width: 200px; margin-bottom: 26px; opacity: .85; }
.pf-notfound-text { max-width: 44ch; margin-top: 10px; }
.pf-notfound-cta { justify-content: center; }

/* --------------------------------------------------------------------------
   Values / CTA band
   -------------------------------------------------------------------------- */

.pf-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pf-value { padding: 26px; display: flex; flex-direction: column; gap: 8px; }

.pf-value-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--pf-value-accent);
    background: color-mix(in srgb, var(--pf-value-accent) 14%, transparent);
}

.pf-cta-band {
    padding-block: 68px;
    text-align: center;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    background:
        radial-gradient(800px 300px at 50% 120%, var(--mud-palette-secondary-hover), transparent 65%),
        var(--mud-palette-background-gray);
}

.pf-cta-title { font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.pf-cta-sub { color: var(--mud-palette-text-secondary); max-width: 58ch; margin: 0 auto; }
.pf-cta-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.pf-footer {
    padding-block: 52px 32px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.pf-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}

.pf-footer-blurb { margin-top: 14px; max-width: 46ch; }
.pf-footer-head { margin-bottom: 12px; }
.pf-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }

.pf-footer-col a {
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.pf-footer-col a:hover { color: var(--mud-palette-primary); }
.pf-footer-divider { margin-bottom: 20px; }
.pf-footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .pf-detail,
    .pf-commission-layout,
    .pf-upload,
    .pf-dash { grid-template-columns: minmax(0, 1fr); }

    .pf-detail-side,
    .pf-commission-side,
    .pf-dash-side,
    .pf-sticky { position: static; }

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

@media (max-width: 1023px) {
    .pf-only-mobile { display: inline-flex !important; }
    .pf-only-desktop { display: none !important; }

    .pf-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .pf-hero-art { height: 300px; order: -1; }
    .pf-hero { padding-block: 44px 60px; }

    .pf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .pf-section { padding-block: 40px; }

    .pf-profile-banner { height: 150px; }

    .pf-profile-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pf-profile-avatar { margin-top: -60px; }

    .pf-profile-avatar { width: 104px; height: 104px; padding: 0; }
    .pf-profile-cta { align-items: flex-start; }

    .pf-hero-stats { gap: 22px; }
    .pf-hero-art { height: 230px; }
    .pf-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-detail-art { padding: 24px; }
    .pf-commission-head { flex-wrap: wrap; }
    .pf-commission-price { text-align: left; }
    .pf-notfound { padding-block: 56px; }
}

/* Sprite avatars ----------------------------------------------------------- */

.pf-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    /* cover, not contain: uploads are cropped to the frame's shape already, so
       letterboxing only exposed the image's own edges inside the ring. */
    object-fit: cover;
    /* Smooth scaling. pixelated suited raw pony sprites, but it is what made
       cropped avatars look coarse. Sprites opt back in via .pf-pixel. */
    image-rendering: auto;
}

.pf-pixel { image-rendering: pixelated; }

.pf-brand-mark { color: #fff; }
.pf-brand-mark svg { width: 25px; height: 25px; }

.pf-notfound-art .pf-avatar-img { height: auto; }
/* ==========================================================================
   Settings, management screens, dialogs and the commission board
   ========================================================================== */

/* Settings shell ----------------------------------------------------------- */

.pf-settings-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pf-settings-nav {
    position: sticky;
    top: calc(var(--mud-appbar-height, 68px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-settings-navlink {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pf-settings-navlink:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.pf-settings-navlink.is-active {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-settings-body { min-width: 0; }
.pf-settings-stack { display: flex; flex-direction: column; gap: 20px; }

.pf-settings-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.pf-settings-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-settings-side { min-width: 0; }

.pf-switch-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.pf-sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 14px 16px;
    margin-top: 4px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow-hover);
}

/* Segmented control -------------------------------------------------------- */

.pf-seg {
    display: inline-flex;
    padding: 4px;
    gap: 3px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-seg-wide { display: flex; width: 100%; margin-top: 8px; }
.pf-seg-wide button { flex: 1; }

.pf-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: transparent;
}

.pf-seg button:hover { color: var(--mud-palette-text-primary); }

.pf-seg button.is-on {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

/* Image upload field ------------------------------------------------------- */

.pf-imagefield { margin-top: 6px; }
.pf-imagefield-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.pf-lock-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-imagefield-row { display: flex; gap: 16px; align-items: flex-start; }

.pf-imagefield-drop {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--pf-radius);
    border-width: 2px; border-style: dashed; border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

.pf-imagefield.is-wide .pf-imagefield-drop { width: 100%; height: 132px; }
.pf-imagefield.is-wide .pf-imagefield-row { flex-direction: column; }

.pf-imagefield-drop:hover { border-color: var(--mud-palette-primary); }
.pf-imagefield-drop.is-locked { cursor: not-allowed; opacity: .6; }
.pf-imagefield-drop.has-image { border-style: solid; padding: 0; }
.pf-imagefield-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pf-imagefield-drop img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

.pf-imagefield-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.pf-imagefield-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; }

/* Chip / link editors ------------------------------------------------------ */

.pf-chipedit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pf-chip-x {
    margin-left: 6px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    opacity: .65;
}

.pf-chip-x:hover { opacity: 1; }

.pf-inline-add { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.pf-inline-add > *:first-child { flex: 1; }

.pf-linkedit { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pf-linkedit li { display: flex; align-items: center; gap: 10px; }
.pf-linkedit li > *:nth-child(2) { flex: 1; }
.pf-linkedit .mud-icon-root { color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.pf-block-handle { flex: 1; font-weight: 600; }

.pf-field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pf-field-row > * { flex: 1 1 160px; }

.pf-preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.pf-preset {
    width: 46px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    border-width: 2px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-preset:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px); }

/* Mini profile preview ----------------------------------------------------- */

.pf-minipreview { overflow: hidden; margin-bottom: 16px; }
.pf-minipreview-banner { height: 76px; }

.pf-minipreview-avatar {
    width: 66px;
    height: 66px;
    margin: -34px 0 0 18px;
    padding: 7px;
    border-radius: 18px;
    position: relative;
    border-width: 3px; border-style: solid; border-color: var(--mud-palette-surface);
    background-color: var(--mud-palette-background-gray);
}

.pf-minipreview-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pf-minipreview-tagline { margin: 4px 0 8px; }

/* Manage lists ------------------------------------------------------------- */

.pf-quota {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}

.pf-manage-list { display: flex; flex-direction: column; gap: 14px; }

.pf-manage-row {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.pf-manage-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 74px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.pf-manage-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }

.pf-manage-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: rgba(20, 15, 40, .62);
}

.pf-manage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-manage-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-manage-title a { text-decoration: none; color: inherit; }
.pf-manage-title a:hover { color: var(--mud-palette-primary); }

.pf-manage-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.pf-manage-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pf-manage-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.pf-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-delete-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-delete-preview img { width: 72px; height: 56px; object-fit: cover; border-radius: 9px; image-rendering: pixelated; }
.pf-delete-preview div { display: flex; flex-direction: column; }
.pf-delete-preview span { font-size: .8rem; }

/* Dialog ------------------------------------------------------------------- */

.pf-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(20, 15, 40, .5);
    backdrop-filter: blur(3px);
}

.pf-modal {
    position: fixed;
    z-index: 1501;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius-lg);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: 0 24px 70px -20px rgba(20, 15, 40, .5);
}

.pf-modal.is-wide { width: min(720px, calc(100vw - 32px)); }

.pf-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
}

.pf-modal-body { padding: 20px 22px; overflow-y: auto; }

.pf-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
}

.pf-dialog-form { display: flex; flex-direction: column; gap: 16px; }


.pf-jobcard {
    padding: 12px;
    border-radius: 13px;
    cursor: grab;
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
    transition: transform .12s ease, box-shadow .12s ease;
}

.pf-jobcard:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow-hover); }
.pf-jobcard.is-dragging { opacity: .45; cursor: grabbing; }
.pf-jobcard.is-overdue { border-color: var(--mud-palette-error); }

.pf-jobcard-head { display: flex; gap: 10px; align-items: flex-start; }

.pf-jobcard-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.pf-jobcard-id { display: flex; flex-direction: column; min-width: 0; }
.pf-jobcard-id strong { font-size: .87rem; line-height: 1.3; }
.pf-jobcard-id span { font-size: .76rem; }

.pf-jobcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: .78rem;
}

.pf-jobcard-meta span { display: inline-flex; align-items: center; gap: 3px; }
.pf-jobcard-price { font-weight: 800; color: var(--mud-palette-text-primary); }
.pf-jobcard-move { display: flex; justify-content: space-between; margin-top: 4px; }
.pf-overdue-flag { color: var(--mud-palette-error); font-weight: 700; }

.pf-gate { padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .pf-settings-split { grid-template-columns: minmax(0, 1fr); }
    .pf-settings-side { display: none; }
}

@media (max-width: 900px) {
    .pf-settings-shell { grid-template-columns: minmax(0, 1fr); }

    .pf-settings-nav {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .pf-settings-navlink { white-space: nowrap; }
    .pf-manage-row { flex-wrap: wrap; }
    .pf-manage-actions { width: 100%; justify-content: flex-end; }
    .pf-quota { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .pf-modal { width: calc(100vw - 20px); }
    .pf-imagefield-row { flex-direction: column; }
    .pf-seg-wide { flex-wrap: wrap; }
}

/* Auth forms — plain HTML controls so they can post outside the circuit. */

.pf-auth-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 18px; }
.pf-auth-label { font-size: .82rem; font-weight: 700; margin-top: 10px; color: var(--mud-palette-text-secondary); }

.pf-auth-input {
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    font-size: .92rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-lines-inputs);
}

.pf-auth-input:focus { outline: none; border-color: var(--mud-palette-primary); }
.pf-auth-hint { font-size: .76rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.pf-auth-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .86rem; }

.pf-auth-submit {
    margin-top: 20px;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.pf-auth-submit:hover { filter: brightness(1.05); }
.pf-auth-alt { margin-top: 18px; }
.pf-auth-demo { display: block; margin-top: 14px; }
.pf-auth-demo code { font-size: .74rem; }

.pf-signout-form { display: contents; }

.pf-signout-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: .89rem;
    font-weight: 600;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background: transparent;
}

.pf-signout-item:hover { background: var(--mud-palette-action-default-hover); }

/* Error boundary card */

.pf-errorcard {
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pf-error-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 20px;
    color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover);
}

.pf-error-detail {
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 14px;
    overflow-x: auto;
    text-align: left;
    font-size: .78rem;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.pf-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* Character code + settings panel */

.pf-ponycode {
    padding: 18px 20px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-ponycode.is-empty {
    border-style: dashed;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-ponycode-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-weight: 700; font-size: .88rem; }

.pf-ponycode-version {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-primary);
}

.pf-ponycode-free { font-size: .74rem; font-weight: 700; color: var(--mud-palette-success); margin-left: auto; }

.pf-ponycode-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.pf-ponycode-row code {
    flex: 1 1 220px;
    min-width: 0;
    overflow-x: auto;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .82rem;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.pf-traits { padding: 20px; margin-top: 20px; }
.pf-traitrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.pf-traitrow-stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
.pf-trait-key { min-width: 84px; font-size: .82rem; font-weight: 700; color: var(--mud-palette-text-secondary); }

.pf-race {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
}

.pf-race-unicorn { color: #7A5AF8; background: rgba(122, 90, 248, .12); }
.pf-race-pegasus { color: #2BB3D6; background: rgba(43, 179, 214, .12); }
.pf-race-alicorn { color: #FF6FA5; background: rgba(255, 111, 165, .12); }

.pf-swatchgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

.pf-swatch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-swatch:hover { border-color: var(--mud-palette-primary); }

.pf-swatch-colour {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-swatch-text { display: flex; flex-direction: column; min-width: 0; }
.pf-swatch-text strong { font-size: .82rem; }
.pf-swatch-text code { font-size: .76rem; color: var(--mud-palette-text-secondary); }

/* Editor settings sheets */

.pf-sheets { padding: 20px; margin-top: 20px; }

.pf-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.pf-sheet { margin: 0; }

.pf-sheet a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-sheet a:hover { border-color: var(--mud-palette-primary); }

.pf-sheet img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-sheet figcaption {
    margin-top: 6px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Extension promo ─────────────────────────────────────────────────────── */
/* Shown where someone is about to screenshot the editor by hand, or is looking
   at a design with no settings to recreate it from. */

.pf-ext-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--mud-palette-lines-default);
}

.pf-ext-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.pf-ext-body { min-width: 0; }
.pf-ext-text { margin-top: 4px; max-width: var(--pf-maxline); }
.pf-ext-actions { margin-top: 14px; }

.pf-ext-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    color: inherit;
    text-decoration: none;
    background: var(--mud-palette-background-gray);
    transition: border-color .15s ease, background-color .15s ease;
}

.pf-ext-inline:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.pf-ext-inline span { font-size: .9rem; line-height: 1.4; }
.pf-ext-inline strong { margin-right: 4px; }
.pf-ext-chevron { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 600px) {
    .pf-ext-card { flex-direction: column; }
    .pf-ext-chevron { display: none; }
}

/* ── Image cropper ───────────────────────────────────────────────────────── */
/* The stage is a fixed-height box; the canvas fills it and JS sizes its backing
   store from the resulting layout box. */

.pf-crop-hint { margin-bottom: 12px; }

.pf-crop-stage {
    position: relative;
    height: 380px;
    border-radius: var(--pf-radius);
    overflow: hidden;
    background:
        repeating-conic-gradient(var(--mud-palette-background-gray) 0% 25%, transparent 0% 50%)
        50% / 20px 20px;
}

.pf-crop-stage.is-wide { height: 300px; }

.pf-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.pf-crop-stage canvas:active { cursor: grabbing; }

.pf-crop-zoom {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    color: var(--mud-palette-text-secondary);
}

.pf-crop-slider { flex: 1 1 auto; margin: 0; }

@media (max-width: 600px) {
    .pf-crop-stage { height: 300px; }
    .pf-crop-stage.is-wide { height: 220px; }
}

/* ── Cover picker and tag suggestions ────────────────────────────────────── */

.pf-cover-pick {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin-left: 10px;
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font: inherit;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
}

.pf-cover-pick:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.pf-cover-pick.is-on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600; }

.pf-tagbox { position: relative; }

.pf-tagsuggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
    max-height: 220px;
    overflow-y: auto;
}

.pf-tagsuggest button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.pf-tagsuggest button:hover { background: var(--mud-palette-action-default-hover); }

.pf-sheet-locked {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
}

/* ── Avatar framing ──────────────────────────────────────────────────────── */
/*
   Each frame below sets its own size, radius and ring. The image inside has to
   take that same shape: a square photo in a 50%-radius button renders as a square
   sitting inside a circular ring, which is what `object-fit: cover` alone could
   never fix — cover controls how the picture fills its box, not the box's shape.

   `border-radius: inherit` makes the image adopt whichever radius its frame uses,
   so circles stay circles and rounded squares stay rounded squares without this
   list having to know which is which. `overflow: hidden` clips anything that
   still reaches past the padding box.
*/

.pf-avatar-btn,
.pf-usermenu-avatar,
.pf-creator-avatar,
.pf-creator-inline-avatar,
.pf-profile-avatar,
.pf-commission-avatar,
.pf-queue-avatar,
.pf-minipreview-avatar,
.pf-jobcard-avatar {
    overflow: hidden;
}

.pf-avatar-img {
    border-radius: inherit;
    background-color: var(--mud-palette-background-gray);
}
/*
   No inner gap. These frames carried 4–14px of padding, which showed as a pale ring
   between the border and the picture — the frame reading as separate from the photo
   rather than around it. The border and radius now sit directly on the image.
*/
.pf-avatar-btn,
.pf-usermenu-avatar,
.pf-creator-avatar,
.pf-creator-inline-avatar,
.pf-profile-avatar,
.pf-commission-avatar,
.pf-queue-avatar,
.pf-minipreview-avatar,
.pf-jobcard-avatar {
    padding: 0;
}

/* ── Commission enlistment and reviews ───────────────────────────────────── */

.pf-enlist-list { display: grid; gap: 12px; }

.pf-enlist-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    flex-wrap: wrap;
}

.pf-enlist-main { min-width: 0; }
.pf-enlist-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-enlist-actions { display: flex; gap: 8px; align-items: center; }

.pf-review-summary { padding: 20px 22px; margin-bottom: 16px; }

.pf-review-score { display: flex; gap: 10px; align-items: baseline; }
.pf-review-score strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }

.pf-review-axes {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.pf-review-axes div { display: grid; gap: 2px; }
.pf-review-axes dt { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pf-review-axes dd { margin: 0; font-weight: 700; }

.pf-review-list { display: grid; gap: 12px; }
.pf-review { padding: 16px 18px; }

.pf-review-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pf-review-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.pf-review-overall { margin-left: auto; font-weight: 800; font-size: 1.1rem; }

@media (max-width: 600px) {
    .pf-enlist-row { flex-direction: column; align-items: stretch; }
    .pf-enlist-actions { justify-content: flex-end; }
}

/* ── Queue enlistment actions ────────────────────────────────────────────── */

.pf-jobcard-enlist {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pf-quiet-flag {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-lighten);
}

/* Feedback forms ---------------------------------------------------------- */

.pf-rate-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
}

.pf-rate-row > span { font-size: .92rem; }

/* ── Client commission record ────────────────────────────────────────────── */

.pf-clientrec { padding: 18px 20px; margin-bottom: 18px; }

.pf-clientrec-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pf-clientrec-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.pf-clientrec-flag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-lighten);
}

.pf-clientrec-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }

.pf-clientrec-notes li {
    padding: 10px 12px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-clientrec-notes li span { display: block; font-size: .9rem; }

/* ── Reports and review replies ──────────────────────────────────────────── */

.pf-report-reasons { display: grid; gap: 2px; margin: 6px 0 14px; }

.pf-review-reply {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 var(--pf-radius) var(--pf-radius) 0;
    background: var(--mud-palette-background-gray);
}

.pf-review-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Commission board

   The creator's shopfront on their profile. Shaped after the commission sheets
   artists already post elsewhere: tiers with prices, what is included, how the
   job goes, and one obvious way to get in touch.

   The price is the loudest thing in a tier on purpose. It is the number people
   came to find, and burying it under a paragraph is how commission sheets go
   unread.
   -------------------------------------------------------------------------- */

.pf-board { padding: 4px 0 8px; }

.pf-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pf-board-headline { font-weight: 800; letter-spacing: -.01em; }
.pf-board-intro { max-width: var(--pf-maxline); margin-top: 6px; }
.pf-board-cta { flex: none; }

.pf-board-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.pf-board-tier {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.pf-board-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-board-tier-name { font-weight: 700; }
.pf-board-tier-blurb { margin: 0; }

.pf-board-price { display: flex; align-items: baseline; gap: 6px; }

.pf-board-price-figure {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.pf-board-price-note { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.pf-board-includes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.pf-board-includes li {
    position: relative;
    padding-left: 20px;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}

/* A tick rather than a bullet: every line here is something the buyer gets. */
.pf-board-includes li::before {
    content: "";
    position: absolute;
    left: 2px; top: .42em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--mud-palette-primary);
    border-bottom: 2px solid var(--mud-palette-primary);
    transform: rotate(-45deg);
}

.pf-board-label {
    display: block;
    letter-spacing: .12em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.pf-board-process, .pf-board-terms { margin-top: 26px; }

.pf-board-steps {
    counter-reset: pf-step;
    margin: 0; padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

/* The rail is the sequence made visible — the steps are an order, not a set. */
.pf-board-steps li {
    counter-increment: pf-step;
    position: relative;
    padding: 0 0 18px 42px;
    border-left: 2px solid var(--mud-palette-divider);
    margin-left: 13px;
}

.pf-board-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.pf-board-steps li::before {
    content: counter(pf-step);
    position: absolute;
    left: -14px; top: -2px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.pf-board-steps li span { display: block; padding-top: 2px; }

.pf-board-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-top: 24px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    text-align: center;
}

@media (max-width: 600px) {
    .pf-board-head { flex-direction: column; }
    .pf-board-cta { width: 100%; }
}

/* Verification ------------------------------------------------------------- */

.pf-verified-tick { vertical-align: middle; }

.pf-verify-title { display: flex; align-items: center; gap: 6px; }

/* Applicant links shown as typed, never as anchors: this is untrusted text from
   a stranger and a reviewer should decide where to go, not be one slip from it. */
.pf-verify-evidence {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .82rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.pf-verify-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Board editor ------------------------------------------------------------- */

.pf-board-edit-tier {
    padding: 16px;
    margin-top: 12px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-board-edit-row {
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr auto;
    gap: 10px;
}

.pf-plan-note { display: block; margin-top: 8px; text-align: center; }

@media (max-width: 720px) {
    .pf-board-edit-row { grid-template-columns: 1fr; }
}

/* Board editor spacing ------------------------------------------------------

   .pf-field carries a bottom margin so stacked inputs breathe. On the last one
   in a card that margin lands inside the card's padding and reads as a card
   that is bottom-heavy — the gap below the final input is 24 + 18 while every
   other edge is 24. Dropping it on the last child makes the padding even.
   -------------------------------------------------------------------------- */

.pf-form-card > .pf-field:last-child,
.pf-board-edit-tier > .pf-field:last-child {
    margin-bottom: 0;
}

/* The delete button sits in a row of labelled inputs, so centring it against
   the row leaves it floating against the labels rather than the fields. */
.pf-board-edit-row { align-items: start; }

.pf-board-edit-row > .mud-icon-button { margin-top: 6px; }

.pf-board-edit-tier + .pf-board-edit-tier { margin-top: 14px; }

/* Featured row ------------------------------------------------------------- */

.pf-featured-item { position: relative; }

/* Paid placement, said out loud. Small and quiet — it is a disclosure, not a
   badge of honour — but never absent from a slot somebody paid for. */
.pf-featured-tag {
    position: absolute;
    top: 10px; left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
}

/* --------------------------------------------------------------------------
   Image viewer

   Full-screen, above everything. Design sheets are read rather than glanced at,
   so the stage gets the whole window and the chrome stays out of the way.
   -------------------------------------------------------------------------- */

.pf-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(20, 16, 34, .93);
    backdrop-filter: blur(3px);
}

.pf-viewer:focus { outline: none; }

.pf-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    flex: none;
}

.pf-viewer-title { display: flex; flex-direction: column; min-width: 0; }
.pf-viewer-title .mud-typography { color: #fff; }
.pf-viewer-title .pf-muted { color: rgba(255, 255, 255, .68) !important; }

.pf-viewer-tools { display: flex; align-items: center; gap: 2px; }
.pf-viewer-tools .mud-icon-button { color: #fff; }

.pf-viewer-scale {
    min-width: 52px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    font-variant-numeric: tabular-nums;
}

.pf-viewer-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.pf-viewer-stage.is-grabbing { cursor: grabbing; }

/* Anchored to the middle of the stage rather than centred by the layout.

   A design sheet is far bigger than the window, and grid falls back to "safe"
   alignment for an item that overflows — it snaps to the start. Scaling that
   oversized box about its own centre then threw the picture down and to the
   right. Pinning the centre to 50/50 makes the position independent of how big
   the image happens to be. */
.pf-viewer-image {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;

    /* A design sheet is pixel art and small text. Smoothing it while zoomed in is
       exactly the blur people are complaining about, so let the browser show the
       pixels it actually has. */
    image-rendering: pixelated;
}

.pf-viewer-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
}

.pf-viewer-step:hover { background: rgba(0, 0, 0, .7); }
.pf-viewer-step.is-prev { left: 16px; }
.pf-viewer-step.is-next { right: 16px; }

.pf-viewer-caption {
    flex: none;
    padding: 10px 16px;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .35);
}

@media (max-width: 600px) {
    .pf-viewer-bar { flex-wrap: wrap; }
    .pf-viewer-step { width: 38px; height: 38px; }
}

/* The sheet thumbnail is a button now, so it needs its own reset. */
.pf-sheet-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--pf-radius);
    overflow: hidden;
}

.pf-sheet-open:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.pf-sheet-open img { display: block; width: 100%; height: auto; }

/* The cropper canvas is draggable, so it should say so. */
.pf-cropper-canvas { cursor: grab; touch-action: none; }
.pf-cropper-canvas.is-grabbing { cursor: grabbing; }

/* The values panel: the sheet's own text, read back out of the file. */
.pf-viewer-data {
    position: absolute;
    right: 16px;
    top: 76px;
    bottom: 76px;
    width: min(340px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    overflow: hidden;
}

.pf-viewer-data header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 8px 10px 14px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
}

.pf-viewer-data ul {
    margin: 0;
    padding: 8px 14px 14px;
    list-style: none;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.pf-viewer-data li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; }

.pf-viewer-data-label { font-weight: 700; color: var(--mud-palette-text-primary); }
.pf-viewer-data-value { color: var(--mud-palette-text-secondary); }

/* Each swatch is a button, because copying one hex code is the common case — people are
   rebuilding a pony one slot at a time, not pasting the whole sheet. */
.pf-viewer-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background);
    font: inherit;
    font-size: .76rem;
    font-family: ui-monospace, Consolas, monospace;
    cursor: copy;
}

.pf-viewer-swatch:hover { border-color: var(--mud-palette-primary); }

.pf-viewer-swatch span {
    width: 14px; height: 14px;
    border-radius: 4px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-viewer-swatch em {
    font-style: normal;
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .pf-viewer-data { left: 16px; right: 16px; width: auto; top: auto; height: 45%; }
}

/* The one-time nudge toward the copy panel. A picture of text does not advertise
   that it is also text, so this points it out once and then stays gone. */
.pf-viewer-copy { position: relative; display: inline-flex; }

.pf-viewer-hint {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 260px;
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow-hover);
    animation: pf-hint-in .28s ease-out both;
}

/* The little arrow, pointing back at the button it is talking about. */
.pf-viewer-hint::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px; height: 10px;
    transform: rotate(45deg);
    background: var(--mud-palette-primary);
}

.pf-viewer-hint button {
    flex: none;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
}

.pf-viewer-hint button:hover { background: rgba(255, 255, 255, .35); }

@keyframes pf-hint-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-viewer-hint { animation: none; }
}

/* Crop shape chooser, shown only where the shape is the creator's to pick. */
.pf-crop-ratios { margin: 12px 0 0; }

/* ============================================================================
   Commission board: banner mode, offer samples, and the offers table.
   ============================================================================ */

.pf-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;
}

/* --- Banner mode, as visitors see it ------------------------------------- */

.pf-board-banners {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pf-board-banner { margin: 0; }

.pf-board-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-board-banner figcaption {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

/* The whole picture is the target when it links somewhere -- a banner reads as
   one thing, so a small button in a corner of it would be a worse guess than
   the one people already make. */
.pf-board-banner-hit {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--pf-radius);
}

.pf-board-banner-hit:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* Named rather than only hinted at. The destination is the one thing a picture
   cannot tell you, and it is exactly what a misleading banner would hide. */
.pf-board-banner-go {
    position: absolute;
    right: 12px; bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    color: #fff;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.pf-board-banner-hit:hover img,
.pf-board-banner-hit:focus-visible img { border-color: var(--mud-palette-primary); }

/* --- Example pictures on an offer ---------------------------------------- */

.pf-board-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-board-sample {
    width: 72px; height: 72px;
    padding: 0;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background);
    overflow: hidden;
    cursor: zoom-in;
}

.pf-board-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-board-sample:hover { border-color: var(--mud-palette-primary); }

.pf-board-sample:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* --- The link warning ---------------------------------------------------- */

.pf-link-warn-title { display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* Wrapped and selectable. Truncating the address would hide the end of it,
   which is the part worth reading. */
.pf-link-warn-url {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-family: var(--pf-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .85rem;
    word-break: break-all;
    user-select: all;
}

/* --- Mode chooser in the editor ------------------------------------------ */

.pf-board-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pf-board-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    text-align: left;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.pf-board-mode:hover { border-color: var(--mud-palette-primary); }

.pf-board-mode.is-on {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pf-board-mode.is-locked { opacity: .72; }

.pf-board-mode-name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pf-board-mode-note { font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* --- Banner rows in the editor ------------------------------------------- */

.pf-banner-edit {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    margin-top: 12px;
}

.pf-banner-edit-art img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.pf-banner-edit-fields { display: flex; flex-direction: column; gap: 12px; }
.pf-banner-edit-actions { display: flex; flex-direction: column; }

@media (max-width: 700px) {
    .pf-banner-edit { grid-template-columns: 1fr; }
    .pf-banner-edit-actions { flex-direction: row; justify-content: flex-end; }
}

/* --- The offers table ----------------------------------------------------- */

.pf-offer-table {
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    overflow: hidden;
}

.pf-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 90px 90px auto;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-bottom-width: 1px; border-bottom-style: solid;
    border-bottom-color: var(--mud-palette-divider);
}

.pf-offer-row:last-child { border-bottom: 0; }

.pf-offer-head {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* The name cell is the button. A row summarising one offer has exactly one
   thing a click could mean, so the target is the row rather than a pencil. */
.pf-offer-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding: 6px 0;
    min-width: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.pf-offer-open:hover .pf-offer-name { color: var(--mud-palette-primary); }

.pf-offer-open:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.pf-offer-name { font-weight: 600; }

.pf-offer-blurb {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pf-offer-price { display: flex; flex-direction: column; font-weight: 700; }
.pf-offer-pricenote { font-size: .72rem; font-weight: 400; color: var(--mud-palette-text-secondary); }
.pf-offer-count { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pf-offer-actions { display: flex; }

@media (max-width: 760px) {
    /* Includes and examples are counts, and a count is the first thing worth
       dropping when the row will not fit. The name and the price are why
       somebody opened this page. */
    .pf-offer-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pf-offer-row > *:nth-child(3),
    .pf-offer-row > *:nth-child(4) { display: none; }
}

/* --- The offer dialog ----------------------------------------------------- */

.pf-offer-edit { display: flex; flex-direction: column; gap: 4px; }

.pf-offer-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.4fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .pf-offer-edit-row { grid-template-columns: 1fr; }
}

.pf-offer-samples {
    margin-top: 8px;
    padding-top: 14px;
    border-top-width: 1px; border-top-style: solid;
    border-top-color: var(--mud-palette-divider);
}

.pf-offer-sample-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}

.pf-offer-sample {
    position: relative;
    width: 92px; height: 92px;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    overflow: hidden;
}

.pf-offer-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-offer-sample .mud-icon-button {
    position: absolute;
    top: 2px; right: 2px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

/* ============================================================================
   Board click chart, and the fact list that replaced the dead slots card.
   ============================================================================ */

.pf-chart { margin-top: 8px; }

.pf-chart-plot {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 132px;
    padding: 8px 0;
}

.pf-chart-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* The stack is the full height of the plot so a bar's percentage is measured
   against the busiest day rather than against its own neighbours. */
.pf-chart-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    gap: 1px;
}

.pf-chart-bar {
    display: block;
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.pf-chart-bar.is-contact { background: #2BB3D6; }
.pf-chart-bar.is-banner { background: #7A5AF8; }

/* A day with nothing is a hairline, not a gap -- an empty column would read as
   missing data rather than a quiet Tuesday. */
.pf-chart-bar.is-empty {
    height: 2px;
    background: var(--mud-palette-divider);
    border-radius: 2px;
}

.pf-chart-col:hover .pf-chart-bar { filter: brightness(1.15); }

.pf-chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    padding-top: 4px;
    border-top-width: 1px; border-top-style: solid;
    border-top-color: var(--mud-palette-divider);
}

.pf-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.pf-chart-key { display: inline-flex; align-items: center; gap: 6px; }

.pf-chart-key i {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.pf-chart-key i.is-contact { background: #2BB3D6; }
.pf-chart-key i.is-banner { background: #7A5AF8; }

.pf-chart-peak { margin-left: auto; }

/* --- Fact list ------------------------------------------------------------ */

.pf-factlist {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pf-factlist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom-width: 1px; border-bottom-style: solid;
    border-bottom-color: var(--mud-palette-divider);
    font-size: .88rem;
}

.pf-factlist li:last-child { border-bottom: 0; }
.pf-factlist span { color: var(--mud-palette-text-secondary); }
.pf-factlist strong { font-weight: 700; }

/* ============================================================================
   Admin page: money breakdown, chart headers, account table.
   ============================================================================ */

.pf-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.pf-chart-total { font-size: 1.6rem; font-weight: 800; line-height: 1; }

.pf-admin-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.pf-admin-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.pf-admin-plan {
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* The total is the one somebody actually came to read. */
.pf-admin-plan.is-total {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pf-admin-plan-name {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
}

.pf-admin-plan-count { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.pf-admin-plan-value { font-size: .85rem; color: var(--mud-palette-text-secondary); }

/* --- Account table -------------------------------------------------------- */

.pf-admin-table { margin-top: 8px; }

.pf-admin-row-grid {
    grid-template-columns: minmax(0, 2fr) 150px 110px 80px 90px;
}

@media (max-width: 900px) {
    /* Designs and joined go first: they are context, not the reason anyone opened
       this table. Plan and standing are why. */
    .pf-admin-row-grid { grid-template-columns: minmax(0, 1fr) 130px 100px; }
    .pf-admin-row-grid > *:nth-child(4),
    .pf-admin-row-grid > *:nth-child(5) { display: none; }
}

.pf-admin-paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

/* --- Account dialog ------------------------------------------------------- */

.pf-admin-actions { display: flex; flex-direction: column; gap: 10px; }

.pf-admin-who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-admin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .pf-admin-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   Auth: confirmation and password-reset pages, inline forms in settings.
   ============================================================================ */

/* The round status mark on check-email, confirm-email and reset-password. */
.pf-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.pf-auth-icon .mud-icon-root { font-size: 28px; }

.pf-auth-icon.is-good {
    background: color-mix(in srgb, #2FBF71 16%, transparent);
    color: #2FBF71;
}

.pf-auth-icon.is-bad {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

/* Keep me signed in and Forgot password on one line, which is where people look
   for the second one. */
.pf-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 8px;
}

.pf-auth-forgot {
    font-size: .85rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
    white-space: nowrap;
}

.pf-auth-forgot:hover { text-decoration: underline; }

/* A secondary action that sits under a primary one -- resending a link is not the
   thing most people on that page are about to do. */
.pf-auth-submit-quiet {
    background: transparent;
    color: var(--mud-palette-primary);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
}

.pf-auth-submit-quiet:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* The change-password form inside a settings card. Reuses the auth inputs so the
   two password fields look the same wherever they appear, but does not want the
   auth page's centred, full-bleed layout. */
.pf-inline-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
    margin: 8px 0 12px;
}

.pf-auth-submit-inline {
    align-self: flex-start;
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 12px;
}

/* One-off donation, kept visually apart from the plan cards so it does not read as
   a fourth tier. */
.pf-donate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin: 20px 0;
}

/* Payments table on the admin page. */
.pf-pay-row { grid-template-columns: minmax(0, 2fr) 110px 130px 90px; }

@media (max-width: 760px) {
    .pf-pay-row { grid-template-columns: minmax(0, 1fr) 100px 120px; }
    .pf-pay-row > *:nth-child(4) { display: none; }
}