/* ==========================================================================
   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;

    /* The dialog layer, not a number above everything.
    
       It was 2000, which is above MudBlazor's whole scale - popover 1200, appbar 1300,
       dialog 1400, snackbar 1500, tooltip 1600 - so the viewer covered the snackbar that
       confirms a copied hex code and its own toolbar tooltips. The one feature this thing
       exists for reported success behind an opaque overlay.
    
       Sitting at the dialog layer puts it above the page and the app bar, and leaves the
       two transient layers above it, which is exactly the ordering a modal wants. */
    z-index: var(--mud-zindex-dialog, 1400);
    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; }
}


/* --------------------------------------------------------------------------
   Skeletons

   Composition only. The shimmering elements are MudSkeleton, so the animation,
   the reduced-motion handling and both themes come from the component library
   rather than from bespoke keyframes here.

   What is left is the shapes, because those have to match the real cards they
   stand in for and MudBlazor has no opinion about what a Ponyfolio design card
   looks like: a card skeleton is 4:3 like .pf-skin-art, a row skeleton has a
   68px circle like .pf-creator-avatar. That is the point of a skeleton over a
   spinner - it reserves the space, so nothing jumps when the data lands.

   These rules were missing entirely until now. The component shipped in phase 2
   with these class names and the stylesheet had no rules for any of them, so
   every loading state rendered a few unstyled divs and the page simply sat
   blank. It looked like there was no loading feedback because, visibly, there
   was not.
   -------------------------------------------------------------------------- */

/* When a page passes pf-grid the grid rules already apply, so only the ungridded
   case needs a layout of its own. */
.pf-skeleton:not(.pf-grid) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Matches .pf-skin-card: a card surface, image on top, two lines under it. */
.pf-sk-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
}

/* MudSkeleton sizes itself by Height; an aspect ratio has to come from here so the
   tile keeps the card's proportions at every column width the grid produces. */
.pf-sk-card .pf-sk-art {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 0;
    margin: 0;
}

.pf-sk-card .pf-sk-inset { margin-left: 16px; }

/* Matches .pf-creator-card closely enough that the swap is not felt. */
.pf-sk-row {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-sk-rowtext {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf-sk-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
}

/* Profile header placeholder.

   Measured against the real thing rather than guessed: .pf-profile-banner is
   210px, .pf-profile-avatar is 132px square with a 30px radius pulled 78px up
   into the banner, and .pf-profile-head is a three-column grid with a 22px gap.
   A skeleton that announces a different layout and then hands over to this one
   causes exactly the jump it exists to prevent. */
.pf-sk-profile { display: block; }

.pf-sk-profile .pf-sk-banner {
    height: 210px;
    border-radius: 0;
    margin: 0;
}

.pf-sk-profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    align-items: flex-start;
    padding-top: 18px;
    margin-bottom: 28px;
}

.pf-sk-profile .pf-sk-profile-avatar {
    width: 132px;
    height: 132px;
    margin-top: -78px;
    border-radius: 30px;
    border: 4px solid var(--mud-palette-surface);
}

.pf-sk-profile-id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pf-sk-profile-stats {
    display: flex;
    gap: 26px;
    margin-top: 8px;
}

.pf-sk-profile .pf-sk-tabs {
    height: 48px;
    margin: 0;
}
/* The banner is full-bleed and everything under it sits in the page container, so the
   placeholder mirrors that: no padding on the strip, container padding on the rest. */
.pf-sk-profile-outer .pf-sk-profile-head,
.pf-sk-profile-outer .pf-sk-tabs {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Same breakpoint and the same numbers as the real header, not similar ones. It is
   767px there, the banner drops to 150px and the avatar to 104px with a -60px pull;
   a placeholder that shrinks at a different width, or to a different size, is just a
   more subtle version of the mismatch this shape exists to avoid. */
@media (max-width: 767px) {
    .pf-sk-profile-outer .pf-sk-profile-head,
    .pf-sk-profile-outer .pf-sk-tabs { padding-left: 16px; padding-right: 16px; }
    .pf-sk-profile .pf-sk-banner { height: 150px; }
    .pf-sk-profile .pf-sk-profile-avatar { width: 104px; height: 104px; margin-top: -60px; }
}

/* A stat button waiting on the server. Dimmed rather than swapped for a spinner:
   these are small buttons in a dense grid, and a spinner at that size reads as a
   glitch rather than as progress. The cursor carries the rest of the message. */
.pf-stat-btn.is-busy {
    opacity: .5;
    cursor: progress;
}

/* The admin entry in the account menu. Tinted so it does not read as one more
   ordinary destination - it is the only item there that most people will never
   see, and the one with the sharpest edges behind it. */
.pf-usermenu-admin { color: var(--mud-palette-primary); }
.pf-usermenu-admin .mud-icon-root { color: var(--mud-palette-primary); }

/* "Coming soon" on a settings section.

   The pages under Safety and Notifications were mock-ups: switches bound to fields
   that persisted nowhere and a Save button that only raised a snackbar. A control
   that quietly does nothing is worse than no control - somebody turns off "show my
   profile in search", believes it, and is wrong about who can see them. These say
   so instead. */
.pf-soon-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pf-soon-flag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border: 1px solid var(--mud-palette-divider);
}

/* --------------------------------------------------------------------------
   Opening the artwork full size
   -------------------------------------------------------------------------- */

.pf-shot-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}

.pf-shot-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.pf-shot-open:hover .pf-shot-zoom,
.pf-shot-open:focus-visible .pf-shot-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   The three colour pickers in the editor
   -------------------------------------------------------------------------- */

.pf-colorrow-three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.pf-palette-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border: 1px solid var(--mud-palette-divider);
}

.pf-palette-swatch {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    flex: 0 0 auto;
}

.pf-palette-caption {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}


/* --------------------------------------------------------------------------
   A design's colours, worn by the whole site

   Opening a pony lights the site in its colours - the app bar, the page, the
   cards, the accents - and leaving puts it back.

   Almost all of that happens without a rule here. SkinThemeScope writes over
   MudBlazor's own palette variables on the document root, so every Mud component
   picks the tint up on its own. Chasing the same effect with bespoke selectors
   does not work: the app bar refused an !important rule and an inline style
   alike, because Mud paints it from --mud-palette-appbar-background through
   selectors of its own. Overriding the variable wins that argument by not
   having it.

   The idea is coloured light rather than paint. Nothing is repainted in a
   creator's chosen colour; a wash is laid over surfaces that keep their own
   identity, so a pony tints the room without redecorating it. That is also what
   keeps it readable - at these strengths no combination of three colours can
   make text fail, because the text colour never changes.

   What is left below is the handful of places Mud has no variable for, and the
   transitions. Those live on elements that outlive navigation, which is the only
   kind that can actually fade.
   -------------------------------------------------------------------------- */

html {
    transition: background-color 520ms ease;
}

/* A wide, very soft pool of the mane colour behind the page. Sits on html
   because that is what paints the canvas here - body's own background does not
   render, so the same declaration there did nothing at all. */
html {
    background-image: var(--pf-skin-veil, none);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.pf-appbar {
    transition: background-color 520ms ease, border-bottom-color 520ms ease;
}

.pf-card,
.mud-paper {
    transition: background-color 520ms ease, border-color 520ms ease;
}

/* Accents, scoped to where a colour carries meaning rather than sprayed over
   every control - a themed Delete button would be worse than an untinted one. */
.pf-detail-title { color: var(--pf-skin-accent, inherit); transition: color 520ms ease; }
.pf-detail-stats strong { color: var(--pf-skin-accent-alt, var(--mud-palette-primary)); transition: color 520ms ease; }

.pf-detail-art {
    box-shadow: 0 0 0 1px var(--pf-skin-line, transparent),
                0 18px 48px -24px var(--pf-skin-glow, transparent);
    transition: box-shadow 520ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html, .pf-appbar, .pf-card, .mud-paper,
    .pf-detail-title, .pf-detail-stats strong, .pf-detail-art { transition: none; }
}
/* ---- Mature designs ------------------------------------------------------
   A cover, not a wall. The design stays exactly where it was and keeps its
   frame; what changes is that you cannot make it out until you have said you
   want to. That is the honest shape of the feature - these are public pages
   and the image files are reachable either way, so the job here is to keep a
   suggestive pony from appearing in front of somebody mid-scroll, not to
   pretend it is locked away.

   Blur plus scale, because a blur alone leaves a fringe of sharp pixels at the
   edges where there is nothing to sample from. Scaling past the frame pushes
   that fringe outside it. */
.pf-skin-art.is-covered .pf-shot,
.pf-detail-art.is-covered .pf-shot,
.pf-thumbs.is-covered img {
    filter: blur(22px) saturate(0.7);
    transform: scale(1.15);
}

.pf-thumbs.is-covered img { filter: blur(10px) saturate(0.7); }

.pf-thumbs.is-covered { pointer-events: none; }

/* The badge on a card. Small, legible against whatever is behind it, and
   deliberately not a button - the whole card is already the link. */
.pf-cover-mark {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(24, 18, 40, 0.72);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
}

.pf-cover-mark strong { font-weight: 700; }

.pf-cover-mark-hint {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .pf-cover-mark-hint { display: none; }
}

/* The panel on a detail page. Sits over the art, fills it, and carries the one
   action that changes anything. */
.pf-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(24, 18, 40, 0.55);
    color: #fff;
}

.pf-cover-icon {
    font-size: 2.25rem;
    opacity: 0.9;
}

.pf-cover-title { color: #fff; }

.pf-cover-body {
    max-width: 34ch;
    opacity: 0.9;
}

.pf-cover-action { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .pf-skin-art.is-covered .pf-shot,
    .pf-detail-art.is-covered .pf-shot,
    .pf-thumbs.is-covered img { transition: none; }
}

/* ---- Comments ------------------------------------------------------------
   A conversation, not a data table. The avatar column gives the eye something
   to run down, the replies indent off it, and everything else is quiet - the
   design above is what people came for, and a thread styled to compete with it
   would be the tail wagging the pony.

   Tinted by whatever design is being viewed, like the rest of the page: the
   panel reads --pf-skin-line and --pf-skin-accent where it can, and falls back
   to the site palette when no skin theme is applied. */
.pf-comments { margin-top: 2rem; }

.pf-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.pf-comment-compose-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* The counter sits left, the button right, without a spacer element. */
.pf-comment-compose-foot .mud-typography-caption { margin-right: auto; }

.pf-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.pf-comments-empty-icon {
    font-size: 2rem;
    opacity: 0.35;
}

.pf-comment-list,
.pf-reply-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-comment-list { margin-top: 1.25rem; }

.pf-comment + .pf-comment {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pf-skin-line, var(--mud-palette-divider));
}

.pf-comment-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    align-items: start;
}

.pf-comment-avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}

.pf-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-comment-main { min-width: 0; }

.pf-comment-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pf-comment-author {
    font-weight: 600;
    font-size: 0.9rem;
}

.pf-comment-when {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* Revealed on hover and on focus. Hover alone would put it out of reach of a
   keyboard, and it is the only way to remove your own comment. */
.pf-comment-delete {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0.15rem;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease;
}

.pf-comment-row:hover .pf-comment-delete,
.pf-comment-delete:focus-visible { opacity: 1; }

.pf-comment-delete:hover { color: var(--mud-palette-error); }

.pf-comment-delete.is-busy {
    opacity: 0.5;
    cursor: default;
}

/* Wrapping matters more here than anywhere else on the site: a comment can be
   one unbroken 900-character word if somebody wants it to be, and without this
   that comment sets the width of the whole page. */
.pf-comment-text {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Replies hang off the comment's avatar column, so the thread reads as one
   shape rather than two lists. */
.pf-reply-list {
    margin: 0.85rem 0 0 calc(36px + 0.75rem);
    padding-left: 0.9rem;
    border-left: 2px solid var(--pf-skin-line, var(--mud-palette-divider));
}

.pf-reply + .pf-reply { margin-top: 0.85rem; }

.pf-reply-open {
    margin: 0.6rem 0 0 calc(36px + 0.75rem);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.82rem;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
    cursor: pointer;
}

.pf-reply-open:hover { text-decoration: underline; }

.pf-reply-compose { margin: 0.75rem 0 0 calc(36px + 0.75rem); }

@media (max-width: 600px) {
    .pf-reply-list,
    .pf-reply-open,
    .pf-reply-compose { margin-left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-comment-delete { transition: none; }
}

/* ---- Development sign-in -------------------------------------------------
   Deliberately ugly. This is a password bypass, and it only ever appears on a
   development machine - the server does not register the route anywhere else,
   so in a deployed build none of this markup exists. The warning colour is the
   point: anybody who sees it should immediately wonder what it is doing there
   rather than mistaking it for a feature. */
.pf-devsignin {
    margin-top: 1.5rem;
    padding: 0.9rem;
    border: 1px dashed #c77700;
    border-radius: var(--pf-radius-md, 10px);
    background: rgba(199, 119, 0, 0.07);
}

.pf-devsignin-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #a86200;
    font-size: 0.85rem;
}

.pf-devsignin-note {
    display: block;
    margin: 0.3rem 0 0.7rem;
    opacity: 0.8;
}

.pf-devsignin-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pf-devsignin-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius-sm, 8px);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.pf-devsignin-account:hover:not(:disabled) { border-color: #c77700; }

.pf-devsignin-account:disabled {
    opacity: 0.55;
    cursor: default;
}

.pf-devsignin-who {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.pf-devsignin-handle {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.pf-devsignin-admin {
    flex: none;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #a86200;
    color: #fff;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Paging controls on a thread. Quiet - they are navigation, not the content. */
.pf-comments-more {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.pf-reply-more {
    margin: 0.6rem 0 0 calc(36px + 0.75rem);
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
    cursor: pointer;
}

.pf-reply-more:hover:not(:disabled) { text-decoration: underline; }
.pf-reply-more:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 600px) {
    .pf-reply-more { margin-left: 1rem; }
}