/* =====================================================
   WALES FOREVER - Vintage Film Archive Aesthetic
   Wales High School Memory Page
   ===================================================== */

:root {
    /* WHS Brand Colors */
    --whs-navy: #001A7F;
    --whs-navy-dark: #2D3387;
    --whs-navy-light: #3763AB;
    --whs-yellow: #ffbd33;
    --whs-yellow-light: #ffe5a3;
    --whs-yellow-dark: #d4982a;

    /* Vintage Warm Tones */
    --sepia: #d4a574;
    --sepia-dark: #8b6914;
    --cream: #f5f0e6;
    --cream-dark: #e8dcc8;
    --paper: #faf6ed;
    --aged-white: #f0ebe0;

    /* Neutrals */
    --white: #ffffff;
    --black: #1a1612;
    --gray-900: #2d2a26;
    --gray-800: #3a3732;
    --gray-700: #4a4640;
    --gray-600: #625d56;
    --gray-500: #7a756d;
    --gray-400: #9a958c;
    --gray-300: #b5afa5;
    --gray-200: #d0cbc2;
    --gray-100: #e5e0d8;

    /* Typography - ONLY Roboto & Oswald */
    --font-heading: 'Roboto', sans-serif;
    --font-subheading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray-900);
    background: var(--cream);
    overflow-x: hidden;
}

/* Paper Texture Overlay */
.paper-texture {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Film Grain Animation */
.film-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10001;
    opacity: 0.04;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    animation: grainShift 0.5s steps(10) infinite;
}

@keyframes grainShift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2%, -2%); }
    20% { transform: translate(2%, 2%); }
    30% { transform: translate(-1%, 1%); }
    40% { transform: translate(1%, -1%); }
    50% { transform: translate(-2%, 1%); }
    60% { transform: translate(2%, -1%); }
    70% { transform: translate(-1%, -2%); }
    80% { transform: translate(1%, 2%); }
    90% { transform: translate(-2%, -1%); }
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.section-number {
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--whs-navy);
    display: inline-block;
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background: var(--whs-yellow);
    border-radius: 4px;
}

.section-number--light {
    background: transparent;
    border: 2px solid var(--whs-yellow);
    color: var(--whs-yellow);
}

.section-title {
    font-family: var(--font-subheading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--whs-navy);
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gray-700);
    max-width: 600px;
    margin: 0 auto;
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-lg) 0;
    transition: all 0.4s ease;
}

.nav.scrolled {
    background: rgba(245, 240, 230, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--space-md) 0;
    box-shadow: 0 2px 20px rgba(0, 26, 127, 0.1);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.nav-logo {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    text-decoration: none;
}

/* FIXED: Logo is WHITE on blue hero background */
.logo-wales {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--white);
    transition: color 0.3s ease;
}

.logo-forever {
    font-family: var(--font-subheading);
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--whs-yellow);
    transition: color 0.3s ease;
}

.nav.scrolled .logo-wales {
    color: var(--whs-navy);
}

/* Scrolled state fades to a cream/95 background — bright yellow washes out
   against it, so darken FOREVER to a warm amber that keeps the colour
   identity but reads properly on the light chrome. */
.nav.scrolled .logo-forever {
    color: #b45309;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    list-style: none;
}

.nav-links a {
    font-family: var(--font-subheading);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease;
    position: relative;
}

.nav.scrolled .nav-links a {
    color: var(--gray-700);
}

.nav-links a:hover {
    color: var(--whs-yellow);
}

.nav.scrolled .nav-links a:hover {
    color: var(--whs-navy);
}

.nav-cta {
    display: flex !important;
    align-items: center;
    gap: var(--space-sm);
    background: var(--whs-yellow);
    color: var(--whs-navy) !important;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 50px;
    font-weight: 500 !important;
}

.nav-cta:hover {
    background: var(--whs-yellow-light);
    color: var(--whs-navy) !important;
}

.cta-icon {
    font-weight: 300;
    font-size: 1.25rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: all 0.3s ease;
}

.nav.scrolled .nav-toggle span {
    background: var(--whs-navy);
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(20%) contrast(1.05);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 26, 127, 0.75) 0%,
        rgba(0, 26, 127, 0.6) 50%,
        rgba(0, 26, 127, 0.85) 100%
    );
}

.hero-content {
    text-align: center;
    z-index: 2;
    padding: var(--space-4xl);
}

.hero-badge {
    display: inline-block;
    border: 1px solid var(--whs-yellow);
    padding: var(--space-xs) var(--space-lg);
    margin-bottom: var(--space-xl);
    animation: fadeInDown 1s ease-out 0.2s backwards;
}

.hero-badge span {
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--whs-yellow);
}

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    animation: fadeInDown 1s ease-out 0.4s backwards;
}

/* FIXED: All hero text is WHITE or YELLOW - consistent */
.title-small {
    font-family: var(--font-subheading);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-sm);
}

.title-main {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--white);
    line-height: 0.9;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.title-accent {
    font-family: var(--font-subheading);
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 200;
    letter-spacing: 0.3em;
    color: var(--whs-yellow);
    margin-top: var(--space-sm);
}

.hero-divider {
    width: 60px;
    height: 2px;
    background: var(--whs-yellow);
    margin: var(--space-xl) auto;
    animation: fadeIn 1s ease-out 0.6s backwards;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    animation: fadeIn 1s ease-out 0.8s backwards;
}

/* Hero CTA Button */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--whs-yellow);
    color: var(--whs-navy);
    padding: var(--space-md) var(--space-xl);
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-subheading);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: var(--space-xl);
    animation: fadeIn 1s ease-out 1s backwards;
    transition: all 0.3s ease;
}

.hero-cta svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.hero-cta:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hero-cta:hover svg {
    transform: translateX(5px);
}

/* Hero Stamp */
.hero-stamp {
    position: absolute;
    bottom: var(--space-3xl);
    right: var(--space-3xl);
    transform: rotate(12deg);
    animation: stampDrop 0.6s ease-out 1.2s backwards;
}

.stamp-inner {
    border: 3px solid var(--whs-yellow);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    position: relative;
}

.stamp-inner::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid var(--whs-yellow);
}

.stamp-text {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--whs-yellow);
}

.stamp-year {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--whs-yellow);
    margin-top: var(--space-xs);
}

/* Hero Scroll Hint */
.hero-scroll-hint {
    position: absolute;
    bottom: var(--space-2xl);
    left: var(--space-2xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    animation: fadeIn 1s ease-out 1.4s backwards;
}

.hero-scroll-hint span {
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--whs-yellow), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.5; transform: scaleY(0.8); }
}

/* Hero Polaroids - Multiple scattered with WHITE backgrounds */
.hero-polaroid {
    position: absolute;
    z-index: 3;
}

.hero-polaroid--1 {
    top: 12%;
    right: 6%;
    transform: rotate(-8deg);
    animation: floatIn 1s ease-out 1s backwards;
}

.hero-polaroid--2 {
    top: 55%;
    right: 3%;
    transform: rotate(12deg);
    animation: floatIn 1s ease-out 1.2s backwards;
}

.hero-polaroid--3 {
    top: 25%;
    left: 4%;
    transform: rotate(6deg);
    animation: floatIn 1s ease-out 1.4s backwards;
}

.polaroid {
    background: var(--white);
    padding: 12px 12px 50px 12px;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.polaroid:hover {
    transform: scale(1.05) rotate(0deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.polaroid--small {
    padding: 8px 8px 35px 8px;
}

.polaroid--small .polaroid-image {
    width: 120px;
    height: 120px;
}

.polaroid--small .polaroid-caption {
    font-size: 0.75rem;
    margin-top: var(--space-sm);
}

.polaroid-image {
    width: 180px;
    height: 180px;
    overflow: hidden;
}

.polaroid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(15%) contrast(1.05) saturate(0.9);
}

.polaroid-caption {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--gray-700);
    text-align: center;
    margin-top: var(--space-md);
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes stampDrop {
    from {
        opacity: 0;
        transform: rotate(12deg) scale(1.5);
    }
    to {
        opacity: 1;
        transform: rotate(12deg) scale(1);
    }
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: rotate(-8deg) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: rotate(-8deg) translateY(0);
    }
}

/* =====================================================
   INTRO SECTION
   ===================================================== */
.intro {
    padding: var(--space-5xl) 0;
    background: var(--paper);
}

.intro-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4xl);
    align-items: start;
}

/* FIXED: Properly styled quote block */
.intro-quote {
    position: relative;
    padding: var(--space-2xl);
    background: var(--whs-navy);
}

.quote-mark {
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 900;
    color: var(--whs-yellow);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: 20px;
    line-height: 1;
}

blockquote {
    font-family: var(--font-body);
    font-size: 1.375rem;
    font-weight: 400;
    font-style: italic;
    color: var(--white);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.quote-source {
    display: block;
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--whs-yellow);
    margin-top: var(--space-lg);
    font-style: normal;
}

.intro-text h2 {
    font-family: var(--font-subheading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--whs-navy);
    margin-bottom: var(--space-lg);
    line-height: 1.3;
}

.intro-text p {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--gray-700);
    line-height: 1.9;
    margin-bottom: var(--space-xl);
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-subheading);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--whs-navy);
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-arrow svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.btn-arrow:hover {
    color: var(--whs-navy-light);
}

.btn-arrow:hover svg {
    transform: translateX(6px);
}

/* =====================================================
   MEMORIES / PHOTO WALL SECTION
   ===================================================== */
.memories {
    padding: var(--space-5xl) 0 0;
    background: var(--cream-dark);
}

.memories-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
    padding: 0 var(--space-xl);
}

/* Photo Filter Buttons */
.photo-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xl);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 50px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.4rem;
    margin-left: 0.2rem;
    background: rgba(0, 0, 0, 0.06);
    color: var(--gray-500, #7a756d);
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, color 0.2s ease;
}

.filter-btn.active .filter-btn-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.filter-btn:hover:not(.active):not(.filter-btn--empty) .filter-btn-count {
    background: rgba(0, 26, 127, 0.1);
    color: var(--whs-navy, #001A7F);
}

.filter-btn--empty {
    opacity: 0.45;
    cursor: default;
}

.filter-btn--empty:hover {
    transform: none;
    border-color: var(--gray-200);
    color: var(--gray-600);
}

.filter-btn svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--whs-navy-light);
    color: var(--whs-navy);
    background: var(--cream);
}

.filter-btn:hover svg {
    opacity: 1;
}

.filter-btn.active {
    background: var(--whs-navy);
    border-color: var(--whs-navy);
    color: var(--white);
}

.filter-btn.active svg {
    opacity: 1;
    color: var(--whs-yellow);
}

/* Filter Message */
.filter-message {
    text-align: center;
    padding: var(--space-lg) var(--space-xl);
    background: var(--white);
    border-radius: 12px;
    margin: 0 var(--space-xl) var(--space-xl);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--whs-yellow);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.filter-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.filter-message span {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--gray-700);
}

.filter-message strong {
    color: var(--whs-navy);
}

.filter-message small {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.875rem;
    color: var(--gray-500);
}

.filter-message small a {
    color: var(--whs-navy);
    text-decoration: underline;
}

/* ==============================================
   ARCHIVE STATS STRIP (/memories/)
   ============================================== */

.archive-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 2rem auto 2.5rem;
    max-width: 960px;
}

.archive-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
    background: #fffdf8;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.archive-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 26, 127, 0.08);
    border-color: rgba(0, 26, 127, 0.18);
}

.archive-stat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 2px;
    background: var(--whs-yellow, #ffbd33);
}

.archive-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whs-navy);
    margin-bottom: 0.5rem;
    opacity: 0.85;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.archive-stat:hover .archive-stat-icon {
    opacity: 1;
    transform: translateY(-2px);
}

.archive-stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: var(--whs-navy);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.archive-stat-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 0.5rem;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .archive-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .archive-stat {
        padding: 1.25rem 0.75rem 1rem;
    }
    .archive-stat-icon {
        margin-bottom: 0.375rem;
    }
    .archive-stat-icon svg {
        width: 18px;
        height: 18px;
    }
    .archive-stat-value {
        font-size: 1.5rem;
    }
    .archive-stat-label {
        font-size: 0.625rem;
        letter-spacing: 0.1em;
    }
}

/* ==============================================
   DECADE FILTERS (/memories/)
   ============================================== */

.photo-filters--decades {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.filter-btn--decade {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.45rem 0.9rem !important;
}

/* ==============================================
   WALL FRAME PERMALINK ICON
   ============================================== */

.wall-frame {
    position: relative;
}

.wall-frame-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--whs-navy);
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    z-index: 4;
}

.wall-frame-link::after {
    content: 'View';
}

.wall-frame:hover .wall-frame-link {
    opacity: 1;
    transform: translateY(0);
}

.wall-frame-link:hover {
    background: var(--whs-yellow);
    color: var(--whs-navy);
}

/* ==============================================
   MEMORY DETAIL PAGE (/memory/)
   ============================================== */

.memory-detail {
    padding: 8rem 0 4rem;
    min-height: calc(100vh - 200px);
}

.memory-detail .container {
    max-width: 820px;
    padding: 0 1.5rem;
}

.memory-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--whs-navy);
    text-decoration: none;
    margin-bottom: 2rem;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.memory-back-link:hover { opacity: 1; }

.memory-article {
    background: #fffdf8;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.memory-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.memory-meta-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.memory-category-pill,
.memory-role-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy);
    border-radius: 20px;
}

.memory-role-pill {
    background: rgba(255, 189, 51, 0.15);
    color: var(--whs-yellow-dark);
}

.memory-byline {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    margin: 0 0 0.3rem;
}

.memory-name {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--whs-navy);
    margin: 0 0 0.6rem;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.memory-submeta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
}

.memory-submeta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
}

.memory-submeta svg {
    color: rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.memory-years {
    font-family: 'Roboto', sans-serif;
}

.memory-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
}

.memory-photo {
    position: relative;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--gray-100);
    aspect-ratio: 4 / 3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memory-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.memory-photo--hero {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
}

.memory-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.memory-photo-zoom {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.memory-photo:hover .memory-photo-zoom { opacity: 1; }

/* Caption overlay sitting on the bottom of the hero photo */
.memory-photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Fallback: plain caption when there are no photos */
.memory-caption-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    color: rgba(0, 0, 0, 0.65);
    margin: 0 0 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--whs-yellow);
}

.memory-body {
    margin: 2.5rem 0 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.memory-body-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.85);
    white-space: normal;
    letter-spacing: 0.003em;
    max-width: 65ch;
}

@media (max-width: 600px) {
    .memory-body {
        margin: 2rem 0 2rem;
        padding-top: 1.5rem;
    }
    .memory-body-text {
        font-size: 1.0625rem;
        line-height: 1.7;
    }
}

/* Reactions (heart) */
.memory-react {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.memory-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.55rem 0.5rem 1.1rem;
    background: #fff;
    color: #b91c1c;
    border: 1.5px solid rgba(185, 28, 28, 0.28);
    border-radius: 30px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* No right-side padding adjustment when no count badge is showing */
.memory-react-btn:not(.memory-react-btn--has-count) {
    padding: 0.55rem 1.1rem;
}

.memory-react-btn:hover:not(:disabled) {
    background: rgba(185, 28, 28, 0.06);
    border-color: rgba(185, 28, 28, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.14);
}

.memory-react-btn:disabled {
    cursor: default;
}

.memory-react-btn--active {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
    box-shadow: 0 3px 10px rgba(185, 28, 28, 0.25);
}

.memory-react-heart {
    transition: transform 0.3s ease;
}

.memory-react-btn--pop .memory-react-heart {
    animation: heart-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes heart-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Count badge built INTO the button — bold, white, offset in a darker
   inner pill on the active state */
.memory-react-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 0.55rem;
    margin-left: 0.15rem;
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
    border-radius: 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, color 0.2s ease;
}

.memory-react-btn--active .memory-react-count {
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
}

.memory-react-btn:hover:not(:disabled) .memory-react-count {
    background: rgba(185, 28, 28, 0.18);
}

/* Share buttons */
.memory-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.memory-share-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
}

.memory-share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.memory-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gray-100);
    color: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.memory-share-btn:hover {
    transform: translateY(-2px);
    color: #fff;
}

.memory-share-btn--fb:hover { background: #1877f2; }
.memory-share-btn--x:hover { background: #000; }
.memory-share-btn--li:hover { background: #0a66c2; }
.memory-share-btn--copy:hover { background: var(--gray-800, #333); }

.memory-share-btn--copied {
    background: #10b981 !important;
    color: #fff !important;
}

.memory-404 {
    text-align: center;
    padding: 4rem 1rem;
}

.memory-404 h1 {
    font-family: 'Oswald', sans-serif;
    color: var(--whs-navy);
    margin: 0 0 0.5rem;
}

.memory-404 p {
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 2rem;
}

@media (max-width: 600px) {
    .memory-article { padding: 1.5rem 1.25rem; }
    .memory-name { font-size: 1.5rem; }
    .memory-share { flex-direction: column; align-items: flex-start; }
}

/* Memories page — loading + lazy-load */
.memories-loader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.memories-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0, 26, 127, 0.15);
    border-top-color: var(--whs-navy);
    border-radius: 50%;
    animation: pw-spin 0.7s linear infinite;
}

.memories-sentinel {
    height: 1px;
    width: 100%;
}

.memories-end {
    text-align: center;
    padding: 2.5rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}

.memories-end span {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.memories-empty-inline {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    font-family: 'Roboto', sans-serif;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.9375rem;
}

/* Photo Wall — loading + lazy-load states */
.photo-wall-loader {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.photo-wall-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 26, 127, 0.15);
    border-top-color: var(--whs-navy);
    border-radius: 50%;
    animation: pw-spin 0.7s linear infinite;
}

@keyframes pw-spin { to { transform: rotate(360deg); } }

.photo-wall-sentinel {
    height: 1px;
    width: 100%;
}

/* Overlay spinner shown during page changes — sits on top of the wall so
   the current photos stay visible underneath, dimmed slightly. */
.photo-wall-overlay {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 253, 248, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 4px;
    pointer-events: none;
    animation: pwo-fadein 0.15s ease;
}

@keyframes pwo-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.photo-wall-overlay .photo-wall-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.photo-wall--loading {
    position: relative;
}

/* Category pagination */
.photo-wall-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 3rem auto 1.5rem;
    padding: 0;
    max-width: 640px;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

.pwp-info {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.58);
    letter-spacing: 0.02em;
}

.pwp-info strong {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: var(--whs-navy, #001A7F);
    letter-spacing: 0.03em;
    font-size: 0.95em;
}

.pwp-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.35rem;
    background: #fff;
    border-radius: 30px;
    border: 1px solid rgba(0, 26, 127, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.pwp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    background: transparent;
    color: rgba(0, 0, 0, 0.65);
    border: none;
    border-radius: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.pwp-num {
    min-width: 36px;
    width: 36px;
    padding: 0;
    /* Oswald's tracking pushes the glyph off-centre in a round button — zero
       it on number cells so single digits sit dead-centre. */
    letter-spacing: 0;
}

.pwp-btn:hover:not(:disabled):not(.pwp-num--active) {
    background: rgba(0, 26, 127, 0.07);
    color: var(--whs-navy, #001A7F);
}

.pwp-btn:active:not(:disabled) {
    transform: scale(0.92);
}

.pwp-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

.pwp-num--active {
    background: linear-gradient(135deg, var(--whs-navy, #001A7F) 0%, #2a3a9e 100%);
    color: #fff;
    cursor: default;
    box-shadow: 0 3px 10px rgba(0, 26, 127, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    font-weight: 600;
    /* Oswald has wide letter-spacing; kill it on single-digit numbers so the
       glyph sits visually centered inside the circle. */
    letter-spacing: 0;
    text-indent: 0;
    padding: 0;
}

.pwp-arrow {
    border-radius: 50%;
}

.pwp-arrow svg {
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.pwp-prev:hover:not(:disabled) svg {
    opacity: 1;
    transform: translateX(-2px);
}

.pwp-next:hover:not(:disabled) svg {
    opacity: 1;
    transform: translateX(2px);
}

.pwp-ellipsis {
    color: rgba(0, 0, 0, 0.3);
    padding: 0 0.2rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    user-select: none;
}

@media (max-width: 480px) {
    .photo-wall-pager {
        padding: 1.25rem 1rem;
    }
    .pwp-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 0.45rem;
        font-size: 0.8125rem;
    }
    .pwp-num {
        width: 32px;
    }
}

/* Extra wall appended below curated view when "Show all photos" is clicked */
.photo-wall--extra {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.photo-wall-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem auto 1rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(0, 26, 127, 0.25);
    color: var(--whs-navy, #001A7F);
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.photo-wall-loadmore:hover {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    border-color: var(--whs-navy, #001A7F);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 26, 127, 0.2);
}

.photo-wall-loadmore svg {
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.photo-wall-loadmore:hover svg {
    transform: translateY(2px);
    opacity: 1;
}

.photo-wall-end {
    text-align: center;
    padding: 2rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}

.photo-wall-end span {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.photo-wall .photo-frame {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Photo Wall - Scattered Layout */
.photo-wall {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 80px;
    gap: var(--space-lg);
    padding: 0 var(--space-xl);
    max-width: 1600px;
    margin: 0 auto;
}

/* Flow mode: used when showing filtered categories (arbitrary # of photos).
   Drops the fixed grid slots so photos auto-place without overlapping.
   !important used throughout because responsive media queries later in the
   file override .photo-wall defaults at <=1200px. */
.photo-wall.photo-wall--flow {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 2rem !important;
}

.photo-wall--flow .photo-frame {
    grid-column: auto !important;
    grid-row: auto !important;
    /* translateZ(0) forces each frame onto its own compositor layer, which
       eliminates the paint-skip bug where lazy-loaded images stayed blank
       until a hover triggered a repaint. It also neutralises the rotation
       transforms the frame-style classes apply. */
    transform: translateZ(0) !important;
    aspect-ratio: 4 / 3;
    padding: 12px !important;
    /* Cheaper box-shadow — single layer, no blur on animation */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    background: var(--white);
    transition: none !important;
}

/* Ensure the image itself is on the same compositor layer */
.photo-wall--flow .photo-frame img {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.photo-wall--flow .photo-frame:hover {
    transform: translate3d(0, -2px, 0) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
}

/* Per-image loading state — spinner sits behind the image, image fades
   in on load. Works for both curated (scattered) and flow (category) views. */
.photo-frame--img-loading {
    position: relative;
}

.photo-frame--img-loading::before,
.photo-frame--img-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 1;
}

.photo-frame--img-loading::before {
    /* Subtle backdrop so the spinner reads on a light frame */
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
}

.photo-frame--img-loading::after {
    /* The spinner ring itself */
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2.5px solid rgba(0, 26, 127, 0.15);
    border-top-color: var(--whs-navy, #001A7F);
    border-radius: 50%;
    animation: photo-img-spin 0.8s linear infinite;
}

@keyframes photo-img-spin {
    to { transform: rotate(360deg); }
}

/* Spinner is an overlay — image stays at full opacity throughout. This
   avoids a compositor bug where images that finished loading mid-paint
   would stay "invisible" (opacity:0 stuck) until a hover triggered a
   full repaint. */

.photo-wall--flow .photo-frame .frame-inner {
    width: 100%;
    height: 100%;
}

.photo-wall--flow .photo-frame .frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hide decorative elements that assume specific frame style layouts */
.photo-wall--flow .polaroid-bottom,
.photo-wall--flow .film-number,
.photo-wall--flow .film-holes,
.photo-wall--flow .negative-border,
.photo-wall--flow .stacked-bg,
.photo-wall--flow .frame-tape,
.photo-wall--flow .frame-pin,
.photo-wall--flow .gallery-card-badge,
.photo-wall--flow .frame-label-overlay {
    display: none !important;
}

.photo-wall--flow .photo-frame:hover {
    transform: translateY(-3px) !important;
}

/* Photo frames - clickable with WHITE backgrounds */
.photo-frame {
    position: relative;
    display: block;
    background: var(--white);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    cursor: pointer;
}

.photo-frame:hover {
    z-index: 10;
    transform: scale(1.03) rotate(0deg) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.frame-inner {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.frame-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(10%) contrast(1.02);
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* No filter variant for brighter photos */
.photo-frame--no-filter .frame-inner img {
    filter: none;
}

.photo-frame:hover .frame-inner img {
    filter: sepia(0%) contrast(1.05);
    transform: scale(1.08);
}

.photo-frame--no-filter:hover .frame-inner img {
    filter: brightness(1.05);
}

/* Label overlay inside photo frame */
.frame-label-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.frame-label-overlay .label-title {
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.frame-label-overlay .label-date {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Photo Frame Variants - all with clear white borders */
.photo-frame--hero {
    grid-column: 1 / 6;
    grid-row: 1 / 6;
    padding: 15px;
    transform: rotate(-1deg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.photo-frame--polaroid {
    grid-column: 6 / 9;
    grid-row: 1 / 5;
    padding: 12px 12px 50px 12px;
    transform: rotate(3deg);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18);
}

.photo-frame--film {
    grid-column: 9 / 13;
    grid-row: 1 / 4;
    background: var(--black);
    padding: 0;
    display: flex;
    transform: rotate(-2deg);
}

.photo-frame--taped {
    grid-column: 1 / 4;
    grid-row: 6 / 9;
    padding: 12px;
    transform: rotate(2deg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.photo-frame--tilted {
    grid-column: 10 / 13;
    grid-row: 4 / 8;
    padding: 12px 12px 50px 12px;
    transform: rotate(-5deg);
}

.photo-frame--landscape {
    grid-column: 4 / 10;
    grid-row: 5 / 9;
    padding: 15px;
    transform: rotate(1deg);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
}

.photo-frame--stacked {
    grid-column: 1 / 4;
    grid-row: 9 / 13;
    padding: 12px;
    transform: rotate(-3deg);
}

.photo-frame--negative {
    grid-column: 4 / 8;
    grid-row: 9 / 12;
    background: #2a2520;
    padding: 20px 15px 35px 15px;
    transform: rotate(2deg);
}

/* Tape Effects */
.frame-tape {
    position: absolute;
    background: rgba(255, 220, 180, 0.8);
    z-index: 5;
}

.frame-tape--top {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
}

.frame-tape--top-center {
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    width: 100px;
    height: 28px;
}

.frame-tape--corner-tl {
    top: -5px;
    left: -5px;
    width: 40px;
    height: 20px;
    transform: rotate(-45deg);
}

.frame-tape--corner-br {
    bottom: -5px;
    right: -5px;
    width: 40px;
    height: 20px;
    transform: rotate(-45deg);
}

/* Frame Labels */
.frame-label {
    position: absolute;
    bottom: -30px;
    left: 15px;
    display: flex;
    flex-direction: column;
}

.label-title {
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--gray-700);
}

.label-date {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-500);
}

/* Polaroid Bottom */
.polaroid-bottom {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

.polaroid-bottom span {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-600);
}

/* Film Strip */
.film-holes {
    width: 25px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 5px;
}

.film-holes::before,
.film-holes::after {
    content: '';
    width: 12px;
    height: 8px;
    background: var(--gray-900);
    border: 1px solid var(--gray-700);
}

.film-number {
    position: absolute;
    bottom: 5px;
    right: 30px;
    font-family: var(--font-body);
    font-size: 0.625rem;
    color: var(--sepia);
    letter-spacing: 0.1em;
}

.photo-frame--film .frame-inner {
    flex: 1;
}

/* Stacked Effect */
.stacked-bg {
    position: absolute;
    inset: 0;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stacked-bg:first-child {
    transform: rotate(4deg) translate(8px, 8px);
}

.stacked-bg--2 {
    transform: rotate(-2deg) translate(-5px, 5px);
}

.photo-frame--stacked .frame-inner {
    position: relative;
    z-index: 2;
}

/* Negative Border */
.negative-border {
    position: absolute;
    bottom: 8px;
    left: 15px;
    right: 15px;
}

.negative-border span {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    color: var(--sepia);
    opacity: 0.7;
}

/* Pin */
.frame-pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 30%, #e74c3c 0%, #c0392b 100%);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.frame-pin::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

/* FIXED: Memories CTA with proper styling */
.memories-cta {
    text-align: center;
    margin-top: var(--space-4xl);
    padding-top: var(--space-3xl);
}

.memories-cta p {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--gray-600);
    margin-bottom: var(--space-lg);
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-subheading);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    padding: var(--space-md) var(--space-xl);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn svg {
    width: 20px;
    height: 20px;
}

/* FIXED: Primary button with yellow, rounded, icon */
.btn-primary {
    background: var(--whs-yellow);
    color: var(--whs-navy);
}

.btn-primary:hover {
    background: var(--whs-yellow-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 189, 51, 0.4);
}

.btn-rounded {
    border-radius: 50px;
}

.btn-secondary {
    background: var(--whs-navy);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--whs-navy-light);
}

/* =====================================================
   BUILDING SECTION
   ===================================================== */
.building {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.building-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.building-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(30%) contrast(1.1);
}

/* FIXED: Dark overlay so text is visible */
.building-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 26, 127, 0.85);
}

.building-content {
    width: 100%;
    padding: var(--space-5xl) 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* FIXED: Building title is WHITE and clearly visible */
.building-title {
    font-family: var(--font-subheading);
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--white);
    margin-bottom: var(--space-3xl);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.building-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
    flex-wrap: wrap;
}

.stat-block {
    text-align: center;
}

.stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--whs-yellow);
    line-height: 1;
}

.stat-label {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--space-sm);
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.3);
}

.building-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* =====================================================
   HISTORY SECTION
   ===================================================== */
.history {
    padding: var(--space-5xl) 0;
    background: var(--paper);
}

.history-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.history-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-3xl);
}

.history-intro {
    margin-bottom: var(--space-2xl);
}

.history-lead {
    font-size: 1.25rem;
    color: var(--gray-800);
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.history-lead strong {
    color: var(--whs-navy);
}

.history-intro p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.history-card {
    background: var(--white);
    padding: var(--space-xl);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-100);
}

.history-card-icon {
    width: 48px;
    height: 48px;
    background: var(--whs-navy);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.history-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--whs-yellow);
}

.history-card h3 {
    font-family: var(--font-subheading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--whs-navy);
    margin-bottom: var(--space-md);
}

.history-list {
    list-style: none;
}

.history-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9375rem;
}

.history-list li:last-child {
    border-bottom: none;
}

.history-list li strong {
    color: var(--gray-800);
    font-weight: 500;
}

.history-list li span {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.history-list--alumni li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Alumni scroller — fixed-height list with a chunky navy arrow pill that
   pages through alumni in groups. Keeps the card chrome consistent even as
   the roster grows. */
.alumni-scroller {
    position: relative;
    margin-bottom: var(--space-md);
}

.alumni-scroll-list {
    /* Sized to fit exactly 4 whole alumni rows — both the name and
       achievement lines must be visible for the 4th item, never clipped. */
    max-height: 252px;
    overflow-y: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;      /* hide scrollbar in IE/Edge */
    scrollbar-width: none;         /* hide scrollbar in Firefox */
    padding: 0 2px;
}

.alumni-scroll-list::-webkit-scrollbar { display: none; }

/* Chunky paging button — sits below the list, full-width within the card,
   centred content. Picks up the navy/yellow palette as a secondary action. */
.alumni-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: var(--space-md) auto 0;
    padding: 7px 22px;
    background: #fff;
    color: var(--whs-navy, #001A7F);
    border: 2px solid var(--whs-navy, #001A7F);
    border-radius: 999px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 0 0 var(--whs-navy, #001A7F);
}

.alumni-scroll-btn-label {
    line-height: 1;
}

.alumni-scroll-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--whs-yellow, #FFBD33);
    color: var(--whs-navy, #001A7F);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease;
}

.alumni-scroll-btn-icon svg {
    width: 16px;
    height: 16px;
}

.alumni-scroll-btn:hover {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 0 rgba(0, 26, 127, 0.35);
}

.alumni-scroll-btn:hover .alumni-scroll-btn-icon {
    background: var(--whs-yellow, #FFBD33);
    transform: translateY(2px);
}

.alumni-scroll-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 0 var(--whs-navy, #001A7F);
}

/* "Wrap around" state — when we hit the bottom, the button flips to a
   back-to-top affordance. */
.alumni-scroll-btn.is-wrap .alumni-scroll-btn-icon svg {
    transform: rotate(180deg);
}

.history-note {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: var(--space-md);
    line-height: 1.6;
}

/* Alumni Card CTA */
.history-card--alumni {
    display: flex;
    flex-direction: column;
}

.alumni-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: auto;
    padding: var(--space-md) var(--space-lg);
    background: var(--whs-yellow);
    color: var(--whs-navy);
    text-decoration: none;
    border-radius: 8px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.alumni-cta svg {
    width: 16px;
    height: 16px;
}

.alumni-cta:hover {
    background: var(--whs-navy);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 26, 127, 0.3);
}

/* Houses Grid */
.houses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.house {
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    text-align: center;
}

.house span {
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.house--busli {
    background: #1e40af;
    color: white;
}

.house--mortain {
    background: #1f2937;
    color: white;
}

.house--rollo {
    background: #f3f4f6;
    color: #1f2937;
    border: 1px solid var(--gray-200);
}

.house--warenne {
    background: var(--whs-yellow);
    color: var(--whs-navy);
}

/* History Timeline Sidebar */
.history-timeline {
    background: var(--whs-navy);
    padding: var(--space-xl);
    border-radius: 12px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.timeline-title {
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--whs-yellow);
    margin-bottom: var(--space-lg);
}

.timeline-compact {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.timeline-item-compact {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.timeline-year-compact {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--whs-yellow);
    min-width: 50px;
}

.timeline-text-compact {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.timeline-text-compact strong {
    color: var(--white);
    font-weight: 600;
}

/* Highlight the final bell milestone */
.timeline-item--highlight {
    background: rgba(255, 189, 51, 0.15);
    margin: var(--space-sm) calc(var(--space-md) * -1);
    padding: var(--space-sm) var(--space-md);
    border-radius: 8px;
    border-left: 3px solid var(--whs-yellow);
}

.timeline-item--highlight .timeline-text-compact {
    color: var(--whs-yellow);
    font-weight: 500;
}

/* =====================================================
   SHARE SECTION - REDESIGNED
   ===================================================== */
.share {
    padding: var(--space-5xl) 0;
    background: var(--cream);
}

.share-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4xl);
    align-items: start;
}

.share-intro {
    position: sticky;
    top: 120px;
}

.share-text {
    font-size: 1.125rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-top: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.share-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.share-feature {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: var(--whs-navy);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--whs-yellow);
}

.feature-text {
    display: flex;
    flex-direction: column;
}

.feature-text strong {
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--whs-navy);
    margin-bottom: 2px;
}

.feature-text span {
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Share Form Card */
.share-form-card {
    background: var(--white);
    padding: var(--space-2xl);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-100);
}

.form-title {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--whs-navy);
    margin-bottom: var(--space-xl);
}

.share-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-group label {
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--gray-700);
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: var(--space-md);
    background: var(--cream);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* File Drop */
.file-drop {
    position: relative;
    border: 2px dashed var(--gray-300);
    padding: var(--space-2xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--cream);
    border-radius: 12px;
}

.file-drop:hover,
.file-drop.dragover {
    border-color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.02);
}

.file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.file-drop-content {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.file-drop-icon {
    margin-bottom: var(--space-md);
}

.file-drop-icon svg {
    width: 48px;
    height: 48px;
    color: var(--gray-400);
}

.file-drop-text {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xs);
}

/* --- Share Preferences Checkboxes --- */
.share-prefs-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.share-pref-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--gray-600);
    cursor: pointer;
    user-select: none;
}

.share-pref-check input[type="checkbox"] {
    display: none;
}

.share-pref-indicator {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--gray-300);
    background: var(--white);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.share-pref-check input:checked + .share-pref-indicator {
    background: var(--whs-navy);
    border-color: var(--whs-navy);
}

.share-pref-check input:checked + .share-pref-indicator::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.share-prefs-hint {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 6px;
}

.file-drop-hint {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-400);
}

.file-drop-message {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: #fff;
    font-size: 0.75rem;
    font-family: var(--font-body);
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-submit {
    background: var(--whs-yellow);
    color: var(--whs-navy);
    padding: var(--space-lg) var(--space-xl);
    justify-content: center;
    margin-top: var(--space-md);
    border-radius: 50px;
    font-size: 1rem;
}

.btn-submit:hover {
    background: var(--whs-yellow-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 189, 51, 0.4);
}

.btn-submit svg {
    width: 20px;
    height: 20px;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: var(--black);
    color: var(--white);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4xl);
    padding-bottom: var(--space-3xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* FIXED: Footer logo - WALES is WHITE, FOREVER is yellow */
.footer-logo .logo-wales {
    color: var(--white);
}

.footer-logo .logo-forever {
    color: var(--whs-yellow);
}

.footer-strapline {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--whs-yellow);
    line-height: 1.7;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

.footer-col h4 {
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--whs-yellow);
    margin-bottom: var(--space-lg);
}

.footer-col a {
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: var(--space-sm);
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-xl);
}

.footer-location {
    display: flex;
    gap: var(--space-lg);
}

.footer-location span {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
}

.footer-copy {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.footer-copy span {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-tagline {
    font-family: var(--font-subheading) !important;
    letter-spacing: 0.1em !important;
    color: var(--whs-yellow) !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1200px) {
    .photo-wall {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 100px;
    }

    .photo-frame--hero {
        grid-column: 1 / 4;
        grid-row: 1 / 4;
    }

    .photo-frame--polaroid {
        grid-column: 4 / 7;
        grid-row: 1 / 4;
    }

    .photo-frame--film {
        grid-column: 1 / 4;
        grid-row: 4 / 6;
    }

    .photo-frame--taped {
        grid-column: 4 / 7;
        grid-row: 4 / 6;
    }

    .photo-frame--tilted {
        grid-column: 1 / 3;
        grid-row: 6 / 9;
    }

    .photo-frame--landscape {
        grid-column: 3 / 7;
        grid-row: 6 / 9;
    }

    .photo-frame--stacked {
        grid-column: 1 / 3;
        grid-row: 9 / 12;
    }

    .photo-frame--negative {
        grid-column: 3 / 7;
        grid-row: 9 / 11;
    }

    .history-content {
        grid-template-columns: 1fr;
    }

    .history-timeline {
        position: static;
    }
}

@media (max-width: 1024px) {
    .intro-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .share-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .share-intro {
        position: static;
    }

    .history-grid {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Hide extra polaroids on tablet */
    .hero-polaroid--2,
    .hero-polaroid--3 {
        display: none;
    }

    .hero-polaroid--1 {
        top: 8%;
        right: 4%;
    }

    /* Filter buttons wrap better */
    .photo-filters {
        padding: 0 var(--space-md);
    }

    .filter-btn {
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-md);
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--whs-navy);
        padding: var(--space-xl);
        gap: var(--space-md);
    }

    .nav.scrolled .nav-links {
        background: var(--cream);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-stamp,
    .hero-polaroid {
        display: none;
    }

    .hero-content {
        padding: var(--space-2xl);
    }

    .photo-filters {
        gap: var(--space-xs);
    }

    .filter-btn svg {
        display: none;
    }

    .photo-wall {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 150px;
    }

    .photo-frame--hero,
    .photo-frame--polaroid,
    .photo-frame--film,
    .photo-frame--taped,
    .photo-frame--tilted,
    .photo-frame--landscape,
    .photo-frame--stacked,
    .photo-frame--negative {
        grid-column: span 1;
        grid-row: span 1;
        transform: none !important;
    }

    .photo-frame--landscape {
        grid-column: span 2;
    }

    .building-stats {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-nav {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .footer-location {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }

    .photo-wall {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
    }

    .photo-frame--landscape {
        grid-column: span 1;
    }

    .footer-nav {
        grid-template-columns: 1fr;
    }

    .share-features {
        gap: var(--space-md);
    }
}

/* Scroll Animations */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   CAPTCHA
   ===================================================== */
.captcha-group {
    margin-top: var(--space-sm);
}

.captcha-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--whs-navy);
    border-radius: 8px;
    margin-bottom: var(--space-sm);
}

.captcha-question {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--whs-yellow);
    flex: 1;
}

.captcha-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: var(--space-sm);
    cursor: pointer;
    color: var(--white);
    transition: all 0.3s ease;
}

.captcha-refresh:hover {
    border-color: var(--whs-yellow);
    color: var(--whs-yellow);
    background: rgba(255, 189, 51, 0.1);
}

.captcha-refresh svg {
    width: 18px;
    height: 18px;
}

/* ---------- Compact inline captcha — image + input + refresh, all one row ---------- */
.captcha-inline {
    /* !important needed because .form-group forces flex-direction:column.
       Without this, the image / input / button still stack vertically. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: transparent;
    border: none;
}

/* Visually-hidden label — screen readers only */
.captcha-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.captcha-image {
    display: block;
    height: 36px;
    width: auto;
    border-radius: 6px;
    border: 1px solid rgba(0, 26, 127, 0.14);
    background: #f5f1e9;
    flex: 0 0 auto;
    user-select: none;
    -webkit-user-select: none;
}

.captcha-answer-input {
    /* Sized for 5 characters — was flex:1 which made it fill the whole row */
    flex: 0 0 auto;
    width: 120px;
    padding: 7px 10px !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    border: 1px solid #d0d3d8 !important;
    border-radius: 7px !important;
    background: #fff !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-feature-settings: "tnum" 1;
    margin: 0 !important;
    height: 36px;
    box-sizing: border-box;
}

.captcha-answer-input:focus {
    border-color: var(--whs-navy) !important;
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08) !important;
    outline: none;
}

.captcha-inline .captcha-refresh {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 26, 127, 0.15);
    border-radius: 7px;
    background: #fff;
    color: var(--whs-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.25s ease;
}

.captcha-inline .captcha-refresh:hover {
    border-color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.06);
    transform: rotate(-45deg);
}

.captcha-inline .captcha-refresh svg { width: 14px; height: 14px; }

/* ==================================================
   Admin → Site Content — Facebook-style form polish.
   Scoped to .admin-content so other admin pages are
   untouched.
   ================================================== */

/* Forms inside the content panels live as "cards" with soft shadow */
.admin-content .content-form {
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.15rem;
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.03);
    gap: 0.9rem;
}

.admin-content .content-form--sub {
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    padding: 1.1rem 1.25rem 1.15rem;
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.03);
    margin-bottom: 1rem;
}

.admin-content .content-sub-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0 0.75rem;
    font-family: var(--font-subheading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--whs-navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-content .content-sub-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--whs-yellow);
    flex-shrink: 0;
}

/* More breathing room below the big panel heading (e.g. "Our Building") */
.admin-content .vtabs-panel-header {
    margin-bottom: 1.1rem;
}

/* ---------- Submissions page — global search bar ---------- */
.subs-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem 0.55rem 2.4rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.subs-search:focus-within {
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1);
}

.subs-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8d91;
    pointer-events: none;
}

.subs-search:focus-within .subs-search-icon { color: var(--whs-navy); }

.subs-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #1c1e21;
    padding: 0.25rem 0;
}

.subs-search-input::placeholder { color: #8a8d91; }

.subs-search-clear {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #65676b;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.subs-search-clear:hover {
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
}

.subs-search-hint {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.08);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 500;
    font-feature-settings: "tnum" 1;
}

.subs-search-hint[hidden] { display: none; }

/* Per-table search boxes are redundant with the global one — hide them.
   They're still in the DOM so the global search can forward into them. */
.admin-subs-page .gl-search { display: none; }

/* Tab-button visual feedback during active search */
.vtabs-tab.vtabs-tab--no-matches {
    opacity: 0.45;
}

.vtabs-tab.vtabs-tab--has-matches .vtabs-tab-count {
    color: var(--whs-navy);
    font-weight: 600;
}

/* Rich panel header: icon chip + stacked title/subtitle */
.vtabs-panel-header--rich {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef0f2;
}

.vtabs-panel-head-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy);
    margin-top: 2px;
}

.vtabs-panel-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vtabs-panel-header--rich .vtabs-panel-title {
    margin: 0;
    font-family: var(--font-subheading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--whs-navy);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.vtabs-panel-subtitle {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #65676b;
    line-height: 1.4;
    font-weight: 400;
}

/* ---------- Accordion-style sub-sections (content + settings pages) ---------- */
.content-accordion {
    padding: 0 !important;    /* override the form-card padding — header+body manage it */
    overflow: hidden;         /* keep header bg flush with card radius */
    gap: 0;
    transition: box-shadow 0.2s ease;
    /* Base card chrome so accordions can live outside .content-form--sub too */
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.03);
    margin-bottom: 0.7rem;
}

.content-accordion .content-sub-title {
    cursor: pointer;
    user-select: none;
    margin: 0;
    /* Header gets a tinted background + full-width padding so the click
       target is obvious and visually separate from the body below */
    padding: 0.7rem 1.1rem;
    background: #f7f8fa;
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.2s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-subheading);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--whs-navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.content-accordion .content-sub-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background: var(--whs-yellow);
    flex-shrink: 0;
}

.content-accordion .content-sub-title:hover {
    background: #eef0f3;
    color: var(--whs-navy-light, #001A7F);
}

.content-accordion.is-open .content-sub-title {
    background: #f0f2f5;
    border-bottom-color: #e4e6eb;
}

.content-accordion.is-open .content-sub-title:hover {
    background: #e9ecef;
}

/* Chevron on the right side of the title */
.content-sub-chev {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #65676b;
    background: rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}

.content-accordion:hover .content-sub-chev {
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy);
}

.content-accordion.is-open .content-sub-chev {
    transform: rotate(180deg);
    background: rgba(0, 26, 127, 0.12);
    color: var(--whs-navy);
}

/* Collapsible body — sits below the tinted header, padded once open */
.content-sub-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.25s ease;
    padding: 0 1.25rem;
    background: #fff;
}

.content-accordion.is-open .content-sub-body {
    max-height: 2400px;     /* generous cap for the longest history section */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1.15rem;
}

/* Labels above inputs — small, neat, FB grey */
.admin-content .form-group label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: #65676b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

/* Inputs + textareas — rounded, subtle border, clean focus ring */
.admin-content .form-group input[type="text"],
.admin-content .form-group input[type="email"],
.admin-content .form-group input[type="url"],
.admin-content .form-group input[type="number"],
.admin-content .form-group textarea,
.admin-content .form-group select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #1c1e21;
    background: #f0f2f5;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.admin-content .form-group input:hover,
.admin-content .form-group textarea:hover,
.admin-content .form-group select:hover {
    background: #e9eaed;
}

.admin-content .form-group input:focus,
.admin-content .form-group textarea:focus,
.admin-content .form-group select:focus {
    background: #fff;
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1);
    outline: none;
}

.admin-content .form-group textarea {
    min-height: 84px;
    resize: vertical;
    line-height: 1.5;
}

/* Repeater rows — inputs align nicely, the × sits flush right */
.admin-content .content-repeater {
    gap: 0.4rem;
}

.admin-content .content-repeater-row {
    background: #f7f8fa;
    border: 1px solid #eef0f2;
    border-radius: 10px;
    padding: 0.35rem 0.4rem 0.35rem 0.55rem;
    gap: 0.4rem;
}

.admin-content .content-repeater-row input[type="text"] {
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    padding: 0.45rem 0.7rem !important;
    font-size: 0.88rem !important;
    border-radius: 7px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.admin-content .content-repeater-row input[type="text"]:focus {
    border-color: var(--whs-navy) !important;
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1) !important;
    outline: none;
}

/* <select> inside a repeater row — match the input styling */
.admin-content .content-repeater-row select {
    flex: 0 0 auto;
    min-width: 140px;
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    padding: 0.45rem 2rem 0.45rem 0.7rem !important;
    font-size: 0.88rem !important;
    font-family: var(--font-body);
    color: #1c1e21;
    border-radius: 7px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365676b' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.55rem center !important;
    background-size: 12px !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-content .content-repeater-row select:focus {
    border-color: var(--whs-navy) !important;
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1) !important;
    outline: none;
}

.admin-content .content-repeater-row select:hover {
    border-color: #d0d3d8 !important;
}

/* Catch-all: any bare <input>/<select>/<textarea> sitting directly inside
   a .content-form without a .form-group wrapper (legacy markup in a few
   places) still picks up the FB-style chrome */
.admin-content .content-form > input[type="text"],
.admin-content .content-form > input[type="email"],
.admin-content .content-form > input[type="url"],
.admin-content .content-form > input[type="number"],
.admin-content .content-form > textarea,
.admin-content .content-form > select,
.admin-content .content-sub-body > input[type="text"],
.admin-content .content-sub-body > textarea,
.admin-content .content-sub-body > select,
.admin-content .content-form .form-row > input[type="text"],
.admin-content .content-form .form-row > input[type="email"],
.admin-content .content-form .form-row > input[type="number"],
.admin-content .content-form .form-row > textarea,
.admin-content .content-form .form-row > select {
    width: 100%;
    padding: 0.55rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #1c1e21;
    background: #f0f2f5;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.admin-content .content-form > input:focus,
.admin-content .content-form > textarea:focus,
.admin-content .content-form > select:focus,
.admin-content .content-sub-body > input:focus,
.admin-content .content-sub-body > textarea:focus,
.admin-content .content-sub-body > select:focus,
.admin-content .content-form .form-row > input:focus,
.admin-content .content-form .form-row > textarea:focus,
.admin-content .content-form .form-row > select:focus {
    background: #fff;
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.1);
    outline: none;
}

/* "+ Add …" button — dashed outline so it reads as an add-affordance,
   not as another input or save action */
.admin-content .content-form .btn-xs,
.admin-content .content-form .btn.btn-secondary.btn-xs {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--whs-navy);
    background: #fff;
    border: 1px dashed rgba(0, 26, 127, 0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    width: auto;
}

.admin-content .content-form .btn-xs:hover,
.admin-content .content-form .btn.btn-secondary.btn-xs:hover {
    background: rgba(0, 26, 127, 0.04);
    border-color: var(--whs-navy);
    border-style: solid;
    transform: translateY(-1px);
}

/* Save button — bold FB-blue-style primary, fixed width, sits flush left */
.admin-content .content-form button[type="submit"].btn-primary {
    align-self: flex-start;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 0.01em;
    text-transform: none;
    width: auto;
    box-shadow: 0 1px 2px rgba(0, 26, 127, 0.18);
}

/* Form rows — nicer gap and predictable layout */
.admin-content .form-row {
    gap: 0.85rem;
}

.admin-content .form-row .form-group {
    flex: 1;
    min-width: 0;
}

/* Standalone label above repeater list — match the field-label style */
.admin-content .content-list-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: #65676b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.25rem;
    margin-bottom: 0.2rem;
}

/* Remove × button in a repeater row — soft by default, red on hover */
.admin-content .content-repeater-row .btn-icon--remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: #8a8d91;
    font-size: 1.05rem;
    transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.admin-content .content-repeater-row .btn-icon--remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    transform: scale(1.08);
}

/* Form hint text (the "(HTML allowed: <strong>)" little notes) */
.admin-content .form-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: #8a8d91;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

/* =====================================================
   FORM MESSAGES
   ===================================================== */
.form-message {
    padding: var(--space-md) var(--space-lg);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    margin-bottom: var(--space-lg);
    transition: opacity 0.3s ease;
}

.form-message--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.form-message--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* =====================================================
   MEMORIES CTA BUTTONS
   ===================================================== */
.memories-cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================
   ADMIN PANEL — Refined Institutional Design
   WHS Navy + Yellow accent on warm cream
   ===================================================== */

/* --- Admin Body & Layout --- */
.admin-body {
    background: #f0f2f5;
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(0, 26, 127, 0.025) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(255, 189, 51, 0.02) 0%, transparent 50%);
}

.admin-layout {
    min-height: 100vh;
    display: flex;
}

/* --- Sidebar --- */
.admin-sidebar {
    width: 260px;
    background: #1c1e21;
    background-image:
        linear-gradient(180deg, #1c1e21 0%, #141618 100%);
    padding: var(--space-xl) var(--space-lg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M5 0h1L0 5V4zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.admin-sidebar > * {
    position: relative;
    z-index: 1;
}

.admin-sidebar-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar-header .footer-logo {
    margin-bottom: var(--space-sm);
}

.admin-badge {
    display: block;
    text-align: center;
    margin: 0.75rem auto 0;
    font-family: var(--font-subheading);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--whs-navy);
    background: var(--whs-yellow);
    padding: 4px 12px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* --- Admin Navigation --- */
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 11px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-subheading);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.admin-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.admin-nav-link:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.07);
}

.admin-nav-link.active {
    color: var(--white);
    background: rgba(255, 189, 51, 0.12);
    font-weight: 500;
}

.admin-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--whs-yellow);
    border-radius: 0 3px 3px 0;
}

.admin-nav-link.active svg {
    color: var(--whs-yellow);
}

/* Pending count badge in the sidebar nav (e.g. "Submissions  [3]") */
.admin-nav-text { flex: 1; }

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    font-feature-settings: "tnum" 1;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
    animation: adminNavBadgePulse 2.5s ease-in-out infinite;
}

@keyframes adminNavBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav-badge { animation: none; }
}

/* --- Sidebar Footer --- */
.admin-sidebar-footer {
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-user-name {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.admin-logout-link {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-logout-link:hover {
    color: var(--whs-yellow);
}

/* --- Main Content --- */
.admin-main {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    padding: 40px 48px;
    min-height: 100vh;
}

.admin-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 26, 127, 0.06);
}

.admin-page-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--whs-navy);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.admin-page-subtitle {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin-top: 6px;
    line-height: 1.5;
}

.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--whs-navy-light);
    text-decoration: none;
    margin-bottom: var(--space-lg);
    transition: all 0.2s ease;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(0, 26, 127, 0.04);
}

.admin-back-link:hover {
    color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.08);
}

/* --- Stats Cards --- */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.admin-stat-card {
    background: var(--white);
    padding: 20px 22px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.admin-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gray-200);
    transition: background 0.25s ease;
}

.admin-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.admin-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--whs-navy);
    line-height: 1;
    letter-spacing: -0.02em;
}

.admin-stat-label {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--gray-400);
    text-transform: uppercase;
    margin-top: 8px;
}

.admin-stat-card--pending .admin-stat-value { color: #b45309; }
.admin-stat-card--pending::after { background: #f59e0b; }
.admin-stat-card--approved .admin-stat-value { color: #047857; }
.admin-stat-card--approved::after { background: #10b981; }
.admin-stat-card--featured .admin-stat-value { color: var(--whs-navy); }
.admin-stat-card--featured::after { background: var(--whs-yellow); }

/* --- Admin Sections --- */
.admin-section {
    margin-bottom: 40px;
}

.admin-section-title {
    font-family: var(--font-subheading);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--whs-navy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.02em;
}

.admin-section-title svg {
    color: var(--whs-yellow);
}

/* --- Submission Cards --- */
.submission-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.submission-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 18px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.submission-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    border-color: rgba(0, 26, 127, 0.1);
}

.submission-card--approved {
    border-left: 3px solid #10b981;
}

.submission-thumb-wrap {
    flex-shrink: 0;
}

.submission-thumb {
    width: 96px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.submission-thumb-placeholder {
    width: 96px;
    height: 68px;
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
}

.submission-info {
    flex: 1;
    min-width: 0;
}

.submission-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.submission-meta strong {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
}

.submission-role,
.submission-years {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--gray-400);
}

.submission-excerpt {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.submission-time {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    color: var(--gray-400);
    letter-spacing: 0.02em;
}

.submission-actions {
    flex-shrink: 0;
}

/* --- Status Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-family: var(--font-subheading);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--pending { background: #fef3c7; color: #92400e; }
.badge--approved { background: #d1fae5; color: #065f46; }
.badge--rejected { background: #fee2e2; color: #991b1b; }
.badge--featured { background: var(--whs-yellow); color: var(--whs-navy); font-weight: 600; }
.badge--category { background: rgba(0, 26, 127, 0.06); color: var(--whs-navy); }

/* --- Button Variants --- */
.btn-sm {
    padding: 7px 14px;
    font-size: 0.75rem;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.btn-primary.btn-sm,
.admin-main .btn-primary.btn-sm {
    background: var(--whs-navy);
    color: var(--white);
    border: none;
    font-family: var(--font-subheading);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary.btn-sm:hover {
    background: var(--whs-navy-light);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 26, 127, 0.2);
}

.btn-approve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #059669;
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3);
}

.btn-approve:hover {
    background: #047857;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-reject {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    color: #b91c1c;
    border: 1.5px solid #fecaca;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    justify-content: center;
}

.btn-unapprove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff7ed;
    color: #b45309;
    border: 1.5px solid #fcd9a7;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-unapprove:hover {
    background: #fceaca;
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}

.btn-unapprove:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-reject:hover {
    background: #fef2f2;
    border-color: #f87171;
    transform: translateY(-1px);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 7px 14px;
    border-radius: 6px;
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--white);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 7px 14px;
    border-radius: 6px;
}

.btn-secondary:hover {
    background: var(--cream);
    border-color: var(--gray-300);
}

/* --- Review Action Buttons --- */
.review-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: var(--space-lg);
}

/* --- Empty State --- */
.admin-empty {
    text-align: center;
    padding: 56px 32px;
    background: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--gray-200);
}

.admin-empty svg {
    margin-bottom: 12px;
    color: var(--gray-300);
    opacity: 0.7;
}

.admin-empty p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-400);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =====================================================
   ADMIN LOGIN
   ===================================================== */
.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--whs-navy);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(55, 99, 171, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(45, 51, 135, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 14, 64, 0.6) 0%, transparent 60%);
    padding: var(--space-xl);
    position: relative;
}

.admin-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M5 0h1L0 5V4zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.admin-login-card {
    background: var(--white);
    padding: 40px 36px;
    border-radius: 14px;
    width: 100%;
    max-width: 400px;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
    z-index: 1;
    animation: loginCardEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginCardEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.admin-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.admin-login-logo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
}

.admin-login-logo .logo-text-wales {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--whs-navy);
}

.admin-login-logo .logo-text-forever {
    font-family: var(--font-subheading);
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--whs-navy-light);
}

.admin-login-divider {
    width: 36px;
    height: 3px;
    background: var(--whs-yellow);
    margin: 0 auto 16px;
    border-radius: 2px;
}

.admin-login-title {
    font-family: var(--font-subheading);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--whs-navy);
    margin-bottom: 4px;
}

.admin-login-subtitle {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-400);
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Override form input styles for white-card context */
.admin-login-card .form-group input,
.admin-login-card .form-group select {
    background: #f9f7f4;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.admin-login-card .form-group input:focus,
.admin-login-card .form-group select:focus {
    background: var(--white);
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
    outline: none;
}

.admin-login-card .form-group label {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.admin-login-card .btn-submit {
    margin-top: 4px;
    padding: 14px var(--space-xl);
    font-size: 0.875rem;
    border-radius: 8px;
    letter-spacing: 0.04em;
}

.admin-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

.admin-login-footer a {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-400);
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-login-footer a:hover {
    color: var(--whs-navy);
}

/* ==================================================
   Admin login — DARK variant (matches the new admin
   chrome: charcoal sidebar + dark top bar + yellow accent)
   ================================================== */
.admin-login-body {
    margin: 0;
    background: #1c1e21;
    background-image: linear-gradient(180deg, #1c1e21 0%, #141618 100%);
}

.admin-login--dark {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    background-image: none;
    padding: 2.5rem 1rem;
    position: relative;
}

/* Subtle dot grid for atmosphere */
.admin-login--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 189, 51, 0.04) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

.admin-login--dark .admin-login-card {
    background: #2a2d31;
    color: #fff;
    padding: 36px 34px 30px;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 24px 56px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Yellow stripe accent across the top of the card */
.admin-login--dark .admin-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--whs-yellow, #ffbd33), #f59e0b);
}

.admin-login--dark .admin-login-header {
    text-align: center;
    margin-bottom: 26px;
}

.admin-login--dark .admin-login-logo {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.admin-login--dark .admin-login-logo .logo-text-wales {
    font-family: var(--font-heading, Roboto);
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #fff;
}

.admin-login--dark .admin-login-logo .logo-text-forever {
    font-family: var(--font-subheading, Oswald);
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.16em;
    color: var(--whs-yellow, #ffbd33);
}

.admin-login-badge {
    display: inline-block;
    font-family: var(--font-subheading, Oswald);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--whs-navy);
    background: var(--whs-yellow, #ffbd33);
    padding: 4px 12px;
    border-radius: 3px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.admin-login--dark .admin-login-subtitle {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.admin-login--dark .form-group label {
    font-family: var(--font-body, Roboto);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
    display: block;
}

/* Input with leading icon */
.login-input-wrap {
    position: relative;
}

.login-input-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: color 0.15s ease;
}

.admin-login--dark .login-input-wrap input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 8px;
    padding: 11px 14px 11px 38px;
    font-size: 0.9rem;
    font-family: var(--font-body, Roboto);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.admin-login--dark .login-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.admin-login--dark .login-input-wrap input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--whs-yellow, #ffbd33);
    box-shadow: 0 0 0 3px rgba(255, 189, 51, 0.18);
    outline: none;
}

.admin-login--dark .login-input-wrap input:focus + svg,
.admin-login--dark .login-input-wrap:focus-within .login-input-icon {
    color: var(--whs-yellow, #ffbd33);
}

.admin-login--dark .form-message--error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.admin-login-submit {
    width: 100%;
    justify-content: center;
    background: var(--whs-yellow, #ffbd33);
    color: #1c1e21;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
    margin-top: 6px;
    box-shadow: 0 4px 14px rgba(255, 189, 51, 0.25);
}

.admin-login-submit:hover {
    background: #ffc94d;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 189, 51, 0.35);
}

.admin-login-submit:active { transform: translateY(0); }

.admin-login--dark .admin-login-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-login--dark .admin-login-footer a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.admin-login--dark .admin-login-footer a:hover { color: var(--whs-yellow, #ffbd33); }

.admin-login-meta {
    margin-top: 1.5rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 1;
}

/* --- Setup page --- */
.setup-done {
    text-align: center;
}

.setup-done p {
    font-family: var(--font-body);
}

.setup-done code {
    display: block;
    padding: 12px 16px;
    background: #f9f7f4;
    border-radius: 8px;
    font-size: 0.8125rem;
    margin-bottom: 20px;
    word-break: break-all;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}

/* =====================================================
   ADMIN REVIEW PAGE
   ===================================================== */
.review-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.review-card {
    background: var(--white);
    border-radius: 10px;
    padding: 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.review-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.review-date {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    color: var(--gray-400);
    margin-left: auto;
    letter-spacing: 0.02em;
}

.review-field {
    margin-bottom: 22px;
}

.review-field label {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--gray-400);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.review-field p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-800);
    line-height: 1.5;
}

.review-field--meta {
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 8px;
}

.review-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.review-memory-text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-800);
    line-height: 1.8;
    background: #f9f7f4;
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid var(--whs-yellow);
    position: relative;
}

.review-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.review-photo {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.review-photo:hover {
    transform: scale(1.02);
}

.review-photo img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.review-photo-name {
    display: block;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    background: #f9f7f4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Review Action Panel --- */
.review-action-card {
    background: var(--white);
    border-radius: 10px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 20px;
}

.review-action-title {
    font-family: var(--font-subheading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--whs-navy);
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

.review-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin: 18px 0;
}

/* --- Checkbox --- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--whs-navy);
    cursor: pointer;
}

.form-hint {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    margin-top: 4px;
    padding-left: 28px;
    line-height: 1.4;
}

/* Admin selects and inputs */
.admin-main .form-group select,
.review-action-card select {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #f9f7f4;
    color: var(--gray-800);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: auto;
}

.admin-main .form-group select:focus,
.review-action-card select:focus {
    background: var(--white);
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
    outline: none;
}

.admin-main .form-group input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #f9f7f4;
    color: var(--gray-800);
    transition: all 0.2s ease;
}

.admin-main .form-group input:focus {
    background: var(--white);
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
    outline: none;
}

.admin-main .form-group label {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.admin-main .form-group {
    margin-bottom: 16px;
}

/* =====================================================
   ADMIN GALLERY MANAGEMENT
   ===================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.gallery-card {
    background: var(--white);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.gallery-card--featured {
    border: 2px solid var(--whs-yellow);
    box-shadow: 0 2px 10px rgba(255, 189, 51, 0.15);
}

.gallery-card-image {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.gallery-card-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: var(--white);
    font-family: var(--font-subheading);
    font-size: 0.625rem;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
}

.gallery-card-no-image {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--gray-300);
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
}

.gallery-card-body {
    padding: 14px 16px 16px;
}

.gallery-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.gallery-card-meta strong {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}

.gallery-card-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-400);
    line-height: 1.45;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.gallery-inline-form {
    margin: 0;
}

.gallery-category-select {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    padding: 5px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    background: #f9f7f4;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.gallery-category-select:focus {
    border-color: var(--whs-navy);
    outline: none;
    background: var(--white);
}

.btn-featured-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--whs-yellow);
    color: var(--whs-navy);
    border: none;
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 7px 12px;
    border-radius: 6px;
}

.btn-featured-toggle:hover {
    background: var(--whs-yellow-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255, 189, 51, 0.3);
}

/* =====================================================
   USER MANAGEMENT
   ===================================================== */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-card {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.user-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-avatar {
    width: 42px;
    height: 42px;
    background: var(--whs-navy);
    color: var(--whs-yellow);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-info strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
}

.user-created {
    display: block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    margin-top: 2px;
}

/* =====================================================
   MEMORIES PAGE (PUBLIC) — MEMORY WALL
   ===================================================== */
.memories-page {
    padding-top: 100px;
    padding-bottom: var(--space-5xl);
    min-height: 80vh;
    background: var(--cream);
}

.memories-page-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.memories-page-header .photo-filters {
    margin-top: var(--space-2xl);
}

.memories-page-header .filter-btn {
    text-decoration: none;
}

/* --- Memory Wall Masonry --- */
.wall-masonry {
    columns: 3;
    column-gap: 24px;
    padding: 0 8px;
}

/* --- Base Frame --- */
.wall-frame {
    break-inside: avoid;
    position: relative;
    margin-bottom: 28px;
    background: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease, z-index 0s;
    animation: wallFadeIn 0.5s ease both;
}

.wall-frame:hover {
    z-index: 10;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

@keyframes wallFadeIn {
    from { opacity: 0; transform: translateY(20px) rotate(0deg); }
    to { opacity: 1; }
}

/* Badge on the tile indicating the memory has multiple photos */
.wall-frame-photocount {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 3px;
    pointer-events: none;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.wall-frame-photocount svg {
    opacity: 0.85;
}

/* --- Frame Image Container (anchor to single-memory page) --- */
.wall-frame-img {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.wall-frame-img img {
    width: 100%;
    display: block;
    filter: sepia(8%) contrast(1.02);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.wall-frame:hover .wall-frame-img img {
    filter: sepia(0%) contrast(1.05);
    transform: scale(1.04);
}

.wall-frame-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,26,127,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.wall-frame-hover svg {
    color: #fff;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.wall-frame-img:hover .wall-frame-hover {
    opacity: 1;
}

/* --- Category Badge --- */
.wall-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--whs-navy);
    color: var(--whs-yellow);
    padding: 3px 9px;
    border-radius: 4px;
    font-family: var(--font-subheading);
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
}
.wall-badge--quote {
    top: auto;
    bottom: 10px;
    right: 10px;
}

/* ==========================================
   FRAME STYLE VARIANTS
   ========================================== */

/* --- Polaroid: white border, extra bottom, slight tilt --- */
.wall-frame--polaroid {
    padding: 10px 10px 44px 10px;
    border-radius: 2px;
}

/* --- Taped: corner tape strips --- */
.wall-frame--taped {
    padding: 8px;
    border-radius: 1px;
}

.wall-tape {
    position: absolute;
    background: rgba(255, 220, 180, 0.75);
    z-index: 5;
}
.wall-tape--tl {
    top: -5px;
    left: -5px;
    width: 36px;
    height: 18px;
    transform: rotate(-45deg);
}
.wall-tape--br {
    bottom: -5px;
    right: -5px;
    width: 36px;
    height: 18px;
    transform: rotate(-45deg);
}
.wall-tape--top {
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 22px;
}

/* --- Pinned: pushpin at top centre --- */
.wall-frame--pinned {
    padding: 8px;
    border-radius: 2px;
}

.wall-pin {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 35% 35%, #e74c3c 0%, #c0392b 100%);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 5;
}
.wall-pin::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
}

/* --- Tilted: polaroid with stronger rotation --- */
.wall-frame--tilted {
    padding: 10px 10px 44px 10px;
    border-radius: 2px;
}

/* --- Plain: clean card, no decoration --- */
.wall-frame--plain {
    padding: 6px;
    border-radius: 4px;
}

/* --- Film: dark border with film strip holes --- */
.wall-frame--film {
    background: #1a1a1a;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: stretch;
}

.wall-frame--film .wall-frame-img {
    flex: 1;
    min-width: 0;
}

.wall-frame--film .wall-frame-img img {
    height: 100%;
    object-fit: cover;
}

.wall-film-holes {
    width: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 8px 3px;
}

.wall-film-holes::before,
.wall-film-holes::after {
    content: '';
    width: 10px;
    height: 7px;
    background: #2a2a2a;
    border: 1px solid #333;
}

.wall-film-num {
    position: absolute;
    bottom: 4px;
    right: 26px;
    font-family: var(--font-body);
    font-size: 0.5625rem;
    color: rgba(200,180,140,0.6);
    letter-spacing: 0.12em;
}

/* --- Polaroid Strip (name/caption at bottom) --- */
.wall-polaroid-strip {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 12px;
}

.wall-polaroid-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* --- Info block below frame (for text/caption/name) --- */
.wall-info {
    padding: 8px 10px 10px;
}

.wall-info-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    font-style: italic;
    color: var(--gray-600);
    margin-bottom: 3px;
}

.wall-info-text {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.55;
    margin-bottom: 4px;
}

.wall-info-name {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--whs-navy);
    display: block;
}

/* ==========================================
   QUOTE TILE (text-only memories)
   ========================================== */
.wall-frame--quote {
    background: var(--whs-navy);
    border-radius: 2px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0,26,127,0.25);
}

/* Quote tile is wrapped in an anchor — kill default anchor styling */
.wall-frame--quote-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.wall-frame--quote-link:hover {
    box-shadow: 0 6px 28px rgba(0,26,127,0.32);
}

.wall-quote-inner {
    padding: 28px 20px 20px;
}

.wall-quote-mark {
    color: var(--whs-yellow);
    opacity: 0.45;
    margin-bottom: 8px;
    display: block;
}

.wall-quote-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin-bottom: 14px;
}

.wall-quote-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wall-quote-name {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--whs-yellow);
}

.wall-quote-years {
    font-family: var(--font-subheading);
    font-size: 0.625rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.03em;
}

/* ==========================================
   GALLERY COUNT & EMPTY STATE & CTA
   ========================================== */
.gallery-count {
    text-align: center;
    margin-top: var(--space-3xl);
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.memories-empty {
    text-align: center;
    padding: var(--space-5xl) var(--space-xl);
    color: var(--gray-400);
}

.memories-empty svg {
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.memories-empty h3 {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: var(--space-md);
}

.memories-empty p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--gray-400);
    margin-bottom: var(--space-xl);
}

.memories-page-cta {
    text-align: center;
    margin-top: var(--space-4xl);
    padding-top: var(--space-3xl);
    border-top: 1px solid var(--gray-200);
}

.memories-page-cta p {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--gray-500);
    margin-bottom: var(--space-lg);
}

/* ==========================================
   GALLERY LIGHTBOX (public page)
   ========================================== */
.gallery-lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: zoom-out;
}
.gallery-lb-overlay.active { opacity: 1; }

.gallery-lb-content {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-lb-img {
    display: block;
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5);
}

.gallery-lb-close {
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    padding: 0 0.25rem;
}
.gallery-lb-close:hover { opacity: 1; }

.gallery-lb-info {
    margin-top: 12px;
    text-align: center;
    max-width: 600px;
}

.gallery-lb-caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-style: italic;
    margin-bottom: 4px;
}

.gallery-lb-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: 6px;
}

.gallery-lb-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gallery-lb-meta .gallery-lb-name {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--whs-yellow);
}

/* --- Lightbox Nav Arrows --- */
.gallery-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
    padding: 0;
}
.gallery-lb-nav:hover {
    opacity: 1;
    background: rgba(255,255,255,0.18);
}

.gallery-lb-prev { left: 16px; }
.gallery-lb-next { right: 16px; }

/* --- Lightbox Counter --- */
.gallery-lb-counter {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin-top: 10px;
}

/* --- Lightbox Image Transition --- */
.gallery-lb-img {
    transition: opacity 0.12s ease;
}

/* ==========================================
   MEMORY WALL RESPONSIVE
   ========================================== */
@media (max-width: 900px) {
    .wall-masonry {
        columns: 2;
        column-gap: 18px;
    }
    .wall-frame { margin-bottom: 22px; }
}

@media (max-width: 560px) {
    .wall-masonry {
        columns: 1;
        column-gap: 0;
        padding: 0;
    }
    .wall-frame {
        margin-bottom: 20px;
        transform: rotate(0deg) !important;
    }

    .gallery-lb-nav {
        width: 38px;
        height: 38px;
    }
    .gallery-lb-nav svg { width: 22px; height: 22px; }
    .gallery-lb-prev { left: 8px; }
    .gallery-lb-next { right: 8px; }
}

/* =====================================================
   ADMIN RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 220px;
        padding: var(--space-lg) 14px;
    }

    .admin-main {
        margin-left: 220px;
        padding: 28px 24px;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .review-layout {
        grid-template-columns: 1fr;
    }

    .review-action-card {
        position: static;
    }

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

@media (max-width: 768px) {
    .admin-layout {
        /* Sidebar slides in from the left as an off-canvas panel; the main
           content takes the full width by default. */
        flex-direction: row;
    }

    /* Off-canvas sidebar: stays the original 260px-wide vertical menu but
       lives off-screen until the topbar hamburger toggles .open on it. */
    .admin-sidebar {
        width: 260px;
        max-width: 85vw;
        padding: var(--space-xl) var(--space-lg);
        flex-direction: column;
        align-items: stretch;
    }

    .admin-sidebar-header {
        margin-bottom: var(--space-2xl);
        padding-bottom: var(--space-lg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-right: 0;
    }

    .admin-nav {
        flex-direction: column;
        gap: 2px;
    }

    .admin-nav-link {
        padding: 11px 14px;
        font-size: 0.78rem;
    }

    .admin-main {
        margin-left: 0;
        padding: 20px 16px;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .submission-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .submission-thumb-wrap {
        width: 100%;
    }

    .submission-thumb {
        width: 100%;
        height: 140px;
    }

    .review-row {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gallery-card-image {
        height: 120px;
    }
}

/* ==============================================
   MEMORIES BANNER CTA
   ============================================== */

.memories-banner {
    background: #1e1e1e;
    margin: 0;
    margin-top: 1rem;
    padding: 3.5rem 2.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.memories-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.015) 20px,
            rgba(255, 255, 255, 0.015) 22px
        );
    pointer-events: none;
}

.memories-banner-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.memories-banner-text h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.memories-banner-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.btn-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--whs-yellow);
    color: #111;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-banner:hover {
    background: #fff;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

.btn-banner svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .memories-banner {
        margin: 0;
        padding: 2rem 1.25rem;
        border-radius: 12px;
    }
    .memories-banner-content {
        flex-direction: column;
        text-align: center;
    }
    .memories-banner-text h3 {
        font-size: 1.25rem;
    }
}

/* ==============================================
   CATEGORY MANAGEMENT
   ============================================== */

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.category-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.category-handle {
    color: var(--gray-300);
    flex-shrink: 0;
    cursor: default;
}

.category-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.category-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
}

.category-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.category-usage {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.category-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.category-edit-form {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.category-edit-input {
    width: 180px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: 'Roboto', sans-serif;
    background: #f9f7f4;
    color: var(--gray-800);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    background: #f9f7f4;
    transition: border-color 0.2s ease;
}

.category-edit-input:focus {
    outline: none;
    border-color: var(--whs-navy);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
}

/* ==============================================
   COUNT PILLS / SLUGS IN TABLES
   ============================================== */

.count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 0.5rem;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy);
    border-radius: 11px;
    font-family: var(--font-subheading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.count-pill--empty {
    background: var(--gray-100);
    color: var(--gray-400);
    font-weight: 500;
}

.gl-slug {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.7rem;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.category-reorder {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-usage-note {
    font-size: 0.7rem;
    color: var(--gray-400);
    font-style: italic;
    padding: 0 0.5rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* Gallery card default photo variant */
.gallery-card--default .gallery-card-image {
    height: 140px;
}

.gallery-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 26, 127, 0.85);
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.gallery-card-date {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.gallery-card--hidden {
    opacity: 0.6;
}

@media (max-width: 640px) {
    .category-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .category-actions {
        flex-wrap: wrap;
        width: 100%;
    }
    .category-edit-input {
        width: 100px;
    }
}

/* ==============================================
   LIGHTBOX
   ============================================== */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: -48px;
    right: -8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.lightbox-close:hover {
    color: #fff;
    transform: scale(1.15);
}

.lightbox-img {
    transition: opacity 0.2s ease, transform 0.3s ease;
}

/* Nav arrows (prev/next) */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    z-index: 20;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.lightbox-counter {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 20;
}

/* Subtle loading indicator shown while the full category list is fetched.
   The image is already visible so we just show a slim progress line at the
   top of the overlay to indicate more photos are loading in. */
.lightbox-overlay--loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: lightbox-load-sweep 1s linear infinite;
    z-index: 30;
}

@keyframes lightbox-load-sweep {
    0% { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

@media (max-width: 700px) {
    .lightbox-nav {
        width: 42px;
        height: 42px;
    }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
}

.lightbox-caption {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: center;
    padding: 1rem 0 0;
    max-width: 600px;
    letter-spacing: 0.02em;
}

/* ==============================================
   MODAL OVERLAY
   ============================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 420px;
    margin: 1rem;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform 0.2s ease;
}

.modal-overlay.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-header {
    padding: 1.25rem 1.5rem 0;
}

.modal-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.modal-body {
    padding: 0.75rem 1.5rem 1rem;
}

.modal-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

.modal-footer {
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-cancel {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-200) !important;
}

.modal-cancel:hover {
    background: var(--gray-200) !important;
}

/* ==============================================
   FILE UPLOAD PREVIEW
   ============================================== */

.file-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    width: 100%;
    padding: 0.25rem 0;
}

.file-preview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: rgba(0, 26, 127, 0.04);
    border: 1px solid rgba(0, 26, 127, 0.1);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.file-preview-item:hover {
    border-color: rgba(0, 26, 127, 0.25);
}

.file-preview-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: var(--gray-100);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--gray-200);
}

.file-preview-name {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-align: center;
    word-break: break-all;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.file-preview-item:hover .file-preview-remove {
    opacity: 1;
    transform: scale(1);
}

.file-preview-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 0.5rem;
    border: 2px dashed var(--gray-300);
    border-radius: 10px;
    color: var(--gray-400);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 100px;
}

.file-preview-add:hover {
    border-color: var(--whs-navy);
    color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.03);
}

.file-preview-add span {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ==============================================
   COMMUNITY MEMORIES PILL BUTTON
   ============================================== */

.filter-btn--community {
    background: linear-gradient(135deg, var(--whs-navy) 0%, var(--whs-navy-dark) 100%);
    color: #fff !important;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 26, 127, 0.25);
    letter-spacing: 0.01em;
}

.filter-btn--community:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 26, 127, 0.35);
    background: linear-gradient(135deg, var(--whs-navy-light) 0%, var(--whs-navy) 100%);
}

.filter-btn--community svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==============================================
   MEMORIES BANNER ENHANCEMENTS
   ============================================== */

.memories-banner-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--whs-yellow);
}

.memories-banner-icon svg {
    width: 40px;
    height: 40px;
}

.memories-banner-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.memories-banner-stats span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.memories-banner-stats span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--whs-yellow);
    border-radius: 50%;
    opacity: 0.6;
}

@media (max-width: 640px) {
    .memories-banner-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }
    .memories-banner-icon svg {
        width: 28px;
        height: 28px;
    }
    .memories-banner-stats {
        justify-content: center;
    }
}

/* ==============================================
   ADMIN TABS (Submissions Filter)
   ============================================== */

.admin-tabs {
    display: flex;
    gap: 0.25rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.375rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.admin-tab:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

.admin-tab.active {
    background: var(--whs-navy);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 26, 127, 0.2);
}

.admin-tab.active .admin-tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.admin-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--gray-500);
    line-height: 1;
}

.admin-tab--pending.active {
    background: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.admin-tab--approved.active {
    background: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.admin-tab--rejected.active {
    background: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* ==============================================
   SUBMISSION LIST ENHANCEMENTS
   ============================================== */

.submission-meta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.375rem;
}

.submission-photo-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.submission-photo-count svg {
    opacity: 0.6;
}

.submission-reviewed-by {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-400);
}

.submission-reviewed-by svg {
    opacity: 0.6;
}

.submission-card--pending {
    border-left: 3px solid #f59e0b;
}

.submission-card--approved {
    border-left: 3px solid #22c55e;
}

.submission-card--rejected {
    border-left: 3px solid #ef4444;
}

/* Admin Empty State */
.admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--gray-400);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    border: 1px dashed var(--gray-200);
}

.admin-empty svg {
    margin-bottom: 1rem;
    opacity: 0.4;
}

.admin-empty p {
    font-size: 0.9rem;
}

/* ==============================================
   REVIEW PAGE PHOTOS
   ============================================== */

.review-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.review-photo {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.review-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.review-photo img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.review-photo-expand {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.55);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.review-photo-expand svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
}
.review-photo:hover .review-photo-expand {
    opacity: 1;
}

.review-photo-name {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-500);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-photo meta strip (filename + size + dims) + action buttons */
.review-photo-meta {
    padding: 0.5rem 0.75rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.review-photo-size {
    font-size: 0.66rem;
    color: #8a8d91;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-photo-size em {
    font-style: normal;
    color: #047857;
    font-weight: 500;
}

.review-photo-actions {
    display: flex;
    gap: 0.3rem;
    padding: 0 0.75rem 0.6rem;
}

.review-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #3a3b3c;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.review-photo-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1c1e21;
}

.review-photo-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.review-photo-btn--optimize {
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy, #001A7F);
    border-color: rgba(0, 26, 127, 0.14);
}

.review-photo-btn--optimize:hover {
    background: rgba(0, 26, 127, 0.14);
    color: var(--whs-navy, #001A7F);
}

.review-photo-btn--revert {
    background: rgba(255, 189, 51, 0.18);
    color: #b87b14;
    border-color: rgba(255, 189, 51, 0.35);
}

.review-photo-btn--revert:hover {
    background: rgba(255, 189, 51, 0.28);
    color: #b87b14;
}

/* Soft pulse to flag photos that really should be optimized */
.review-photo-btn--pulse {
    animation: reviewOptimizePulse 2s ease-in-out infinite;
}

@keyframes reviewOptimizePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 26, 127, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(0, 26, 127, 0.2); }
}

/* ---------- Optimize options dialog ---------- */
.optimize-opts-overlay { z-index: 100003; }

.modal-card--optimize-opts {
    max-width: 460px;
}

.modal-card--optimize-opts .modal-body {
    padding: 0.8rem 1.5rem 1.1rem;
}

.modal-card--optimize-opts .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.3rem 1.5rem 1.25rem;
    border-top: none;
}

.opt-subtitle {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 26, 127, 0.05);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #65676b;
    font-feature-settings: "tnum" 1;
}

.modal-card--optimize-opts .form-group + .form-group {
    margin-top: 1rem;
}

.modal-card--optimize-opts .form-group > label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #65676b;
    margin-bottom: 0.55rem;
}

.modal-card--optimize-opts .form-group > label small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #8a8d91;
}

.opt-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.opt-preset {
    padding: 8px 6px;
    border: 1px solid #d0d3d8;
    border-radius: 7px;
    background: #fff;
    color: #3a3b3c;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    font-feature-settings: "tnum" 1;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.opt-preset:hover {
    border-color: var(--whs-navy, #001A7F);
    color: var(--whs-navy, #001A7F);
}

.opt-preset.is-active {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    border-color: var(--whs-navy, #001A7F);
    box-shadow: 0 2px 6px rgba(0, 26, 127, 0.28);
}

.opt-slider-label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.opt-slider-label strong {
    color: var(--whs-navy, #001A7F);
    font-size: 0.95rem;
    font-weight: 700;
    font-feature-settings: "tnum" 1;
    text-transform: none;
    letter-spacing: 0;
}

.opt-slider {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e4e6eb;
    outline: none;
}

.opt-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--whs-navy, #001A7F);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 26, 127, 0.35);
    border: 2px solid #fff;
}

.opt-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--whs-navy, #001A7F);
    cursor: pointer;
    border: 2px solid #fff;
}

.opt-slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: #8a8d91;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.review-photo-total {
    color: #8a8d91;
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 0.35rem;
    font-feature-settings: "tnum" 1;
}

.review-photo-optimize-all {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Floating admin toasts */
.admin-toast-host {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 100002;
    pointer-events: none;
    max-width: calc(100vw - 3rem);
}

.admin-toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 420px;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    color: #fff;
    background: #1c1e21;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}

.admin-toast.is-visible { transform: translateY(0); opacity: 1; }

.admin-toast--success { background: linear-gradient(135deg, #059669, #10b981); }
.admin-toast--error   { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.admin-toast--warn    { background: linear-gradient(135deg, #b45309, #f59e0b); }
.admin-toast--info    { background: linear-gradient(135deg, #1c1e21, #3b3e44); }

@media (max-width: 540px) {
    .admin-toast-host { bottom: 1rem; right: 1rem; left: 1rem; }
    .admin-toast { min-width: 0; width: 100%; }
}

/* Lightbox overlay for photo review — sits above any modal */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 100010;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; }

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    padding: 0 0.25rem;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-caption {
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    margin-top: 0.75rem;
    font-family: monospace;
}

/* Review layout improvements */
.review-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.review-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
}

.review-status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-100);
}

.review-date {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-left: auto;
}

.review-field {
    margin-bottom: 1.25rem;
}

.review-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    margin-bottom: 0.375rem;
    font-family: 'Roboto', sans-serif;
}

.review-field p {
    font-size: 0.95rem;
    color: var(--gray-800);
    margin: 0;
}

.review-field--meta {
    opacity: 0.6;
    border-top: 1px solid var(--gray-100);
    padding-top: 1rem;
}

.review-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.review-memory-text {
    background: rgba(0, 26, 127, 0.03);
    border-left: 3px solid var(--whs-navy);
    padding: 0.625rem 0.875rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-700);
    white-space: pre-wrap;
}

/* Review Action Panel */
.review-actions-panel {
    position: sticky;
    top: 1rem;
}

.review-action-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
}

.review-action-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 1.25rem 0;
}

.review-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-approve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-approve:hover {
    background: #16a34a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.btn-reject {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #ef4444;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reject:hover {
    background: #fef2f2;
    border-color: #ef4444;
    transform: translateY(-1px);
}

.review-divider {
    border: none;
    border-top: 1px solid var(--gray-100);
    margin: 1.25rem 0;
}

.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--whs-navy);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 0.75rem;
    transition: opacity 0.2s ease;
}

.admin-back-link:hover {
    opacity: 0.7;
}

/* Review checkbox fix */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    padding: 0.5rem 0;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--whs-navy);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-custom {
    display: none;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 0.25rem;
    padding-left: 0;
}

/* Gallery inline form frame style select */
.gallery-frame-select {
    padding: 0.325rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Roboto', sans-serif;
    background: #f9f7f4;
    color: var(--gray-700);
    cursor: pointer;
}

.gallery-frame-select:focus {
    outline: none;
    border-color: var(--whs-navy);
}

@media (max-width: 768px) {
    .review-layout {
        grid-template-columns: 1fr;
    }
    .review-actions-panel {
        position: static;
    }
    .admin-tabs {
        gap: 0.125rem;
        padding: 0.25rem;
    }
    .admin-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ==============================================
   GALLERY CARD FRAME STYLE EDITING
   ============================================== */

.gallery-card-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.gallery-card-controls .gallery-inline-form {
    display: inline-flex;
    align-items: center;
}

/* Featured toggle button */
.btn-featured-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-featured-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

/* Users list */
.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease;
}

.user-card:hover {
    border-color: var(--gray-300);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--whs-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.user-created {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-400);
}

/* ==============================================
   ADMIN MOBILE SIDEBAR TOGGLE
   ============================================== */

.admin-mobile-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: var(--whs-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 26, 127, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-mobile-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 26, 127, 0.4);
}

@media (max-width: 768px) {
    .admin-mobile-toggle {
        display: flex;
    }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    }

    .admin-main {
        margin-left: 0 !important;
        padding-top: 4.5rem !important;
    }
}

/* ==============================================
   ADMIN FORM ALIGNMENT POLISH
   ============================================== */

.gallery-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

.gallery-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--gray-100);
}

.gallery-category-select {
    padding: 0.325rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Roboto', sans-serif;
    background: #f9f7f4;
    color: var(--gray-700);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.gallery-category-select:focus {
    outline: none;
    border-color: var(--whs-navy);
}

/* ==============================================
   GALLERY GRID
   ============================================== */

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

.gallery-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gallery-card:hover {
    border-color: var(--gray-300);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.gallery-card--featured {
    border-color: var(--whs-yellow);
    border-width: 2px;
}

.gallery-card-image {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: var(--gray-100);
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-card-image img {
    transform: scale(1.05);
}

.gallery-card-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.gallery-card-no-image {
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    color: var(--gray-300);
    background: var(--gray-100);
}

.gallery-card-no-image span {
    font-size: 0.7rem;
    font-weight: 500;
}

.gallery-card-body {
    padding: 0.875rem;
}

.gallery-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gallery-card-meta strong {
    font-size: 0.85rem;
    color: var(--gray-800);
}

.gallery-card-text {
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin-top: 0.375rem;
}

/* ==============================================
   ADMIN FORM GROUP ENHANCEMENTS
   ============================================== */

.admin-body .form-group {
    margin-bottom: 1rem;
}

.admin-body .form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.375rem;
    font-family: 'Roboto', sans-serif;
}

.admin-body .form-group input[type="text"],
.admin-body .form-group input[type="password"],
.admin-body .form-group input[type="email"],
.admin-body .form-group select,
.admin-body .form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: 'Roboto', sans-serif;
    background: #f9f7f4;
    color: var(--gray-800);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-body .form-group input:focus,
.admin-body .form-group select:focus,
.admin-body .form-group textarea:focus {
    outline: none;
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
}

.admin-body .form-group input[type="file"] {
    padding: 0.5rem;
    background: #f9f7f4;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.8125rem;
    width: 100%;
    cursor: pointer;
}

/* Form row helper */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* Photo wall spacing */
.photo-wall {
    padding-bottom: 4rem;
}

@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .form-row {
        flex-direction: column;
    }
}

/* ========================================
   ADMIN: Content Editor
   ======================================== */

.content-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}
.content-nav-link {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-600);
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.content-nav-link:hover {
    background: var(--navy-light, #eef1f8);
    color: var(--navy);
    border-color: var(--gray-200);
}
.content-section {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.content-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.content-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}
.content-section-title svg {
    opacity: 0.5;
}
.content-section-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    padding: 0.25rem 0.75rem;
    background: var(--gray-100);
    border-radius: 20px;
}
.content-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.content-form--sub {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: var(--gray-50, #fafafa);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}
.content-sub-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-700);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.content-list-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.content-repeater {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.content-repeater-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.content-repeater-row input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.15s ease;
}
.content-repeater-row input[type="text"]:focus {
    border-color: var(--navy);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,26,127,0.1);
}
.content-repeater-row--wide input[name="ms_text[]"] {
    flex: 3;
}
.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.btn-icon--remove {
    background: transparent;
    color: var(--gray-400);
}
.btn-icon--remove:hover {
    background: #fee2e2;
    color: #dc2626;
}
.btn-xs {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}
.form-row--3 {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}
.checkbox-label--inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--gray-600);
    flex-shrink: 0;
}

/* ========================================
   SUCCESS MODAL (Public Site)
   ======================================== */

.success-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 10, 40, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 1.5rem;
}
.success-modal-overlay.active {
    opacity: 1;
}
.success-modal {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}
.success-modal-overlay.active .success-modal {
    transform: translateY(0) scale(1);
}
.success-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-modal-icon svg {
    width: 36px;
    height: 36px;
    stroke: #059669;
    stroke-width: 2.5;
    fill: none;
}
.success-modal-icon svg .checkmark-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.4s ease 0.3s forwards;
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}
.success-modal h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.5rem;
}
.success-modal p {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}
.success-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: var(--navy, #001A7F);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.success-modal-btn:hover {
    background: #2D3387;
    transform: translateY(-1px);
}

/* Form success replacement state */
.share-form-success {
    text-align: center;
    padding: 3rem 2rem;
}
.share-form-success .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-form-success .success-icon svg {
    width: 40px;
    height: 40px;
    stroke: #059669;
    stroke-width: 2;
    fill: none;
}
.share-form-success h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.75rem;
}
.share-form-success p {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.share-form-success .btn-submit-another {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--navy, #001A7F);
    border: 2px solid var(--navy, #001A7F);
    border-radius: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-form-success .btn-submit-another:hover {
    background: var(--navy, #001A7F);
    color: #fff;
}

/* ==============================================
   GALLERY VERTICAL TABS
   ============================================== */

.vtabs {
    display: flex;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    min-height: 500px;
}

/* --- Tab Nav (left sidebar) --- */
.vtabs-nav {
    width: 220px;
    flex-shrink: 0;
    background: #f9f8f6;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.vtabs-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.vtabs-tab:hover {
    background: rgba(0, 0, 0, 0.025);
}

.vtabs-tab--active {
    background: var(--white);
    border-left-color: var(--whs-navy);
}


.vtabs-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(0, 26, 127, 0.06);
    color: var(--whs-navy);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.vtabs-tab--active .vtabs-tab-icon {
    background: rgba(0, 26, 127, 0.1);
}

.vtabs-tab-icon--featured {
    background: rgba(255, 189, 51, 0.1);
    color: var(--whs-yellow-dark);
}

.vtabs-tab--active .vtabs-tab-icon--featured {
    background: rgba(255, 189, 51, 0.18);
}

.vtabs-tab-icon--approved {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}

.vtabs-tab--active .vtabs-tab-icon--approved {
    background: rgba(16, 185, 129, 0.14);
}

.vtabs-tab-icon--pending {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.vtabs-tab--active .vtabs-tab-icon--pending {
    background: rgba(245, 158, 11, 0.18);
}

.vtabs-tab-icon--rejected {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
}

.vtabs-tab--active .vtabs-tab-icon--rejected {
    background: rgba(239, 68, 68, 0.14);
}

.vtabs-tab-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.vtabs-tab-label {
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0.02em;
    line-height: 1.2;
    transition: color 0.15s ease;
}

.vtabs-tab--active .vtabs-tab-label {
    color: var(--whs-navy);
}

.vtabs-tab-count {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    line-height: 1.2;
}

/* --- Tab Panels (right content) --- */
.vtabs-panels {
    flex: 1;
    min-width: 0;
}

.vtabs-panel {
    display: none;
    padding: 1.5rem;
}

.vtabs-panel--active {
    display: block;
}

.vtabs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.vtabs-panel-title {
    font-family: var(--font-subheading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--whs-navy);
    letter-spacing: 0.02em;
    margin: 0;
}

.vtabs-panel-desc {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 0 0 1.25rem;
}

.vtabs-subsection {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-100);
}

.vtabs-subsection-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    letter-spacing: 0.03em;
    margin: 0 0 0.875rem;
}

.vtabs-subsection-title svg {
    color: var(--gray-400);
}

/* Mobile: stack tabs horizontally on top */
@media (max-width: 900px) {
    .vtabs {
        flex-direction: column;
        min-height: auto;
    }

    .vtabs-nav {
        width: 100%;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vtabs-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 0.75rem 1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .vtabs-tab--active {
        border-bottom-color: var(--whs-navy);
        border-left-color: transparent;
    }

    .vtabs-tab-count {
        display: none;
    }

    .vtabs-panel {
        padding: 1rem;
    }
}

/* ==============================================
   VIEW TOGGLE (Grid / List)
   ============================================== */

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle-btn:hover {
    background: var(--gray-100);
    color: var(--gray-600);
}

.view-toggle-btn.active {
    background: var(--whs-navy);
    color: var(--white);
}

.view-toggle-btn + .view-toggle-btn {
    border-left: 1px solid var(--gray-200);
}

.view-toggle-btn.active + .view-toggle-btn,
.view-toggle-btn + .view-toggle-btn.active {
    border-left-color: var(--whs-navy);
}

/* ==============================================
   GALLERY LIST VIEW
   ============================================== */

.gallery-list {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.8125rem;
}

.gallery-list thead th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--gray-100);
    white-space: nowrap;
}

.gallery-list tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.1s ease;
}

.gallery-list tbody tr:hover {
    background: rgba(0, 0, 0, 0.01);
}

.gallery-list td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

.gl-col-thumb {
    width: 52px;
    padding-right: 0;
}

.gl-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--gray-100);
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.gl-thumb:hover {
    opacity: 0.8;
    box-shadow: 0 0 0 2px var(--whs-navy);
}

.gl-thumb--faded {
    opacity: 0.4;
}

/* Lazy thumbs render as a soft grey block until JS swaps data-src → src.
   Stops the flash-of-loading-everything before pagination kicks in. */
.gl-thumb--lazy {
    background: linear-gradient(135deg, #f0f2f5 0%, #e4e6eb 100%);
}

/* Compact pill in the gallery panel header — count + total bytes */
.gl-total-pill {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(0, 26, 127, 0.06);
    color: var(--whs-navy);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-feature-settings: "tnum" 1;
    vertical-align: middle;
}

.gl-size {
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    color: #65676b;
}

.gl-thumb--empty {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
}

.gl-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-800);
    display: block;
}

.gl-caption {
    font-size: 0.7rem;
    color: var(--gray-400);
    display: block;
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.gl-date {
    color: var(--gray-500);
    white-space: nowrap;
}

.gl-memory {
    color: var(--gray-500);
    font-size: 0.75rem;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-col-actions {
    white-space: nowrap;
    text-align: right;
}

.gl-col-actions .gallery-inline-form,
.gl-col-actions .btn {
    display: inline-flex;
    vertical-align: middle;
}

/* Hidden photos list — compact */
.gallery-list--hidden td {
    padding: 0.4rem 0.75rem;
}

/* ==============================================
   ICON-ONLY ACTION BUTTONS (Hide / Delete)
   ============================================== */

.btn-icon--hide {
    color: var(--gray-500);
}

.btn-icon--hide:hover {
    color: #b45309;
    background: rgba(245, 158, 11, 0.08);
}

.btn-icon--delete {
    color: var(--gray-400);
}

.btn-icon--delete:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
}

/* Reaction activity log: IP summary + flagged rows */
.log-ip-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: #f9f8f6;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.log-ip-summary-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-right: 0.25rem;
}

.log-ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.7rem;
    color: var(--gray-700);
}

.log-ip-chip strong {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    color: var(--whs-navy, #001A7F);
}

.log-row--flagged {
    background: rgba(239, 68, 68, 0.03);
}

.log-row--flagged td {
    border-left: 2px solid #ef4444;
}

.log-row--flagged td:not(:first-child) {
    border-left: none;
}

/* ==============================================
   DASHBOARD — REACTIONS SECTION
   ============================================== */

.dash-reactions {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.2fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

/* Hero card with the big total + meta */
.dash-react-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
    border-radius: 14px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(185, 28, 28, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dash-react-hero::before {
    /* Decorative big faded heart watermark */
    content: '';
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 180px;
    height: 180px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>") no-repeat center / contain;
    opacity: 0.07;
    pointer-events: none;
    transform: rotate(-15deg);
}

.dash-react-hero-burst {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    animation: dash-react-pulse 2.4s ease-in-out infinite;
}

@keyframes dash-react-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.dash-react-hero-body {
    flex: 1;
    min-width: 0;
}

.dash-react-hero-count {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dash-react-hero-num {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dash-react-hero-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.dash-react-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    opacity: 0.92;
}

.dash-react-hero-meta strong {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.dash-react-sep {
    opacity: 0.5;
}

.dash-react-manage,
.dash-react-disabled-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.15s ease, transform 0.15s ease;
    align-self: flex-start;
    flex-shrink: 0;
}

.dash-react-manage:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    color: #fff;
}

.dash-react-disabled-pill {
    background: rgba(0, 0, 0, 0.3);
}

/* Leaderboard card */
.dash-react-leaderboard {
    background: var(--white);
    border: none;
    border-radius: 14px;
    padding: 1.125rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.dash-react-leaderboard:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dash-react-leader-title {
    font-family: var(--font-subheading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0 0 0.6rem;
}

.dash-react-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dash-react-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}

.dash-react-item:last-child {
    border-bottom: none;
}

.dash-react-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.dash-react-item:nth-child(1) .dash-react-rank {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff;
}
.dash-react-item:nth-child(2) .dash-react-rank {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: #fff;
}
.dash-react-item:nth-child(3) .dash-react-rank {
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #fff;
}

.dash-react-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gray-100);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
}

.dash-react-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dash-react-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dash-react-name {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-800);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-react-name:hover {
    color: var(--whs-navy);
}

.dash-react-years {
    font-size: 0.7rem;
    color: var(--gray-400);
}

.dash-react-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(185, 28, 28, 0.1);
    color: #b91c1c;
    border-radius: 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .dash-reactions {
        grid-template-columns: 1fr;
    }
}

/* Review modal reactions row */
.review-reactions-row p {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.review-reactions-count {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #b91c1c;
    font-variant-numeric: tabular-nums;
}

/* Settings page toggle switch */
.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gray-200);
    border-radius: 26px;
    transition: background 0.2s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--whs-navy, #001A7F);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-text strong {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

.toggle-text small {
    display: block;
    font-size: 0.8125rem;
    color: var(--gray-500);
    line-height: 1.4;
}

/* Reaction count input in settings admin */
.reaction-count-input {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 0.875rem;
    text-align: center;
    color: var(--whs-navy);
    background: #f9f7f4;
    font-variant-numeric: tabular-nums;
}

.reaction-count-input:focus {
    outline: none;
    border-color: var(--whs-navy);
}

/* Table-variant user avatar */
.user-avatar--table {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--whs-navy);
    color: var(--white);
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: 0.8125rem;
    margin: 0;
}

/* ==============================================
   DASHBOARD REDESIGN
   ============================================== */

/* Global top bar — starts to the right of the fixed sidebar, spans the
   rest of the viewport width at the top. Sidebar takes priority on the left. */
.dash-welcome {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.7rem 1.5rem;
    background: #2a2d31;
    color: #fff;
    flex-wrap: nowrap;            /* never wrap to two rows — keeps height predictable */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    z-index: 95;                  /* above all admin content; sidebar still wins at 100 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    isolation: isolate;            /* clean stacking context so child popovers can't escape behind */
}

/* Main content sits comfortably below the bar (bar = ~64px, plus a little air) */
.admin-body--has-topbar .admin-main {
    padding-top: 88px;
    position: relative;
    z-index: 0;                    /* lower stacking context than the topbar */
}

/* Hide the strapline when the bar gets too narrow, so the title/buttons don't wrap */
@media (max-width: 720px) {
    .dash-welcome-sub { display: none; }
}

/* ---- Topbar hamburger (mobile only) ---- */
.topbar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-right: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.topbar-hamburger:hover { background: rgba(255, 255, 255, 0.16); }

/* ---- Mobile layout overrides ---- */
@media (max-width: 768px) {
    .topbar-hamburger { display: inline-flex; }

    .dash-welcome {
        left: 0;                     /* full-width — sidebar is off-canvas on mobile */
        padding: 0.55rem 0.85rem;
        min-height: 56px;
        gap: 0.6rem;
    }

    .dash-welcome-identity {
        min-width: 0;                /* allow truncation */
        gap: 0.5rem;
        flex: 1 1 auto;
    }

    .dash-welcome-title {
        font-size: 0.86rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-welcome-actions { gap: 0.35rem; }

    .topbar-viewsite span { display: none; }
    .topbar-viewsite { padding: 6px 8px; }

    /* Tighter padding under the (now slightly shorter) topbar */
    .admin-body--has-topbar .admin-main {
        padding-top: 64px !important;
        margin-left: 0 !important;
    }

    /* Backdrop sits behind the topbar but in front of the page content,
       so the dark veil dims the body while the topbar (and its hamburger)
       stays visible and tappable. Sidebar at 100 still slides over it. */
    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        z-index: 90;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .admin-sidebar-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

/* The legacy floating hamburger (created by admin.js initMobileSidebar) is
   superseded by the in-topbar one — keep it hidden so we don't double up. */
.admin-mobile-toggle { display: none !important; }

.dash-welcome-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.dash-welcome-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--whs-yellow, #ffbd33) 0%, #e8a020 100%);
    color: #1a1f2c;
    font-family: var(--font-subheading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.dash-welcome-text {
    min-width: 0;
}

.dash-welcome-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-subheading);
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    letter-spacing: 0.04em;
}

.dash-welcome-wave {
    color: var(--whs-yellow, #ffbd33);
    flex-shrink: 0;
    opacity: 0.9;
}

.dash-welcome-sub {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.1rem 0 0;
    letter-spacing: 0.01em;
}

.dash-welcome-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* View site button — sits to the left of the notification bell */
.topbar-viewsite {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    line-height: 1;
}

.topbar-viewsite:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--whs-yellow, #ffbd33);
    border-color: rgba(255, 189, 51, 0.3);
}

.topbar-viewsite svg { opacity: 0.9; }

@media (max-width: 640px) {
    .topbar-viewsite span { display: none; }
    .topbar-viewsite { padding: 6px 8px; }
}

/* ==============================================
   TOP BAR — NOTIFICATION DROPDOWN
   ============================================== */

.topbar-notif {
    position: relative;
    margin-right: 0.25rem;
}

.topbar-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.topbar-notif-btn:hover,
.topbar-notif--open .topbar-notif-btn {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
}

.topbar-notif-btn:active { transform: scale(0.95); }

.topbar-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #2a2d31, 0 1px 3px rgba(239, 68, 68, 0.5);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.topbar-notif-badge[hidden] { display: none; }

@keyframes topbarNotifPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.topbar-notif-badge--pulse {
    animation: topbarNotifPulse 0.6s ease-out;
}

/* Dropdown panel */
.topbar-notif-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 1000;
    animation: notif-pop 0.15s ease;
    color: var(--gray-800);
}

.topbar-notif-panel[hidden] { display: none; }

@keyframes notif-pop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.topbar-notif-panel::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.04);
}

.topbar-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.topbar-notif-title {
    font-family: var(--font-subheading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: 0.01em;
}

.topbar-notif-mark-all {
    background: none;
    border: none;
    color: var(--whs-navy, #001A7F);
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.topbar-notif-mark-all:hover {
    background: rgba(0, 26, 127, 0.06);
}

.topbar-notif-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.topbar-notif-empty,
.topbar-notif-loading {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--gray-400);
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
}

.topbar-notif-item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    transition: background 0.12s ease;
}

.topbar-notif-item:last-child { border-bottom: none; }
.topbar-notif-item:hover { background: rgba(0, 0, 0, 0.025); }

.topbar-notif-item--unread {
    background: rgba(0, 26, 127, 0.04);
}

.topbar-notif-item--unread:hover {
    background: rgba(0, 26, 127, 0.07);
}

/* The actual clickable link spans most of the row; the mark-read button
   sits to its right and has its own click target. */
.topbar-notif-item-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem 0.7rem 1rem;
    text-decoration: none;
    color: var(--gray-800);
}

/* Per-row "mark as read" tick — only rendered for unread rows */
.topbar-notif-row-mark {
    flex: 0 0 auto;
    align-self: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy, #001A7F);
    cursor: pointer;
    margin-right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.1s ease;
}

.topbar-notif-row-mark:hover {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    transform: scale(1.1);
}

/* "Show N more" button at the bottom of the dropdown */
.topbar-notif-more {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.7rem 1rem;
    text-align: center;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--whs-navy, #001A7F);
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.12s ease;
}

.topbar-notif-more:hover {
    background: rgba(0, 26, 127, 0.06);
}

.topbar-notif-more:disabled {
    color: #8a8d91;
    cursor: default;
}

.topbar-notif-more-count {
    font-size: 0.72rem;
    color: #8a8d91;
    font-weight: 400;
    margin-left: 0.25rem;
}

.topbar-notif-end {
    text-align: center;
    padding: 0.7rem 1rem;
    font-size: 0.74rem;
    color: #8a8d91;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-style: italic;
}

.topbar-notif-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy, #001A7F);
}

.topbar-notif-icon--inbox { background: rgba(0, 26, 127, 0.08); color: var(--whs-navy); }
.topbar-notif-icon--heart { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }
.topbar-notif-icon--check { background: rgba(16, 185, 129, 0.12); color: #047857; }
.topbar-notif-icon--x { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
.topbar-notif-icon--edit { background: rgba(255, 189, 51, 0.18); color: #b87b14; }

/* Photo-thumbnail visual with corner action badge (replaces .topbar-notif-icon
   for notifications about a submission that has a photo) */
.topbar-notif-visual {
    position: relative;
    flex-shrink: 0;
}

.topbar-notif-visual--photo {
    width: 40px;
    height: 40px;
}

.topbar-notif-visual--photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gray-100);
    display: block;
}

.topbar-notif-badge-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
}

.topbar-notif-badge-icon svg {
    width: 10px;
    height: 10px;
}

.topbar-notif-badge-icon--inbox { background: var(--whs-navy, #001A7F); }
.topbar-notif-badge-icon--heart { background: #b91c1c; }
.topbar-notif-badge-icon--check { background: #10b981; }
.topbar-notif-badge-icon--x     { background: #ef4444; }
.topbar-notif-badge-icon--edit  { background: #d97706; }

.topbar-notif-item--unread .topbar-notif-badge-icon {
    box-shadow: 0 0 0 2px rgba(0, 26, 127, 0.04);
}

.topbar-notif-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.topbar-notif-text {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--gray-800);
}

.topbar-notif-text strong {
    font-weight: 600;
    color: var(--whs-navy, #001A7F);
}

.topbar-notif-time {
    font-size: 0.6875rem;
    color: var(--gray-400);
    letter-spacing: 0.02em;
}

.topbar-notif-dot {
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1877f2;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .topbar-notif-panel {
        right: -16px;
        width: calc(100vw - 32px);
    }
    .topbar-notif-panel::before {
        right: 24px;
    }
}

/* ==================================================
   Top-bar user menu (round avatar + dropdown)
   ================================================== */
.topbar-user {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.topbar-user-btn:hover,
.topbar-user--open .topbar-user-btn {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.topbar-user-btn:active { transform: scale(0.95); }

.topbar-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffbd33, #f59e0b);
    color: #1c1e21;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1;
}

.topbar-user-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
}

.topbar-user-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 10px 40px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    overflow: hidden;
    padding: 0.5rem 0;
}

.topbar-user-panel[hidden] { display: none; }

.topbar-user-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

.topbar-user-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.5rem;
}

.topbar-user-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-user-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c1e21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-role {
    font-size: 0.78rem;
    color: #65676b;
    margin-top: 0.1rem;
}

.topbar-user-divider {
    height: 1px;
    background: #e4e6eb;
    margin: 0.35rem 0;
}

.topbar-user-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: #1c1e21;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.1s ease;
}

.topbar-user-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1c1e21;
}

.topbar-user-link svg {
    flex: 0 0 auto;
    opacity: 0.7;
}

.topbar-user-link--logout {
    color: #b91c1c;
}

.topbar-user-link--logout svg { opacity: 0.8; }

.topbar-user-link--logout:hover {
    background: rgba(185, 28, 28, 0.06);
    color: #b91c1c;
}

@media (max-width: 640px) {
    .topbar-user-panel {
        right: -8px;
    }
}

/* Make action buttons adapt to the dark bar */
.dash-welcome-actions .btn {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    padding: 0.45rem 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.dash-welcome-actions .btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: none;
}

.dash-welcome-actions .btn svg {
    opacity: 0.85;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.dash-stat {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1.35rem;
    background: var(--white);
    border: none;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dash-stat:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.dash-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 26, 127, 0.06);
    color: var(--whs-navy);
    flex-shrink: 0;
}

.dash-stat--pending .dash-stat-icon { background: rgba(245, 158, 11, 0.1); color: #b45309; }
.dash-stat--approved .dash-stat-icon { background: rgba(16, 185, 129, 0.08); color: #047857; }
.dash-stat--featured .dash-stat-icon { background: rgba(255, 189, 51, 0.12); color: var(--whs-navy); }

.dash-stat-body { display: flex; flex-direction: column; min-width: 0; }

.dash-stat-value {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.dash-stat-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-stat-link {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--whs-navy);
    padding: 0.375rem;
    background: rgba(0, 26, 127, 0.03);
    text-decoration: none;
    transition: background 0.15s ease;
}

.dash-stat-link:hover { background: rgba(0, 26, 127, 0.06); }

.dash-stats--secondary {
    margin-top: -0.5rem;
}

.dash-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* Breakdown widgets: 3-column grid for Role / Top categories / Quick actions */
.dash-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.dash-breakdown .dash-card {
    display: flex;
    flex-direction: column;
}

.dash-card-body {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
}

.dash-card-empty-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-400);
    margin: 0.5rem 0 0;
    text-align: center;
}

/* Horizontal bar chart row */
.dash-bar-row {
    display: grid;
    grid-template-columns: 80px 1fr 30px;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.dash-bar-row:last-child { margin-bottom: 0; }

.dash-bar-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-bar-track {
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
}

.dash-bar-fill {
    height: 100%;
    background: var(--whs-navy);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.dash-bar-fill--yellow { background: var(--whs-yellow); }

.dash-bar-value {
    font-family: var(--font-subheading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    text-align: right;
}

/* Quick actions grid */
.dash-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}

.dash-quick-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--gray-100);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.dash-quick-action:hover {
    background: var(--whs-navy);
    color: var(--white);
}

.dash-quick-action svg {
    flex-shrink: 0;
    color: var(--gray-400);
    transition: color 0.15s ease;
}

.dash-quick-action:hover svg { color: var(--white); }

/* Dashboard card heading + "View all" link */
.dash-card + .dash-card { margin-top: 1rem; }

.dash-card-link {
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.12s ease, color 0.12s ease;
}

.dash-card-link:hover {
    color: var(--whs-yellow, #ffbd33);
    background: rgba(255, 255, 255, 0.14);
}

/* Dashboard table wrapper */
.dash-table-wrap {
    padding: 0 1.25rem 1rem;
}

.dash-table-wrap .gl-pager {
    margin-top: 0;
    border-top: none;
    padding-top: 0.5rem;
}

.dash-table-wrap .gallery-list {
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .dash-breakdown { grid-template-columns: 1fr; }
    .dash-quick-actions { grid-template-columns: 1fr; }
}

.dash-card {
    background: var(--white);
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.dash-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.1rem;
    background: #2a2d31;       /* matches the global top bar */
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.dash-card-title {
    font-family: var(--font-subheading);
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-card-title svg { color: var(--whs-yellow, #ffbd33); opacity: 0.95; }

/* Section badges live inside the title — adapt them to the dark bar */
.dash-card-header .badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 600;
    padding: 2px 8px;
    text-transform: none;
    letter-spacing: 0.02em;
}

.dash-card-header .badge--pending {
    background: rgba(255, 189, 51, 0.2);
    color: var(--whs-yellow, #ffbd33);
    border-color: rgba(255, 189, 51, 0.35);
}

.dash-card-header .badge--approved {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

.dash-card-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--gray-400);
}

.dash-card-empty svg { margin-bottom: 0.5rem; }
.dash-card-empty p { margin: 0; font-size: 0.8125rem; }

.dash-card-list { display: flex; flex-direction: column; }

.dash-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease;
}

.dash-item:last-child { border-bottom: none; }
.dash-item:hover { background: rgba(0, 26, 127, 0.025); }

.dash-item-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
}

.dash-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dash-item-body { flex: 1; min-width: 0; }

.dash-item-name {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-800);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-item-detail { font-size: 0.7rem; color: var(--gray-400); }

.dash-item-badges { display: flex; gap: 0.25rem; margin-top: 0.125rem; }
.dash-item-badges .badge { font-size: 0.6rem; }

.dash-item-time {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    flex-shrink: 0;
    white-space: nowrap;
}

.dash-card-viewall {
    display: block;
    text-align: center;
    padding: 0.875rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--whs-navy);
    text-decoration: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease;
}

.dash-card-viewall:hover { background: rgba(0, 26, 127, 0.04); }

@media (max-width: 1024px) {
    .dash-welcome {
        left: 220px;
    }
    .admin-body--has-topbar .admin-main {
        padding-top: calc(28px + 52px);
    }
}

@media (max-width: 900px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-columns { grid-template-columns: 1fr; }
}

/* Mobile: sidebar collapses into a horizontal top nav. The bar moves below
   that into a full-width row */
@media (max-width: 768px) {
    .dash-welcome {
        left: 0;
        padding: 0.7rem 1rem;
        gap: 0.75rem;
    }
    .dash-welcome-title {
        font-size: 0.875rem;
    }
    .dash-welcome-sub {
        display: none;
    }
    .admin-body--has-topbar .admin-main {
        padding-top: 52px;
    }
}

@media (max-width: 500px) {
    .dash-stats { grid-template-columns: 1fr; }
}

/* ==============================================
   REVIEW MODAL
   ============================================== */

body.modal-open { overflow: hidden; }

/* Confirmation dialogs must sit above any host modal */
.modal-overlay--confirm { z-index: 100020; }

.modal-card--review {
    max-width: 1000px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-card--review .modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    flex-shrink: 0;
    position: relative;
}

.modal-card--review .modal-title {
    font-family: var(--font-subheading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--whs-navy);
    margin: 0;
}

.review-modal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 2.5rem;
}

.review-modal-prev,
.review-modal-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.review-modal-prev:hover:not(:disabled),
.review-modal-next:hover:not(:disabled) {
    background: var(--whs-navy);
    border-color: var(--whs-navy);
    color: var(--white);
}

.review-modal-prev:disabled,
.review-modal-next:disabled {
    opacity: 0.35;
    cursor: default;
}

.review-modal-counter {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 0 0.25rem;
    white-space: nowrap;
}

.modal-card--review .modal-close-x {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
}

.modal-card--review .modal-close-x:hover {
    color: var(--gray-700);
}

.review-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.review-modal-loading {
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-modal-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--whs-navy);
    border-radius: 50%;
    animation: review-spin 0.8s linear infinite;
}

@keyframes review-spin { to { transform: rotate(360deg); } }

.review-modal-success {
    padding: 2.5rem;
    text-align: center;
    color: #047857;
}

.review-modal-success svg {
    color: #10b981;
    margin-bottom: 0.5rem;
}

.review-modal-success p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    margin: 0;
}

.review-modal-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

.review-modal-details {
    min-width: 0;
}

.review-modal-actions .review-action-card {
    position: sticky;
    top: 0;
}

.review-photos--modal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.review-photos--modal .review-photo {
    height: 120px;
}

.review-photos--modal .review-photo img {
    height: 120px;
}

.review-photos--modal .review-photo-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.625rem;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.review-photos--modal .review-photo:hover .review-photo-name {
    opacity: 1;
}

@media (max-width: 800px) {
    .review-modal-layout {
        grid-template-columns: 1fr;
    }
    .review-modal-actions .review-action-card {
        position: static;
    }
    .modal-card--review {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

/* ==============================================
   PHOTO PREVIEW MODAL
   ============================================== */

.modal-card--preview {
    max-width: 600px;
    width: 95%;
    padding: 0;
    overflow: hidden;
}

.preview-modal-img {
    background: var(--gray-100);
    line-height: 0;
}

.preview-modal-img img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.preview-modal-caption {
    padding: 0.875rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-100);
}

.modal-card--preview .modal-close-x {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}

.modal-card--preview .modal-close-x:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* ==============================================
   EDIT MODAL (wider variant)
   ============================================== */

.modal-card--edit {
    max-width: 580px;
    width: 95%;
}

.modal-close-x {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
}

.modal-close-x:hover {
    color: var(--gray-700);
}

.edit-modal-layout {
    display: flex;
    gap: 1.25rem;
}

.edit-modal-thumb {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-100);
}

.edit-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-modal-fields {
    flex: 1;
    min-width: 0;
}

.edit-modal-fields .form-group {
    margin-bottom: 0.75rem;
}

.edit-modal-fields .form-row {
    margin-bottom: 0;
}

@media (max-width: 500px) {
    .edit-modal-layout {
        flex-direction: column;
    }
    .edit-modal-thumb {
        width: 100%;
        height: 140px;
    }
}

/* ==============================================
   TABLE SEARCH BOX
   ============================================== */

.gl-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 320px;
}

.gl-search:focus-within {
    border-color: var(--whs-navy);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
}

.gl-search > svg {
    color: var(--gray-400);
    flex-shrink: 0;
}

.gl-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-800);
    padding: 0;
}

.gl-search-input::placeholder {
    color: var(--gray-400);
}

.gl-search-clear {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0 0.25rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.gl-search-clear:hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

.gl-empty-row td {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--gray-400);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-style: italic;
}

/* ==============================================
   SORTABLE TABLE HEADERS
   ============================================== */

.gl-sortable-th {
    user-select: none;
    white-space: nowrap;
}

.gl-sortable-th:hover {
    color: var(--whs-navy);
}

.gl-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.65rem;
    opacity: 0.3;
    vertical-align: middle;
}

.gl-sort-arrow::after {
    content: '\2195';
}

.gl-sort-asc .gl-sort-arrow {
    opacity: 1;
}

.gl-sort-asc .gl-sort-arrow::after {
    content: '\2191';
}

.gl-sort-desc .gl-sort-arrow {
    opacity: 1;
}

.gl-sort-desc .gl-sort-arrow::after {
    content: '\2193';
}

/* ==============================================
   TABLE PAGINATION
   ============================================== */

.gl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--gray-100);
    font-family: var(--font-body);
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.gl-pager-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gl-pager-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gl-pager-pp-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.gl-pager-pp {
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--gray-200);
    border-radius: 5px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
}

.gl-pager-pp:focus {
    outline: none;
    border-color: var(--whs-navy);
}

.gl-pager-info {
    color: var(--gray-500);
}

.gl-pager-page {
    color: var(--gray-500);
    white-space: nowrap;
}

.gl-pager-btns {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.gl-pager-num,
.gl-pager-prev,
.gl-pager-next {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: pointer;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    padding: 0 0.375rem;
    transition: all 0.15s ease;
}

.gl-pager-num:hover,
.gl-pager-prev:hover,
.gl-pager-next:hover {
    border-color: var(--whs-navy);
    color: var(--whs-navy);
}

.gl-pager-num--active {
    background: var(--whs-navy);
    border-color: var(--whs-navy);
    color: var(--white);
}

.gl-pager-num--active:hover {
    background: var(--whs-navy-light);
    border-color: var(--whs-navy-light);
    color: var(--white);
}

.gl-pager-prev[disabled],
.gl-pager-next[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ==============================================
   DRAG-AND-DROP REORDER
   ============================================== */

.gl-col-drag {
    width: 28px;
    padding-right: 0 !important;
}

.gl-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    cursor: grab;
    color: var(--gray-300);
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.gl-drag-handle:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

.gl-drag-handle:active {
    cursor: grabbing;
}

.gl-row-dragging {
    opacity: 0.25;
}

.gl-row-placeholder td {
    height: 3px;
    padding: 0 !important;
    background: var(--whs-navy);
    border: none !important;
    position: relative;
}

.gl-row-placeholder td::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--whs-navy);
}

.gl-row-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: table;
    background: var(--white);
    border: 1px solid var(--whs-navy);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 26, 127, 0.15);
    opacity: 0.92;
    table-layout: auto;
}

.gl-row-ghost td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    vertical-align: middle;
}

/* Drag-to-reorder handle + states for content repeater rows
   (Content → History lists). Mirrors the gallery drag styling. */
.content-repeater-drag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 32px;
    cursor: grab;
    color: var(--gray-300);
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    touch-action: none;
    user-select: none;
}

.content-repeater-drag:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

.content-repeater-drag:active {
    cursor: grabbing;
}

/* The list highlights its grips on hover so reordering is discoverable. */
.content-repeater[data-reorder]:hover .content-repeater-drag {
    color: var(--gray-600);
}

.content-repeater-row--dragging {
    opacity: 0.25;
}

.content-repeater-placeholder {
    border: 2px dashed var(--navy);
    border-radius: 10px;
    background: rgba(0, 26, 127, 0.05);
    box-sizing: border-box;
}

.content-repeater-row--ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--white);
    border: 1px solid var(--navy);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 26, 127, 0.15);
    opacity: 0.95;
    padding: 0.35rem 0.4rem 0.35rem 0.55rem;
    box-sizing: border-box;
}

/* Edit button in list rows */
.gl-edit-btn {
    color: var(--whs-navy);
}

.gl-edit-btn:hover {
    background: rgba(0, 26, 127, 0.06);
}

/* ==============================================
   GALLERY MULTI-UPLOAD
   ============================================== */

.upload-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: #faf9f7;
}

.upload-dropzone:hover {
    border-color: var(--whs-navy);
    background: #f5f3ef;
}

.upload-dropzone--dragover {
    border-color: var(--whs-yellow);
    background: rgba(255, 189, 51, 0.06);
    border-style: solid;
}

.upload-dropzone svg {
    color: var(--gray-400);
    margin-bottom: 0.75rem;
}

.upload-dropzone--dragover svg {
    color: var(--whs-yellow-dark);
}

.upload-dropzone-text {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-700);
    margin: 0 0 0.25rem;
}

.upload-browse-link {
    color: var(--whs-navy);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.upload-browse-link:hover {
    color: var(--whs-navy-light);
}

.upload-dropzone-hint {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--gray-400);
    margin: 0;
}

/* Queue header */
.upload-queue {
    max-width: none;
    margin-top: 1rem;
}

.upload-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-100);
    flex-wrap: wrap;
}

.upload-queue-count {
    font-family: var(--font-subheading);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    letter-spacing: 0.02em;
}

.upload-queue-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Bulk details */
.upload-bulk {
    margin-bottom: 1rem;
}

.upload-bulk-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--whs-navy);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease;
}

.upload-bulk-toggle:hover {
    color: var(--whs-navy-light);
}

.upload-bulk-toggle svg {
    transition: transform 0.2s ease;
}

.upload-bulk-toggle--open svg {
    transform: rotate(180deg);
}

.upload-bulk-fields {
    margin-top: 0.75rem;
    padding: 1rem;
    background: #f9f8f6;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.upload-bulk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.upload-bulk-grid .form-group {
    margin-bottom: 0;
}

.upload-bulk-grid .form-group label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upload-bulk-grid .form-group input,
.upload-bulk-grid .form-group select {
    font-size: 0.8125rem;
    padding: 0.4rem 0.6rem;
}

.upload-bulk-action {
    display: flex;
    align-items: flex-end;
}

@media (max-width: 700px) {
    .upload-bulk-grid {
        grid-template-columns: 1fr 1fr;
    }

    .upload-bulk-action {
        grid-column: 1 / -1;
    }
}

/* Upload cards */
.upload-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
}

.upload-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.upload-card:hover {
    border-color: var(--gray-300);
}

.upload-card--uploading {
    border-color: var(--whs-navy);
    background: #fafbff;
}

.upload-card--done {
    border-color: #10b981;
    background: #f0fdf6;
}

.upload-card--error {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Thumbnail */
.upload-card-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-100);
}

.upload-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card info */
.upload-card-info {
    flex: 1;
    min-width: 0;
}

.upload-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.upload-card-filename {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.upload-card-size {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--gray-400);
    flex-shrink: 0;
}

.upload-card-remove {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--gray-400);
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    line-height: 0;
}

.upload-card-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Metadata toggle */
.upload-card-meta-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--whs-navy);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.125rem;
    transition: color 0.15s ease;
}

.upload-card-meta-toggle:hover {
    color: var(--whs-navy-light);
}

.upload-card-meta-toggle svg {
    transition: transform 0.2s ease;
}

.upload-card-meta-toggle--open svg {
    transform: rotate(180deg);
}

/* Metadata fields */
.upload-card-meta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-100);
}

.upload-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.upload-meta-grid .form-group {
    margin-bottom: 0;
}

.upload-meta-grid .form-group label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upload-meta-grid .form-group input,
.upload-meta-grid .form-group select {
    font-size: 0.8125rem;
    padding: 0.4rem 0.6rem;
}

/* Progress bar (per-file) */
.upload-card-progress {
    height: 4px;
    background: var(--gray-100);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.upload-card-progress-fill {
    height: 100%;
    background: var(--whs-navy);
    border-radius: 2px;
    width: 0;
    transition: width 0.15s ease;
}

.upload-card--done .upload-card-progress-fill {
    background: #10b981;
}

.upload-card--error .upload-card-progress-fill {
    background: #ef4444;
}

/* Status text */
.upload-card-status {
    font-family: var(--font-body);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.upload-card--done .upload-card-status {
    color: #047857;
}

.upload-card--error .upload-card-status {
    color: #dc2626;
}

/* Overall progress */
.upload-overall {
    max-width: none;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.upload-overall-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-100);
    border-radius: 3px;
    overflow: hidden;
}

.upload-overall-fill {
    height: 100%;
    background: var(--whs-navy);
    border-radius: 3px;
    width: 0;
    transition: width 0.3s ease;
}

.upload-overall-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--gray-600);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Reload bar */
.upload-reload-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    background: #f0fdf6;
    border: 1px solid #86efac;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: #047857;
}

/* Responsive */
@media (max-width: 600px) {
    .upload-card {
        flex-direction: column;
        align-items: stretch;
    }

    .upload-card-thumb {
        width: 100%;
        height: 120px;
    }

    .upload-meta-grid {
        grid-template-columns: 1fr;
    }

    .upload-queue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .upload-dropzone {
        padding: 2rem 1rem;
    }

    .gallery-list {
        font-size: 0.75rem;
    }

    .gl-thumb {
        width: 36px;
        height: 36px;
    }

    .gl-caption,
    .gl-memory {
        max-width: 120px;
    }

    .gallery-list thead th {
        font-size: 0.625rem;
        padding: 0.375rem 0.5rem;
    }

    .gallery-list td {
        padding: 0.5rem;
    }
}

/* ==================================================
   DASHBOARD — Facebook-style 2-column layout
   ================================================== */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

.dash-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 1100px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
}

/* Reset legacy stacking margins now we're gap-driven */
.dash-grid .dash-card + .dash-card { margin-top: 0; }

/* ---------- Feed: compact list items with thumbnails ---------- */
.dash-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.12s ease;
}

.dash-feed-item:last-child { border-bottom: none; }

.dash-feed-item:hover {
    background: rgba(0, 0, 0, 0.015);
}

.dash-feed-visual {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 10px;
    overflow: hidden;
    background: #f0f2f5;
}

.dash-feed-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-feed-avatar {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--whs-navy, #001A7F), #3b5fe6);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.dash-feed-photo-count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.3;
}

.dash-feed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dash-feed-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-width: 0;
}

.dash-feed-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1c1e21;
}

.dash-feed-role {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #65676b;
    background: #f0f2f5;
    padding: 2px 7px;
    border-radius: 10px;
}

.dash-feed-dot { color: #b0b3b8; }

.dash-feed-years {
    font-size: 0.78rem;
    color: #65676b;
}

.dash-feed-text {
    font-size: 0.83rem;
    color: #3a3b3c;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-feed-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #65676b;
}

.dash-feed-meta svg { flex-shrink: 0; opacity: 0.7; }

.dash-feed-action {
    flex: 0 0 auto;
    align-self: center;
}

.dash-card-footer-link {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--whs-navy);
    text-decoration: none;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.015);
    transition: background 0.12s ease;
}

.dash-card-footer-link:hover { background: rgba(0, 0, 0, 0.035); }

/* Small-size pills for inline badges in feed rows */
.badge--sm {
    font-size: 0.62rem;
    padding: 2px 7px;
}

/* ---------- Compact Reactions card (sidebar) ---------- */
.dash-card--react-hero {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.dash-card--react-hero::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 189, 51, 0.22), transparent 60%);
    pointer-events: none;
}

.dash-react-compact {
    padding: 1.25rem 1.4rem 1.4rem;
    position: relative;
    z-index: 1;
}

.dash-react-compact-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.dash-react-compact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    flex-shrink: 0;
}

.dash-card-title--plain {
    color: #fff;
    flex: 1;
    font-size: 0.9rem;
}

.dash-card--react-hero .dash-card-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.dash-card--react-hero .dash-card-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.dash-react-compact-num {
    font-family: var(--font-subheading, Oswald);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
}

.dash-react-compact-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.3rem;
}

.dash-react-compact-sub strong { color: #fff; font-weight: 600; }

.dash-react-compact-row {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dash-react-compact-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.dash-react-compact-val {
    font-family: var(--font-subheading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.dash-react-compact-lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dash-card--react-hero .dash-react-disabled-pill {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
}

/* ---------- Activity feed ---------- */
.dash-activity {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.dash-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    transition: background 0.12s ease;
}

.dash-activity-item:hover { background: rgba(0, 0, 0, 0.02); }

.dash-activity-visual {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash-activity-visual--photo {
    border-radius: 10px;
    overflow: visible;
    background: #f0f2f5;
}

.dash-activity-visual--photo img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

.dash-activity-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
}

.dash-activity-badge--inbox { background: var(--whs-navy, #001A7F); }
.dash-activity-badge--heart { background: #b91c1c; }
.dash-activity-badge--check { background: #10b981; }
.dash-activity-badge--x     { background: #ef4444; }
.dash-activity-badge--edit  { background: #d97706; }

.dash-activity-icon--inbox { background: rgba(0, 26, 127, 0.08); color: var(--whs-navy); }
.dash-activity-icon--heart { background: rgba(185, 28, 28, 0.1); color: #b91c1c; }
.dash-activity-icon--check { background: rgba(16, 185, 129, 0.12); color: #047857; }
.dash-activity-icon--x     { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
.dash-activity-icon--edit  { background: rgba(255, 189, 51, 0.18); color: #b87b14; }

.dash-activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-activity-text {
    font-size: 0.82rem;
    color: #1c1e21;
    text-decoration: none;
    line-height: 1.4;
}

a.dash-activity-text:hover { color: var(--whs-navy); }

.dash-activity-text strong { font-weight: 600; }

.dash-activity-time {
    font-size: 0.7rem;
    color: #65676b;
}

.dash-card-empty--sm {
    padding: 1.25rem 1.25rem 1.5rem;
}

/* ==================================================
   DASHBOARD — Wales theme (Roboto body, Oswald only on
   the established subheading slots, navy + yellow brand)
   ================================================== */

/* ==================================================
   Topbar "Since your last visit" icon + popout
   Sits alongside the notification bell, same shape.
   ================================================== */
.topbar-since {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-since-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.topbar-since-btn:hover,
.topbar-since--open .topbar-since-btn {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 189, 51, 0.35);
    color: var(--whs-yellow, #ffbd33);
}

.topbar-since-btn:active { transform: scale(0.95); }

.topbar-since-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--whs-yellow, #ffbd33);
    color: #1c1e21;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-feature-settings: "tnum" 1;
    box-shadow: 0 0 0 2px #2a2d31;
}

.topbar-since-badge[hidden] { display: none; }

.topbar-since-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    color: #1c1e21;
}

.topbar-since-panel[hidden] { display: none; }

.topbar-since-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

.topbar-since-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e6eb;
}

.topbar-since-title {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.85rem;
    font-weight: 600;
    color: #1c1e21;
    letter-spacing: 0.02em;
}

.topbar-since-when {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #65676b;
}

.topbar-since-clear {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--whs-navy);
    background: rgba(0, 26, 127, 0.06);
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.topbar-since-clear:hover { background: rgba(0, 26, 127, 0.12); }

.topbar-since-body {
    padding: 0.5rem 0.5rem 0.6rem;
    max-height: 420px;
    overflow-y: auto;
}

.topbar-since-empty {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 0.8rem;
    color: #65676b;
    font-size: 0.84rem;
}

.topbar-since-empty svg { color: #059669; }

.topbar-since-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease;
}

.topbar-since-stat + .topbar-since-stat { margin-top: 2px; }

a.topbar-since-stat:hover { background: rgba(0, 0, 0, 0.04); color: inherit; }

.topbar-since-stat-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 26, 127, 0.08);
    color: var(--whs-navy);
}

.topbar-since-stat--react .topbar-since-stat-icon {
    background: rgba(185, 28, 28, 0.1);
    color: #b91c1c;
}

.topbar-since-stat--mod .topbar-since-stat-icon {
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
}

.topbar-since-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.topbar-since-stat-body strong {
    font-size: 0.84rem;
    font-weight: 600;
    color: #1c1e21;
}

.topbar-since-stat-body small {
    margin-top: 2px;
    font-size: 0.72rem;
    color: #65676b;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .topbar-since-panel { right: -50px; }
}

/* ---------- Hero stat tiles ---------- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-stat {
    --tile-accent: var(--whs-navy, #001A7F);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.95rem 0.55rem;
    background: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(20, 22, 26, 0.05),
        0 2px 8px rgba(20, 22, 26, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.dash-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tile-accent);
}

.dash-stat:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(20, 22, 26, 0.07),
        0 6px 20px rgba(20, 22, 26, 0.08);
}

.dash-stat--pending  { --tile-accent: #f59e0b; }
.dash-stat--approved { --tile-accent: #059669; }
.dash-stat--featured { --tile-accent: var(--whs-yellow, #ffbd33); }

.dash-stat--alert { --tile-accent: #ef4444; }

.dash-stat-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.dash-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--tile-accent);
    flex-shrink: 0;
}

.dash-stat-label {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: #65676b;
    margin: 0;
}

.dash-stat-figure {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.2rem 0 0.2rem;
}

.dash-stat-value {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #1c1e21;
    line-height: 1;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum" 1;
}

.dash-stat-unit {
    font-size: 0.78rem;
    font-weight: 400;
    color: #8a8d91;
    line-height: 1;
}

/* Sparkline — pure CSS bar chart */
.dash-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    margin: 0.1rem 0 0.35rem;
}

.dash-spark-bar {
    flex: 1;
    min-height: 8%;
    background: var(--tile-accent);
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.dash-spark-bar:hover { opacity: 1; }

.dash-spark-bar--zero {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
    height: 3px !important;
    align-self: flex-end;
}

.dash-spark--navy  { --tile-accent: var(--whs-navy, #001A7F); }
.dash-spark--amber { --tile-accent: #f59e0b; }
.dash-spark--green { --tile-accent: #059669; }

.dash-stat-stars {
    display: flex;
    gap: 2px;
    height: 16px;
    align-items: center;
    color: var(--whs-yellow, #ffbd33);
    margin: 0.1rem 0 0.35rem;
}

.dash-stat-foot { margin-top: auto; }

.dash-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #65676b;
    text-decoration: none;
    font-feature-settings: "tnum" 1;
    transition: color 0.15s ease;
}

a.dash-stat-trend:hover { color: var(--tile-accent); }

.dash-stat-trend-num {
    font-weight: 700;
    color: #1c1e21;
}

.dash-stat-trend--up    { color: #047857; }
.dash-stat-trend--up    .dash-stat-trend-num { color: #047857; }
.dash-stat-trend--down  { color: #b45309; }
.dash-stat-trend--down  .dash-stat-trend-num { color: #b45309; }
.dash-stat-trend--amber { color: #b45309; }
.dash-stat-trend--amber .dash-stat-trend-num { color: #b45309; }
.dash-stat-trend--alert { color: #b91c1c; font-weight: 600; }
.dash-stat-trend--alert .dash-stat-trend-num { color: #b91c1c; }

@media (max-width: 1100px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .dash-stats { grid-template-columns: 1fr; }
}

/* ---------- 30-day rhythm strip ---------- */
.dash-rhythm {
    background: #fff;
    border-radius: 12px;
    padding: 0.95rem 1.15rem 0.8rem;
    margin-bottom: 1rem;
    box-shadow:
        0 1px 2px rgba(20, 22, 26, 0.05),
        0 2px 8px rgba(20, 22, 26, 0.04);
    position: relative;
    overflow: hidden;
}

.dash-rhythm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--whs-yellow, #ffbd33);
}

.dash-rhythm-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}

.dash-rhythm-label {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1c1e21;
}

.dash-rhythm-range {
    font-size: 0.74rem;
    color: #8a8d91;
}

.dash-rhythm-total {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: #65676b;
    font-feature-settings: "tnum" 1;
}

.dash-rhythm-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 48px;
    padding: 4px 0 6px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.dash-rhythm-bar {
    flex: 1;
    min-height: 6%;
    background: var(--whs-navy, #001A7F);
    border-radius: 2px 2px 0 0;
    cursor: default;
    transition: filter 0.15s ease;
}

.dash-rhythm-bar:hover { filter: brightness(1.2); }

.dash-rhythm-bar--zero {
    background: rgba(0, 0, 0, 0.06);
    height: 4px !important;
}

.dash-rhythm-bar--today {
    background: var(--whs-yellow, #ffbd33);
}

.dash-rhythm-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: #8a8d91;
    font-feature-settings: "tnum" 1;
}

.dash-rhythm-axis-mid { color: #b0b3b8; }

/* ---------- Spotlight — sits inside its parent .dash-card panel ---------- */
.dash-card--spotlight .dash-spotlight {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 0.18s ease;
}

.dash-card--spotlight .dash-spotlight:hover {
    background: rgba(0, 0, 0, 0.015);
}

.dash-card--spotlight .dash-spotlight-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 10px;
}

.dash-card--spotlight .dash-spotlight-body {
    padding: 0;
}

.dash-spotlight-thumb {
    flex: 0 0 124px;
    width: 124px;
    height: 124px;
    position: relative;
    overflow: hidden;
    background: #1c1e21;
}

.dash-spotlight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dash-spotlight:hover .dash-spotlight-thumb img { transform: scale(1.05); }

.dash-spotlight-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--whs-yellow, #ffbd33);
    color: #1c1e21;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
    line-height: 1.1;
}

.dash-spotlight-body {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dash-spotlight-eyebrow {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--whs-navy, #001A7F);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dash-spotlight-name {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1c1e21;
    margin: 0;
    line-height: 1.2;
}

.dash-spotlight-years {
    font-weight: 400;
    color: #65676b;
    font-size: 0.85rem;
}

.dash-spotlight-quote {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.82rem;
    color: #65676b;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dash-spotlight-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 0.2rem;
}

.dash-spotlight-react {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #b91c1c;
    font-feature-settings: "tnum" 1;
}

.dash-spotlight-react svg { color: #b91c1c; }

.dash-spotlight-cat {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--whs-navy, #001A7F);
    background: rgba(0, 26, 127, 0.07);
    padding: 2px 8px;
    border-radius: 10px;
}

.dash-spotlight-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--whs-navy, #001A7F);
    transition: gap 0.15s ease;
}

.dash-spotlight:hover .dash-spotlight-cta { gap: 0.5rem; }

@media (max-width: 560px) {
    .dash-spotlight { flex-direction: column; }
    .dash-spotlight-thumb {
        flex: 0 0 auto;
        width: 100%;
        height: 160px;
    }
}

/* ---------- Top Contributors widget ---------- */
.dash-contrib {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.dash-contrib-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.25rem;
    transition: background 0.12s ease;
}

.dash-contrib-item:hover { background: rgba(0, 0, 0, 0.02); }

.dash-contrib-rank {
    font-size: 0.78rem;
    font-weight: 700;
    color: #b0b3b8;
    width: 14px;
    text-align: center;
    font-feature-settings: "tnum" 1;
}

.dash-contrib-item:nth-child(1) .dash-contrib-rank { color: var(--whs-navy, #001A7F); }

.dash-contrib-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #1c1e21, #3b3e44);
}

.dash-contrib-avatar--student { background: linear-gradient(135deg, var(--whs-navy, #001A7F), #3b5fe6); }
.dash-contrib-avatar--staff   { background: linear-gradient(135deg, #059669, #10b981); }
.dash-contrib-avatar--parent  { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

.dash-contrib-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-contrib-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1c1e21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-contrib-role {
    font-size: 0.72rem;
    color: #65676b;
}

.dash-contrib-dot { color: #b0b3b8; }

.dash-contrib-count {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.dash-contrib-count-num {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1e21;
    line-height: 1;
    font-feature-settings: "tnum" 1;
}

.dash-contrib-count-lbl {
    font-size: 0.65rem;
    color: #8a8d91;
}

/* ---------- Admin Log (audit trail) ---------- */
.dash-log {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}

.dash-log-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 1.25rem;
    transition: background 0.12s ease;
}

.dash-log-item:hover { background: rgba(0, 0, 0, 0.02); }

.dash-log-verb {
    flex: 0 0 64px;
    text-align: center;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 0;
    border-radius: 4px;
    line-height: 1;
    text-transform: uppercase;
    margin-top: 1px;
}

.dash-log-verb--approved {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}
.dash-log-verb--rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}
.dash-log-verb--updated {
    background: rgba(255, 189, 51, 0.18);
    color: #b87b14;
}

.dash-log-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-log-target {
    font-size: 0.83rem;
    font-weight: 500;
    color: #1c1e21;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.dash-log-target:hover { color: var(--whs-navy, #001A7F); }

.dash-log-meta {
    font-size: 0.7rem;
    color: #65676b;
    font-feature-settings: "tnum" 1;
}

.dash-log-meta strong {
    font-weight: 600;
    color: #3a3b3c;
}

.dash-log-dot { color: #b0b3b8; margin: 0 0.15rem; }

/* Card-header right-side count chip ("5" or "5 of 27") */
.dash-card-count {
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-feature-settings: "tnum" 1;
    line-height: 1.3;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Floating hearts inside the red Reactions hero ---------- */
.dash-react-hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.dash-react-heart {
    position: absolute;
    bottom: -14px;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    animation: dashHeartRise 9s linear infinite;
    transform-origin: center;
}

.dash-react-heart--1 { left:  6%; animation-delay:  0s;   width: 26px; height: 26px; }
.dash-react-heart--2 { left: 26%; animation-delay:  1.8s; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.2); }
.dash-react-heart--3 { left: 48%; animation-delay:  4.2s; width: 34px; height: 34px; color: rgba(255, 189, 51, 0.34); }
.dash-react-heart--4 { left: 70%; animation-delay:  6s;   width: 22px; height: 22px; color: rgba(255, 255, 255, 0.24); }
.dash-react-heart--5 { left: 88%; animation-delay:  3s;   width: 28px; height: 28px; color: rgba(255, 255, 255, 0.22); }

@keyframes dashHeartRise {
    0%   { transform: translateY(0)    rotate(-6deg) scale(0.85); opacity: 0; }
    10%  { opacity: 0.9; }
    50%  { transform: translateY(-60px) rotate(4deg) scale(1);   opacity: 0.8; }
    90%  { opacity: 0; }
    100% { transform: translateY(-120px) rotate(-3deg) scale(0.9); opacity: 0; }
}

/* Reactions number gets a subtle heartbeat when high */
.dash-react-compact-num {
    transition: transform 0.3s ease;
}

.dash-card--react-hero:hover .dash-react-compact-num {
    animation: dashHeartBeat 1.2s ease-in-out;
}

@keyframes dashHeartBeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.08); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.06); }
    70%      { transform: scale(1); }
}

/* Make sure the card body sits above the floating hearts */
.dash-card--react-hero .dash-react-compact { position: relative; z-index: 1; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dash-react-heart { animation: none; opacity: 0; }
    .dash-card--react-hero:hover .dash-react-compact-num { animation: none; }
}

/* ---------- Admin Log full-history modal ---------- */
.modal-card--log {
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal-card--log .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dash-log-modal-count {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #65676b;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px 9px;
    border-radius: 10px;
    font-feature-settings: "tnum" 1;
    vertical-align: 2px;
}

.modal-body--log {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.dash-log--full .dash-log-item {
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    align-items: center;
    gap: 0.85rem;
}

.dash-log--full .dash-log-item:last-child { border-bottom: none; }

.dash-log--full .dash-log-verb { flex: 0 0 70px; }

.dash-log-abs {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #8a8d91;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 540px) {
    .dash-log-abs { display: none; }
}

/* Edit-admin-user modal — wider than confirm dialogs to fit the form */
.modal-card--edit-user {
    max-width: 480px;
}

.modal-card--edit-user .modal-body {
    padding: 1rem 1.5rem 1.25rem;
}

.modal-card--edit-user .modal-body .form-group + .form-group {
    margin-top: 0.85rem;
}

.modal-card--edit-user .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 0 0.25rem;
    border-top: none;
    margin-top: 1rem;
}

.modal-card--edit-user input[disabled] {
    background: #f0f2f5;
    color: #65676b;
    cursor: not-allowed;
}

/* Checkbox-with-side-text rows in admin forms */
.form-checkbox-row { padding-top: 0.4rem; }

.form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.12s ease;
}

.form-checkbox-label:hover { background: rgba(0, 0, 0, 0.04); }

.form-checkbox-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }

.form-checkbox-label strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1c1e21;
}

.form-checkbox-label small {
    display: block;
    font-size: 0.74rem;
    color: #65676b;
    margin-top: 2px;
    line-height: 1.4;
}

/* ---------- Email Alerts settings UI ---------- */
.settings-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.settings-grid-2 .form-group { margin: 0; }

@media (max-width: 640px) {
    .settings-grid-2 { grid-template-columns: 1fr; }
}

.email-alerts-table {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.email-alert-row {
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.email-alert-row-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
}

.email-alert-row-text strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1c1e21;
}

.email-alert-row-text small {
    display: block;
    font-size: 0.78rem;
    color: #65676b;
    margin-top: 1px;
}

.email-alert-recipients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
    padding: 0.6rem 0 0.1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

.email-alert-recip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.email-alert-recip:hover { background: rgba(0, 0, 0, 0.025); }

.email-alert-recip input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.email-alert-recip-text strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1c1e21;
}

.email-alert-recip-text small {
    display: block;
    font-size: 0.72rem;
    color: #65676b;
    word-break: break-all;
}

.toggle-switch--sm { transform: scale(0.85); transform-origin: left center; }

/* Inline test-email picker in the Email Alerts panel header */
.test-email-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    flex-wrap: wrap;
}

.test-email-label {
    font-size: 0.78rem;
    color: #65676b;
    font-weight: 500;
    margin: 0;
}

.test-email-select {
    padding: 6px 10px;
    border: 1px solid #d0d3d8;
    border-radius: 6px;
    font-size: 0.82rem;
    background: #fff;
    max-width: 280px;
}

/* Test email modal — same shape as the edit-user modal */
.modal-card--test-email {
    max-width: 480px;
}

.modal-card--test-email .modal-body {
    padding: 1rem 1.5rem 1.25rem;
}

.modal-card--test-email .modal-body .form-group + .form-group {
    margin-top: 0.85rem;
}

.modal-card--test-email .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 0 0.25rem;
    border-top: none;
    margin-top: 1rem;
}

.modal-card--test-email small.form-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
}

/* ==================================================
   Welcome wizard — first-visit guided tour
   ================================================== */
.welcome-wizard {
    /* Stronger blur than the standard modal so the dashboard reads as
       "behind glass" while the tour is open */
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.welcome-wizard-card {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    margin: 1rem;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: scale(0.96) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    padding: 28px 30px 0;
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .welcome-wizard-card {
    transform: scale(1) translateY(0);
}

.welcome-wizard-x {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #65676b;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    z-index: 2;
}

.welcome-wizard-x:hover { background: rgba(0, 0, 0, 0.1); color: #1c1e21; }

/* Progress dots */
.welcome-wizard-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 22px;
}

.welcome-wizard-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: #e4e6eb;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}

.welcome-wizard-dot.is-active {
    background: var(--whs-yellow, #ffbd33);
}

.welcome-wizard-dot:hover {
    background: var(--whs-navy, #001A7F);
}

.welcome-wizard-dot.is-active:hover {
    background: var(--whs-yellow, #ffbd33);
}

/* Steps — one visible at a time, content sizes the card naturally so nothing
   ever gets clipped. Long steps scroll within the card if needed. */
.welcome-wizard-steps {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 8px;
    margin: 0 -4px;            /* keep scrollbar out of the icon area */
    min-height: 0;
}

.welcome-wizard-step {
    display: none;
    text-align: center;
    padding: 4px 4px 8px;
}

.welcome-wizard-step.is-active {
    display: block;
    animation: wizFadeIn 0.25s ease both;
}

@keyframes wizFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.welcome-wizard-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--whs-navy, #001A7F);
    box-shadow: 0 6px 18px rgba(0, 26, 127, 0.25);
}

.welcome-wizard-icon--navy   { background: linear-gradient(135deg, #001A7F, #3b5fe6); box-shadow: 0 6px 18px rgba(0, 26, 127, 0.3); }
.welcome-wizard-icon--amber  { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3); }
.welcome-wizard-icon--red    { background: linear-gradient(135deg, #b91c1c, #dc2626); box-shadow: 0 6px 18px rgba(185, 28, 28, 0.3); }
.welcome-wizard-icon--yellow { background: linear-gradient(135deg, #ffbd33, #f59e0b); color: #1c1e21; box-shadow: 0 6px 18px rgba(255, 189, 51, 0.35); }
.welcome-wizard-icon--green  { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 6px 18px rgba(5, 150, 105, 0.3); }

.welcome-wizard-eyebrow {
    display: inline-block;
    font-family: var(--font-subheading, Oswald);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--whs-navy, #001A7F);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.welcome-wizard-title {
    font-family: var(--font-subheading, Oswald);
    font-size: 1.55rem;
    font-weight: 600;
    color: #1c1e21;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.welcome-wizard-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #3a3b3c;
    margin: 0 0 12px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.welcome-wizard-list {
    text-align: left;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.welcome-wizard-list li {
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 0.86rem;
    color: #3a3b3c;
    line-height: 1.5;
}

.welcome-wizard-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 16px;
    height: 16px;
    background: var(--whs-yellow, #ffbd33);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.welcome-wizard-list li strong { color: #1c1e21; font-weight: 600; }

/* Footer actions: skip on left, counter centred, prev/next on right */
.welcome-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 20px;
    margin-top: 14px;
    border-top: 1px solid #e4e6eb;
    flex-shrink: 0;            /* never compress — keeps Next button reachable */
    background: #fff;
}

.welcome-wizard-skip {
    background: transparent;
    border: none;
    color: #65676b;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 6px 4px;
    transition: color 0.12s ease;
}

.welcome-wizard-skip:hover { color: #1c1e21; text-decoration: underline; }

.welcome-wizard-counter {
    font-family: var(--font-subheading, Oswald);
    font-size: 0.78rem;
    color: #8a8d91;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
}

.welcome-wizard-nav {
    display: flex;
    gap: 8px;
}

.welcome-wizard-finish {
    background: #059669 !important;
    border-color: #059669 !important;
}

.welcome-wizard-finish:hover { background: #047857 !important; }

@media (max-width: 540px) {
    .welcome-wizard-card { padding: 22px 20px 0; max-height: 92vh; }
    .welcome-wizard-icon { width: 64px; height: 64px; margin-bottom: 14px; }
    .welcome-wizard-title { font-size: 1.3rem; }
    .welcome-wizard-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .welcome-wizard-counter { order: 3; width: 100%; text-align: center; }
}

/* Submission meta strip in the review modal — exact timestamp + IPs */
.review-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 1rem;
    background: #f0f2f5;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #65676b;
}

.review-meta-item strong {
    color: #1c1e21;
    font-weight: 600;
    margin-right: 0.25rem;
}

.review-meta-item code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.74rem;
    color: #1c1e21;
}

/* ---------- Internal notes (admin-only comments on a submission) ---------- */
.review-field--notes label small {
    color: #8a8d91;
    font-weight: 400;
    margin-left: 0.3rem;
}

.review-notes-list {
    list-style: none;
    margin: 0.4rem 0 0.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-note {
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: #fffbe6;             /* warm post-it tone — instantly reads as "internal" */
    border-left: 3px solid #ffbd33;
    border-radius: 0 8px 8px 0;
}

.review-note--empty {
    background: transparent;
    border-left: none;
    color: #8a8d91;
    font-size: 0.82rem;
    font-style: italic;
    padding: 0.4rem 0;
}

.review-note-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--whs-navy, #001A7F), #3b5fe6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 1px;
}

.review-note-body {
    flex: 1;
    min-width: 0;
}

.review-note-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2px;
}

.review-note-head strong {
    font-size: 0.82rem;
    color: #1c1e21;
    font-weight: 600;
}

.review-note-time {
    font-size: 0.72rem;
    color: #8a8d91;
    font-feature-settings: "tnum" 1;
}

.review-note-del {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #8a8d91;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.review-note-del:hover {
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
}

.review-note-text {
    margin: 0;
    font-size: 0.85rem;
    color: #3a3b3c;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.review-note-add {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.review-note-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d0d3d8;
    border-radius: 8px;
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 56px;
    background: #fff;
}

.review-note-input:focus {
    outline: none;
    border-color: var(--whs-navy, #001A7F);
    box-shadow: 0 0 0 3px rgba(0, 26, 127, 0.08);
}

.review-note-add-btn {
    align-self: flex-end;
}

/* ---------- Health Check tab ---------- */
.health-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin: 0.5rem 0 1.25rem;
}

.health-banner--ok {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.health-banner strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1c1e21;
}

.health-banner small {
    display: block;
    font-size: 0.78rem;
    color: #65676b;
    margin-top: 1px;
}

.health-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.health-section:first-of-type {
    margin-top: 0.75rem;
    padding-top: 0;
    border-top: none;
}

.health-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
    font-family: var(--font-subheading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c1e21;
}

.health-section-count {
    background: rgba(0, 0, 0, 0.05);
    color: #65676b;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
    font-feature-settings: "tnum" 1;
}

.health-section-subcount {
    font-size: 0.74rem;
    color: #b45309;
    font-weight: 500;
    margin-left: auto;
}

.health-section-desc {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: #65676b;
}

.health-section-desc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.health-empty {
    padding: 0.85rem 1rem;
    background: rgba(16, 185, 129, 0.05);
    border: 1px dashed rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    color: #047857;
    font-size: 0.82rem;
    font-style: italic;
}

.health-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.health-dot--ok    { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.health-dot--warn  { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.health-dot--alert { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

/* ==================================================
   Public-side admin bar — WordPress-style top strip
   shown only when an admin is signed in.
   ================================================== */
.pubbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: #1c1e21;
    color: #fff;
    /* Above the public site nav (z-index: 1000) so the dropdown isn't covered */
    z-index: 100000;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.18);
    font-family: var(--font-body, Roboto), Roboto, sans-serif;
}

/* Push the page down to clear the bar — only when html.has-pubbar is set */
html.has-pubbar { padding-top: 36px; }
html.has-pubbar body { position: relative; }
html.has-pubbar .nav,
html.has-pubbar .nav.scrolled {
    top: 36px;
}

.pubbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    gap: 4px;
}

.pubbar a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.pubbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 12px 0 4px;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

.pubbar-brand:hover { color: var(--whs-yellow, #ffbd33); }

.pubbar-brand svg { color: var(--whs-yellow, #ffbd33); }

.pubbar-brand em {
    font-style: normal;
    color: var(--whs-yellow, #ffbd33);
    font-weight: 600;
}

.pubbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 11px;
    height: 100%;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.pubbar-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.pubbar-link svg { opacity: 0.75; }

.pubbar-link.has-pending { color: #fff; }

.pubbar-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    font-feature-settings: "tnum" 1;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

.pubbar-link--context {
    color: var(--whs-yellow, #ffbd33);
    background: rgba(255, 189, 51, 0.08);
}

.pubbar-link--context:hover {
    background: rgba(255, 189, 51, 0.16);
    color: var(--whs-yellow, #ffbd33);
}

.pubbar-link--context svg { opacity: 1; }

.pubbar-spacer { flex: 1; }

/* User dropdown on the right */
.pubbar-user {
    position: relative;
    height: 100%;
}

.pubbar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 10px;
    height: 100%;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.12s ease;
}

.pubbar-user-btn:hover,
.pubbar-user.open .pubbar-user-btn {
    background: rgba(255, 255, 255, 0.06);
}

.pubbar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffbd33, #f59e0b);
    color: #1c1e21;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
}

.pubbar-user-avatar--lg {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
}

.pubbar-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pubbar-user-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 240px;
    background: #fff;
    color: #1c1e21;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), 0 10px 32px rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0;
    overflow: hidden;
}

.pubbar-user-panel[hidden] { display: none; }

.pubbar-user-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem 0.5rem;
}

.pubbar-user-head strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1c1e21;
}

.pubbar-user-head small {
    display: block;
    font-size: 0.72rem;
    color: #65676b;
    margin-top: 1px;
}

.pubbar-user-divider {
    height: 1px;
    background: #e4e6eb;
    margin: 0.3rem 0;
}

/* Scoped to the panel so the broad ".pubbar a { color: white }" rule
   doesn't bleed into the white-bg dropdown */
.pubbar .pubbar-user-panel a.pubbar-user-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #1c1e21;
    text-decoration: none;
    transition: background 0.1s ease;
}

.pubbar .pubbar-user-panel a.pubbar-user-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1c1e21;
}

.pubbar .pubbar-user-panel a.pubbar-user-link svg { opacity: 0.7; flex-shrink: 0; }

.pubbar .pubbar-user-panel a.pubbar-user-link--logout { color: #b91c1c; }
.pubbar .pubbar-user-panel a.pubbar-user-link--logout:hover {
    background: rgba(185, 28, 28, 0.06);
    color: #b91c1c;
}
.pubbar .pubbar-user-panel a.pubbar-user-link--logout svg { opacity: 0.85; }

@media (max-width: 640px) {
    .pubbar-brand-text { display: none; }
    .pubbar-link span:not(.pubbar-pending-badge) { display: none; }
    .pubbar-user-name { display: none; }
}

/* ---------- Banned IPs panel (Activity Log tab) ---------- */
.ban-panel {
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 10px;
    padding: 0.85rem 1rem 0.95rem;
    margin: 0.5rem 0 1.25rem;
}

.ban-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.ban-panel-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ban-add-form {
    display: flex;
    gap: 0.4rem;
    margin: 0;
}

.ban-add-input {
    padding: 6px 10px;
    border: 1px solid #d0d3d8;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    width: 180px;
}

.ban-panel-empty {
    margin: 0;
    font-size: 0.78rem;
    color: #65676b;
    font-style: italic;
}

.ban-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ban-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(185, 28, 28, 0.08);
    color: #b91c1c;
    padding: 4px 4px 4px 10px;
    border-radius: 14px;
    font-size: 0.78rem;
}

.ban-chip code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: transparent;
    color: inherit;
    font-weight: 600;
}

.ban-chip-x {
    background: rgba(185, 28, 28, 0.16);
    color: #b91c1c;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease;
}

.ban-chip-x:hover { background: rgba(185, 28, 28, 0.3); }

/* ===== Storage panel (Settings > Storage tab) ============================ */

.storage-dist-body {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 2rem;
    align-items: center;
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 820px) {
    .storage-dist-body {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Donut chart ------------------------------------------------------------- */
.storage-donut-wrap {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.storage-donut {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(20, 22, 26, 0.08));
    transform: rotate(0deg);
    animation: storageDonutIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.storage-donut circle {
    transition: opacity 0.2s ease;
}

.storage-donut-wrap:hover .storage-donut circle[stroke-dasharray] {
    opacity: 0.55;
}

.storage-donut-wrap:hover .storage-donut circle[stroke-dasharray]:hover {
    opacity: 1;
}

.storage-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    gap: 0.15rem;
}

.storage-donut-center strong {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--whs-navy, #001A7F);
    line-height: 1;
}

.storage-donut-center span {
    font-size: 0.78rem;
    color: #65676b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@keyframes storageDonutIn {
    from { opacity: 0; transform: rotate(-25deg) scale(0.85); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Stacked bar + legend --------------------------------------------------- */
.storage-dist-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.storage-dist-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: #f0f2f5;
    box-shadow: inset 0 1px 2px rgba(20, 22, 26, 0.05);
}

.storage-dist-seg {
    height: 100%;
    display: block;
    transition: filter 0.15s ease;
}

.storage-dist-seg:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.storage-dist-seg:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

.storage-dist-seg:hover {
    filter: brightness(1.08);
}

.storage-dist-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.storage-dist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #fafbfc;
    border: 1px solid #eceef1;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.storage-dist-item:hover {
    background: #fff;
    border-color: #d9dde2;
}

.storage-dist-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-top: 0.25rem;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.02);
}

.storage-dist-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.storage-dist-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.1rem;
}

.storage-dist-item-head strong {
    font-size: 0.85rem;
    color: #1c1e21;
    font-weight: 600;
}

.storage-dist-item-pct {
    font-family: 'Oswald', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--whs-navy, #001A7F);
    letter-spacing: 0.02em;
}

.storage-dist-item-body small {
    display: block;
    font-size: 0.73rem;
    color: #65676b;
    letter-spacing: 0.01em;
}

/* Photos by file type — chips + share bars -------------------------------- */
.storage-ext-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 2px rgba(20, 22, 26, 0.1);
}

.storage-pct-bar {
    position: relative;
    display: inline-block;
    width: 130px;
    max-width: 55%;
    height: 8px;
    border-radius: 999px;
    background: #f0f2f5;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 0.6rem;
}

.storage-pct-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    animation: storagePctIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes storagePctIn {
    from { width: 0 !important; }
}

.storage-pct-num {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1c1e21;
    letter-spacing: 0.03em;
    min-width: 32px;
    vertical-align: middle;
}

.gl-size {
    font-variant-numeric: tabular-nums;
    color: #1c1e21;
    font-weight: 500;
}

/* =================================================================== */
/* Gallery videos — public tiles + lightbox iframe + admin UI           */
/* =================================================================== */

/* Base video tile — sits in the same grid as photos. Styled as a clean
   rounded card, inherits landscape/film chrome when the admin opts in. */
.photo-frame--video {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.photo-frame--video .frame-inner {
    position: relative;
    overflow: hidden;
    background: #0a0b0d;
}

.photo-frame--video .frame-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease;
}

.photo-frame--video:hover .frame-inner img {
    transform: scale(1.04);
    filter: brightness(0.72);
}

/* Plain video tile (the most common frame_style='video') */
.photo-frame--video-video {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(20, 22, 26, 0.16);
}

.photo-frame--video-video .frame-inner {
    border-radius: 12px;
    aspect-ratio: 16 / 9;
}

/* Play button overlay — large, centered, softens on hover */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    color: var(--whs-navy, #001A7F);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

.video-play-overlay svg {
    margin-left: 4px;
}

.photo-frame--video:hover .video-play-overlay {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--whs-yellow, #FFBD33);
    color: var(--whs-navy, #001A7F);
}

/* Duration chip (bottom-right) */
.video-duration-chip {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(10, 11, 13, 0.82);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
}

.video-thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: linear-gradient(135deg, #1a1c20 0%, #2a2d31 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a4d52;
}

.video-thumb-placeholder::before {
    content: '';
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: currentColor;
    opacity: 0.35;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='23 7 16 12 23 17 23 7'/><rect x='1' y='5' width='15' height='14' rx='2' ry='2' fill='none' stroke='black' stroke-width='1.5'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='23 7 16 12 23 17 23 7'/><rect x='1' y='5' width='15' height='14' rx='2' ry='2' fill='none' stroke='black' stroke-width='1.5'/></svg>") center / contain no-repeat;
}

/* When a video uses the landscape style, the existing .photo-frame--landscape
   rules apply — we just need to ensure the play button and duration chip
   aren't swallowed by the label overlay. */
.photo-frame--video.photo-frame--landscape .video-play-overlay,
.photo-frame--video.photo-frame--landscape .video-duration-chip {
    z-index: 4;
}

/* Film style: keep the sprocket strip but dim the frame a touch to make the
   play button pop. */
.photo-frame--video.photo-frame--film .frame-inner {
    aspect-ratio: 16 / 9;
}

/* ---------- Lightbox video (iframe) ---------- */

.lightbox-video {
    display: block;
    width: min(90vw, 1200px);
    aspect-ratio: 16 / 9;
    max-height: 85vh;
    background: #000;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* =================================================================== */
/* Admin gallery — video row thumbnail + video-aware cards & modals     */
/* =================================================================== */

/* Provider badge for video gallery rows — small pill that sits beside
   the VIDEO chip, colour-coded so admins can scan Vimeo vs YouTube fast. */
.gl-provider-badge {
    margin-left: 4px;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-weight: 600;
}

.gl-provider-badge--vimeo {
    background: rgba(26, 183, 234, 0.12);
    color: #0d7faa;
    border: 1px solid rgba(26, 183, 234, 0.25);
}

.gl-provider-badge--youtube {
    background: rgba(255, 0, 0, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(255, 0, 0, 0.18);
}

/* Wrapper around list-view thumbnails so we can stack a play icon on top
   without affecting photo rows. */
.gl-thumb-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.gl-thumb-wrap--video .gl-thumb-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--whs-navy, #001A7F);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.gl-thumb-wrap--video .gl-thumb-play svg {
    margin-left: 2px;
}

.gl-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f0f2f5;
    color: #65676b;
}

/* Grid-view admin card overlays for videos */
.gallery-card--video .gallery-card-image {
    position: relative;
    background: #0a0b0d;
}

.gallery-card-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--whs-navy, #001A7F);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.gallery-card-video-play svg {
    margin-left: 2px;
}

.gallery-card-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(10, 11, 13, 0.85);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}

/* Add Video form — lives inside .content-sub-body so the accordion provides
   its own card chrome. Keep the form itself chrome-less and just space rows. */
.gallery-video-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;   /* rows stretch, but button gets align-self below */
}

.gallery-video-form .form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.gallery-video-form .form-row .form-group {
    flex: 1 1 220px;
    min-width: 180px;
}

.gallery-video-form .form-required {
    color: #b91c1c;
    margin-left: 2px;
}

/* Action row — keeps the submit button content-width and left-aligned
   rather than stretched by the column flex. */
.gallery-video-form-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.35rem;
}

.gallery-video-form-actions .btn {
    width: auto;
    align-self: flex-start;
}

.subsection-hint {
    font-weight: 400;
    font-size: 0.72rem;
    color: #65676b;
    margin-left: 0.5rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Gallery accordion — shares the content-accordion chrome, but sits inside
   a vtabs-panel that already has padding, so trim the outer margin. */
.gallery-accordion {
    margin-top: 1rem;
}

/* =================================================================== */
/* Settings > Thumbnails tab                                            */
/* =================================================================== */

.thumbs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.thumbs-stat {
    background: #fafbfc;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.thumbs-stat-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #65676b;
}

.thumbs-stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 500;
    color: #1c1e21;
}

.thumbs-stat small {
    font-size: 0.78rem;
    color: #65676b;
}

.thumbs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.thumbs-progress {
    margin-top: 1rem;
    padding: 1rem;
    background: #fafbfc;
    border: 1px solid #eceef1;
    border-radius: 12px;
}

.thumbs-progress-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #e4e6eb;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(20, 22, 26, 0.05);
}

.thumbs-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, #047857, #10b981);
    transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 999px;
}

.thumbs-progress-text {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #1c1e21;
    font-variant-numeric: tabular-nums;
}

.thumbs-progress-log {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #0a0b0d;
    color: #dcddde;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.55;
}

.thumbs-progress-log li {
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumbs-progress-log li.thumbs-log-err {
    color: #fca5a5;
}

/* =================================================================== */
/* Settings > Analytics tab                                             */
/* =================================================================== */

.analytics-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.analytics-range-btn {
    padding: 7px 14px;
    background: #fff;
    color: #1c1e21;
    border: 1px solid #d9dde2;
    border-radius: 999px;
    font-family: var(--font-subheading);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.analytics-range-btn:hover {
    background: #f0f2f5;
    border-color: #b0b3b8;
}

.analytics-range-btn.is-active {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    border-color: var(--whs-navy, #001A7F);
    box-shadow: 0 2px 8px rgba(0, 26, 127, 0.2);
}

.analytics-export-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    color: #1c1e21;
    border: 1px dashed #b0b3b8;
    border-radius: 999px;
    font-family: var(--font-subheading);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.analytics-export-link:hover {
    border-color: var(--whs-navy, #001A7F);
    background: #fafbfc;
}

.analytics-headline {
    margin-bottom: 1.25rem;
}

/* Legend lives in the card header beside the title — the default
   .dash-card-count chrome (white-on-translucent-white) disappears on a
   light card background, so we paint our own pill instead. */
.analytics-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 4px 12px;
    background: #f0f2f5;
    border-radius: 999px;
}

.analytics-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #1c1e21;
    white-space: nowrap;
}

.analytics-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.analytics-chart-wrap {
    padding: 0.75rem 0.5rem 0;
    width: 100%;
    overflow: hidden;
}

.analytics-chart {
    display: block;
    width: 100%;
    height: 220px;
    overflow: visible;
}

/* Top referrers + devices side-by-side. Break to stacked only when the
   content column is genuinely too narrow to read two tables — the admin
   panel's vtabs content area is usually around 800–1100px, so we want
   the grid to stay two-column whenever possible. */
.analytics-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
    align-items: stretch;
}

.analytics-split > .dash-card {
    display: flex;
    flex-direction: column;
    min-width: 0;  /* let the tables shrink inside grid cells */
}

/* Kill the dashboard's stacked-card top margin when the cards are
   siblings inside our grid — the grid gap already handles spacing. */
.analytics-split > .dash-card + .dash-card {
    margin-top: 0;
}

@media (max-width: 720px) {
    .analytics-split { grid-template-columns: 1fr; }
}

.analytics-table code.gl-slug {
    font-size: 0.78rem;
}

.analytics-devices {
    padding: 0.75rem 1rem 1rem;
}

.analytics-device-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: #f0f2f5;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 1px 2px rgba(20, 22, 26, 0.05);
}

.analytics-device-seg {
    height: 100%;
    display: block;
    transition: filter 0.15s ease;
}

.analytics-device-seg:hover {
    filter: brightness(1.08);
}

.analytics-device-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.analytics-device-legend li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.82rem;
}

.analytics-device-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.analytics-device-legend strong {
    font-size: 0.82rem;
    color: #1c1e21;
    font-weight: 600;
    margin-right: 4px;
}

.analytics-device-legend small {
    color: #65676b;
    font-size: 0.73rem;
}

.analytics-sessions {
    table-layout: auto;
}

.analytics-sessions .analytics-trail {
    max-width: 340px;
    line-height: 1.8;
    font-size: 0.78rem;
}

.analytics-sessions .analytics-trail code {
    padding: 1px 5px;
    background: #f0f2f5;
    border-radius: 3px;
    white-space: nowrap;
}

.analytics-trail-step {
    display: inline-block;
    padding: 1px 7px;
    background: #f0f2f5;
    color: #1c1e21;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 0.76rem;
    cursor: help;
}

.analytics-path-label {
    display: block;
    font-weight: 500;
    color: #1c1e21;
    line-height: 1.35;
    cursor: help;
}

.analytics-path-raw {
    display: block;
    color: #65676b;
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 2px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    word-break: break-all;
}

/* Hour-of-day × day-of-week heatmap ---------------------------------- */
.analytics-heatmap-wrap {
    padding: 0.5rem 1rem 1rem;
    overflow-x: auto;
}

.analytics-heatmap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 640px;
}

.analytics-heatmap-row {
    display: grid;
    grid-template-columns: 42px repeat(24, 1fr);
    gap: 3px;
    align-items: center;
}

.analytics-heatmap-row--header {
    margin-bottom: 2px;
}

.analytics-heatmap-corner,
.analytics-heatmap-day {
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #65676b;
    text-transform: uppercase;
    text-align: right;
    padding-right: 6px;
}

.analytics-heatmap-day {
    color: #1c1e21;
    font-weight: 500;
}

.analytics-heatmap-hour {
    text-align: center;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.68rem;
    color: #65676b;
    letter-spacing: 0.05em;
}

.analytics-heatmap-cell {
    aspect-ratio: 1 / 1;
    min-height: 22px;
    background: #f0f2f5;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.65rem;
    font-weight: 500;
    color: #001A7F;
    cursor: help;
    transition: transform 0.12s ease;
}

.analytics-heatmap-cell:hover {
    transform: scale(1.2);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(20, 22, 26, 0.25);
}

/* Broken links table ------------------------------------------------- */
.analytics-broken-path {
    display: inline-block;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 0.76rem;
}

/* =================================================================== */
/* Public error pages (404 / 403)                                       */
/* =================================================================== */

body.error-body {
    background: #F5F0E6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.error-body .nav {
    background: transparent;
}

.error-hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10rem 1.5rem 5rem;
    overflow: hidden;
}

/* Oversized stamp — the archive/military rubber-stamp aesthetic */
.error-stamp {
    position: absolute;
    top: 9rem;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 3.5rem;
    border: 4px solid var(--whs-navy, #001A7F);
    border-radius: 10px;
    color: var(--whs-navy, #001A7F);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 0 0 1px currentColor inset;
}

.error-stamp--red {
    color: #b91c1c;
    border-color: #b91c1c;
    opacity: 0.14;
}

.error-stamp-code {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 5.5rem;
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.error-stamp-label {
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    margin-top: 0.35rem;
}

.error-hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.error-eyebrow {
    display: inline-block;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--whs-yellow, #FFBD33);
    padding: 6px 14px;
    background: var(--whs-navy, #001A7F);
    border-radius: 3px;
    margin-bottom: 1.25rem;
}

.error-title {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--whs-navy, #001A7F);
    letter-spacing: 0.01em;
    margin: 0 0 1.1rem;
    text-transform: uppercase;
}

.error-subtitle {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: #3c3f44;
    margin: 0 0 2.25rem;
}

.error-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.error-cta-primary,
.error-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.error-cta-primary {
    background: var(--whs-yellow, #FFBD33);
    color: var(--whs-navy, #001A7F);
    border: 2px solid var(--whs-yellow, #FFBD33);
    box-shadow: 0 4px 14px rgba(255, 189, 51, 0.35);
}

.error-cta-primary:hover {
    background: var(--whs-navy, #001A7F);
    color: var(--whs-yellow, #FFBD33);
    border-color: var(--whs-navy, #001A7F);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 26, 127, 0.35);
}

.error-cta-secondary {
    background: transparent;
    color: var(--whs-navy, #001A7F);
    border: 2px solid var(--whs-navy, #001A7F);
}

.error-cta-secondary:hover {
    background: var(--whs-navy, #001A7F);
    color: #fff;
    transform: translateY(-2px);
}

/* Suggestions grid */
.error-suggestions {
    padding: 3rem 0 5rem;
    background: #fff;
    border-top: 1px solid rgba(0, 26, 127, 0.08);
}

.error-suggestions-title {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--whs-navy, #001A7F);
    text-align: center;
    margin: 0 0 2rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.error-suggestions-eyebrow {
    display: block;
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.72rem;
    font-weight: 400;
    color: #65676b;
    letter-spacing: 0.25em;
    margin-bottom: 0.4rem;
}

.error-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.error-suggestion {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.error-suggestion:hover {
    transform: translateY(-3px);
    border-color: var(--whs-navy, #001A7F);
    box-shadow: 0 10px 28px rgba(0, 26, 127, 0.18);
}

.error-suggestion-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f2f5;
}

.error-suggestion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.error-suggestion:hover .error-suggestion-image img {
    transform: scale(1.06);
}

.error-suggestion-meta {
    padding: 0.75rem 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.error-suggestion-meta strong {
    font-family: var(--font-subheading, 'Oswald', sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--whs-navy, #001A7F);
    letter-spacing: 0.02em;
}

.error-suggestion-meta span {
    font-size: 0.76rem;
    color: #65676b;
}

/* Slim footer variant for error pages */
.footer.footer--slim {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: #0a0b0d;
    color: #dcddde;
}

.footer.footer--slim .footer-bottom {
    border-top: none;
    padding-top: 0;
}

.analytics-arrow {
    color: #b0b3b8;
    margin: 0 2px;
    font-weight: 700;
}

.analytics-device-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f0f2f5;
    color: #1c1e21;
    border-radius: 999px;
    font-size: 0.72rem;
    font-family: var(--font-subheading);
    letter-spacing: 0.04em;
    text-transform: capitalize;
}

/* Subtle one-liner below the public photo wall explaining how to request
   removal. Kept small and unobtrusive — it's a practical note, not a CTA. */
.gallery-caveat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    max-width: 780px;
    margin: 1.5rem auto 0;
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #65676b;
    letter-spacing: 0.01em;
    text-align: center;
    border-top: 1px dashed rgba(0, 26, 127, 0.12);
}

.gallery-caveat svg {
    flex: 0 0 auto;
    opacity: 0.7;
}

.gallery-caveat a {
    color: var(--whs-navy, #001A7F);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery-caveat a:hover {
    color: #0033cc;
}

/* Edit modal: video-specific thumb treatment + action buttons */
.edit-modal-thumb--video {
    position: relative;
    background: #0a0b0d;
    border-radius: 8px;
    overflow: hidden;
}

.edit-modal-thumb--video img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.edit-modal-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--whs-navy, #001A7F);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.edit-modal-thumb-play svg {
    margin-left: 3px;
}

.edit-modal-thumb-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(10, 11, 13, 0.85);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    border-radius: 4px;
}

.edit-modal-video-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e4e6eb;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.edit-modal-video-meta {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: #65676b;
    margin-bottom: 0.25rem;
}

.edit-modal-video-meta code {
    background: #f0f2f5;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.78rem;
    color: #1c1e21;
}

.em-poster-label {
    cursor: pointer;
}

.em-poster-label input[type="file"] {
    pointer-events: none;
}