/* Promptopia — design tokens + base components.
   Dream palette: cool blues, lavenders, twilight tones. Soft surfaces,
   restrained accents, mobile-first. Themes: auto follows system; the
   top-bar toggle pins to data-theme="light" / "dark" via JS. */

:root {
    /* Color — light "open sky": pale-blue washes, soft cloud surfaces,
       cornflower/sky brand. */
    --pb-bg:           #f6fbff;
    --pb-surface:      #ffffff;
    --pb-surface-alt:  #dfeefb;
    --pb-border:       #aac6de;
    --pb-border-soft:  #cee0f1;
    --pb-text:         #1a2741;
    --pb-text-soft:    #46587a;
    --pb-text-muted:   #7d8ea8;
    /* Brand: clear sky blue. Drives buttons, focus rings, brand mark,
       active tabs, hover affordances. */
    --pb-brand:        #4f9fe8;
    --pb-brand-hover:  #6ab2f1;
    --pb-brand-active: #3d8ad0;
    --pb-brand-soft:   #dceeff;
    --pb-danger:       #d63a5e;
    --pb-success:      #2dabaa;
    --pb-warning:      #c08545;
    /* Type-edge accents painted on cards so the type reads at a glance. */
    --pb-type-image:   #c25fa5;
    --pb-type-video:   #5cb59c;
    --pb-type-text:    #7791d1;
    --pb-type-sound:   #c9904c;

    /* Typography */
    --pb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;

    /* Spacing scale (slightly tighter) */
    --pb-s-1: 4px;
    --pb-s-2: 8px;
    --pb-s-3: 12px;
    --pb-s-4: 16px;
    --pb-s-5: 20px;
    --pb-s-6: 28px;
    --pb-s-7: 40px;
    --pb-s-8: 56px;

    /* Radius */
    --pb-r-sm: 6px;
    --pb-r-md: 10px;
    --pb-r-lg: 14px;
    --pb-r-xl: 20px;
    --pb-r-pill: 999px;

    /* Shadow */
    --pb-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 0 1px rgba(0,0,0,.06);
    --pb-shadow-2: 0 6px 18px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
    --pb-shadow-3: 0 16px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);

    /* Motion */
    --pb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pb-fast: 150ms;
    --pb-med:  220ms;

    /* Layout */
    --pb-container: 1180px;
    --pb-topbar-h: 52px;

    /* Control sizes (uniform across inputs/selects/buttons) */
    --pb-control-h: 34px;
    --pb-control-h-sm: 28px;
    --pb-control-h-lg: 40px;
    --pb-control-px: 12px;

    /* Type scale */
    --pb-fs-12: 12px;
    --pb-fs-13: 13px;
    --pb-fs-14: 14px;
    --pb-fs-15: 15px;
    --pb-fs-h4: 15px;
    --pb-fs-h3: 17px;
    --pb-fs-h2: 20px;
    --pb-fs-h1: 26px;
}

/* Dark "midnight dream" palette. Two ways in:
   1) System prefers dark AND the user hasn't pinned to light — auto.
   2) The top-bar toggle pinned to dark via [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="focus"]) {
        --pb-bg:          #0a1631;
        --pb-surface:     #13284b;
        --pb-surface-alt: #1d3766;
        --pb-border:      #3a557e;
        --pb-border-soft: #1a2f56;
        --pb-text:        #e8f0ff;
        --pb-text-soft:   #bac6dd;
        --pb-text-muted:  #7a89a6;
        --pb-brand:       #7cc1ff;
        --pb-brand-hover: #94cfff;
        --pb-brand-active:#5ea7f0;
        --pb-brand-soft:  #1a3052;
        --pb-type-image:  #e588c0;
        --pb-type-video:  #6dd0b3;
        --pb-type-text:   #9bafe2;
        --pb-type-sound:  #e0a96b;
        --pb-shadow-1: 0 1px 2px rgba(0,0,0,.5);
        --pb-shadow-2: 0 8px 24px rgba(0,0,0,.5);
        --pb-shadow-3: 0 20px 48px rgba(0,0,0,.7);
    }
}
:root[data-theme="dark"] {
    --pb-bg:          #0c1028;
    --pb-surface:     #161a3a;
    --pb-surface-alt: #1d224a;
    --pb-border:      #2f3563;
    --pb-border-soft: #222848;
    --pb-text:        #eaecf8;
    --pb-text-soft:   #bcc1de;
    --pb-text-muted:  #878da8;
    --pb-brand:       #8a99ff;
    --pb-brand-hover: #9ca8ff;
    --pb-brand-active:#7180ee;
    --pb-brand-soft:  #1f2349;
    --pb-type-image:  #e88ee8;
    --pb-type-video:  #65d6c0;
    --pb-type-text:   #a6a0f0;
    --pb-type-sound:  #f0c089;
    --pb-shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --pb-shadow-2: 0 8px 24px rgba(0,0,0,.5);
    --pb-shadow-3: 0 20px 48px rgba(0,0,0,.7);
}

/* Focus / B&W mode: every chrome color collapses to grayscale so the
   only color on the page is the prompt detail's hero image. Brand
   stays as a mid-dark gray so buttons read as buttons. */
:root[data-theme="focus"] {
    --pb-bg:           #fafafa;
    --pb-surface:      #ffffff;
    --pb-surface-alt:  #f0f0f0;
    --pb-border:       #c0c0c0;
    --pb-border-soft:  #e0e0e0;
    --pb-text:         #1a1a1a;
    --pb-text-soft:    #4a4a4a;
    --pb-text-muted:   #888888;
    --pb-brand:        #2a2a2a;
    --pb-brand-hover:  #3a3a3a;
    --pb-brand-active: #1a1a1a;
    --pb-brand-soft:   #dcdcdc;
    --pb-danger:       #555555;
    --pb-success:      #555555;
    --pb-warning:      #555555;
    --pb-type-image:   #666666;
    --pb-type-video:   #666666;
    --pb-type-text:    #666666;
    --pb-type-sound:   #666666;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--pb-font);
    background: var(--pb-bg);
    color: var(--pb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--pb-fs-14);
    line-height: 1.5;
}

a { color: var(--pb-text); text-decoration: underline; text-decoration-color: var(--pb-border); text-underline-offset: 3px; transition: text-decoration-color var(--pb-fast); }
a:hover { text-decoration-color: var(--pb-brand); }
/* Buttons styled as links should look like buttons, not text. */
a.pb-btn, a.pb-chip, a.pb-side-item, a.pb-side-new, a.pb-cmdk-item, a.pb-card a, a.pb-link-card { text-decoration: none; }
.pb-card a, .pb-link-card { text-decoration: none; }

img, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--pb-border-soft); margin: var(--pb-s-5) 0; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--pb-s-3); letter-spacing: -0.012em; line-height: 1.2; font-weight: 600; }
h1 { font-size: var(--pb-fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--pb-fs-h2); }
h3 { font-size: var(--pb-fs-h3); }
h4 { font-size: var(--pb-fs-h4); }

p { margin: 0 0 var(--pb-s-3); }

.pb-container {
    max-width: var(--pb-container);
    margin: 0 auto;
    padding: 0 var(--pb-s-4);
}
@media (min-width: 720px) {
    .pb-container { padding: 0 var(--pb-s-5); }
}

/* ---------- Top bar ---------- */
.pb-top {
    position: sticky; top: 0; z-index: 50;
    height: var(--pb-topbar-h);
    background: rgba(246,251,255,.78);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--pb-border-soft);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-top { background: rgba(10,22,49,.78); }
}
[data-theme="dark"] .pb-top { background: rgba(10,22,49,.78); }
.pb-top-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--pb-s-4);
    height: 100%;
    /* Logo on the left, [search + New prompt] cluster centered, theme
       + user actions on the right. The logo mark's CENTER lines up
       with the sidebar's icon column center (~28 px from the viewport
       left edge regardless of expanded/collapsed). Logo mark is 35 px
       wide, so we sit it at padding-left ≈ (28 − 35/2) ≈ 11 px. */
    width: 100%;
    margin: 0;
    padding: 0 var(--pb-s-4) 0 11px;
}
.pb-top-center {
    display: flex; align-items: center; gap: var(--pb-s-2);
    justify-self: center;
}
.pb-logo {
    display: inline-flex; align-items: center; gap: 11px;
    font-weight: 600; font-size: 24px; letter-spacing: -0.01em;
    color: var(--pb-text); text-decoration: none;
    white-space: nowrap;
    justify-self: start;
}
.pb-logo:hover { text-decoration: none; }
.pb-logo .pb-logo-mark { flex: 0 0 auto; }
.pb-logo:hover .pb-logo-mark { transform: rotate(-4deg); transition: transform var(--pb-fast); }

/* ---------- Logo magic animation ----------
   Two layers of welcome-greeting:
   - Login page always plays the full sequence (entrance + sparkle burst).
   - Logged-in nav plays the burst once per browser session, gated by a
     sessionStorage flag (.is-greeting class added by JS in layout.php). */
.pb-logo-mark-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.pb-logo-mark-wrap-lg { display: block; }
.pb-spark {
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--pb-brand);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--pb-brand);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0) scale(0);
}
@keyframes pb-logo-rise {
    0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); filter: blur(8px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes pb-spark-fly {
    0%   { opacity: 0; transform: translate(0, 0) scale(0); }
    25%  { opacity: 1; transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.35)) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
/* Login: rise + sparkle burst, every visit. */
.pb-login-brand .pb-logo-mark { animation: pb-logo-rise 700ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.pb-login-brand .pb-spark     { animation: pb-spark-fly 1100ms ease-out 200ms forwards; }
/* Logged-in nav: sparkle burst only, JS-gated to once per session. */
.pb-logo.is-greeting .pb-spark { animation: pb-spark-fly 1000ms ease-out forwards; }
/* Stagger the particles so the burst feels organic, not all-at-once. */
.pb-spark:nth-child(2) { animation-delay: 60ms; }
.pb-spark:nth-child(3) { animation-delay: 120ms; }
.pb-spark:nth-child(4) { animation-delay: 180ms; }
.pb-spark:nth-child(5) { animation-delay: 240ms; }
.pb-spark:nth-child(6) { animation-delay: 300ms; }
.pb-login-brand .pb-spark:nth-child(2) { animation-delay: 260ms; }
.pb-login-brand .pb-spark:nth-child(3) { animation-delay: 320ms; }
.pb-login-brand .pb-spark:nth-child(4) { animation-delay: 380ms; }
.pb-login-brand .pb-spark:nth-child(5) { animation-delay: 440ms; }
.pb-login-brand .pb-spark:nth-child(6) { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
    .pb-login-brand .pb-logo-mark,
    .pb-login-brand .pb-spark,
    .pb-logo.is-greeting .pb-spark { animation: none; }
}
.pb-search { position: relative; width: 240px; }
.pb-search input {
    width: 100%;
    height: var(--pb-control-h);
    padding: 0 var(--pb-s-4) 0 32px;
    border: 1px solid var(--pb-border-soft);
    background: var(--pb-surface);
    color: var(--pb-text);
    border-radius: var(--pb-r-pill);
    font-family: inherit;
    font-size: var(--pb-fs-13);
    transition: width var(--pb-med) var(--pb-ease),
                background var(--pb-fast) var(--pb-ease),
                border-color var(--pb-fast) var(--pb-ease);
}
.pb-search input:hover { border-color: var(--pb-border); }
.pb-search input:focus {
    outline: none;
    border-color: var(--pb-brand);
    background: var(--pb-surface);
}
.pb-search:focus-within { width: 320px; }
.pb-search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--pb-text-muted);
    pointer-events: none;
}
.pb-search-icon svg { width: 14px; height: 14px; display: block; }
.pb-top-actions {
    display: flex; align-items: center; gap: var(--pb-s-2);
    justify-self: end;
}

/* + New prompt promoted from the sidebar to the top bar. Brand-filled
   pill, icon + label, no underline, contracts to icon-only on narrow
   viewports so the actions strip stays tidy. */
.pb-top-new {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--pb-control-h);
    padding: 0 14px;
    background: var(--pb-brand);
    color: #fff !important;
    border-radius: var(--pb-r-pill);
    font-size: var(--pb-fs-13); font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--pb-fast);
}
.pb-top-new:hover { background: var(--pb-brand-hover); }
.pb-top-new i { width: 14px; height: 14px; }
@media (max-width: 820px) {
    .pb-top-new { padding: 0; width: var(--pb-control-h); justify-content: center; }
    .pb-top-new span { display: none; }
}

/* ---------- @mention autocomplete (in comment form) ---------- */
.pb-mention-pop {
    position: absolute; left: 12px; bottom: calc(100% - var(--pb-s-2));
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    box-shadow: var(--pb-shadow-2);
    min-width: 180px; max-width: 280px;
    max-height: 220px; overflow-y: auto;
    z-index: 10;
}
.pb-mention-pop button {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; text-align: left;
    padding: 6px 10px;
    background: transparent; border: 0;
    color: var(--pb-text); font-family: inherit; font-size: var(--pb-fs-13);
    cursor: pointer;
}
.pb-mention-pop button:hover,
.pb-mention-pop button[aria-selected="true"] { background: var(--pb-surface-alt); }
.pb-mention-pop strong { font-weight: 500; }
.pb-mention-pop .pb-mention-name { color: var(--pb-text-muted); font-size: 11px; }

/* ---------- Notification bell ---------- */
.pb-bell { position: relative; }
.pb-bell-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--pb-control-h); height: var(--pb-control-h);
    background: transparent; border: 0; cursor: pointer;
    color: var(--pb-text-soft);
    border-radius: var(--pb-r-pill);
    transition: background var(--pb-fast), color var(--pb-fast);
    position: relative;
}
.pb-bell-btn:hover { background: var(--pb-surface-alt); color: var(--pb-text); }
.pb-bell-dot {
    position: absolute; top: 6px; right: 8px;
    min-width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--pb-brand);
    border: 2px solid var(--pb-surface);
}
.pb-bell-pop {
    position: absolute; right: 0; top: calc(100% + 6px);
    width: 360px; max-height: 480px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    box-shadow: var(--pb-shadow-3);
    flex-direction: column;
    overflow: hidden;
    z-index: 60;
}
.pb-bell-pop[hidden] { display: none !important; }
.pb-bell.open .pb-bell-pop { display: flex; }
.pb-bell-pop > header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pb-border-soft);
}
.pb-bell-mark {
    background: transparent; border: 0; cursor: pointer;
    color: var(--pb-text-muted); font-size: var(--pb-fs-12);
    font-family: inherit;
}
.pb-bell-mark:hover { color: var(--pb-text); }
.pb-bell-list {
    list-style: none; margin: 0; padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.pb-bell-list li {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pb-border-soft);
    display: flex; gap: 10px; align-items: flex-start;
    cursor: pointer;
    transition: background var(--pb-fast);
}
.pb-bell-list li:hover { background: var(--pb-surface-alt); }
.pb-bell-list li:last-child { border-bottom: 0; }
.pb-bell-list li.is-unread { background: var(--pb-brand-soft); }
.pb-bell-row-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pb-brand); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; flex: 0 0 auto;
}
.pb-bell-row-body { flex: 1; min-width: 0; font-size: var(--pb-fs-12); }
.pb-bell-row-headline { color: var(--pb-text); margin-bottom: 2px; }
.pb-bell-row-preview {
    color: var(--pb-text-muted);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pb-bell-row-time { color: var(--pb-text-muted); margin-top: 4px; font-size: 11px; }
.pb-bell-empty { padding: 22px 12px; text-align: center; color: var(--pb-text-muted); cursor: default; }
.pb-bell-empty:hover { background: transparent; }

/* Day/night theme toggle. Sits in .pb-top-actions left of the user
   menu. Both icons live in the DOM; CSS hides whichever doesn't
   match the active theme so the swap is instant on click. */
.pb-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--pb-control-h); height: var(--pb-control-h);
    background: transparent; border: 0; cursor: pointer;
    color: var(--pb-text-soft);
    border-radius: var(--pb-r-pill);
    transition: background var(--pb-fast), color var(--pb-fast);
}
.pb-theme-toggle:hover { background: var(--pb-surface-alt); color: var(--pb-text); }
.pb-theme-toggle .pb-theme-ico-dark,
.pb-theme-toggle .pb-theme-ico-focus { display: none; }
[data-theme="dark"] .pb-theme-toggle .pb-theme-ico-light { display: none; }
[data-theme="dark"] .pb-theme-toggle .pb-theme-ico-dark { display: inline-flex; }
[data-theme="focus"] .pb-theme-toggle .pb-theme-ico-light { display: none; }
[data-theme="focus"] .pb-theme-toggle .pb-theme-ico-focus { display: inline-flex; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-theme-toggle .pb-theme-ico-light { display: none; }
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-theme-toggle .pb-theme-ico-dark { display: inline-flex; }
}

/* Focus / B&W mode: chrome only. Images stay in their normal color
   (hero, home cards, body strip) — the user wanted the prompt's
   actual visuals untouched. */
[data-theme="focus"] .pb-top { background: rgba(250,250,250,.85); }
[data-theme="focus"] .pb-flash.info     { background: #ececec; color: #2a2a2a; }
[data-theme="focus"] .pb-flash.success  { background: #e2e2e2; color: #2a2a2a; }
[data-theme="focus"] .pb-flash.error    { background: #d8d8d8; color: #2a2a2a; }
[data-theme="focus"] .pb-flash.warning  { background: #e6e6e6; color: #2a2a2a; }
[data-theme="focus"] .pb-badge.public   { background: #d8d8d8; color: #2a2a2a; }
[data-theme="focus"] .pb-badge.shared   { background: #d8d8d8; color: #2a2a2a; }
[data-theme="focus"] .pb-badge.private  { background: #f0f0f0; color: #555555; }
[data-theme="focus"] .pb-badge.admin    { background: #d8d8d8; color: #2a2a2a; }
[data-theme="focus"] .pb-badge.active   { background: #d8d8d8; color: #2a2a2a; }
[data-theme="focus"] .pb-heart          { color: #555555; }
[data-theme="focus"] .pb-stars .pb-star.is-on,
[data-theme="focus"] .pb-stars .pb-star:hover  { color: #555555; }
[data-theme="focus"] .pb-stars .pb-star.is-mine { color: #333333; }
[data-theme="focus"] .pb-card-rating,
[data-theme="focus"] .pb-card-rating-count       { color: #555555 !important; }
[data-theme="focus"] .pb-btn-danger              { background: #555555; }
[data-theme="focus"] .pb-btn-danger:hover        { background: #444444; }
/* Spark particles drop their brand glow */
[data-theme="focus"] .pb-spark { background: #555; box-shadow: 0 0 6px #aaa; }

.pb-menu { position: relative; }
.pb-menu-button {
    display: inline-flex; align-items: center; gap: var(--pb-s-2);
    background: transparent; border: 0; cursor: pointer;
    color: var(--pb-text); font-family: inherit; font-size: var(--pb-fs-13);
    height: var(--pb-control-h);
    padding: 0 10px;
    border-radius: var(--pb-r-pill);
}
.pb-menu-button:hover { background: var(--pb-surface-alt); }
.pb-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pb-brand); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    flex-shrink: 0;
}
.pb-menu-pop {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    box-shadow: var(--pb-shadow-3);
    border-radius: var(--pb-r-md);
    min-width: 140px;
    padding: 4px;
    display: none;
}
.pb-menu.open .pb-menu-pop { display: block; }
.pb-menu-pop a, .pb-menu-pop button {
    display: block; width: 100%; text-align: left;
    padding: 7px 10px; border: 0; background: transparent;
    color: var(--pb-text); font-family: inherit; font-size: var(--pb-fs-13);
    border-radius: 6px; cursor: pointer; text-decoration: none;
}
.pb-menu-pop a:hover, .pb-menu-pop button:hover { background: var(--pb-surface-alt); }

@media (max-width: 720px) {
    .pb-top-inner { grid-template-columns: auto 1fr auto; gap: var(--pb-s-2); padding: 0 var(--pb-s-3); }
    .pb-menu-button > span:not(.pb-avatar) { display: none; }
}

/* ---------- Buttons ---------- */
.pb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--pb-control-h);
    padding: 0 16px;
    background: var(--pb-brand); color: #fff;
    border: 0; border-radius: var(--pb-r-pill);
    font-family: inherit; font-size: var(--pb-fs-13); font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pb-fast) var(--pb-ease), transform var(--pb-fast) var(--pb-ease);
}
.pb-btn:hover { background: var(--pb-brand-hover); text-decoration: none; }
.pb-btn:active { transform: scale(.98); }
.pb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pb-btn-secondary {
    background: var(--pb-surface-alt); color: var(--pb-text);
}
.pb-btn-secondary:hover { background: var(--pb-border-soft); }
.pb-btn-ghost {
    background: transparent; color: var(--pb-text);
    padding: 0 10px;
}
.pb-btn-ghost:hover { background: var(--pb-surface-alt); }
.pb-btn-ghost.is-active { background: var(--pb-surface-alt); color: var(--pb-text); }
.pb-btn-danger { background: var(--pb-danger); }
.pb-btn-danger:hover { background: #b62525; }
.pb-btn-sm { height: var(--pb-control-h-sm); padding: 0 12px; font-size: var(--pb-fs-12); }
.pb-btn-lg { height: var(--pb-control-h-lg); padding: 0 22px; font-size: var(--pb-fs-14); }

/* ---------- Inputs ---------- */
.pb-input, .pb-textarea, .pb-select {
    width: 100%;
    height: var(--pb-control-h);
    padding: 0 var(--pb-control-px);
    background: var(--pb-surface);
    color: var(--pb-text);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-r-md);
    font-family: inherit;
    font-size: var(--pb-fs-13);
    line-height: 1.4;
    transition: border-color var(--pb-fast), box-shadow var(--pb-fast);
}
.pb-textarea {
    height: auto; min-height: 88px;
    padding: 9px var(--pb-control-px);
    resize: vertical; line-height: 1.55;
}
.pb-input:focus, .pb-textarea:focus, .pb-select:focus {
    outline: none;
    border-color: var(--pb-brand);
    box-shadow: 0 0 0 3px rgba(232, 93, 44, .15);
}
.pb-input::placeholder, .pb-textarea::placeholder { color: var(--pb-text-muted); }
.pb-input:disabled, .pb-select:disabled { background: var(--pb-surface-alt); color: var(--pb-text-muted); cursor: not-allowed; }

.pb-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23515154'><path d='M6 7.4L0.6 2 2 0.6l4 4 4-4L11.4 2z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 10px 7px;
    cursor: pointer;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23bcc1de'><path d='M6 7.4L0.6 2 2 0.6l4 4 4-4L11.4 2z'/></svg>");
    }
}
[data-theme="dark"] .pb-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23bcc1de'><path d='M6 7.4L0.6 2 2 0.6l4 4 4-4L11.4 2z'/></svg>");
}

.pb-label {
    display: block; margin-bottom: 4px;
    font-size: var(--pb-fs-12); font-weight: 500; color: var(--pb-text-soft);
}
.pb-help { color: var(--pb-text-muted); font-size: var(--pb-fs-12); margin-top: 4px; }
.pb-error { color: var(--pb-danger); font-size: var(--pb-fs-13); margin-top: 4px; }

.pb-field { margin-bottom: var(--pb-s-4); }

/* Native checkboxes look more refined */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--pb-brand);
    cursor: pointer;
}

/* ---------- Card ---------- */
.pb-card {
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-lg);
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--pb-med) var(--pb-ease), border-color var(--pb-med) var(--pb-ease);
}
.pb-card:hover { box-shadow: var(--pb-shadow-2); border-color: var(--pb-border); }

/* Type accent on the left edge — colour signals image/video/text at a glance. */
.pb-card[data-type="image"] { border-left: 3px solid var(--pb-type-image); }
.pb-card[data-type="video"] { border-left: 3px solid var(--pb-type-video); }
.pb-card[data-type="text"]  { border-left: 3px solid var(--pb-type-text); }
.pb-card[data-type="sound"] { border-left: 3px solid var(--pb-type-sound); }

.pb-card a { color: inherit; text-decoration: none; display: block; }
.pb-card .pb-thumb {
    background: var(--pb-surface-alt) center/cover no-repeat;
    position: relative;
    overflow: hidden;
}
/* Image cards keep their natural aspect; video and unknowns fall back. */
.pb-card[data-type="image"] .pb-thumb { aspect-ratio: var(--pb-thumb-ratio, 4/3); }
.pb-card[data-type="video"] .pb-thumb { aspect-ratio: 16/10; }
.pb-card[data-type="text"]  .pb-thumb { aspect-ratio: 16/10; }
.pb-card[data-type="sound"] .pb-thumb { aspect-ratio: 16/10; }
.pb-card .pb-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--pb-text-muted); font-size: var(--pb-fs-12);
    aspect-ratio: 16/10;
}
.pb-card .pb-thumb-empty svg {
    width: 56px; height: 56px;
    stroke-width: 1.4;
    opacity: 0.7;
}
.pb-card[data-type="sound"] .pb-thumb-empty { color: var(--pb-type-sound); }
.pb-card[data-type="text"]  .pb-thumb-empty { color: var(--pb-type-text); }
.pb-card[data-type="video"] .pb-thumb-empty { color: var(--pb-type-video); }

/* Text-only card: no thumbnail, body excerpt is the hero. */
.pb-card-quote {
    padding: var(--pb-s-4) var(--pb-s-4) var(--pb-s-3);
    font-size: 15px; line-height: 1.55;
    color: var(--pb-text);
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
    border-bottom: 1px solid var(--pb-border-soft);
    font-family: ui-serif, Georgia, "Times New Roman", serif;
}
.pb-card-quote::before {
    content: '“';
    color: var(--pb-type-text);
    font-size: 28px; line-height: 0.8; vertical-align: -0.35em;
    margin-right: 4px;
    font-family: inherit;
}

.pb-card-body { padding: var(--pb-s-3) var(--pb-s-3) var(--pb-s-3) var(--pb-s-4); }
.pb-card-title {
    font-size: var(--pb-fs-14); font-weight: 600; line-height: 1.35;
    color: var(--pb-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.pb-card-meta {
    display: flex; align-items: center; gap: 6px;
    color: var(--pb-text-muted); font-size: var(--pb-fs-12);
    flex-wrap: wrap;
}
/* Tags wrap freely — JS masonry computes column distribution at
   layout time so a card growing to fit a second row of chips
   doesn't shift its neighbors mid-render. The earlier max-height:
   26px clamp clipped any tag past the first row. */
.pb-card-tags {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.pb-card-tags .pb-chip { font-size: 11px; padding: 2px 7px; }

/* ---------- Chips / pills ---------- */
.pb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: var(--pb-surface-alt);
    color: var(--pb-text-soft);
    border: 1px solid transparent;
    border-radius: var(--pb-r-pill);
    font-size: var(--pb-fs-12);
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--pb-fast), color var(--pb-fast);
    text-decoration: none;
    white-space: nowrap;
}
.pb-chip:hover { background: var(--pb-border-soft); text-decoration: none; }
.pb-chip.is-active { background: var(--pb-text); color: var(--pb-bg); }
.pb-chip-count { font-weight: 600; opacity: 0.9; }
button.pb-chip { border: 0; font-family: inherit; cursor: pointer; }

.pb-tag-row {
    display: flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
}
.pb-tag-row.pb-tag-row-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.pb-tag-row.pb-tag-row-scroll::-webkit-scrollbar { display: none; }
.pb-tag-row.pb-tag-row-scroll .pb-chip { flex: 0 0 auto; }

/* ---------- Sidebar shell ---------- */
.pb-shell { display: grid; grid-template-columns: var(--pb-side-w, 220px) 1fr; min-height: calc(100vh - var(--pb-topbar-h)); }
.pb-side {
    --pb-side-w: 220px;
    width: var(--pb-side-w);
    background: var(--pb-surface);
    border-right: 1px solid var(--pb-border-soft);
    padding: var(--pb-s-3) 10px;
    display: flex; flex-direction: column;
    gap: var(--pb-s-3);
    /* Sticky against the top bar so the nav follows the user no matter
       how tall the main content is. -webkit-sticky for older Safari. */
    position: -webkit-sticky;
    position: sticky;
    top: var(--pb-topbar-h);
    height: calc(100vh - var(--pb-topbar-h));
    overflow-y: auto;
    align-self: start;
}
.pb-side[data-collapsed="1"] { --pb-side-w: 56px; }
.pb-shell:has(.pb-side[data-collapsed="1"]) { grid-template-columns: 56px 1fr; }
.pb-side-new {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; height: 34px;
    padding: 0 14px;
    background: var(--pb-brand);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    font-size: var(--pb-fs-13); font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--pb-fast), transform var(--pb-fast);
}
.pb-side-new:hover { background: var(--pb-brand-hover); color: #fff !important; text-decoration: none !important; }
.pb-side-new:active { transform: scale(0.98); }
.pb-side-new i { flex: 0 0 auto; }

.pb-side-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--pb-text-muted);
    border-radius: 8px;
    align-self: flex-end;
    flex: 0 0 auto;
}
.pb-side-toggle:hover { background: var(--pb-surface-alt); color: var(--pb-text); }
.pb-side-spacer { flex: 1 1 auto; }
.pb-side-hr { margin: 0 -2px; border: 0; border-top: 1px solid var(--pb-border-soft); }

/* Collapsed sidebar: shrink everything to icon-only squares. */
.pb-side[data-collapsed="1"] .pb-side-new { padding: 0; width: 34px; }
.pb-side[data-collapsed="1"] .pb-side-new span { display: none; }
.pb-side[data-collapsed="1"] .pb-side-cmd { width: 34px; padding: 0; justify-content: center; }
.pb-side[data-collapsed="1"] .pb-side-cmd span,
.pb-side[data-collapsed="1"] .pb-side-cmd .pb-kbd { display: none; }
.pb-side[data-collapsed="1"] .pb-side-toggle { align-self: center; }
.pb-side-section {
    display: flex; flex-direction: column; gap: 1px;
    padding-bottom: var(--pb-s-3);
    border-bottom: 1px solid var(--pb-border-soft);
}
/* Every section gets a bottom divider — the last one separates the
   Admin/Settings/Links list from the collapse toggle below. */
.pb-side-label {
    font-size: 10px; font-weight: 600;
    color: var(--pb-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 8px 10px 4px;
}
.pb-side[data-collapsed="1"] .pb-side-label { display: none; }
.pb-side-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--pb-text-soft);
    font-size: var(--pb-fs-13);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--pb-fast), color var(--pb-fast);
}
.pb-side-item i { flex: 0 0 18px; }
.pb-side-item:hover { background: var(--pb-surface-alt); color: var(--pb-text); text-decoration: none; }
.pb-side-item.active {
    background: var(--pb-brand-soft);
    color: var(--pb-brand-active);
    font-weight: 500;
}
.pb-side-item.active i { color: var(--pb-brand); }
.pb-side[data-collapsed="1"] .pb-side-item span { display: none; }
.pb-side[data-collapsed="1"] .pb-side-item { justify-content: center; padding: 7px 0; }
.pb-side-cmd {
    display: flex; align-items: center; gap: 10px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--pb-border-soft);
    border-radius: 10px;
    background: var(--pb-surface);
    color: var(--pb-text-muted);
    font-size: var(--pb-fs-13);
    cursor: pointer;
    text-align: left;
    transition: background var(--pb-fast), border-color var(--pb-fast), color var(--pb-fast);
}
.pb-side-cmd:hover { background: var(--pb-surface-alt); border-color: var(--pb-border); color: var(--pb-text); }
.pb-side-cmd > i:first-child { flex: 0 0 14px; }
.pb-side-cmd > span { flex: 1; }
.pb-side-cmd .pb-kbd { margin-left: auto; }
.pb-kbd {
    margin-left: auto;
    font-family: var(--pb-font-mono); font-size: 10px;
    padding: 1px 5px; border-radius: 4px;
    background: var(--pb-surface-alt); color: var(--pb-text-muted);
    border: 1px solid var(--pb-border-soft);
}
.pb-main { min-width: 0; }
/* Inside the logged-in shell, the main column already lives between the
   sidebar and the viewport edge — no need to clamp .pb-container further.
   Pages that want a narrower reading column still wrap their content in
   .pb-form-medium or .pb-form-narrow. */
.pb-main .pb-container { max-width: none; padding: 0 var(--pb-s-5); }
@media (max-width: 800px) {
    .pb-shell { grid-template-columns: 1fr !important; }
    .pb-side { display: none; }
}

/* ---------- Grid ----------
   JS-driven masonry: home.php builds N column wrappers and distributes
   cards into them. We tried CSS `columns` but Safari mis-sized the first
   card of columns 2/3/4 whenever the grid moved vertically (e.g. the
   Quick filters panel toggling above), clipping content under the card's
   `overflow: hidden`. JS columns are deterministic and immune. */
.pb-grid {
    display: flex;
    gap: var(--pb-s-4);
    margin: var(--pb-s-4) 0;
    align-items: flex-start;
}
.pb-grid-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pb-s-4);
}
.pb-grid-col > .pb-card { width: 100%; display: block; }

/* ---------- Forms layout ---------- */
.pb-form-narrow { max-width: 420px; margin: 0 auto; }
.pb-form-medium { max-width: 720px; }
.pb-form-wide   { max-width: 980px; }

/* ---------- Login centered ---------- */
.pb-login-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--pb-s-4);
    margin: 0;
    background: var(--pb-bg);
}
.pb-login-stack {
    display: flex; flex-direction: column; align-items: center; gap: 28px;
    width: 100%; max-width: 300px;
}
.pb-login-card {
    width: 100%;
    background: var(--pb-surface);
    padding: 22px 22px 24px;
    border-radius: 14px;
    box-shadow: var(--pb-shadow-2);
    border: 1px solid var(--pb-border-soft);
}
.pb-login-brand {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pb-login-brand .pb-logo-mark { display: block; }
.pb-login-name {
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--pb-text);
    margin: 0;
}
.pb-login-tagline {
    margin: -6px 0 0;
    font-size: var(--pb-fs-13);
    color: var(--pb-text-muted);
    text-align: center;
    line-height: 1.4;
}
.pb-login-form { display: flex; flex-direction: column; gap: 8px; }
.pb-login-form .pb-input { width: 100%; text-align: center; }
.pb-login-form .pb-input::placeholder { text-align: center; }
.pb-login-form .pb-btn  { width: 100%; margin-top: 4px; justify-content: center; }
.pb-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pb-login-body {
    /* Stack card + footer vertically; centred horizontally, vertically
       balanced so the card sits a bit above optical centre. */
    flex-direction: column;
    justify-content: center;
}
.pb-login-footer {
    position: fixed; bottom: var(--pb-s-4); left: 0; right: 0;
    text-align: center;
    color: var(--pb-text-muted);
    font-size: var(--pb-fs-12);
}
.pb-login-footer a { color: var(--pb-text-soft); }
.pb-login-footer .pb-heart { color: #d6336c; }

/* ---------- Flash banner ---------- */
.pb-flash {
    margin: var(--pb-s-3) 0;
    padding: 9px 14px;
    border-radius: var(--pb-r-md);
    font-size: var(--pb-fs-13);
}
.pb-flash.info     { background: #eef2ff; color: #1f3a8a; }
.pb-flash.success  { background: #ecfdf5; color: #065f46; }
.pb-flash.error    { background: #fef2f2; color: #991b1b; }
.pb-flash.warning  { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-flash.info    { background: #1c2353; color: #c7d2fe; }
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-flash.success { background: #0f2f3a; color: #a7e8e0; }
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-flash.error   { background: #2e1626; color: #f7c1cc; }
    :root:not([data-theme="light"]):not([data-theme="focus"]) .pb-flash.warning { background: #2a1f08; color: #fde68a; }
}
[data-theme="dark"] .pb-flash.info    { background: #1c2353; color: #c7d2fe; }
[data-theme="dark"] .pb-flash.success { background: #0f2f3a; color: #a7e8e0; }
[data-theme="dark"] .pb-flash.error   { background: #2e1626; color: #f7c1cc; }
[data-theme="dark"] .pb-flash.warning { background: #2a1f08; color: #fde68a; }

/* ---------- Detail / share / markdown body ---------- */
.pb-md {
    font-size: var(--pb-fs-15); line-height: 1.6; color: var(--pb-text);
}
.pb-md h1 { font-size: 22px; margin-top: var(--pb-s-5); }
.pb-md h2 { font-size: 19px; margin-top: var(--pb-s-5); }
.pb-md h3 { font-size: 17px; margin-top: var(--pb-s-4); }
.pb-md p { margin: 0 0 var(--pb-s-3); }
.pb-md ul, .pb-md ol { padding-left: 1.4em; margin: 0 0 var(--pb-s-3); }
.pb-md li { margin-bottom: 4px; }
.pb-md code {
    font-family: var(--pb-font-mono); font-size: 0.9em;
    padding: 1px 5px;
    background: var(--pb-surface-alt);
    border-radius: 4px;
}
.pb-md pre {
    background: var(--pb-surface-alt);
    padding: var(--pb-s-3);
    border-radius: var(--pb-r-md);
    overflow-x: auto;
    margin: 0 0 var(--pb-s-3);
}
.pb-md pre code { background: transparent; padding: 0; }

/* Code block copy button — wraps each .pb-md pre via JS so the button
   sits outside the <pre> (select-all in code block doesn't grab it). */
.pb-codeblock { position: relative; margin: 0 0 var(--pb-s-3); }
.pb-codeblock pre { margin: 0; }
.pb-codecopy {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--pb-control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-sm);
    background: var(--pb-surface);
    color: var(--pb-text-soft);
    font: 500 var(--pb-fs-12)/1 var(--pb-font);
    cursor: pointer;
    user-select: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--pb-fast) var(--pb-ease),
                transform var(--pb-fast) var(--pb-ease),
                border-color var(--pb-fast) var(--pb-ease),
                color var(--pb-fast) var(--pb-ease);
}
.pb-codeblock:hover .pb-codecopy,
.pb-codeblock:focus-within .pb-codecopy,
.pb-codecopy:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.pb-codecopy:hover { border-color: var(--pb-border); color: var(--pb-text); }
.pb-codecopy.is-copied {
    opacity: 1;
    transform: translateY(0);
    color: var(--pb-success);
    border-color: var(--pb-success);
}
@media (hover: none) {
    /* Touch devices have no hover, so keep the button visible. */
    .pb-codecopy { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pb-codecopy { transition: none; }
}
.pb-md blockquote {
    border-left: 3px solid var(--pb-border);
    padding: 4px var(--pb-s-3);
    color: var(--pb-text-soft);
    margin: 0 0 var(--pb-s-3);
}
.pb-md img, .pb-md video {
    border-radius: var(--pb-r-md);
    box-shadow: var(--pb-shadow-1);
    margin: var(--pb-s-3) 0;
}

/* Inside the prompt detail body, the first image has already been
   hoisted to the media block (full-size hero). Any image left in the
   body is a secondary one — pin it to 180px and let consecutive
   image-only paragraphs flow inline so a strip of references reads
   side-by-side instead of as a tall column. */
.pb-prompt-body .pb-md img {
    width: 30%;
    height: auto;
    margin: 0;
}
/* Consecutive image-only paragraphs go in this flex strip. Each
   paragraph stretches to full column width and wraps to its own row,
   so a series of secondary images reads as a vertical stack inside
   the body column. */
.pb-md-img-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--pb-s-3) 0;
}
.pb-md-img-row > p {
    margin: 0;
    flex: 0 1 100%;
    min-width: 0;
}
.pb-md-img-row > p img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
}
.pb-md iframe {
    width: 100%; aspect-ratio: 16/9; height: auto;
    border: 0; border-radius: var(--pb-r-md);
    margin: var(--pb-s-3) 0;
}

/* ---------- Tables (admin lists) ---------- */
.pb-table-wrap {
    overflow-x: auto;
    border-radius: var(--pb-r-md);
    border: 1px solid var(--pb-border-soft);
    background: var(--pb-surface);
}
.pb-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pb-surface);
    font-size: var(--pb-fs-13);
}
.pb-table th, .pb-table td {
    padding: 9px var(--pb-s-3);
    text-align: left;
    border-bottom: 1px solid var(--pb-border-soft);
    vertical-align: middle;
}
.pb-table th {
    background: var(--pb-surface-alt);
    color: var(--pb-text-soft);
    font-weight: 500;
    font-size: var(--pb-fs-12);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pb-table tr:last-child td { border-bottom: 0; }
.pb-table tr:hover td { background: var(--pb-surface-alt); }
.pb-table .pb-mono { font-size: var(--pb-fs-12); }

.pb-badge {
    display: inline-block; padding: 1px 7px;
    border-radius: var(--pb-r-pill);
    font-size: 11px; font-weight: 500;
    background: var(--pb-surface-alt); color: var(--pb-text-soft);
    line-height: 1.6;
}
.pb-badge.admin    { background: #fef3c7; color: #92400e; }
.pb-badge.disabled { background: var(--pb-surface-alt); color: var(--pb-text-muted); }
.pb-badge.public   { background: #dbeafe; color: #1e40af; }
.pb-badge.shared   { background: #e0e7ff; color: #3730a3; }
.pb-badge.private  { background: var(--pb-surface-alt); color: var(--pb-text-muted); }
.pb-badge.active   { background: #ecfdf5; color: #065f46; }
.pb-badge.pb-type-image { background: rgba(225, 29, 116, 0.10); color: var(--pb-type-image); }
.pb-badge.pb-type-video { background: rgba(20, 160, 88, 0.10);  color: var(--pb-type-video); }
.pb-badge.pb-type-text  { background: rgba(107, 70, 193, 0.10); color: var(--pb-type-text); }
.pb-badge.pb-type-sound { background: rgba(201, 144, 76, 0.12); color: var(--pb-type-sound); }

/* ---------- Admin tabs (horizontal) ---------- */
.pb-admin-tabs {
    display: flex;
    gap: 2px;
    margin: var(--pb-s-4) 0 var(--pb-s-4);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--pb-border-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.pb-admin-tabs::-webkit-scrollbar { display: none; }
.pb-admin-tabs a {
    flex: 0 0 auto;
    padding: 8px 14px;
    color: var(--pb-text-soft);
    font-size: var(--pb-fs-13);
    text-decoration: none;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--pb-fast), border-color var(--pb-fast), background var(--pb-fast);
}
.pb-admin-tabs a:hover { background: var(--pb-surface-alt); text-decoration: none; }
.pb-admin-tabs a.active {
    color: var(--pb-text);
    border-bottom-color: var(--pb-text);
    font-weight: 500;
}
.pb-admin-section { /* nothing — placeholder if we ever need to scope styles */ }

/* ---------- Hero (page title) ---------- */
.pb-hero {
    padding: var(--pb-s-5) 0 var(--pb-s-3);
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: var(--pb-s-3);
}
.pb-hero h1 { margin: 0; }
.pb-hero p { color: var(--pb-text-muted); margin: 4px 0 0; font-size: var(--pb-fs-13); }

/* ---------- Empty state ---------- */
.pb-empty {
    text-align: center;
    padding: var(--pb-s-8) var(--pb-s-4);
    color: var(--pb-text-muted);
}
.pb-empty h3 { color: var(--pb-text); margin-bottom: var(--pb-s-3); }

/* ---------- Type + Visibility pickers ----------
   Compact horizontal-icon-then-label buttons. Icon on the left,
   short label on the right; height stays under the input control
   so the right meta column reads dense. */
.pb-type-picker, .pb-vis-picker {
    display: flex; gap: 4px;
}
.pb-type-btn, .pb-vis-btn {
    flex: 1;
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: 8px;
    color: var(--pb-text-muted);
    font-size: 11px; font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--pb-fast), border-color var(--pb-fast), color var(--pb-fast);
}
.pb-type-btn:hover, .pb-vis-btn:hover { background: var(--pb-surface-alt); color: var(--pb-text); }
.pb-type-btn i, .pb-vis-btn i { width: 14px; height: 14px; flex: 0 0 auto; }

/* Type-specific accent on press. */
.pb-type-btn[aria-pressed="true"] {
    background: var(--pb-surface);
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}
.pb-type-btn[data-type="image"][aria-pressed="true"] { color: var(--pb-type-image); background: rgba(225, 29, 116, 0.08); }
.pb-type-btn[data-type="video"][aria-pressed="true"] { color: var(--pb-type-video); background: rgba(20, 160, 88, 0.08); }
.pb-type-btn[data-type="text"][aria-pressed="true"]  { color: var(--pb-type-text);  background: rgba(107, 70, 193, 0.08); }
.pb-type-btn[data-type="sound"][aria-pressed="true"] { color: var(--pb-type-sound); background: rgba(201, 144, 76, 0.10); }

/* Brand-tinted press for the visibility picker. */
.pb-vis-btn[aria-pressed="true"] {
    color: var(--pb-brand);
    background: var(--pb-brand-soft);
    border-color: var(--pb-brand);
    box-shadow: inset 0 0 0 1px var(--pb-brand);
}

/* ---------- Inline owner menu (admin reassigns prompt ownership) ---------- */
.pb-owner-menu { position: relative; display: inline-flex; }
.pb-owner-trigger:hover { color: var(--pb-text); }
.pb-owner-pop {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    box-shadow: var(--pb-shadow-2);
    padding: 8px;
    width: 240px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 6px;
}
.pb-owner-pop[hidden] { display: none !important; }
.pb-owner-pop input {
    width: 100%;
    height: var(--pb-control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    background: var(--pb-surface);
    color: var(--pb-text);
    font-family: inherit; font-size: var(--pb-fs-13);
}
.pb-owner-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 220px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.pb-owner-list li {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--pb-text);
    font-size: var(--pb-fs-13);
    display: flex; align-items: center; gap: 8px;
}
.pb-owner-list li:hover,
.pb-owner-list li.is-active { background: var(--pb-surface-alt); }
.pb-owner-list li .pb-owner-name { flex: 1; min-width: 0; }
.pb-owner-list li .pb-owner-uname { font-size: 11px; color: var(--pb-text-muted); }
.pb-owner-empty { padding: 14px 8px; text-align: center; color: var(--pb-text-muted); font-size: var(--pb-fs-12); cursor: default; }

/* ---------- Inline visibility menu (badge → mini popover) ---------- */
.pb-vis-menu { position: relative; display: inline-flex; }
.pb-vis-trigger {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex; align-items: center;
}
.pb-vis-pop {
    position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    box-shadow: var(--pb-shadow-2);
    padding: 4px;
    min-width: 160px;
    z-index: 30;
    display: flex; flex-direction: column; gap: 1px;
}
.pb-vis-pop[hidden] { display: none !important; }
.pb-vis-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent; border: 0;
    color: var(--pb-text);
    font-family: inherit; font-size: var(--pb-fs-13);
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
}
.pb-vis-opt:hover { background: var(--pb-surface-alt); }
.pb-vis-opt i { width: 14px; height: 14px; flex: 0 0 auto; color: var(--pb-text-muted); }
.pb-vis-opt[aria-pressed="true"] {
    color: var(--pb-brand);
    background: var(--pb-brand-soft);
}
.pb-vis-opt[aria-pressed="true"] i { color: var(--pb-brand); }

/* ---------- Prompt detail nav (← All / Prev | Random | Next) ---------- */
.pb-prompt-nav {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    font-size: var(--pb-fs-12);
    color: var(--pb-text-muted);
}
.pb-prompt-nav-spacer { flex: 1 1 auto; }
.pb-prompt-nav-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--pb-text-muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color var(--pb-fast), background var(--pb-fast);
}
.pb-prompt-nav-link:hover { color: var(--pb-text); background: var(--pb-surface-alt); text-decoration: none; }
.pb-prompt-nav-link i { width: 14px; height: 14px; }
.pb-prompt-nav-link.is-disabled { opacity: 0.4; cursor: not-allowed; }
.pb-prompt-nav-divider { color: var(--pb-border); }

/* ---------- Prompt detail shell ----------
   White surface card the whole prompt detail page lives inside, so
   the sky-tinted page bg shows around the edges. */
.pb-prompt-shell {
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-lg);
    padding: var(--pb-s-5);
    box-shadow: var(--pb-shadow-1);
}
@media (max-width: 760px) {
    .pb-prompt-shell { padding: var(--pb-s-4); border-radius: var(--pb-r-md); }
}

/* ---------- Prompt split-view (media | body) ----------
   Toggled by JS adding .is-split. The detail page itself fills the
   container width, so split-mode just becomes "two equal columns of
   the available space". */
.pb-prompt-content.is-split {
    display: grid;
    /* left | handle | right. The left fraction is driven by JS via
       --pb-split-left so the user can drag the divider; right always
       takes whatever is left. */
    grid-template-columns: var(--pb-split-left, 60%) 14px minmax(0, 1fr);
    gap: 0;
    align-items: start;
}
.pb-prompt-content.is-split .pb-prompt-media,
.pb-prompt-content.is-split .pb-prompt-body { margin-top: 0; min-width: 0; }
.pb-prompt-content.is-split .pb-prompt-body { padding-left: var(--pb-s-4); }
.pb-prompt-content.is-split .pb-prompt-media { padding-right: var(--pb-s-4); }

.pb-prompt-split-handle { display: none; }
.pb-prompt-content.is-split .pb-prompt-split-handle {
    display: block;
    position: relative;
    width: 14px;
    cursor: col-resize;
    background: transparent;
    transition: background var(--pb-fast);
    /* Stretch to row height so the user has a tall hit area, not just
       the height of the centered icon. */
    align-self: stretch;
}
.pb-prompt-content.is-split .pb-prompt-split-handle:hover { background: var(--pb-surface-alt); }
/* Grip icon (Lucide grip-vertical). JS positions its `top` to the
   vertical midpoint of the left media so it stays glued to the
   resize affordance even when the right column is much taller.
   pointer-events:auto so the icon is itself a draggable target —
   the pointerdown handler on the handle picks up the bubbled event. */
.pb-split-grip-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px; height: 26px;
    color: var(--pb-text-muted);
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: col-resize;
    box-shadow: var(--pb-shadow-1);
    transition: color var(--pb-fast), background var(--pb-fast), border-color var(--pb-fast), box-shadow var(--pb-fast);
}
.pb-split-grip-icon svg { width: 18px; height: 18px; pointer-events: none; }
.pb-prompt-split-handle:hover .pb-split-grip-icon,
.pb-prompt-split-handle.is-dragging .pb-split-grip-icon {
    color: var(--pb-brand);
    border-color: var(--pb-brand);
    box-shadow: var(--pb-shadow-2);
}
@media (max-width: 760px) {
    .pb-prompt-content.is-split { grid-template-columns: 1fr; }
    .pb-prompt-content.is-split .pb-prompt-split-handle { display: none; }
    .pb-prompt-content.is-split .pb-prompt-media,
    .pb-prompt-content.is-split .pb-prompt-body { padding: 0; }
}

/* TR / EN translate buttons keep the ghost-button affordance, but at
   rest match the muted date stamp color sitting next to them. Hover
   restores the regular ghost colors so it reads as interactive. */
.pb-btn.pb-translate-tone { color: var(--pb-text-muted); }
.pb-btn.pb-translate-tone:hover { color: var(--pb-text); }

/* ---------- Stars / ratings ---------- */
.pb-rating-row {
    display: flex; align-items: center; gap: var(--pb-s-3); flex-wrap: wrap;
    padding: 8px 0;
}
.pb-stars {
    display: inline-flex; gap: 2px;
}
.pb-stars .pb-star {
    background: transparent; border: 0; padding: 2px; margin: 0;
    cursor: pointer; line-height: 0;
    color: var(--pb-border);
    transition: color var(--pb-fast);
}
.pb-stars .pb-star svg { fill: currentColor; display: block; }
.pb-stars .pb-star.is-on,
.pb-stars .pb-star:hover { color: #f5a623; }
.pb-stars .pb-star.is-mine { color: #e0911e; }
.pb-stars .pb-star:focus-visible { outline: 2px solid var(--pb-brand); outline-offset: 2px; border-radius: 4px; }
.pb-stars-sm .pb-star { padding: 1px; }

/* ---------- Comments ---------- */
.pb-comment { transition: background var(--pb-fast); }
.pb-comment:hover { background: var(--pb-surface-alt); }
.pb-comment .pb-comment-body { color: var(--pb-text); }

/* ---------- Card rating badge ---------- */
.pb-card-rating {
    display: inline-flex; align-items: center; gap: 2px;
    color: #e0911e; font-weight: 600;
    font-size: var(--pb-fs-12);
}
.pb-card-rating .pb-card-rating-count {
    color: var(--pb-text-muted); font-weight: 400;
    margin-left: 2px;
}

/* ---------- Command palette ⌘K ---------- */
.pb-cmdk {
    position: fixed; inset: 0; z-index: 200;
    display: flex; justify-content: center; align-items: flex-start;
    padding-top: 12vh;
    pointer-events: auto;
}
.pb-cmdk[hidden] { display: none; }
.pb-cmdk-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pb-cmdk-panel {
    position: relative;
    width: min(560px, calc(100% - 32px));
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.10);
    overflow: hidden;
}
.pb-cmdk-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pb-border-soft);
}
.pb-cmdk-input-wrap > i { color: var(--pb-text-muted); }
.pb-cmdk-input-wrap input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: var(--pb-text); font-family: inherit; font-size: 16px;
}
.pb-cmdk-list {
    max-height: 380px; overflow: auto;
    padding: 6px;
}
.pb-cmdk-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--pb-text);
    text-decoration: none;
    font-size: var(--pb-fs-13);
}
.pb-cmdk-item:hover, .pb-cmdk-item.is-selected {
    background: var(--pb-surface-alt);
    text-decoration: none;
}
.pb-cmdk-item.is-selected { background: var(--pb-brand-soft); }
.pb-cmdk-icon {
    width: 26px; height: 26px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pb-surface-alt); border-radius: 6px;
    color: var(--pb-text-soft);
}
.pb-cmdk-thumb {
    width: 26px; height: 26px; flex: 0 0 auto;
    background: var(--pb-surface-alt) center/cover no-repeat;
    border-radius: 6px;
}
.pb-cmdk-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-cmdk-hint {
    font-size: var(--pb-fs-12); color: var(--pb-text-muted);
    text-transform: capitalize;
}
.pb-cmdk-empty { padding: 16px; color: var(--pb-text-muted); font-size: var(--pb-fs-13); text-align: center; }
.pb-cmdk-foot {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--pb-border-soft);
    font-size: var(--pb-fs-12);
}

/* ---------- Footer ---------- */
.pb-footer {
    margin-top: 0;
    padding: var(--pb-s-4) var(--pb-s-4) calc(var(--pb-s-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pb-border-soft);
    color: var(--pb-text-muted);
    font-size: var(--pb-fs-12);
    text-align: center;
}
.pb-footer .pb-footer-links { margin-bottom: 50px; }
.pb-footer a { color: var(--pb-text-soft); }
.pb-footer a:hover { color: var(--pb-text); text-decoration: none; }
.pb-footer .pb-heart { color: #d6336c; }

/* ---------- Misc ---------- */
.pb-row { display: flex; gap: var(--pb-s-3); flex-wrap: wrap; }
.pb-row > * { flex: 1; min-width: 0; }
.pb-stack > * + * { margin-top: var(--pb-s-3); }
.pb-spacer { height: var(--pb-s-5); }
.pb-text-soft { color: var(--pb-text-soft); }
.pb-text-muted { color: var(--pb-text-muted); }
.pb-mono { font-family: var(--pb-font-mono); font-size: 0.92em; }
.pb-right { text-align: right; }
.pb-flex { display: flex; align-items: center; gap: var(--pb-s-2); }
.pb-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-s-2); }
.pb-hidden { display: none !important; }

/* Toolbar / select-row pattern: filters + sort + scope etc. */
.pb-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--pb-s-2);
    align-items: center;
}
.pb-toolbar .pb-select { width: auto; min-width: 130px; }

@media (max-width: 600px) {
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    .pb-hero { padding: var(--pb-s-4) 0 var(--pb-s-3); }
    .pb-card-body { padding: 10px; }
    .pb-card-title { font-size: var(--pb-fs-13); }
    .pb-form-medium, .pb-form-wide { max-width: 100%; }
    .pb-row { gap: var(--pb-s-2); }
}

/* ---------- Timeline view (horizontal drag-scroll) ---------- */
.pb-tl-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-sm);
}
.pb-tl-toggle-btn {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: var(--pb-fs-12);
    font-weight: 500;
    color: var(--pb-text-soft);
    text-decoration: none;
    line-height: 1.4;
    transition: background var(--pb-fast) var(--pb-ease),
                color var(--pb-fast) var(--pb-ease);
}
.pb-tl-toggle-btn:hover { color: var(--pb-text); }
.pb-tl-toggle-btn.is-active {
    background: var(--pb-brand-soft);
    color: var(--pb-brand-active);
}

.pb-tl-frame { margin-top: var(--pb-s-3); }
.pb-tl-strip {
    display: flex;
    gap: var(--pb-s-3);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--pb-s-2) 4px var(--pb-s-4);
    cursor: grab;
    user-select: none;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    outline: none;
}
.pb-tl-strip:focus-visible {
    box-shadow: 0 0 0 2px var(--pb-brand-soft) inset;
    border-radius: var(--pb-r-md);
}
.pb-tl-strip.is-grabbing { cursor: grabbing; }
.pb-tl-strip::-webkit-scrollbar { height: 8px; }
.pb-tl-strip::-webkit-scrollbar-track { background: transparent; }
.pb-tl-strip::-webkit-scrollbar-thumb {
    background: var(--pb-border-soft);
    border-radius: 4px;
}
.pb-tl-strip::-webkit-scrollbar-thumb:hover { background: var(--pb-border); }

.pb-tl-card {
    flex: 0 0 auto;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border-soft);
    border-radius: var(--pb-r-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--pb-shadow-1);
    scroll-snap-align: start;
    transition: box-shadow var(--pb-fast) var(--pb-ease),
                transform var(--pb-fast) var(--pb-ease),
                border-color var(--pb-fast) var(--pb-ease);
}
.pb-tl-card:hover {
    box-shadow: var(--pb-shadow-2);
    border-color: var(--pb-border);
    transform: translateY(-2px);
}
.pb-tl-card:focus-visible {
    outline: 2px solid var(--pb-brand);
    outline-offset: 2px;
}
.pb-tl-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 390px;
    background-color: var(--pb-surface-alt);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Placeholder when a video has no manual thumbnail. */
.pb-tl-thumb-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pb-text-muted);
}
.pb-tl-thumb-empty svg {
    width: 56px;
    height: 56px;
    stroke-width: 1.4;
    opacity: 0.7;
}
/* Tiny corner badge — video / sound cards stand out from image cards
   even when a manual thumbnail is set, since the thumb itself can't
   tell you the kind. */
.pb-tl-card[data-kind="video"] .pb-tl-thumb::after,
.pb-tl-card[data-kind="sound"] .pb-tl-thumb::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.pb-tl-card[data-kind="video"] .pb-tl-thumb::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>");
    background-size: 12px;
}
.pb-tl-card[data-kind="sound"] .pb-tl-thumb::after {
    /* Lucide audio-lines, recolored to white. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 10v3'/><path d='M6 6v11'/><path d='M10 3v18'/><path d='M14 8v7'/><path d='M18 5v13'/><path d='M22 10v3'/></svg>");
}
.pb-tl-title {
    padding: var(--pb-s-2) var(--pb-s-3) var(--pb-s-3);
    font-size: var(--pb-fs-13);
    font-weight: 500;
    color: var(--pb-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.pb-tl-end { flex: 0 0 1px; }

@media (prefers-reduced-motion: reduce) {
    .pb-tl-card { transition: none; }
    .pb-tl-card:hover { transform: none; }
}