/*
 * Combined & Refined Styles
 * Theme: Midnight cyberpunk — near-black neutral surfaces, one restrained accent
 * (hot pink) used sparingly. Surfaces are ~90% desaturated near-black; color is
 * reserved for accents, never big fills.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Chakra+Petch:wght@500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');

/* --- Design tokens ---
 * A single source of truth for palette, radius and spacing. Refactor below to
 * use only these. The accent is ONE hue (cyberpunk hot pink) used in tints and
 * shades; surfaces stay neutral with a faint cool cast to keep the vibe.
 */
:root {
    /* surfaces — near-black with a faint cool/purple cast. Kept very close to
       the body bg so the container reads as the same depth as the top bar
       (no lighter rectangle floating above the page). --surface-2 lifts only
       a few steps for cards/inputs. */
    --bg:            #06050a;
    --bg-grad:       linear-gradient(135deg, #040305 0%, #08060d 100%);
    --surface:       #0a0710;
    --surface-2:     #110b1a;
    --border:        rgba(255, 255, 255, 0.07);
    --border-accent: rgba(255, 42, 109, 0.24);
    /* text */
    --text:        #f2eef6;   /* solid near-white for headings + key text */
    --text-dim:    #c8b3d4;   /* muted purple-grey body text */
    --text-mute:   #8a7d99;   /* labels, subtitles, tertiary */
    /* accent — single hue with tints/shades */
    --accent:      #ff2a6d;
    --accent-soft: #ff6ec7;
    --accent-tint: rgba(255, 42, 109, 0.12);
    --accent-glow: rgba(255, 42, 109, 0.35);
    /* radii — two values only (was a mix of 6/8/16/20px) */
    --r-sm: 6px;
    --r-md: 12px;
    /* spacing scale */
    --sp-1: 6px;
    --sp-2: 12px;
    --sp-3: 20px;
    --sp-4: 32px;
}

/* --- Base Styles --- */
body {
    /* Helvetica-Light look: real Helvetica Neue on macOS, Inter Light
       (a Helvetica-like neo-grotesque with true light weights) everywhere
       else. 'CustomBase' stays first as the localized-font override hook. */
    font-family: 'CustomBase', 'Helvetica Neue', 'Inter', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    background: var(--bg-grad);
    color: var(--text-dim);
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    /*max-width: 1400px;*/
    margin: 0 auto;
    padding: 30px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-height: calc(100vh - 60px);
    border: 1px solid var(--border);
}

/* --- Top bar (sticky) ---
 * A real, persistent header bar: logo left-aligned and size-capped, with a
 * reserved nav slot on the right (where search / tag-browse will live). Mirrors
 * the admin .header: neutral surface, blur, hairline bottom border. Sticky so
 * it stays visible while scrolling. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    max-width: 1500px;
    margin: 0 auto;
    padding: var(--sp-2) 0;
    /* Translucent --surface so the bar matches the container's depth (the
       container sits behind it). Keeps the page one consistent near-black. */
    background: rgba(10, 7, 16, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar-logo {
    display: inline-flex;
    align-items: center;
}
.topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 40px;
    /* Reserved for search / tag-browse (item 8). Empty for now. */
}
header {
    background: none;
    color: inherit;
    padding: 0 0 20px 0;
    max-width: 1500px;
    margin: 0 auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

header a {
    display: block;
}

/* Logo: height-capped (never width:100%, which balloons). Accent glow kept as
   a single restrained hero moment. */
header img,
.topbar-logo img,
.video-logo-link img {
    width: auto;
    height: 40px;
    max-height: 52px;
    display: block;
    filter: drop-shadow(0 0 8px var(--accent-glow));
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* --- Logo (legacy class, kept for templates still using .logo) --- */
.logo {
    display: block;
    margin: 0;
    filter: drop-shadow(0 0 8px var(--accent-glow));
    transition: filter 0.3s ease, transform 0.3s ease;
}

a:hover .logo,
.topbar-logo:hover img {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

/* On the video player page, the logo sits in the same top bar (capped height),
   no longer spanning the player width. */
.video-logo-link {
    display: block;
    margin: 0 auto 20px;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 20px;
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
    margin-top: 10px;
    text-align: center;
}

/* Headings are solid near-white now (no gradient text). emoji-fix.js still
 * wraps emoji in <span class="emoji">; this rule is retained so any future
 * gradient-clip on headings keeps emoji rendering normally. */
.emoji {
    color: initial;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    text-transform: uppercase;
    font-size: 1.2rem;
}

h3 {
    font-size: 1rem;
}

/* --- Disclaimer --- */
.disclaimer {
    font-family: 'CustomDisclaimer', 'Inter', 'Roboto Mono', monospace;
    font-weight: 100, 200;
    font-stretch: condensed, semi-condensed;
    text-align: justify;
    margin: 96px 0 16px 0;
    color: var(--text);
    font-size: 0.75rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.2;
    line-height: 1.3;
}

/* --- Forms --- */
.grid-form {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.grid-form label {
    text-align: right;
    padding-top: 10px;
    color: var(--text-mute);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grid-form input, .grid-form select, .grid-form button {
    width: 100%;
    padding: 12px;
    margin: 0;
    border: 1px solid var(--border-accent);
    background: var(--bg);
    color: var(--text-dim);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(5px);
}

.grid-form input:focus, .grid-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
    background: var(--surface-2);
}

.grid-form select {
    appearance: none;
    cursor: pointer;
}

.grid-form input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.grid-form input[type="number"]::-webkit-inner-spin-button,
.grid-form input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
    display: none;
}

.input-group {
    display: flex;
    gap: 10px;
    grid-column: 2;
}

.input-group input {
    flex: 1;
    width: auto;
}

.input-group button {
    width: auto;
    background: var(--surface-2);
    color: var(--accent-soft);
    border: 1px solid var(--border-accent);
}

/* --- Buttons: Ghost/Secondary Style --- */
button {
    font-family: 'CustomButton', 'Chakra Petch', 'Roboto Mono', monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    
    /* Colors: subtle surface with muted text */
    background: var(--surface-2);
    color: var(--text-mute);
    border: 1px solid var(--border);
    
    /* Shape: rectangular with your standard radius, NO pill/oval */
    border-radius: var(--r-sm);
    padding: 8px 16px;
    
    /* Typography */
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    
    /* Interaction */
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    
    /* Kill the old effects */
    box-shadow: none;
    transform: none;
    position: relative;
    overflow: visible;
}

/* Remove the shimmer effect */
button::before {
    content: none;
}

button:hover {
    background: var(--accent-tint);
    color: var(--accent);
    border-color: var(--border-accent);
    /* No lifting, no glowing */
    transform: none;
    box-shadow: none;
}

button:active {
    background: var(--surface);
    transform: translateY(1px); /* subtle press instead of lift */
}

/* Focus state for accessibility */
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Specific button styles */
#logout-button {
    background: #cc0055;
    margin-bottom: 30px;
}

#logout-button:hover {
    box-shadow: 0 4px 15px rgba(204, 0, 85, 0.4);
}

#refresh-shares {
    background: var(--surface-2);
    color: var(--accent-soft) !important;
    border: 1px solid var(--border-accent);
    margin-bottom: 20px;
}

#refresh-shares:hover {
    box-shadow: 0 4px 15px var(--accent-glow);
}

/* Action buttons in table */
.copy-button, .edit-button, .delete-button {
    margin-right: 10px;
    padding: 4px 8px;
    font-size: 0.7rem;
}

/* Danger variant (for logout/delete) */
button.danger,
#logout-button,
.delete-button {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
    background: transparent;
}

button.danger:hover,
#logout-button:hover,
.delete-button:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.5);
    color: #ff8585;
    box-shadow: none;
}

/* Secondary/outline variant (for refresh, cancel, etc.) */
button.secondary,
#refresh-shares,
.copy-button,
.edit-button {
    background: transparent;
    color: var(--text-mute);
    border-color: var(--border);
}

button.secondary:hover,
#refresh-shares:hover,
.copy-button:hover,
.edit-button:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-accent);
}

/* Primary variant (only for the main CTA on a page) */
button.primary {
    background: var(--accent);
    color: white;
    border-color: transparent;
}

button.primary:hover {
    background: var(--accent-soft);
    box-shadow: none;
}

/* Small size for table actions */
.copy-button, 
.edit-button, 
.delete-button {
    padding: 4px 8px;
    font-size: 0.7rem;
    margin-right: 6px;
}

/* --- Messages --- */
.error-message {
    color: #ff4458;
    font-size: 0.85rem;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.success-message {
    color: var(--accent-soft);
    font-size: 0.85rem;
    margin-top: 10px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Table --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 30px;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

th {
    background: var(--surface);
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-accent);
}

td {
    color: var(--text-dim);
}

tr {
    transition: background 0.2s ease;
}

tr:hover {
    background: var(--accent-tint);
}

td a {
    color: var(--accent-soft);
    text-decoration: none;
    transition: color 0.2s ease;
}

td a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- Modal --- */
#edit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface);
    padding: 30px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    z-index: 1000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    max-width: 500px;
    width: 90%;
}

#edit-modal h3 {
    margin-top: 0;
}

.modal-buttons {
    grid-column: 2;
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

/* --- Login/Admin Sections --- */
#login-section, #admin-content {
    animation: fadeIn 0.5s ease-out;
}

/* --- Gallery Styles --- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    padding: 30px 0;
    max-width: 1500px;
    margin: 0 auto;
}

.video-card {
    background: var(--surface-2);
    backdrop-filter: blur(10px);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--border);
    position: relative;
}

.video-card.tag-collection {
    border-color: var(--border-accent);
}

.video-card .tag-badge {
    display: none;
    z-index: 2;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, var(--accent-tint) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--border-accent);
}

.video-card:hover::before {
    opacity: 0.6;
    animation: sheen 0.8s ease-out;
}

@keyframes sheen {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/* --- Thumbnail wrapper (positioning context for card overlays) --- */
.video-card .thumb {
    position: relative;
    display: block;
    line-height: 0;
}

/* --- Hit Counter Overlay --- */
.hit-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(7, 6, 11, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #fff;
    z-index: 2;
}

.hit-counter .eye-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-soft);
}

.hit-counter span {
    font-weight: 600;
}

/* --- Duration Badge Overlay (bottom-right of the thumbnail) --- */
.duration-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(7, 6, 11, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    line-height: 1;
    color: #fff;
    z-index: 2;
}

.duration-badge .clock-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-soft);
}

.duration-badge span {
    font-weight: 600;
}

/* --- Video Count Overlay (for tag collections) --- */
.video-count-overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(7, 6, 11, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-sm);
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #fff;
    z-index: 2;
}

.video-count-overlay .video-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-soft);
}

.video-count-overlay span {
    font-weight: 600;
}

/* --- Section Separator --- */
.section-separator {
    display: flex;
    align-items: center;
    /* margin: 50px 0 30px 0; */
    gap: 20px;
}

.separator-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.separator-text {
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    color: var(--text-mute);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    background: var(--surface-2);
    padding: 10px 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.comments-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 3rem 0 1.5rem;   /* replaces the separator's spacing */
}

/* The logo is taller than the old text pill, so let the separator grow to fit;
   align-items: center keeps the lines dead-center against the logo. */
.comments-separator {
    height: auto;
    align-items: center;
}

.comments-brand-logo {
    display: block;
    width: 6em;
    height: 6em;
    object-fit: contain;
    margin: 0 1rem;            /* breathing room between logo and lines */
}

.comments-brand-caption {
    text-align: center;
    margin: 1.25rem 0 1.5rem;
}

.comments-brand-logo-link:hover .comments-brand-logo {
    transform: scale(1.03);   /* subtle affordance since there's no box anymore */
}

.comments-brand-title {
    font-size: 0.95rem;
    opacity: 0.85;
    text-align: center;
}

/* --- Gallery Section Styling --- */
.tag-gallery {
    margin-bottom: 20px;
}

.videos-gallery {
    margin-top: 20px;
}

.video-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.video-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--bg);
    display: block;
    transition: opacity 0.3s ease;
}

.video-card .title {
    padding: 8px 10px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 300 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

/* --- Masonry gallery mode (experimental, opt-in per tag share) --- */
/* Cards keep their full native aspect ratio (no crop) and pack into balanced
   columns. gallery-masonry.js distributes the cards across N flex columns,
   always appending the next card to the shortest column — so the top row fills
   left-to-right and no card overflows past the column (which a CSS multi-column
   layout would, bleeding its shadow over the pagination). Each card carries a
   --card-aspect var (width/height) so its thumbnail reserves the right height
   before the image loads, keeping the packing stable and avoiding reflow. */
.gallery-masonry {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 0;
}

.gallery-masonry .masonry-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1 1 0;
    min-width: 0;
}

.gallery-masonry .video-card .thumb {
    /* Reserve the native aspect ratio; fall back to 16:9 if unknown. */
    aspect-ratio: var(--card-aspect, 1.7778);
}

.gallery-masonry .video-card img {
    width: 100%;
    height: 100%;
    /* Show the whole frame, not a center-crop — the point of masonry mode. */
    object-fit: contain;
}

.gallery-masonry .video-card img.preview-webp {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}

#loading {
    text-align: center;
    padding: 20px;
    color: var(--text-mute);
    font-size: 0.85rem;
    display: none;
}

/* --- Video Player Styles --- */
/* The stage holds the player and the metadata side by side. When there is
   not enough horizontal room, the metadata wraps to a full-width row below
   the player (handled entirely by flex-wrap). */
.video-stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    /* Constrain the stage to 80% of the viewport width. This reserves the
       requested ~10% breathing room on each side and makes the "is there
       room for metadata beside the player?" decision match it: a player that
       is sized to the full 80vw fills the row on its own, so the metadata
       wraps below; a narrow (portrait) player leaves room beside it. */
    max-width: 80vw;
    margin: 20px auto;
    padding-bottom: 20px;
}

.video-container {
    flex: 0 0 auto;
    /* JS sets explicit width/height to fit the video into the viewport at its
       native aspect ratio. These provide a sensible landscape fallback until
       metadata loads (and if the sizing script is ever unavailable) so the
       player can never collapse to zero size. */
    width: min(80vw, 1280px);
    aspect-ratio: 16 / 9;
    max-width: 80vw;
    position: relative;
}

/* Gradient backdrop for video player */
.video-container::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;
    background: radial-gradient(circle at center, 
        rgba(255, 42, 109, 0.2) 0%, 
        rgba(255, 42, 109, 0.1) 30%, 
        rgba(184, 0, 107, 0.05) 50%, 
        transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: pulseGradient 3s ease-in-out;
}

@keyframes pulseGradient {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
}

.video-js {
    color: var(--text-dim);
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    margin: 0 auto;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,0.7);
}

/* Letterbox safely inside the rounded box for any aspect ratio. */
.video-js .vjs-tech {
    object-fit: contain;
}

.video-js .vjs-control-bar {
    background: rgba(7, 6, 11, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    height: 48px !important;
    min-height: 48px;
    border-radius: 0 0 var(--r-md) var(--r-md);
    display: flex;
    align-items: center;
}

.video-js .vjs-control {
    font-size: 1.2em !important;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    color: #fff;
    margin: 0 4px;
    border-radius: var(--r-sm);
    background: none;
    transition: all 0.2s;
    box-shadow: none;
}

.video-js .vjs-control:focus,
.video-js .vjs-control:hover {
    background: var(--accent-tint);
    color: #fff;
}

.video-js .vjs-play-control .vjs-icon-placeholder:before {
    font-size: 1.6em;
}

.video-js .vjs-volume-panel,
.video-js .vjs-fullscreen-control {
    margin-left: 8px;
    margin-right: 8px;
}

.video-js .vjs-progress-control .vjs-progress-holder {
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background-color: var(--accent);
}

.video-js .vjs-progress-control {
    flex: 1 1 auto;
    margin: 0 12px;
}

.video-js .vjs-time-control {
    font-size: 0.9em;
    color: #fff;
    min-width: auto;
}

/* The skip buttons use Video.js's own icon font (see the vjs-skip-backward-30
   / vjs-skip-forward-30 classes), so no custom glyph content is needed. */

/* --- Scrollbars --- */
::-webkit-scrollbar {
    width: 0px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--surface-2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-accent);
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        padding: 20px;
    }

    .grid-form {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }

    .grid-form label {
        text-align: left;
        padding-top: 0;
    }

    .input-group {
        grid-column: 1;
    }

    #edit-modal .grid-form {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 95%;
    }

    #edit-modal .grid-form .input-group {
        grid-column: 1;
    }

    .modal-buttons {
        grid-column: 1;
        justify-content: center;
    }

    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .video-card img {
        height: 180px;
    }

    th, td {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .grid-form input, .grid-form select, .grid-form button {
        padding: 8px;
        font-size: 0.8rem;
    }

    #edit-modal .grid-form {
        padding: 20px;
    }

    .gallery {
        gap: 15px;
    }

    .video-card img {
        height: 140px;
    }

    th, td {
        padding: 8px;
    }
}

/* --- Video Player Metadata --- */
.video-metadata {
    flex: 1 1 320px;
    min-width: 240px;
    padding: 30px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.video-title {
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
    /* Wrap onto multiple lines instead of shrinking to stay on one line. */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Description stays a direct child of .metadata-grid (above the masonry
   columns), so as a block it already spans the full width; the shared
   .metadata-section rules provide its padding / background / border. */

.video-description h3 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.video-description .markdown-body {
    margin: 0;
}

/* Shared Markdown typography (video descriptions + static pages) */
.markdown-body {
    line-height: 1.8;
    color: var(--text-dim);
    overflow-wrap: break-word;
    word-break: break-word;
}

.markdown-body > :first-child {
    margin-top: 0;
}

.markdown-body > :last-child {
    margin-bottom: 0;
}

/* Tag / collection gallery description (rendered Markdown from Stash) */
.tag-description {
    max-width: 800px;
    margin: -10px auto 25px;
    text-align: center;
    font-size: 1.05rem;
}

/* Left-align block content inside the centered box so lists/headings/tables
   don't look weird centered. A single-paragraph description still reads as
   centered because the box itself is narrow + margin: auto. */
.tag-description :is(ul, ol, table, pre, blockquote) {
    text-align: left;
}

/* Cap heading sizes so a `# Big Title` inside a tag description doesn't fight
   the page's own <h1>{{ tag_name }}</h1>. */
.tag-description :is(h1, h2, h3, h4) {
    font-size: 1.1rem;
    margin: 0.5em 0;
    text-align: center;
}

/* First/last paragraph flush against the box edges so the overall vertical
   rhythm matches what the inline-styled version had. */
.tag-description p:first-child { margin-top: 0; }
.tag-description p:last-child  { margin-bottom: 0; }

/* Embedded images never exceed the bounds of their container, and scale down
   proportionally on narrow viewports. height:auto preserves aspect ratio when a
   width attribute is present on the <img>. */
.markdown-body img {
    max-width: 100%;
    height: auto;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body pre,
.markdown-body blockquote,
.markdown-body table {
    margin: 0 0 1em;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    margin: 1.25em 0 0.5em;
    color: var(--text);
    font-weight: 300;
    line-height: 1.3;
}

.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { font-size: 1.3rem; }
.markdown-body h3 { font-size: 1.15rem; }

.markdown-body a {
    color: var(--accent-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-body a:hover {
    color: var(--accent);
}

.markdown-body strong {
    color: var(--text);
    font-weight: 600;
}

.markdown-body del {
    text-decoration: line-through;
    opacity: 0.85;
}

.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.15em 0.35em;
    border-radius: var(--r-sm);
}

.markdown-body pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    overflow-x: auto;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

.markdown-body blockquote {
    border-left: 3px solid var(--border-accent);
    margin-left: 0;
    padding: 0.25em 0 0.25em 1em;
    color: var(--text-mute);
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.4em;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5em 0;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
}

.markdown-body th {
    background: var(--accent-tint);
    color: var(--text);
}

.markdown-page {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.markdown-page-title {
    margin: 0 0 24px;
    font-size: 2rem;
    font-weight: 200;
    color: var(--text);
}

/* True masonry layout. metadata-masonry.js distributes the .metadata-section
   boxes into .metadata-col columns, dropping each box into the currently
   shortest column so a short box (e.g. Details) rises to fill the vertical gap
   a taller neighbour (e.g. Tags) would otherwise leave under it. A plain CSS
   grid keeps rows aligned (leaving the gap), and CSS multi-column is
   column-major (it can't lift a later box into an earlier column), so neither
   gives this. Before/without JS the boxes just stack vertically, which is fine.

   The `>` selector supplies the inter-box gap ONLY while the boxes are direct
   children of .metadata-grid (the no-JS stack, and the full-width Description
   which the script leaves in place above the columns). Once the script moves a
   box into a .metadata-col it's no longer a direct child, so the column's own
   `gap` spaces it instead. */
.metadata-grid > .metadata-section {
    margin-bottom: 20px;
}

.metadata-columns {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.metadata-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.metadata-section {
    background: var(--surface-2);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.metadata-section h3 {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--text);
}

.metadata-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.metadata-label {
    color: var(--text-mute);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.performer {
    padding: 10px;
    background: var(--accent-tint);
    border-radius: var(--r-sm);
    border: 1px solid var(--border-accent);
}

.performer-name {
    font-weight: 500;
    color: var(--accent-soft);
    font-size: 1.1rem;
}

.performer-links {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.performer-links a {
    color: var(--text-mute);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.performer-links a:hover {
    color: var(--accent);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    padding: 6px 12px;
    background: var(--accent-tint);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    color: var(--accent-soft);
    text-decoration: none;
    border: 1px solid var(--border-accent);
    transition: background 0.2s ease, color 0.2s ease;
}

.tag-item:hover {
    background: rgba(255, 42, 109, 0.2);
    color: var(--text);
}

.external-link {
    color: var(--accent-soft);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
    padding: 5px 0;
}

.external-link:hover {
    color: var(--accent);
}

/* Responsive adjustments for metadata */
@media (max-width: 768px) {
    .video-metadata {
        padding: 20px;
    }
    
    .video-title {
        font-size: 1.5rem;
    }

    /* metadata-masonry.js derives the column count from the available width, so
       it collapses to a single column on narrow screens on its own. */
    
    .performer-links {
        flex-direction: column;
        gap: 5px;
    }
}

/* --- Admin: drag-to-reorder Shared Tags --- */
#shared-tags-table tbody tr {
    transition: background 0.15s ease;
}
#shared-tags-table tbody tr.dragging {
    opacity: 0.55;
    background: var(--accent-tint);
}
#shared-tags-table .drag-grip {
    display: inline-block;
    margin-right: 10px;
    color: var(--text-mute);
    opacity: 0.45;
    cursor: grab;
    font-size: 1.1rem;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}
#shared-tags-table tbody tr:hover .drag-grip {
    opacity: 0.9;
}
#shared-tags-table tbody tr.dragging .drag-grip {
    cursor: grabbing;
}

/* --- Admin Table Sizing --- */
#shared-videos-table th:nth-child(1),
#shared-tags-table th:nth-child(1),
#shared-videos-table td:nth-child(1),
#shared-tags-table td:nth-child(1) {
    width: auto;
    max-width: none;
    min-width: 120px;
    white-space: normal;
    word-break: break-word;
}
#shared-videos-table,
#shared-tags-table {
    table-layout: fixed;
    width: 100%;
}

/* --- Admin Scrollbar Fixes --- */
.admin-section {
    overflow-y: hidden !important;
}
.admin-section:has(.grid-form) {
    overflow-y: auto !important;
    max-height: 100%;
}
.admin-section:has(table) > table {
    overflow-y: auto !important;
    max-height: 100%;
}

/* --- Gallery Pagination --- */
.pagination {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 3px;
    /*background: var(--surface-2);*/
    color: var(--text);
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.pagination a:hover {
    background: var(--accent-tint);
    border-color: var(--border-accent);
    color: var(--accent-soft);
}
.pagination .current {
    /*background: var(--accent);*/
    border-color: var(--accent);
    font-size: 1rem;
    /*font-weight: bold;*/
    color: #fff;
}

/* --- Social Links (Gallery & Video) --- */
.social-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 40px 0 20px 0;
    padding: 20px 0;
    /* border-top: 1px solid rgba(180, 0, 90, 0.2); */
    gap: 24px;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    opacity: 0.4;
    transition: opacity 0.8s ease, transform 0.2s;
}
.social-links a:hover {
    opacity: 1;
    transform: scale(1.12);
}
.social-links img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    display: inline-block;
    background: none !important;
    box-shadow: none !important;
    /* Apply pink filter to black SVGs */
    filter: brightness(0) saturate(100%) invert(56%) sepia(89%) saturate(1715%) hue-rotate(295deg) brightness(102%) contrast(101%);
}
.social-links a:hover img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(97%) saturate(5159%) hue-rotate(313deg) brightness(103%) contrast(101%);
}


.site-motto {
    font-family: 'CustomMotto', 'AppleGothic', 'Aptos', 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Roboto Mono', monospace;
    text-align: center;
    margin: 4px 0 16px 0;
    color: var(--text-mute);
    font-size: 1rem;
    /* font-style: italic; */
    opacity: 1.0;
    letter-spacing: 0.5px;
}

/* --- Video Player Page Specific --- */
.video-js {
    /* The container sizes the player; never let an inherited aspect-ratio or
       fixed height fight the computed dimensions. */
    aspect-ratio: unset !important;
}
.video-js .vjs-control-bar {
    height: 48px !important;
    font-size: 1em;
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
}
.vjs-playback-rate {
    display: none !important;
}
.vjs-volume-panel {
    order: 8;
    margin-right: 1em;
}
.vjs-fullscreen-control {
    order: 9;
}

/* --- Video Stats Section --- */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-around;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Sit side by side when the box is wide enough, wrap to stacked when the
       box itself becomes narrow (independent of viewport width). */
    flex: 1 1 70px;
    min-width: 70px;
}

.stat-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
}

.stat-icon.eye-icon {
    color: var(--accent-soft);
}

.stat-icon.rating-icon {
    color: var(--accent-soft);
}

.stat-icon.date-icon {
    color: var(--text-mute);
}

.stat-value {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Not Found / expired page --- */
.not-found {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    padding: 48px 32px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.not-found-title {
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    font-size: 2rem;
    margin: 0 0 16px;
    color: var(--text);
}
.not-found-text {
    color: var(--text-dim);
    line-height: 1.7;
    margin: 0 0 28px;
}
.not-found-home {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--r-sm);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    background: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.not-found-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px var(--accent-glow);
}

/* --- Site Footer --- */
.site-footer {
    text-align: center;
    margin: 40px 0 10px 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.footer-action {
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    padding: 8px 16px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.footer-action-secondary {
    color: var(--text-mute);
}

.footer-action-secondary:hover {
    color: var(--accent);
    background: var(--accent-tint);
    border-color: var(--border-accent);
}

.footer-action-primary {
    color: #68c984;
    border-color: rgba(144, 255, 176, 0.35);
}

.footer-action-primary:hover {
    color: #c8ffd8;
    background: rgba(144, 255, 176, 0.08);
    border-color: rgba(144, 255, 176, 0.55);
}

.footer-inline-links {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.footer-inline-links a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-inline-links a:hover {
    color: var(--accent-soft);
}

.footer-inline-sep {
    color: var(--text-mute);
    margin: 0 0.4em;
    user-select: none;
}

.sort-container {
    /* Align to the same centered content box as the gallery so the control's
       right edge lines up with the right card column on wide windows. */
    max-width: 1500px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.sort-container label {
    color: var(--text-mute);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.sort-container select {
    padding: 8px 38px 8px 14px;
    border: 1px solid var(--border-accent);
    background-color: var(--surface-2);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff6ec7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sort-container select:hover {
    border-color: var(--accent);
}

.sort-container select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.sort-container option {
    background-color: var(--surface-2);
    color: var(--text);
}

/* --- Faceted search bar (gallery-scoped) --- */
.faceted-search {
    max-width: 1500px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.faceted-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    position: relative;
    padding: 4px 12px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faceted-search-bar:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.faceted-search-icon {
    flex: 0 0 auto;
    color: var(--text-mute);
    pointer-events: none;
}

.faceted-tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    flex: 1 1 auto;
    min-height: 28px;
    cursor: text;
}

.faceted-tag-box.focused {
    /* Visual focus cue is on the parent bar via :focus-within */
}

.faceted-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 0, 128, 0.18);
    color: #f6d9ec;
    border: 1px solid rgba(255, 0, 128, 0.4);
    border-radius: 999px;
    padding: 2px 6px 2px 9px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.faceted-tag-chip .faceted-tag-x {
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    opacity: 0.8;
    border: none;
    background: none;
    color: inherit;
    padding: 0 2px;
    font-size: 0.9rem;
}

.faceted-tag-chip .faceted-tag-x:hover {
    opacity: 1;
}

/* --- Alias parenthetical in suggestion dropdown --- */
.faceted-alias {
    opacity: 0.7;
    font-size: 0.92em;
}

/* --- Entity type variants for chips --- */
.faceted-chip-performer {
    background: rgba(255, 110, 199, 0.18);
    color: #f6d9ec;
    border-color: rgba(255, 110, 199, 0.4);
}

.faceted-chip-studio {
    background: rgba(255, 165, 0, 0.18);
    color: #f6d9ec;
    border-color: rgba(255, 165, 0, 0.4);
}

.faceted-chip-tag {
    background: rgba(110, 199, 255, 0.18);
    color: #f6d9ec;
    border-color: rgba(110, 199, 255, 0.4);
}

/* --- Entity prefix colors in suggestion dropdown --- */
.faceted-suggestion-performer .faceted-suggestion-prefix {
    color: #ff6ec7;
}

.faceted-suggestion-studio .faceted-suggestion-prefix {
    color: #ffa500;
}

.faceted-suggestion-tag .faceted-suggestion-prefix {
    color: #6ec7ff;
}

#faceted-query-input {
    flex: 1 1 auto;
    min-width: 120px;
    border: none !important;
    background: none !important;
    padding: 4px 2px !important;
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
}

#faceted-query-input:focus {
    outline: none;
}

#faceted-query-input::placeholder {
    color: var(--text-mute);
}

.faceted-tag-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: none;
}

.faceted-tag-suggestions.open {
    display: block;
}

.faceted-tag-suggestion {
    padding: 8px 12px;
    font-size: 0.86rem;
    cursor: pointer;
    color: var(--text-dim);
    transition: background-color 0.15s ease;
}

.faceted-tag-suggestion.active,
.faceted-tag-suggestion:hover {
    background: rgba(255, 0, 128, 0.2);
}

.faceted-tag-suggestions .empty {
    padding: 8px 12px;
    font-size: 0.82rem;
    opacity: 0.6;
}

.faceted-clear-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-mute);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.faceted-clear-btn:hover {
    color: var(--accent);
}

/* Search results panel (inline gallery grid below the search bar) */
.faceted-search-results {
    max-width: 1500px;
    margin: 0 auto;
    display: none;
}

.faceted-search-results.has-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.faceted-search-empty {
    padding: 20px;
    color: var(--text-mute);
    text-align: center;
    font-size: 0.9rem;
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .faceted-search-results.has-results {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .faceted-search-results.has-results {
        gap: 15px;
    }
    .faceted-search-bar {
        max-width: 100%;
    }
}

.video-card {
    position: relative;
}

.video-card img {
    transition: opacity 0.3s ease;
}

/* --- Content Warning overlay --- */
body.cw-locked {
    overflow: hidden;
}
.cw-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 6, 11, 0.55);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    opacity: 1;
    transition: opacity 0.5s ease,
                backdrop-filter 0.5s ease,
                -webkit-backdrop-filter 0.5s ease,
                background 0.5s ease;
}
.cw-overlay.cw-dismissed {
    opacity: 0;
    background: rgba(7, 6, 11, 0);
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    pointer-events: none;
}
.cw-card {
    max-width: 520px;
    width: 100%;
    text-align: center;
    padding: 40px 32px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--r-md);
    border: 1px solid var(--border-accent);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.cw-overlay.cw-dismissed .cw-card {
    transform: translateY(12px);
    opacity: 0;
}
.cw-title {
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    font-size: 1.8rem;
    margin: 0 0 16px 0;
    color: var(--text);
}
.cw-message {
    color: var(--text-dim);
    line-height: 1.7;
    margin: 0 0 28px 0;
    font-size: 1.05rem;
}
.cw-enter {
    padding: 12px 44px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    background: var(--accent);
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cw-enter:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 26px var(--accent-glow);
}

/* Animated WebP preview overlay shown on hover (and always-on for tag cards). */
.video-card img.preview-webp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}
.video-card img.preview-webp.is-visible {
    opacity: 1;
}

/* ==========================================================================
   Cactus Comments — Full-width row below the metadata grid
   Comments (2/3, left) + Leave a Comment (1/3, right)
   ========================================================================== */

.comments-shell {
    max-width: 80vw;
    margin: 20px auto 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 24px;
}

/* Elm's root: lay its two children side by side */
.comments-shell .cactus-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Comments feed: LEFT, two-thirds --- */
.comments-shell .cactus-comments-container {
    order: 1;
    flex: 2 1 66.666%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: var(--surface-2);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.comments-shell .cactus-comments-container::before {
    /* content: "Comments"; */
    display: block;
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    text-align: center;
    margin-bottom: 5px;
}

/* --- Editor: RIGHT, one-third --- */
.comments-shell .cactus-editor {
    order: 2;
    flex: 1 1 33.333%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: var(--surface-2);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

.comments-shell .cactus-editor::before {
    /* content: "Leave a Comment"; */
    display: block;
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    text-align: center;
    margin-bottom: 5px;
}

/* Stack vertically on narrow screens; Comments still first */
@media (max-width: 768px) {
    .comments-shell .cactus-container {
        flex-direction: column !important;
    }
    .comments-shell .cactus-comments-container,
    .comments-shell .cactus-editor {
        flex: 1 1 100%;
    }
}

/* --- Login Modal: restore it as a true fixed full-screen overlay ---
   Take it out of the flex flow entirely so .cactus-container's row/order
   rules never touch it, since the base Cactus style.css providing this
   is no longer linked. */
.cactus-login-form-wrapper {
    position: fixed !important;
    inset: 0 !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px;
    background: rgba(6, 5, 10, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    order: initial !important;
    flex: initial !important;
    width: auto !important;
}

.cactus-login-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    padding: 32px 28px;
    background: var(--surface) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    color: var(--text-dim);
}

.cactus-login-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-mute) !important;
    cursor: pointer;
}

.cactus-login-close:hover {
    color: var(--accent) !important;
    border-color: var(--border-accent) !important;
}

.cactus-login-close-icon {
    width: 14px !important;
    height: 14px !important;
}

.cactus-login-title {
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
    color: var(--text) !important;
    font-family: 'CustomTitle', 'Chakra Petch', 'Roboto Mono', monospace;
}

.cactus-login-client,
.cactus-login-credentials {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cactus-login-client-title,
.cactus-login-credentials-title {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-mute) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cactus-login-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cactus-login-label {
    font-size: 0.8rem;
    color: var(--text-mute);
}

.cactus-login-error {
    font-size: 0.8rem;
    color: var(--error-color, #ff4458);
    margin: 0;
}

/* The "Log in" link that opens a Matrix client link (an <a>, not a <button>) */
.cactus-matrixdotto-button {
    text-decoration: none;
    text-align: center;
}

/* --- Shrink-to-fit rules (kill Cactus's own min-widths) --- */
.cactus-editor-textarea,
.cactus-editor-below,
.cactus-editor-name,
.cactus-editor-name > span,
.cactus-editor-name input,
.cactus-comment,
.cactus-comment-content,
.cactus-message-text {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.cactus-editor-name > span {
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    width: 100% !important;
}

.cactus-editor-below {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cactus-editor-buttons {
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

/* --- Inputs --- */
.cactus-editor-textarea {
    width: 100% !important;
    min-height: 100px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text) !important;
    padding: 8px 10px !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    resize: vertical;
}

.cactus-editor-textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
    background: var(--surface) !important;
}

.cactus-editor-textarea::placeholder {
    color: var(--text-mute) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

.cactus-editor-name input,
.cactus-login-field input {
    width: 100% !important;
    background: var(--bg) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text) !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    box-sizing: border-box !important;
}

.cactus-editor-name input:focus,
.cactus-login-field input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}

/* --- Buttons: footer-action style --- */
.cactus-button {
    font-family: 'CustomButton', 'Chakra Petch', 'Roboto Mono', monospace !important;
    display: inline-block !important;
    background: var(--surface-2) !important;
    color: var(--text-mute) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.cactus-button::before {
    content: none !important;
}

.cactus-button:hover:not([disabled]) {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    color: var(--accent) !important;
    background: var(--accent-tint) !important;
    border-color: var(--border-accent) !important;
}

.cactus-button:active:not([disabled]) {
    transform: none !important;
}

/* --- Send button: footer-action-primary style --- */
.cactus-send-button {
    color: #68c984 !important;
    border-color: rgba(144, 255, 176, 0.35) !important;
}

.cactus-send-button:hover:not([disabled]) {
    color: #c8ffd8 !important;
    background: rgba(144, 255, 176, 0.08) !important;
    border-color: rgba(144, 255, 176, 0.55) !important;
}

.cactus-send-button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(144, 255, 176, 0.15) !important;
}

.cactus-send-button[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* --- Comment feed items --- */
.cactus-comment {
    display: flex;
    gap: 10px;
    padding-top:9px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border) !important;
}

.cactus-comment:last-child {
    border-bottom: none !important;
    padding-bottom: 0;
}


.cactus-comment-displayname {
    color: var(--accent-soft) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}

.cactus-comment-displayname:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
}

.cactus-comment-time {
    color: var(--text-mute) !important;
    font-size: 0.72rem !important;
    margin-left: 6px;
}

.cactus-message-text {
    color: var(--text-dim) !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-top: 2px;
}

.cactus-matrixdotto-only {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.cactus-matrixdotto-only:hover {
    opacity: 0.9;
}

/* --- Avatar container --- */
.cactus-comment-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0; /* Prevent squishing in flex layouts */
}

/* Size the avatar image (or its container) */
.cactus-comment-avatar > * {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0;
}

/* Critical: the JS sets background-image on this element when it fetches the blob */
.cactus-comment-avatar > [data-mxc-url] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Hide any text content while loading */
    color: transparent;
    font-size: 0;
}

/* Placeholder shown while loading or if no avatar */
.cactus-comment-avatar-placeholder {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1;
}

/* The "?" character in the placeholder */
.cactus-comment-avatar-placeholder::before {
    content: "?";
}

/* --- Reply button (the pink oval fix) --- */
.cactus-comment-reply-button {
    /* Reset the pink theme */
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-mute) !important;
    
    /* Fixed size, not oval */
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: var(--r-sm); /* Square-ish, or 50% for circle */
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Reset margins that might push it out of place */
    margin: 0;
    flex-shrink: 0;
}

.cactus-comment-reply-button:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border-accent) !important;
}

/* Icon sizing */
.cactus-comment-reply-button svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* Styling of links within comments */
.cactus-message-text a {
    color: var(--accent-soft);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
    padding: 5px 0;
}

.cactus-message-text a:hover {
    color: var(--accent);
}


/*
 * ***** ERROR *****
 */
/* error message */
.cactus-error {
  padding: 0.5em;
  padding-inline-end: 1.5em;
  border: var(--cactus-border-width) solid var(--cactus-error-color);
  border-radius: var(--cactus-border-radius);
  /* for absolutely positioned close button */
  position: relative;
}

/* close button */
.cactus-error-close {
  position: absolute;
  right: 0.2em;
  top: 0em;
  color: var(--cactus-button-color);
  /* todo: remove after using all: unset */
  background-color: transparent;
  border: none;
}

.cactus-error-close:hover:not([disabled]) {
  color: var(--cactus-button-color--strong);
  cursor: pointer;
}

.cactus-error-close:active:not([disabled]) {
  color: var(--cactus-button-color--stronger);
  cursor: pointer;
}

.cactus-error-close-icon {
  inline-size: 20px;
  block-size: 20px;
}

/* error message */
.cactus-error-text {
  color: var(--cactus-error-color);
  font-weight: bold;
  /* todo: remove after using all: unset */
  margin: 0;
}

.cactus-comment-reply-link {
  color: var(--cactus-text-color--soft); /* Use a softer text color */
  cursor: pointer;
  text-decoration: none; /* Remove underline if it appears by default on divs with onClick */
  display: inline-block; 
  font-size: .9em;
  padding: .1em;
  margin-left: 0.5em; /* Space from time/displayname */
}

.cactus-comment-reply-link .cactus-reply-blockquote {
  display: inline-block; /* To keep it in line with other header elements */
  border-left: 3px solid var(--cactus-button-color--strong); /* Using a theme color, adjust as needed. Screenshot implies purple. */
  padding-left: 0.5em;
  margin: 0.1em 0; /* Small vertical margin */
  font-size: 0.9em; /* Slightly smaller than normal text */
  color: var(--cactus-text-color--soft); /* Softer color for quoted text */
  background-color: transparent; /* Ensure no unexpected background */
  cursor: pointer; /* Inherit cursor from parent link */
}

.cactus-comment-reply-link .cactus-reply-blockquote p,
.cactus-comment-reply-link .cactus-reply-blockquote span,
.cactus-comment-reply-link .cactus-reply-blockquote em {
    margin: 0; /* Reset margins for inner elements */
    padding: 0; /* Reset paddings for inner elements */
    font-style: normal; /* Override em if displayedLinkText was wrapped in it */
}


.cactus-comment-reply-link:hover .cactus-reply-blockquote {
  border-left-color: var(--cactus-button-color--stronger); /* Darken border on hover */
  color: var(--cactus-text-color);
}

.cactus-comment-reply-link .cactus-reply-blockquote {
  display: inline-block; /* To keep it in line with other header elements */
  border-left: 3px solid var(--cactus-button-color--strong); /* Using a theme color, adjust as needed. Screenshot implies purple. */
  padding-left: 0.5em;
  margin: 0.1em 0; /* Small vertical margin */
  font-size: 0.9em; /* Slightly smaller than normal text */
  color: var(--cactus-text-color--soft); /* Softer color for quoted text */
  background-color: transparent; /* Ensure no unexpected background */
  cursor: pointer; /* Inherit cursor from parent link */
}

.cactus-comment-reply-link .cactus-reply-blockquote p,
.cactus-comment-reply-link .cactus-reply-blockquote span,
.cactus-comment-reply-link .cactus-reply-blockquote em {
    margin: 0; /* Reset margins for inner elements */
    padding: 0; /* Reset paddings for inner elements */
    font-style: normal; /* Override em if displayedLinkText was wrapped in it */
}


.cactus-comment-reply-link:hover .cactus-reply-blockquote {
  border-left-color: var(--cactus-button-color--stronger); /* Darken border on hover */
  color: var(--cactus-text-color);
}

/*
 * ***** EDITOR REPLYING TO *****
 */
.cactus-editor-replying-to {
  display: flex;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: var(--cactus-border-radius) var(--cactus-border-radius) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: fit-content;
  max-width: 100%;
  p {
    margin-bottom: auto;
    margin-top: auto;
  }
}

.cactus-editor-cancel-reply {
  background-color: transparent;
  border: none;
  color: var(--cactus-text-color--soft);
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width:30px;
  padding: 5px;
}

.cactus-editor-cancel-reply:hover {
  background-color: var(--cactus-button-color);
  color: var(--cactus-button-text-color);
}

.cactus-editor-cancel-reply svg {
  width: 1em;
  height: 1em;
  display: block;
}

.cactus-message-emote {
  padding-top: 0.5em;
  color: var(--cactus-text-color--soft);
}

.cactus-message-image {
  max-width: 100%;
  height: auto;
}

.cactus-message-file {
  line-height: 3em;
  margin-left: 1em;
}

.cactus-message-video,
.cactus-message-audio {
  max-width: 100%;
}


/*
 * ***** LOADING SPINNER *****
 */
 .spinner {
  align-self: center;
  width: 2em;
  height: 2em;
  display: flex;
  gap: 0.3em;
}

.spinner > div {
  flex: 1;
  background-color: var(--cactus-border-color);
  animation: sk-stretchdelay 2.4s infinite ease-in-out;
}

.spinner .rect2 {
  animation-delay: -2.2s;
}

.spinner .rect3 {
  animation-delay: -2.0s;
}

.spinner .rect4 {
  animation-delay: -1.8s;
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
  }
}

/* Highlight for a comment that was just scrolled to */
.cactus-comment-highlighted {
  background-color: var(--cactus-button-color) !important; /* Use !important to ensure override if needed, or make selector more specific */
  transition: background-color 0.75s ease-out;
}

/* contains the view-more button */
.cactus-view-more {
  display: flex;
  justify-content: center;
}

/* --- "Join the conversation" whisper --- */
.join-conversation {
    margin-top: 10px;
    padding-right: 4px;              /* optically clears the card's border edge */
    text-align: right;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-mute);
    opacity: 0.65;
    transition: opacity 0.4s ease;
}

/* rewards those who linger */
.join-conversation:hover {
    opacity: 1;
}

.join-conversation a {
    color: inherit;                  /* no accent color until invited */
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.join-conversation a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}