/*
| ZEEZ Design System — bundled app.css
| Generated: 2026-07-13 00:03:25 UTC
| DO NOT EDIT — run: php tools/bundle-design-system-css.php
*/

/* ===== BEGIN tokens.css ===== */

/*
|--------------------------------------------------------------------------
| Design Tokens — theme core + derived semantics
|--------------------------------------------------------------------------
| ONLY file with raw hex / rgb values.
| Edit the 7-knob THEME-CORE block below, or use Admin → Theme Preview.
|--------------------------------------------------------------------------
*/

:root {

    /* THEME-CORE-START */
    --theme-background:          #F5F5F7;
    --theme-surface:             #FFFFFF;
    --theme-primary:             #475569;
    --theme-primary-hover:       #334155;
    --theme-accent:              #94A3B8;
    --theme-text:                #18181B;
    --theme-dark:                #27272A;
    /* THEME-CORE-END */

    /* ------------------------------------------------------------------ */
    /* Derived brand (computed from theme core — do not edit hex here)     */
    /* ------------------------------------------------------------------ */

    --theme-surface-alt:         color-mix(in srgb, var(--theme-background) 72%, var(--theme-primary) 8%);
    --theme-text-muted:          color-mix(in srgb, var(--theme-text) 58%, var(--theme-background) 42%);
    --theme-border:              color-mix(in srgb, var(--theme-text) 14%, var(--theme-background) 86%);
    --theme-dark-end:            color-mix(in srgb, var(--theme-dark) 78%, var(--theme-primary) 22%);
    --theme-text-on-primary:     #FFFFFF;
    --theme-focus-ring:          color-mix(in srgb, var(--theme-primary) 28%, transparent);

    /* ------------------------------------------------------------------ */
    /* Utility primitives (status, admin badges — fixed, not theme knobs)  */
    /* ------------------------------------------------------------------ */

    --primitive-white:           #ffffff;
    --primitive-black:           #000000;

    --primitive-gray-900:        #111827;
    --primitive-gray-800:        #1f2937;
    --primitive-gray-700:        #374151;
    --primitive-gray-600:        #6b7280;
    --primitive-gray-500:        #9ca3af;
    --primitive-gray-400:        #d1d5db;
    --primitive-gray-200:        #e5e7eb;
    --primitive-gray-100:        #f3f4f6;
    --primitive-gray-50:         #f9fafb;
    --primitive-slate-50:        #f8fafc;

    --primitive-green-600:       #16a34a;
    --primitive-green-100:       #dcfce7;
    --primitive-green-800:       #027a48;
    --primitive-green-50:        #ecfdf3;

    --primitive-amber-600:       #d97706;
    --primitive-amber-100:       #fef3c7;

    --primitive-red-600:         #dc2626;
    --primitive-red-700:         #b91c1c;
    --primitive-red-50:          #fef2f2;

    --primitive-blue-600:        #2563eb;
    --primitive-blue-100:        #dbeafe;

    --primitive-violet-600:      #7c3aed;
    --primitive-violet-100:      #ede9fe;

    --primitive-gray-550:        #4b5563;
    --primitive-nav-glass:       rgba(255, 255, 255, 0.92);
    --primitive-nav-shadow-bar:    rgba(0, 0, 0, 0.04);
    --primitive-nav-shadow-ui:     rgba(0, 0, 0, 0.08);
    --primitive-nav-shadow-brand:  rgba(0, 0, 0, 0.12);
    --primitive-nav-shadow-footer: rgba(0, 0, 0, 0.16);

    --primitive-footer-glass-03:   rgba(255, 255, 255, 0.03);
    --primitive-footer-glass-08:   rgba(255, 255, 255, 0.08);
    --primitive-footer-glass-14:   rgba(255, 255, 255, 0.14);
    --primitive-footer-text-76:    rgba(255, 255, 255, 0.76);
    --primitive-footer-text-72:    rgba(255, 255, 255, 0.72);
    --primitive-footer-text-66:    rgba(255, 255, 255, 0.66);
    --primitive-footer-text-60:    rgba(255, 255, 255, 0.60);
    --primitive-footer-text-56:    rgba(255, 255, 255, 0.56);
    --primitive-text-on-primary-muted: rgba(255, 255, 255, 0.76);

    /* Focus / shadow alpha (neutral — brand focus uses --theme-focus-ring) */
    --primitive-focus-ring:      rgba(15, 23, 42, 0.08);
    --primitive-overlay-scrim:   rgba(0, 0, 0, 0.55);
    --primitive-skeleton-shimmer: rgba(255, 255, 255, 0.5);
    --primitive-shadow-sm:       rgba(0, 0, 0, 0.04);
    --primitive-shadow-md:       rgba(0, 0, 0, 0.06);
    --primitive-shadow-lg:       rgba(0, 0, 0, 0.10);

    /* ------------------------------------------------------------------ */
    /* Semantic — color                                                  */
    /* ------------------------------------------------------------------ */

    --color-background:          var(--theme-background);
    --color-surface:             var(--theme-surface);
    --color-surface-alt:         var(--theme-surface-alt);
    --color-surface-muted:       var(--theme-surface-alt);

    --color-text:                var(--theme-text);
    --color-text-muted:          var(--theme-text-muted);
    --color-text-placeholder:    var(--primitive-gray-500);
    --color-text-on-primary:     var(--theme-text-on-primary);

    --color-primary:             var(--theme-primary);
    --color-primary-hover:       var(--theme-primary-hover);
    --color-accent:              var(--theme-accent);

    --color-border:              var(--theme-border);
    --color-border-strong:       var(--primitive-gray-400);

    --color-success:             var(--primitive-green-600);
    --color-success-bg:          var(--primitive-green-100);
    --color-success-text:        var(--primitive-green-800);

    --color-warning:             var(--primitive-amber-600);
    --color-warning-bg:          var(--primitive-amber-100);

    --color-danger:              var(--primitive-red-600);
    --color-danger-bg:           var(--primitive-red-50);
    --color-danger-text:         var(--primitive-red-700);

    --color-info:                var(--primitive-blue-600);
    --color-info-bg:             var(--primitive-blue-100);

    --color-featured:            var(--primitive-violet-600);
    --color-featured-bg:         var(--primitive-violet-100);

    /* Dark sections (footer, marketing hero) — driven by --theme-dark */
    --color-background-dark:     var(--theme-dark);
    --color-surface-dark:        var(--theme-dark-end);
    --color-text-dark:           var(--primitive-slate-50);

    /* ------------------------------------------------------------------ */
    /* Gradients (all brand gradients derive from theme core)              */
    /* ------------------------------------------------------------------ */

    --gradient-hero:             linear-gradient(
        135deg,
        var(--color-background) 0%,
        var(--color-surface-alt) 100%
    );

    --gradient-dark:             linear-gradient(
        135deg,
        var(--theme-dark) 0%,
        var(--theme-dark-end) 100%
    );

    --gradient-accent:           linear-gradient(
        135deg,
        var(--theme-primary) 0%,
        var(--theme-accent) 100%
    );

    /* ------------------------------------------------------------------ */
    /* Typography                                                          */
    /* ------------------------------------------------------------------ */

    --font-body:                 'Inter', system-ui, sans-serif;
    --font-heading:              'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    --font-size-xs:              13px;
    --font-size-sm:              15px;
    --font-size-md:              16px;
    --font-size-lg:              24px;
    --font-size-xl:              38px;
    --font-size-2xl:             52px;

    --font-weight-normal:        400;
    --font-weight-semibold:      600;
    --font-weight-bold:          700;

    --line-height-body:          1.6;
    --line-height-heading:       1.2;

    /* ------------------------------------------------------------------ */
    /* Radius                                                              */
    /* ------------------------------------------------------------------ */

    --radius-xs:                 10px;
    --radius-sm:                 10px;
    --radius-md:                 16px;
    --radius-lg:                 24px;
    --radius-xl:                 32px;
    --radius-full:               999px;

    /* ------------------------------------------------------------------ */
    /* Shadows                                                             */
    /* ------------------------------------------------------------------ */

    --shadow-sm:                 0 2px 8px var(--primitive-shadow-sm);
    --shadow-md:                 0 6px 24px var(--primitive-shadow-md);
    --shadow-lg:                 0 20px 48px var(--primitive-shadow-lg);
    --shadow-focus-ring:         0 0 0 3px var(--primitive-focus-ring);
    --shadow-focus-ring-lg:      0 0 0 4px var(--primitive-focus-ring);

    --color-overlay-scrim:       var(--primitive-overlay-scrim);
    --color-focus-visible:       var(--theme-focus-ring);
    --color-focus-ring:          var(--primitive-focus-ring);

    --color-shadow-sm:           var(--primitive-shadow-sm);
    --color-shadow-md:           var(--primitive-shadow-md);
    --color-shadow-lg:           var(--primitive-shadow-lg);
    --color-shadow-nav-bar:      var(--primitive-nav-shadow-bar);
    --color-shadow-nav-ui:       var(--primitive-nav-shadow-ui);
    --color-shadow-nav-brand:    var(--primitive-nav-shadow-brand);
    --color-shadow-nav-footer:   var(--primitive-nav-shadow-footer);

    --skeleton-base:             var(--primitive-gray-200);
    --gradient-skeleton:         linear-gradient(
        90deg,
        transparent,
        var(--primitive-skeleton-shimmer),
        transparent
    );
    /* ------------------------------------------------------------------ */
    /* Spacing                                                             */
    /* ------------------------------------------------------------------ */

    --space-1:                   4px;
    --space-2:                   8px;
    --space-3:                   12px;
    --space-4:                   16px;
    --space-5:                   20px;
    --space-6:                   24px;
    --space-7:                   28px;
    --space-8:                   32px;
    --space-9:                   40px;
    --space-10:                  48px;
    --space-11:                  64px;
    --space-12:                  70px;

    /* ------------------------------------------------------------------ */
    /* Motion                                                              */
    /* ------------------------------------------------------------------ */

    --transition-fast:           0.15s ease;
    --transition-normal:         0.2s ease;
    --transition:                var(--transition-normal);

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

    --layout-content-max:        1450px;
    --layout-form-max:           1100px;
    --layout-narrow-max:         620px;

    --container-max:             var(--layout-content-max);
    --container-max-wide:        var(--layout-content-max);
    --page-padding:              28px;
    --page-padding-mobile:       20px;

    /* ------------------------------------------------------------------ */
    /* Breakpoints (reference only — use in @media)                        */
    /* ------------------------------------------------------------------ */

    --breakpoint-sm:             640px;
    --breakpoint-md:             768px;
    --breakpoint-lg:             1024px;
    --breakpoint-xl:             1280px;

    /* Nav switches to hamburger + inline push-down panel at or below this width. */
    --nav-compact-max:           1280px;

    /* ------------------------------------------------------------------ */
    /* Z-index                                                             */
    /* ------------------------------------------------------------------ */

    --z-dropdown:                1000;
    --z-sticky:                  1200;
    --z-drawer:                  1500;
    --z-overlay:                 1600;
    --z-modal:                   1700;
    --z-toast:                   1800;

    /* ------------------------------------------------------------------ */
    /* Navigation & footer (Wave 2)                                        */
    /* ------------------------------------------------------------------ */

    --shell-max-width:           1720px;
    --nav-z-sticky:              var(--z-overlay);

    --color-nav-background:      var(--primitive-nav-glass);
    --color-nav-glass-bg:        rgba(255, 255, 255, 0.94);
    --color-nav-border:          var(--color-border);
    --color-nav-link:            var(--color-text-muted);
    --color-nav-link-hover-bg:   var(--color-surface-alt);

    --shadow-nav-bar:            0 6px 24px var(--color-shadow-nav-bar);
    --shadow-nav-dropdown:       0 18px 42px var(--color-shadow-nav-ui);
    --shadow-nav-brand:          0 12px 28px var(--color-shadow-nav-brand);
    --shadow-nav-primary:        0 10px 24px var(--color-shadow-nav-ui);

    --gradient-brand-logo:         var(--gradient-accent);
    /* Public hero bands, marketing sections, and footer share one gradient. */
    --gradient-surface-hero:       var(--gradient-accent);

    --gradient-member-avatar:    linear-gradient(
        135deg,
        var(--theme-primary),
        var(--theme-primary-hover)
    );

    --color-text-on-primary-muted: var(--primitive-text-on-primary-muted);

    --footer-margin-top:         100px;
    --footer-margin-top-mobile:  70px;

    --gradient-footer:           var(--gradient-surface-hero);
    --gradient-footer-cta:       linear-gradient(
        135deg,
        var(--primitive-footer-glass-08),
        var(--primitive-footer-glass-03)
    );
    --gradient-footer-logo:      linear-gradient(
        135deg,
        var(--primitive-white),
        var(--primitive-gray-200)
    );
    --shadow-footer-logo:        0 18px 38px var(--color-shadow-nav-footer);

    --color-footer-text:         var(--primitive-white);
    --color-footer-text-muted:   var(--primitive-footer-text-72);
    --color-footer-text-soft:    var(--primitive-footer-text-76);
    --color-footer-text-faint:   var(--primitive-footer-text-56);
    --color-footer-link:         var(--primitive-footer-text-72);
    --color-footer-link-muted:   var(--primitive-footer-text-66);
    --color-footer-border:       var(--primitive-footer-glass-08);
    --color-footer-glass:        var(--primitive-footer-glass-08);
    --color-footer-glass-hover:  var(--primitive-footer-glass-14);
    --color-footer-glow:         var(--primitive-footer-glass-03);
    --color-footer-glow-soft:    var(--primitive-footer-glass-03);
    --color-footer-logo-subtitle: var(--primitive-footer-text-60);

    /* ------------------------------------------------------------------ */
    /* Public marketing pages (Wave 3) — aliases                          */
    /* ------------------------------------------------------------------ */

    --layout-campaigns-max:      var(--layout-content-max);
    --layout-register-max:       var(--layout-form-max);
    --layout-success-max:        700px;

    --gradient-marketing-hero:   var(--gradient-surface-hero);

    --color-hero-text:           var(--primitive-white);
    --color-hero-text-muted:     rgba(255, 255, 255, 0.82);
    --color-hero-glass:          rgba(255, 255, 255, 0.08);
    --color-hero-glass-strong:   rgba(255, 255, 255, 0.10);
    --color-hero-glass-border:   rgba(255, 255, 255, 0.08);
    --color-hero-glass-hover:    rgba(255, 255, 255, 0.14);
    --color-hero-glow:           rgba(255, 255, 255, 0.04);

    --gradient-banner-overlay:   linear-gradient(
        to top,
        rgba(0, 0, 0, 0.62),
        rgba(0, 0, 0, 0.08)
    );

    --gradient-banner-overlay-soft: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.48)
    );

    --gradient-register-page:    linear-gradient(
        180deg,
        var(--theme-background) 0%,
        var(--theme-surface) 100%
    );

    --gradient-admin-login-bg:   linear-gradient(
        135deg,
        var(--color-surface-alt) 0%,
        var(--color-border) 100%
    );

    --shadow-marketing-card:     0 8px 28px var(--primitive-shadow-sm);
    --shadow-marketing-card-md:  0 10px 30px var(--primitive-shadow-sm);
    --shadow-marketing-card-lg:  0 12px 38px var(--primitive-shadow-md);
    --shadow-marketing-hero:     0 20px 60px var(--primitive-shadow-lg);
    --shadow-register-shell:     0 12px 42px var(--primitive-shadow-md);

    --color-border-marketing:    var(--color-border);

    --primitive-emerald-500:     #10b981;
    --primitive-blue-800:        #1d4ed8;
    --primitive-blue-900:        #1e40af;
    --primitive-blue-50:         #eff6ff;
    --primitive-blue-200:        #bfdbfe;
    --primitive-amber-900:       #92400e;
    --primitive-red-900:         #991b1b;
    --primitive-green-900:       #166534;
    --primitive-green-700:       #065f46;
    --primitive-green-200:       #a7f3d0;
    --primitive-green-50:        #ecfdf5;
    --primitive-red-200:         #fecaca;
    --primitive-green-register:  #2d7a2d;
    --primitive-gray-444:        #444444;

    /* ------------------------------------------------------------------ */
    /* Account pages (Wave 4)                                              */
    /* ------------------------------------------------------------------ */

    --color-white-glass-80:      rgba(255, 255, 255, 0.80);
    --color-white-glass-85:      rgba(255, 255, 255, 0.85);
    --color-white-glass-84:      rgba(255, 255, 255, 0.84);
    --color-white-glass-75:      rgba(255, 255, 255, 0.75);
    --color-white-glass-18:      rgba(255, 255, 255, 0.18);
    --color-white-glass-14:      rgba(255, 255, 255, 0.14);
    --color-white-glass-12:      rgba(255, 255, 255, 0.12);
    --color-white-glass-10:      rgba(255, 255, 255, 0.10);
    --color-white-glass-05:      rgba(255, 255, 255, 0.05);

    --color-overlay-dark-50:     rgba(0, 0, 0, 0.50);
    --color-overlay-dark-78:     rgba(0, 0, 0, 0.78);
    --color-overlay-dark-68:     rgba(0, 0, 0, 0.68);
    --color-overlay-dark-20:     rgba(0, 0, 0, 0.20);
    --color-overlay-dark-10:     rgba(0, 0, 0, 0.10);
    --color-overlay-dark-07:     rgba(0, 0, 0, 0.07);

    --shadow-account-card:       0 10px 32px var(--color-overlay-dark-07);

    --primitive-gray-666:        #666666;
    --primitive-red-setup-bg:    #ffe6e6;
    --primitive-green-setup-bg:  #e8f8e8;
    --primitive-green-800-text:  #047857;
    --primitive-amber-700:       #b45309;
    --primitive-violet-700:      #6d28d9;
    --primitive-green-100-bright: #dcfce7;

    /* ------------------------------------------------------------------ */
    /* Gallery / upload / support (Wave 5)                                 */
    /* ------------------------------------------------------------------ */

    --color-hero-badge-bg:           var(--color-white-glass-12);
    --color-hero-overlay-soft:       var(--color-white-glass-05);
    --primitive-shadow-overlay-light: rgba(0, 0, 0, 0.15);
    --primitive-shadow-overlay-dark:  rgba(0, 0, 0, 0.72);

    --primitive-yellow-100:          #fef9c3;
    --primitive-amber-800:           #854d0e;
    --primitive-green-border-light:  #d1fae5;
    --primitive-red-100:             #fee2e2;
    --primitive-amber-200:           #fde68a;
    --primitive-blue-300:            #93c5fd;
    --primitive-violet-300:          #c4b5fd;
    --primitive-green-300:           #86efac;

    --color-white-glass-74:          rgba(255, 255, 255, 0.74);
    --color-white-glass-78:          rgba(255, 255, 255, 0.78);
    --color-white-glass-85:          rgba(255, 255, 255, 0.85);
    --color-white-glass-86:          rgba(255, 255, 255, 0.86);
    --color-white-glass-22:          rgba(255, 255, 255, 0.22);
    --color-white-glass-50:          rgba(255, 255, 255, 0.50);
    --color-overlay-dark-82:         rgba(0, 0, 0, 0.82);
    --color-overlay-dark-65:         rgba(0, 0, 0, 0.65);
    --color-overlay-dark-68:         rgba(0, 0, 0, 0.68);
    --color-overlay-dark-20:         rgba(0, 0, 0, 0.20);
    --color-overlay-dark-10:         rgba(0, 0, 0, 0.10);
    --color-shadow-subtle:           rgba(0, 0, 0, 0.03);
    --color-muted-border-soft:       rgba(107, 114, 128, 0.12);

    --primitive-amber-500:           #f59e0b;
    --primitive-red-500:             #ef4444;
    --primitive-lime-100:            #ecfccb;
    --primitive-lime-900:            #365314;
    --primitive-green-950:           #14532d;
    --primitive-red-950:             #7f1d1d;
    --primitive-pink-100:            #fce7f3;
    --primitive-pink-700:            #be185d;
    --primitive-surface-faint:         #fafafa;
    --primitive-green-200-border:    #bbf7d0;
    --primitive-orange-300:          #fdba74;
    --primitive-orange-900:          #9a3412;
    --primitive-navy-800:            #1e3a5f;
    --primitive-slate-200:           #e2e8f0;
    --gradient-admin-warning:        linear-gradient(135deg, var(--primitive-amber-500), var(--primitive-amber-600));
    --gradient-admin-danger:         linear-gradient(135deg, var(--primitive-red-500), var(--color-danger));
    --gradient-admin-hero-navy:  var(--gradient-dark);

    --color-white-glass-06:          rgba(255, 255, 255, 0.06);
    --color-white-glass-08:          rgba(255, 255, 255, 0.08);
    --color-white-glass-16:          rgba(255, 255, 255, 0.16);
    --color-white-glass-64:          rgba(255, 255, 255, 0.64);
    --color-badge-violet:            rgba(109, 40, 217, 0.94);
    --color-badge-blue:              rgba(29, 78, 216, 0.94);
    --color-badge-amber:             rgba(234, 179, 8, 0.94);
    --color-badge-green:             rgba(22, 101, 52, 0.94);
    --color-overlay-dark-42:         rgba(0, 0, 0, 0.42);
    --color-overlay-dark-50-soft:    rgba(0, 0, 0, 0.50);
}

/* ===== END tokens.css ===== */

/* ===== BEGIN reset.css ===== */

/*
|--------------------------------------------------------------------------
| Reset & base — Wave 1 (merged from header.php)
|--------------------------------------------------------------------------
*/

* {

    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;
}

body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    background: var(--color-background);

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: var(--font-size-md);

    line-height: var(--line-height-body);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

    padding-bottom: env(safe-area-inset-bottom);
}

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    color: var(--color-text);

    font-family: var(--font-heading);

    line-height: var(--line-height-heading);

    font-weight: var(--font-weight-bold);
}

h1 {

    font-size: var(--font-size-2xl);
}

h2 {

    font-size: var(--font-size-xl);
}

h3 {

    font-size: var(--font-size-lg);
}

p {

    margin-top: 0;

    color: var(--color-text-muted);
}

img,
video {

    max-width: 100%;

    height: auto;

    display: block;
}

button,
input,
textarea,
select {

    font: inherit;
}

a {

    color: inherit;
}

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}

@media (max-width: 768px) {

    h1 {

        font-size: 40px;
    }

    h2 {

        font-size: 30px;
    }
}

/* ===== END reset.css ===== */

/* ===== BEGIN layout.css ===== */

/*
|--------------------------------------------------------------------------
| Layout — Wave 1 (merged from header.php)
|--------------------------------------------------------------------------
*/

.container {

    width: 100%;

    max-width: var(--layout-content-max);

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--page-padding);

    padding-right: var(--page-padding);
}

.container-wide {

    max-width: var(--layout-content-max);
}

/*
|--------------------------------------------------------------------------
| Site shell — shared width for nav bars and footer content
| Matches account creator-nav-wrapper (shell-max-width + page-padding).
|--------------------------------------------------------------------------
*/

.site-shell {

    width: 100%;

    max-width: var(--shell-max-width);

    margin-left: auto;

    margin-right: auto;

    padding-left: var(--page-padding);

    padding-right: var(--page-padding);

    box-sizing: border-box;
}

/*
|--------------------------------------------------------------------------
| Site chrome panel — rounded card shell (nav bars, footer)
| Matches account .creator-nav styling.
|--------------------------------------------------------------------------
*/

.site-chrome-panel {

    position: relative;

    border:
        1px solid var(--color-border-marketing);

    border-radius: 30px;

    box-shadow:
        0 10px 28px var(--color-shadow-sm);
}

.site-chrome-panel--surface {

    background: var(--color-surface);

    overflow: visible;
}

.site-chrome-nav-wrapper {

    position: sticky;

    top: 0;

    z-index: var(--nav-z-sticky);

    margin-bottom: 36px;
}

.page-container {

    max-width: var(--layout-content-max);

    margin: var(--space-9) auto;

    padding: 0 var(--page-padding);
}

.section {

    margin-bottom: var(--space-12);
}

.ecosystem-page-spacing {

    padding-top: 42px;

    padding-bottom: 90px;
}

.stack {

    display: flex;

    flex-direction: column;

    gap: var(--space-4);
}

.cluster {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-3);
}

.grid,
.ecosystem-grid {

    display: grid;

    gap: var(--space-6);
}

.grid-2,
.ecosystem-grid-2 {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-6);
}

.grid-3,
.ecosystem-grid-3 {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-6);
}

.grid-4,
.ecosystem-grid-4 {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: var(--space-6);
}

.section-header {

    margin-bottom: var(--space-6);
}

.section-title,
.ecosystem-section-title {

    margin-bottom: var(--space-2);
}

.section-lead,
.ecosystem-section-description {

    margin: 0;

    color: var(--color-text-muted);

    max-width: 65ch;

    line-height: 2;
}

.hero {

    background: var(--gradient-hero);

    border-radius: var(--radius-lg);

    padding: var(--space-10) var(--space-7);
}

.hero-dark {

    background: var(--gradient-dark);

    color: var(--color-text-dark);
}

@media (max-width: 1200px) {

    .ecosystem-grid-4 {

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

    .ecosystem-grid-3 {

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

@media (max-width: 1280px),
       ((hover: none) and (pointer: coarse)) {

    .site-chrome-nav-wrapper.site-shell,
    .creator-nav-wrapper.site-shell,
    .footer-wrapper.site-shell {

        max-width: none;

        width: 100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right:
            calc(50% - 50vw);

        padding-left: 0;

        padding-right: 0;
    }

    .site-chrome-panel,
    .creator-nav {

        border-radius: 0;

        border-left: none;

        border-right: none;
    }
}

@media (max-width: 768px) {

    .site-shell {

        padding-left: var(--page-padding-mobile);

        padding-right: var(--page-padding-mobile);
    }

    .page-container {

        padding-left: var(--page-padding-mobile);

        padding-right: var(--page-padding-mobile);
    }

    .container {

        padding-left: var(--page-padding-mobile);

        padding-right: var(--page-padding-mobile);
    }

    .ecosystem-page-spacing {

        padding-top: 26px;

        padding-bottom: 70px;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .ecosystem-grid-2,
    .ecosystem-grid-3,
    .ecosystem-grid-4 {

        grid-template-columns: 1fr;
    }
}

/* ===== END layout.css ===== */

/* ===== BEGIN utilities.css ===== */

/*
|--------------------------------------------------------------------------
| Utilities — Wave 1 (skeleton + accessibility from header.php)
|--------------------------------------------------------------------------
*/

.text-center {

    text-align: center;
}

.text-muted {

    color: var(--color-text-muted);
}

.mt-20 {

    margin-top: var(--space-5);
}

.mb-20 {

    margin-bottom: var(--space-5);
}

.small {

    font-size: var(--font-size-xs);

    color: var(--color-text-muted);
}

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

:focus-visible {

    outline: 3px solid var(--color-focus-visible);

    outline-offset: 2px;
}

.ecosystem-skeleton {

    position: relative;

    overflow: hidden;

    background: var(--skeleton-base);

    border-radius: var(--radius-sm);
}

.ecosystem-skeleton::after {

    content: '';

    position: absolute;

    inset: 0;

    transform: translateX(-100%);

    background: var(--gradient-skeleton);

    animation: ecosystemSkeleton 1.5s infinite;
}

@keyframes ecosystemSkeleton {

    100% {

        transform: translateX(100%);
    }
}

/* ===== END utilities.css ===== */

/* ===== BEGIN components/typography.css ===== */

/*
|--------------------------------------------------------------------------
| Typography — Wave 1 (from header.php)
|--------------------------------------------------------------------------
*/

.ecosystem-heading-xl {

    font-size: 58px;

    line-height: 1.1;

    font-weight: 900;
}

.ecosystem-heading-lg {

    font-size: 42px;

    line-height: 1.2;

    font-weight: 900;
}

.ecosystem-heading-md {

    font-size: 30px;

    line-height: 1.25;

    font-weight: 900;
}

.ecosystem-heading-sm {

    font-size: 22px;

    line-height: 1.3;

    font-weight: 800;
}

.ecosystem-text-muted {

    color: var(--color-text-muted);

    line-height: 1.9;
}

.ecosystem-section-title {

    font-size: 42px;

    font-weight: 900;

    line-height: 1.2;

    color: var(--color-primary);

    margin-bottom: 18px;
}

@media (max-width: 768px) {

    .ecosystem-heading-xl {

        font-size: 40px;
    }

    .ecosystem-heading-lg,
    .ecosystem-section-title {

        font-size: 32px;
    }

    .ecosystem-heading-md {

        font-size: 26px;
    }

    .ecosystem-heading-sm {

        font-size: 20px;
    }
}

/* ===== END components/typography.css ===== */

/* ===== BEGIN components/buttons.css ===== */

/*
|--------------------------------------------------------------------------
| Buttons — Wave 0
|--------------------------------------------------------------------------
*/

.btn,
.btn-primary,
.button,
form button[type="submit"],
form button[type="button"]:not(.mobile-toggle):not(.mobile-section-toggle):not(.public-link):not(.creator-nav-mobile-toggle):not(.creator-mobile-section-toggle):not(.admin-mobile-toggle):not(.admin-mobile-section-toggle) {

    display: inline-block;

    min-height: 44px;

    border: none;

    cursor: pointer;

    text-decoration: none;

    padding: 14px 22px;

    border-radius: var(--radius-sm);

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-family: inherit;

    font-weight: var(--font-weight-semibold);

    transition: var(--transition);
}

.btn-primary:hover,
.button:hover,
form button[type="submit"]:hover,
form button[type="button"]:not(.mobile-toggle):not(.mobile-section-toggle):not(.public-link):not(.creator-nav-mobile-toggle):not(.creator-mobile-section-toggle):not(.admin-mobile-toggle):not(.admin-mobile-section-toggle):hover {

    background: var(--color-primary-hover);

    transform: translateY(-1px);
}

.btn-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    min-height: 44px;

    padding: 14px 22px;

    border-radius: var(--radius-sm);

    border: 1px solid var(--color-border);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-family: inherit;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    cursor: pointer;

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal);
}

.btn-secondary:hover {

    background: var(--color-surface-muted);
}

.btn-ghost {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 14px 22px;

    border-radius: var(--radius-sm);

    border: 1px solid transparent;

    background: transparent;

    color: var(--color-text);

    text-decoration: none;

    font-weight: var(--font-weight-semibold);

    cursor: pointer;

    transition: background var(--transition-normal);
}

.btn-ghost:hover {

    background: var(--color-surface-muted);
}

.btn-danger {

    background: var(--color-danger);
}

.btn-danger:hover {

    background: var(--color-danger-text);
}

/*
|--------------------------------------------------------------------------
| Ecosystem button system (legacy class names — Wave 8 may alias to .btn-*)
|--------------------------------------------------------------------------
*/

.ecosystem-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 14px 20px;

    border: none;

    border-radius: var(--radius-md);

    text-decoration: none;

    cursor: pointer;

    transition: var(--transition);

    font-size: 14px;

    font-weight: 800;
}

.ecosystem-button:hover {

    transform: translateY(-1px);
}

.ecosystem-button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.ecosystem-button-primary:hover {

    background: var(--color-primary-hover);
}

.ecosystem-button-secondary {

    background: var(--color-surface);

    border: 1px solid var(--color-border-strong);

    color: var(--color-primary);
}

.ecosystem-button-secondary:hover {

    background: var(--color-background);
}

.ecosystem-button-danger {

    background: var(--color-danger);

    color: var(--color-text-on-primary);
}

@media (max-width: 768px) {

    .ecosystem-button {

        width: 100%;
    }
}

/* ===== END components/buttons.css ===== */

/* ===== BEGIN components/navigation.css ===== */

/*
|--------------------------------------------------------------------------
| Public navigation — Wave 2 (from partials/public-navigation.php)
|--------------------------------------------------------------------------
*/

.public-nav-wrapper {

    margin-bottom: 36px;
}

.public-navbar {

    overflow: visible;
}

.public-navbar-inner {

    min-height: 92px;

    padding: 0 var(--page-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--page-padding);
}

.public-brand {

    display: flex;

    align-items: center;

    gap: var(--space-4);

    flex-shrink: 0;
}

.public-logo {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    background: var(--gradient-brand-logo);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-on-primary);

    font-size: 22px;

    font-weight: 900;

    box-shadow: var(--shadow-nav-brand);
}

.public-brand-text {

    display: flex;

    flex-direction: column;
}

.public-brand-title {

    color: var(--color-primary);

    text-decoration: none;

    font-size: 24px;

    font-weight: 900;

    line-height: 1.1;
}

.public-brand-subtitle {

    margin-top: var(--space-1);

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;
}

.public-menu {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.public-item {

    position: relative;
}

.public-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    min-height: 44px;

    padding: 14px 18px;

    border-radius: var(--radius-md);

    color: var(--color-nav-link);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: var(--transition);

    border: none;

    background: transparent;

    font-family: inherit;

    cursor: pointer;
}

.public-link:hover {

    background: var(--color-nav-link-hover-bg);

    color: var(--color-primary);
}

.public-link.active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.public-link-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    box-shadow: var(--shadow-nav-primary);
}

.public-link-primary:hover {

    background: var(--color-primary-hover);

    color: var(--color-text-on-primary);

    transform: translateY(-1px);
}

.public-link-external::after {

    content: '↗';

    margin-left: 4px;

    font-size: 10px;

    opacity: 0.8;
}

.public-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 22px;

    height: 22px;

    padding: 0 7px;

    border-radius: var(--radius-full);

    background: var(--color-danger);

    color: var(--color-text-on-primary);

    font-size: 11px;

    font-weight: 900;
}

.public-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    left: 0;

    width: 340px;

    background: var(--color-surface);

    border: 1px solid var(--color-nav-border);

    border-radius: var(--radius-lg);

    padding: 12px;

    box-shadow: var(--shadow-nav-dropdown);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);

    z-index: 50;
}

.public-item:hover .public-dropdown,
.public-item:focus-within .public-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.dropdown-label {

    padding: 10px 14px;

    color: var(--color-text-placeholder);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.public-dropdown a {

    display: flex;

    flex-direction: column;

    gap: var(--space-1);

    padding: 15px;

    border-radius: var(--radius-md);

    text-decoration: none;

    transition: var(--transition);
}

.public-dropdown a:hover {

    background: var(--color-nav-link-hover-bg);
}

.dropdown-title {

    color: var(--color-primary);

    font-size: 14px;

    font-weight: 900;
}

.dropdown-description {

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.7;
}

.public-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}

.public-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 13px 18px;

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border-strong);

    background: var(--color-surface);

    color: var(--color-primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: var(--transition);
}

.public-secondary:hover {

    background: var(--color-nav-link-hover-bg);
}

.public-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 14px 20px;

    border-radius: var(--radius-md);

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: var(--transition);

    box-shadow: var(--shadow-nav-primary);
}

.public-primary:hover {

    background: var(--color-primary-hover);

    transform: translateY(-1px);
}

.member-chip {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 18px;

    background: var(--color-background);

    border: 1px solid var(--color-nav-border);
}

.member-avatar {

    width: 40px;

    height: 40px;

    border-radius: 14px;

    background: var(--gradient-member-avatar);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-on-primary);

    font-size: 14px;

    font-weight: 900;
}

.member-meta {

    display: flex;

    flex-direction: column;
}

.member-name {

    color: var(--color-primary);

    font-size: 13px;

    font-weight: 900;
}

.member-status {

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 700;
}

.mobile-toggle {

    display: none;

    width: 54px;

    height: 54px;

    border: none;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 20px;

    font-weight: 900;

    cursor: pointer;
}

.public-inline-mobile-menu {

    display: none;

    position: static;

    inset: auto;

    width: 100%;

    box-sizing: border-box;

    border-top: 1px solid var(--color-nav-border);

    padding: 18px var(--page-padding) var(--space-6);

    background: var(--color-surface);

    transform: none;

    box-shadow: none;
}

.public-inline-mobile-menu.active {

    display: block;
}

.mobile-member {

    padding: var(--space-5);

    border-radius: var(--radius-lg);

    background: var(--color-background);

    border: 1px solid var(--color-nav-border);

    display: flex;

    align-items: center;

    gap: var(--space-4);

    margin-bottom: 18px;
}

.mobile-sections {

    padding: 0;
}

.mobile-section {

    border: 1px solid var(--color-nav-border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    margin-bottom: 18px;

    background: var(--color-surface);
}

.mobile-section-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    min-height: 44px;

    padding: var(--space-5);

    border: none;

    background: var(--color-background);

    cursor: pointer;

    font-size: 15px;

    font-weight: 900;

    color: var(--color-primary);
}

.mobile-section-content {

    display: none;

    padding: 12px;
}

.mobile-section.active .mobile-section-content {

    display: block;
}

.mobile-link {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: var(--space-4) 18px;

    border-radius: 18px;

    text-decoration: none;

    margin-bottom: 10px;

    transition: var(--transition);
}

.mobile-link:hover {

    background: var(--color-nav-link-hover-bg);
}

.mobile-link.active {

    background: var(--color-primary);
}

.mobile-link-title {

    font-size: 14px;

    font-weight: 900;

    color: var(--color-primary);
}

.mobile-link.active .mobile-link-title {

    color: var(--color-text-on-primary);
}

.mobile-link-description {

    font-size: 12px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.mobile-link.active .mobile-link-description {

    color: var(--color-text-on-primary-muted);
}

.mobile-logout {

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 18px;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 900;
}

/*
|--------------------------------------------------------------------------
| Nav buttons — must not inherit global form/button styles
|--------------------------------------------------------------------------
*/

button.public-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    min-height: 44px;

    padding: 14px 18px;

    border-radius: var(--radius-md);

    color: var(--color-nav-link);

    background: transparent;

    font-size: 14px;

    font-weight: 800;

    transition: var(--transition);

    border: none;

    font-family: inherit;

    cursor: pointer;
}

button.public-link:hover {

    background: var(--color-nav-link-hover-bg);

    color: var(--color-primary);

    transform: none;
}

button.public-link.active,
button.public-link.public-link-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

button.mobile-toggle {

    display: none;

    width: 54px;

    height: 54px;

    min-height: 54px;

    padding: 0;

    border: none;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 20px;

    font-weight: 900;

    cursor: pointer;

    align-items: center;

    justify-content: center;
}

button.mobile-toggle:hover {

    background: var(--color-primary-hover);

    transform: none;
}

button.mobile-section-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    min-height: 44px;

    padding: var(--space-5);

    border: none;

    background: var(--color-background);

    cursor: pointer;

    font-size: 15px;

    font-weight: 900;

    color: var(--color-primary);

    border-radius: 0;

    text-align: left;
}

button.mobile-section-toggle:hover {

    background: var(--color-background);

    transform: none;
}

/*
|--------------------------------------------------------------------------
| Compact nav — hamburger + inline push-down panel (no overlay / flyout)
| Matches --nav-compact-max (1280px) and touch tablets in landscape.
|--------------------------------------------------------------------------
*/

@media (max-width: 1280px),
       ((hover: none) and (pointer: coarse)) {

    .public-nav-wrapper {

        margin-bottom: 28px;
    }

    .public-navbar .public-menu,
    .public-navbar .public-actions,
    .public-navbar .public-dropdown {

        display: none !important;
    }

    .public-navbar .mobile-toggle {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;
    }

    .public-navbar .public-inline-mobile-menu {

        position: static;

        inset: auto;

        transform: none;

        box-shadow: none;
    }

    .public-navbar .public-inline-mobile-menu:not(.active) {

        display: none !important;
    }

    .public-navbar .public-inline-mobile-menu.active {

        display: block !important;
    }
}

@media (max-width: 768px) {

    .public-navbar-inner {

        min-height: 82px;
    }

    .public-brand-title {

        font-size: 20px;
    }

    .public-brand-subtitle {

        font-size: 11px;
    }
}

/* ===== END components/navigation.css ===== */

/* ===== BEGIN components/forms.css ===== */

/*
|--------------------------------------------------------------------------
| Forms — Wave 0
|--------------------------------------------------------------------------
*/

form {

    width: 100%;
}

.form-group {

    margin-bottom: var(--space-5);
}

.form-label,
label {

    display: block;

    margin-bottom: var(--space-2);

    font-weight: var(--font-weight-semibold);

    color: var(--color-text);
}

.form-hint {

    margin-top: var(--space-2);

    font-size: var(--font-size-xs);

    color: var(--color-text-muted);
}

.form-error {

    margin-top: var(--space-2);

    font-size: var(--font-size-xs);

    color: var(--color-danger);
}

input,
textarea,
select {

    width: 100%;

    min-height: 44px;

    padding: 14px 16px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    background: var(--color-surface);

    font-family: inherit;

    font-size: var(--font-size-sm);

    transition: var(--transition);
}

textarea {

    min-height: 120px;

    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: var(--shadow-focus-ring);
}

/*
|--------------------------------------------------------------------------
| Ecosystem form system
|--------------------------------------------------------------------------
*/

.ecosystem-form-group {

    margin-bottom: 22px;
}

.ecosystem-label {

    display: block;

    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: 14px;

    font-weight: 800;
}

.ecosystem-input,
.ecosystem-select,
.ecosystem-textarea {

    width: 100%;

    min-height: 54px;

    padding: 14px 16px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-surface);

    color: var(--color-primary);

    transition: var(--transition);
}

.ecosystem-textarea {

    min-height: 160px;

    resize: vertical;
}

.ecosystem-input:focus,
.ecosystem-select:focus,
.ecosystem-textarea:focus {

    border-color: var(--color-primary);

    box-shadow: var(--shadow-focus-ring-lg);

    outline: none;
}

.ecosystem-input::placeholder,
.ecosystem-textarea::placeholder {

    color: var(--color-text-placeholder);
}
/* ----- address-fields.php (Wave 5) ----- */

.address-form-block {

    display: contents;
}

.address-details-panel {

    display: contents;
}

.address-details-panel.is-hidden {

    display: none;
}

.address-country-other-wrap {

    display: none;

    margin-top: -4px;
}

.form-group.address-country-other-wrap:not(.is-visible),
.form-field.address-country-other-wrap:not(.is-visible) {

    display: none !important;
}

.address-country-other-wrap.is-visible,
.form-group.address-country-other-wrap.is-visible,
.form-field.address-country-other-wrap.is-visible {

    display: block;
}

.page-register .form-group.address-country-other-wrap.is-visible,
.page-account-register .form-group.address-country-other-wrap.is-visible,
.page-account-profile .form-group.address-country-other-wrap.is-visible,
.page-account-settings .form-group.address-country-other-wrap.is-visible,
.page-admin-customers-edit .form-group.address-country-other-wrap.is-visible {

    display: flex;

    flex-direction: column;
}

.address-field-hint {

    margin-top: 6px;

    font-size: 12px;

    line-height: 1.5;

    color: var(--color-text-muted);
}

.address-state-field[data-state-mode="select"] .address-state-select {

    display: block;
}

.address-state-field[data-state-mode="select"] .address-state-other-input {

    display: none;
}

.address-state-field[data-state-mode="text"] .address-state-select {

    display: none;
}

.address-state-field[data-state-mode="text"] .address-state-other-input {

    display: block;
}

.address-state-field[data-state-mode="none"] .address-state-select,
.address-state-field[data-state-mode="none"] .address-state-other-input {

    display: none;
}

.address-state-other-input,
.address-state-select {

    width: 100%;

    box-sizing: border-box;
}

/* ===== END components/forms.css ===== */

/* ===== BEGIN components/cards.css ===== */

/*
|--------------------------------------------------------------------------
| Cards — Wave 0
|--------------------------------------------------------------------------
*/

.card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    padding: var(--space-7);

    box-shadow: var(--shadow-sm);
}

.card-header {

    margin-bottom: var(--space-4);

}

.card-body {

    margin-bottom: var(--space-4);
}

.card-footer {

    margin-top: var(--space-4);

    padding-top: var(--space-4);

    border-top: 1px solid var(--color-border);
}

.empty-state {

    padding: var(--space-10) var(--space-6);

    text-align: center;

    color: var(--color-text-muted);

    background: var(--color-surface);

    border: 1px dashed var(--color-border);

    border-radius: var(--radius-md);
}

@media (max-width: 768px) {

    .card {

        padding: 22px;
    }
}

/*
|--------------------------------------------------------------------------
| Ecosystem card
|--------------------------------------------------------------------------
*/

.ecosystem-card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

/* ===== END components/cards.css ===== */

/* ===== BEGIN components/badges.css ===== */

/*
|--------------------------------------------------------------------------
| Badges & status — Wave 0
|--------------------------------------------------------------------------
*/

.badge,
.status {

    display: inline-flex;

    align-items: center;

    gap: var(--space-1);

    padding: 6px 12px;

    border-radius: var(--radius-full);

    background: var(--color-surface-muted);

    color: var(--color-text);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;
}

.badge-success,
.status-success {

    background: var(--color-success-bg);

    color: var(--color-success);
}

.badge-warning,
.status-warning {

    background: var(--color-warning-bg);

    color: var(--color-warning);
}

.badge-danger,
.status-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.badge-info,
.status-info {

    background: var(--color-info-bg);

    color: var(--color-info);
}

.badge-muted,
.status-muted {

    background: var(--color-surface-muted);

    color: var(--color-text-muted);
}

.badge-featured,
.status-featured {

    background: var(--color-featured-bg);

    color: var(--color-featured);
}

.ecosystem-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 34px;

    padding: 8px 14px;

    border-radius: var(--radius-full);

    font-size: 12px;

    font-weight: 800;
}

.ecosystem-badge-success {

    background: var(--color-success-bg);

    color: var(--color-success);
}

.ecosystem-badge-warning {

    background: var(--color-warning-bg);

    color: var(--color-warning);
}

.ecosystem-badge-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.ecosystem-badge-info {

    background: var(--color-info-bg);

    color: var(--color-info);
}

.ecosystem-badge-featured {

    background: var(--color-featured-bg);

    color: var(--color-featured);
}

/* ===== END components/badges.css ===== */

/* ===== BEGIN components/alerts.css ===== */

/*
|--------------------------------------------------------------------------
| Alerts — Wave 0
|--------------------------------------------------------------------------
*/

.alert {

    padding: var(--space-4) 18px;

    border-radius: var(--radius-sm);

    margin-bottom: var(--space-5);

    border: 1px solid transparent;
}

.alert-success {

    background: var(--color-success-bg);

    color: var(--color-success-text);

    border-color: var(--color-success-bg);
}

.alert-warning {

    background: var(--color-warning-bg);

    color: var(--color-warning);

    border-color: var(--color-warning-bg);
}

.alert-error,
.alert-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);

    border-color: var(--color-danger-bg);
}

.alert-info {

    background: var(--color-info-bg);

    color: var(--color-info);

    border-color: var(--color-info-bg);
}

.ecosystem-alert {

    padding: 18px 20px;

    border-radius: var(--radius-md);

    margin-bottom: 22px;

    font-size: 14px;

    line-height: 1.8;

    font-weight: 600;
}

.ecosystem-alert-success {

    background: var(--color-success-bg);

    color: var(--color-success);
}

.ecosystem-alert-warning {

    background: var(--color-warning-bg);

    color: var(--color-warning);
}

.ecosystem-alert-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.ecosystem-alert-info {

    background: var(--color-info-bg);

    color: var(--color-info);
}

/* ===== END components/alerts.css ===== */

/* ===== BEGIN components/tables.css ===== */

/*
|--------------------------------------------------------------------------
| Tables — Wave 0
|--------------------------------------------------------------------------
*/

.table-wrap {

    width: 100%;

    overflow-x: auto;

    border-radius: var(--radius-sm);
}

.table,
table {

    width: 100%;

    border-collapse: collapse;

    background: var(--color-surface);

    border-radius: var(--radius-sm);

    overflow: hidden;
}

.table th,
table th {

    background: var(--color-surface-muted);

    text-align: left;

    font-weight: var(--font-weight-semibold);
}

.table th,
.table td,
table th,
table td {

    padding: var(--space-4);

    border-bottom: 1px solid var(--color-border);

    vertical-align: top;
}

.table-compact th,
.table-compact td {

    padding: var(--space-2) var(--space-3);

    font-size: var(--font-size-xs);
}

.table tbody tr:last-child td,
table tbody tr:last-child td {

    border-bottom: none;
}

/* ===== END components/tables.css ===== */

/* ===== BEGIN components/modals.css ===== */

/*
|--------------------------------------------------------------------------
| Modals — Wave 1 (from header.php)
|--------------------------------------------------------------------------
*/

.ecosystem-modal-overlay {

    position: fixed;

    inset: 0;

    background: var(--color-overlay-scrim);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);

    z-index: var(--z-overlay);
}

.ecosystem-modal-overlay.active {

    opacity: 1;

    visibility: visible;
}

.ecosystem-modal {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: min(92vw, 720px);

    max-height: 90vh;

    overflow-y: auto;

    background: var(--color-surface);

    border-radius: var(--radius-xl);

    padding: 32px;

    z-index: var(--z-modal);

    opacity: 0;

    visibility: hidden;

    transition: var(--transition);
}

.ecosystem-modal.active {

    opacity: 1;

    visibility: visible;
}

@media (max-width: 768px) {

    .ecosystem-modal {

        width: calc(100vw - 24px);

        padding: 24px;
    }
}

/* ===== END components/modals.css ===== */

/* ===== BEGIN components/toasts.css ===== */

/*
|--------------------------------------------------------------------------
| Toasts — Wave 1 (from header.php)
|--------------------------------------------------------------------------
*/

.ecosystem-toast-container {

    position: fixed;

    top: 24px;

    right: 24px;

    z-index: var(--z-toast);

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.ecosystem-toast {

    min-width: 320px;

    max-width: 420px;

    padding: 18px 20px;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
}

@media (max-width: 768px) {

    .ecosystem-toast-container {

        top: 18px;

        left: 18px;

        right: 18px;
    }

    .ecosystem-toast {

        min-width: 0;

        max-width: 100%;
    }
}

/* ===== END components/toasts.css ===== */

/* ===== BEGIN components/media-viewer.css ===== */

/*
|--------------------------------------------------------------------------
| Upload media viewer — Wave 5 (partials/upload-media-viewer.php)
|--------------------------------------------------------------------------
| Classes are upload-media-viewer / umv-* prefixed; safe without page scope.
|--------------------------------------------------------------------------
*/
.upload-media-viewer {

    display: grid;

    gap: 12px;

    width: 100%;
}

.upload-media-viewer--compact {

    gap: 10px;
}

.umv-main {

    position: relative;

    border-radius: 18px;

    overflow: hidden;

    background: var(--color-surface-alt);

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 320px;
}

.upload-media-viewer--compact .umv-main {

    min-height: 0;

    height: 240px;

    border-radius: 0;
}

.umv-main img,
.umv-main video {

    width: 100%;

    height: auto;

    max-height: 72vh;

    display: block;

    object-fit: contain;
}

.upload-media-viewer--compact .umv-main img,
.upload-media-viewer--compact .umv-main video {

    width: 100%;

    height: 100%;

    max-height: none;

    object-fit: contain;
}

.umv-external {

    padding: 48px 20px;

    text-align: center;
}

.umv-external a {

    color: var(--color-text);

    font-weight: 800;

    text-decoration: underline;
}

.umv-empty {

    padding: 48px 20px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 600;
}

.umv-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;
}

.umv-count {

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text-muted);
}

.umv-open-full {

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text);

    text-decoration: underline;
}

.umv-thumbs {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    overflow-x: auto;

    padding-bottom: 2px;
}

.umv-thumb {

    border:
        2px solid transparent;

    border-radius: 12px;

    padding: 0;

    background: var(--color-surface-alt);

    cursor: pointer;

    width: 72px;

    height: 72px;

    overflow: hidden;

    flex-shrink: 0;

    transition: 0.15s ease;
}

.upload-media-viewer--compact .umv-thumb {

    width: 56px;

    height: 56px;

    border-radius: 10px;
}

.umv-thumb:hover {

    border-color: var(--color-border-strong);
}

.umv-thumb.is-active {

    border-color: var(--color-text);
}

.umv-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.umv-thumb-video {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    font-size: 11px;

    font-weight: 800;

    color: var(--color-text-muted);

    background: var(--color-border);
}

/* ===== END components/media-viewer.css ===== */

/* ===== BEGIN components/engagement-wheel.css ===== */

/*
|--------------------------------------------------------------------------
| Component: engagement wheel — casino presentation
|--------------------------------------------------------------------------
*/

.zeez-wheel-stage {

    position: relative;

    width: 100%;

    margin: 48px auto 0;

    padding: 0;

    overflow: hidden;

    border-radius: 32px;

    isolation: isolate;

    border: 1px solid
        color-mix(
            in srgb,
            var(--color-border) 55%,
            transparent
        );

    box-shadow:
        0 24px 48px
        color-mix(
            in srgb,
            var(--theme-dark) 18%,
            transparent
        );
}

.zeez-wheel-stage__backdrop {

    position: absolute;

    inset: 0;

    background:
        var(--gradient-surface-hero);

    z-index: 0;
}

.zeez-wheel-stage__backdrop::after {

    content: '';

    position: absolute;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -140px;

    right: -120px;

    pointer-events: none;
}

.zeez-wheel-stage__vignette {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 38%,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 68%,
            rgba(0, 0, 0, 0.22) 100%
        );

    pointer-events: none;
}

.zeez-wheel-stage__sparkles {

    position: absolute;

    inset: 0;

    opacity: 0.22;

    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.35), transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.28), transparent),
        radial-gradient(1px 1px at 90% 50%, rgba(255, 255, 255, 0.32), transparent);

    background-size: 100% 100%;

    animation: zeez-wheel-sparkle 8s ease-in-out infinite alternate;

    pointer-events: none;
}

@keyframes zeez-wheel-sparkle {

    0% {
        opacity: 0.25;
        transform: scale(1);
    }

    100% {
        opacity: 0.45;
        transform: scale(1.02);
    }
}

.zeez-wheel-stage__inner {

    position: relative;

    z-index: 1;

    padding: 40px 24px 48px;

    text-align: center;
}

.zeez-wheel-stage__header {

    margin-bottom: 28px;
}

.zeez-wheel-stage__eyebrow {

    margin: 0 0 10px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color:
        color-mix(
            in srgb,
            var(--color-hero-text) 72%,
            var(--theme-accent) 28%
        );
}

.zeez-wheel-stage__title {

    margin: 0 0 12px;

    font-family: var(--font-heading);

    font-size: clamp(28px, 4vw, 40px);

    font-weight: 800;

    line-height: 1.15;

    color: var(--color-hero-text);

    text-shadow:
        0 2px 0
        color-mix(
            in srgb,
            var(--theme-dark) 35%,
            transparent
        );
}

.zeez-wheel-stage__subtitle {

    margin: 0 auto;

    max-width: 520px;

    font-size: 16px;

    line-height: 1.7;

    color: var(--color-hero-text-muted);
}

/* Wheel assembly */

.zeez-wheel-assembly {

    position: relative;

    width: min(420px, 100%);

    margin: 0 auto 20px;

    aspect-ratio: 1;
}

.zeez-wheel-confetti-canvas {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 6;
}

.zeez-wheel-assembly__canvas {

    display: block;

    width: 100%;

    height: auto;

    margin: 0 auto;

    border-radius: 50%;

    filter:
        drop-shadow(0 18px 40px rgba(0, 0, 0, 0.28))
        drop-shadow(
            0 0 24px
            color-mix(
                in srgb,
                var(--theme-accent) 35%,
                transparent
            )
        );
}

.zeez-wheel-assembly__rim {

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    pointer-events: none;
}

.zeez-wheel-assembly__rim-glow {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    box-shadow:
        inset 0 0 24px
        color-mix(
            in srgb,
            var(--theme-accent) 22%,
            transparent
        ),
        0 0 32px
        color-mix(
            in srgb,
            var(--theme-primary) 18%,
            transparent
        );

    animation: zeez-wheel-rim-pulse 2.4s ease-in-out infinite;
}

@keyframes zeez-wheel-rim-pulse {

    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}

.zeez-wheel-assembly__rim-bolts {

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    border: 2px dashed
        color-mix(
            in srgb,
            var(--color-hero-text) 18%,
            transparent
        );

    animation: zeez-wheel-rim-spin 24s linear infinite;
}

@keyframes zeez-wheel-rim-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.zeez-wheel-assembly__pointer {

    position: absolute;

    top: -6px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 4;

    width: 44px;

    height: 58px;

    filter:
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
        drop-shadow(
            0 0 12px
            color-mix(
                in srgb,
                var(--theme-accent) 45%,
                transparent
            )
        );
}

.zeez-wheel-assembly__pointer-cap {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--theme-accent) 55%, white),
        var(--theme-primary) 48%,
        var(--theme-primary-hover)
    );

    border: 2px solid
        color-mix(
            in srgb,
            var(--theme-accent) 70%,
            white
        );

    z-index: 2;
}

.zeez-wheel-assembly__pointer-blade {

    position: absolute;

    top: 14px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 16px solid transparent;

    border-right: 16px solid transparent;

    border-top: 42px solid var(--theme-primary);

    z-index: 1;
}

.zeez-wheel-assembly__pointer-blade::after {

    content: "";

    position: absolute;

    top: -40px;

    left: -10px;

    width: 0;

    height: 0;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 26px solid
        color-mix(
            in srgb,
            var(--theme-accent) 65%,
            white
        );
}

.zeez-wheel-assembly__hub {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 18%;

    height: 18%;

    min-width: 52px;

    min-height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--theme-accent) 50%, white) 0%,
        var(--theme-primary) 38%,
        var(--theme-primary-hover) 72%,
        color-mix(in srgb, var(--theme-accent) 40%, white) 100%
    );

    box-shadow:
        inset 0 2px 6px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25),
        0 0 20px
        color-mix(
            in srgb,
            var(--theme-primary) 35%,
            transparent
        );

    z-index: 3;

    pointer-events: none;
}

.zeez-wheel-assembly__hub-ring {

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.35);
}

.zeez-wheel-assembly__hub-logo {

    position: relative;

    font-family: "Plus Jakarta Sans", Inter, sans-serif;

    font-size: clamp(10px, 2.4vw, 13px);

    font-weight: 900;

    letter-spacing: 0.08em;

    color: #2a1a05;

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Status + controls */

.zeez-wheel-status {

    min-height: 24px;

    margin: 0 0 18px;

    font-size: 15px;

    font-weight: 600;

    color: var(--color-hero-text-muted);
}

.zeez-wheel-spin-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 220px;

    padding: 18px 36px;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    overflow: hidden;

    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-primary) 82%, white) 0%,
        var(--theme-primary) 48%,
        var(--theme-primary-hover) 100%
    );

    box-shadow:
        0 8px 0
        color-mix(
            in srgb,
            var(--theme-primary-hover) 85%,
            black
        ),
        0 14px 32px rgba(0, 0, 0, 0.22),
        0 0 24px
        color-mix(
            in srgb,
            var(--theme-primary) 28%,
            transparent
        );

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;

}

.zeez-wheel-spin-btn:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow:
        0 10px 0
        color-mix(
            in srgb,
            var(--theme-primary-hover) 85%,
            black
        ),
        0 18px 36px rgba(0, 0, 0, 0.28),
        0 0 32px
        color-mix(
            in srgb,
            var(--theme-primary) 35%,
            transparent
        );
}

.zeez-wheel-spin-btn:active:not(:disabled) {

    transform: translateY(4px);

    box-shadow:
        0 4px 0
        color-mix(
            in srgb,
            var(--theme-primary-hover) 85%,
            black
        ),
        0 8px 20px rgba(0, 0, 0, 0.2);
}

.zeez-wheel-spin-btn:disabled {

    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}

.zeez-wheel-spin-btn__label {

    position: relative;

    z-index: 1;

    font-family: "Plus Jakarta Sans", Inter, sans-serif;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #fff8f0;

    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.zeez-wheel-spin-btn__shine {

    position: absolute;

    top: 0;

    left: -40%;

    width: 40%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: skewX(-18deg);

    animation: zeez-wheel-btn-shine 3s ease-in-out infinite;
}

@keyframes zeez-wheel-btn-shine {

    0% {
        left: -50%;
    }

    55%,
    100% {
        left: 130%;
    }
}

/* Result chips */

.zeez-wheel-results {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    justify-content: center;

    margin: 8px 0 24px;
}

.zeez-wheel-result-chip {

    min-width: 140px;

    padding: 14px 16px;

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(8px);

    text-align: left;

    animation: zeez-wheel-chip-in 0.45s ease-out;
}

@keyframes zeez-wheel-chip-in {

    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.zeez-wheel-result-chip__seq {

    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(255, 248, 231, 0.62);
}

.zeez-wheel-result-chip strong {

    display: block;

    font-size: 15px;

    color: #fff8e7;
}

.zeez-wheel-conditions {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.zeez-wheel-conditions__line {

    display: block;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.45;

    color: rgba(255, 248, 231, 0.88);
}

.zeez-wheel-result-chip--legendary {

    border-color: rgba(255, 215, 0, 0.55);

    box-shadow: 0 0 24px rgba(255, 215, 0, 0.2);
}

.zeez-wheel-result-chip--epic {

    border-color: rgba(251, 191, 36, 0.45);

    box-shadow: 0 0 18px rgba(251, 191, 36, 0.15);
}

/* Pick-one selection */

.zeez-wheel-selection {

    margin-top: 8px;

    padding-top: 8px;
}

.zeez-wheel-selection__title {

    margin: 0 0 8px;

    font-size: 22px;

    font-weight: 800;

    color: #fff8e7;
}

.zeez-wheel-selection__hint {

    margin: 0 auto 22px;

    max-width: 520px;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255, 248, 231, 0.72);
}

.zeez-wheel-selection__grid {

    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(180px, 1fr)
    );

    gap: 16px;

    max-width: 720px;

    margin: 0 auto;
}

.zeez-wheel-pick-card {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    padding: 18px;

    border-radius: 18px;

    border: 2px solid rgba(255, 255, 255, 0.12);

    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
    );

    cursor: pointer;

    text-align: left;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.zeez-wheel-pick-card:hover {

    transform: translateY(-4px);

    border-color: rgba(255, 215, 0, 0.55);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(255, 215, 0, 0.15);
}

.zeez-wheel-pick-card__tier {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: #f5d76e;
}

.zeez-wheel-pick-card strong {

    font-size: 17px;

    color: #fff8e7;
}

.zeez-wheel-pick-card__note {

    margin: 0;

    font-size: 13px;

    line-height: 1.55;

    color: rgba(255, 248, 231, 0.78);
}

.zeez-wheel-pick-card__cta {

    margin-top: auto;

    font-size: 13px;

    font-weight: 700;

    color: rgba(255, 248, 231, 0.7);
}

.zeez-wheel-pick-card--legendary {

    border-color: rgba(255, 215, 0, 0.45);

    background: linear-gradient(
        160deg,
        rgba(212, 175, 55, 0.18),
        rgba(0, 0, 0, 0.15)
    );
}

/* Win complete */

.zeez-wheel-complete {

    margin-top: 12px;
}

.zeez-wheel-complete__panel {

    position: relative;

    max-width: 520px;

    margin: 0 auto;

    padding: 28px 24px 32px;

    border-radius: 22px;

    border: 1px solid rgba(255, 215, 0, 0.35);

    background: linear-gradient(
        165deg,
        rgba(255, 248, 220, 0.12),
        rgba(0, 0, 0, 0.25)
    );

    overflow: hidden;
}

.zeez-wheel-complete__burst {

    position: absolute;

    inset: -40%;

    background:
        radial-gradient(
            circle,
            rgba(255, 215, 0, 0.22) 0%,
            transparent 62%
        );

    animation: zeez-wheel-burst 1.8s ease-out;
}

@keyframes zeez-wheel-burst {

    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.zeez-wheel-complete__panel h3 {

    position: relative;

    margin: 0 0 14px;

    font-size: 28px;

    font-weight: 900;

    color: #fff8e7;
}

.zeez-wheel-complete__prize {

    position: relative;

    margin: 0 0 12px;
}

.zeez-wheel-complete__prize strong {

    display: block;

    font-size: 22px;

    color: #f5d76e;
}

.zeez-wheel-complete__tier {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.1);

    color: #f5d76e;
}

.zeez-wheel-complete__message {

    position: relative;

    margin: 0 0 18px;

    line-height: 1.7;

    color: rgba(255, 248, 231, 0.85);
}

.zeez-wheel-complete__code-wrap {

    position: relative;

    margin: 0 0 16px;

    padding: 16px;

    border-radius: 14px;

    background: rgba(0, 0, 0, 0.35);

    border: 1px dashed rgba(255, 215, 0, 0.4);
}

.zeez-wheel-complete__code-label {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: rgba(255, 248, 231, 0.65);
}

.zeez-wheel-complete__code {

    display: block;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 0.14em;

    color: #fff8e7;
}

.zeez-wheel-complete__cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    margin-top: 20px;

    padding: 14px 24px;

    border-radius: var(--radius-sm, 8px);

    background: var(--color-primary, #c9a227);

    color: var(--color-text-on-primary, #1a1a1a);

    font-size: 15px;

    font-weight: 800;

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.zeez-wheel-complete__cta:hover {

    background: var(--color-primary-hover, #b89220);

    color: var(--color-text-on-primary, #1a1a1a);

    transform: translateY(-1px);
}

.zeez-wheel-complete__footnote {

    position: relative;

    margin: 0;

    font-size: 13px;

    line-height: 1.6;

    color: rgba(255, 248, 231, 0.62);
}

/* Win flash states */

.zeez-wheel-stage--spinning .zeez-wheel-assembly__rim-glow {

    animation-duration: 0.8s;
}

.zeez-wheel-stage--win .zeez-wheel-assembly__canvas {

    filter:
        drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 48px rgba(255, 215, 0, 0.35));
}

.zeez-wheel-stage--win[data-rarity="legendary"] .zeez-wheel-assembly__canvas {

    filter:
        drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 80px rgba(255, 215, 0, 0.7));
}

.zeez-wheel-stage--legendary-spin .zeez-wheel-assembly__rim-glow {

    animation-duration: 0.45s;

    box-shadow:
        inset 0 0 36px rgba(255, 215, 0, 0.35),
        0 0 64px rgba(255, 215, 0, 0.35);
}

.zeez-wheel-stage--legendary-spin .zeez-wheel-assembly__pointer {

    filter:
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 24px rgba(255, 215, 0, 0.75));
}

.zeez-wheel-stage--legendary-spin .zeez-wheel-assembly__canvas {

    filter:
        drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 40px rgba(255, 215, 0, 0.28));
}

.zeez-wheel-stage--completed .zeez-wheel-results {

    opacity: 0.85;
}

/* Success page embed */

.page-register-success .register-success-wheel-wrap {

    max-width: 920px;

    margin: 0 auto;

    padding: 0 20px 20px;
}

.page-register-success .register-success-card--compact {

    max-width: 720px;

    margin-bottom: 0;

    padding-bottom: 28px;
}

@media (max-width: 640px) {

    .zeez-wheel-stage__inner {

        padding: 28px 16px 36px;
    }

    .zeez-wheel-spin-btn {

        width: 100%;

        min-width: 0;
    }

    .zeez-wheel-selection__grid {

        grid-template-columns: 1fr;
    }
}

.zeez-wheel-stage--preview.zeez-wheel-stage--locked
    .zeez-wheel-spin-btn:disabled {

    filter: grayscale(0.15);

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ===== END components/engagement-wheel.css ===== */

/* ===== BEGIN components/footer.css ===== */

/*
|--------------------------------------------------------------------------
| Site footer — slim layout (partials/footer.php)
|--------------------------------------------------------------------------
*/

.footer-wrapper {

    margin-top: var(--footer-margin-top);
}

.footer {

    position: relative;

    overflow: hidden;

    background: var(--gradient-footer);

    color: var(--color-footer-text);
}

.footer::before {

    content: '';

    position: absolute;

    width: 700px;

    height: 700px;

    border-radius: 50%;

    background: var(--color-footer-glow);

    top: -360px;

    right: -260px;
}

.footer::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: var(--color-footer-glow-soft);

    bottom: -220px;

    left: -160px;
}

.footer-container {

    position: relative;

    z-index: 2;

    padding: 56px var(--page-padding) 36px;
}

.footer-grid {

    display: grid;

    grid-template-columns: 1.8fr 1fr 1fr 1fr;

    gap: 36px;

    margin-bottom: 40px;
}

.footer-brand {

    max-width: 420px;
}

.footer-logo {

    display: inline-flex;

    align-items: center;

    gap: var(--space-4);

    margin-bottom: var(--space-5);
}

.footer-logo-icon {

    width: 52px;

    height: 52px;

    border-radius: var(--space-4);

    background: var(--gradient-footer-logo);

    color: var(--color-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    font-weight: 900;

    box-shadow: var(--shadow-footer-logo);
}

.footer-logo-text {

    display: flex;

    flex-direction: column;
}

.footer-logo-title {

    font-size: 28px;

    font-weight: 900;

    line-height: 1.1;
}

.footer-logo-subtitle {

    margin-top: 4px;

    color: var(--color-footer-logo-subtitle);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;
}

.footer-description {

    color: var(--color-footer-text-muted);

    line-height: 1.75;

    margin: 0 0 var(--space-5);

    font-size: 15px;
}

.footer-store-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 12px 20px;

    border-radius: 999px;

    background: var(--color-footer-text);

    color: var(--color-primary);

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    transition: var(--transition);
}

.footer-store-button:hover {

    transform: translateY(-1px);

    background: var(--color-background);
}

.footer-column-title {

    font-size: var(--font-size-md);

    font-weight: 900;

    margin-bottom: var(--space-5);
}

.footer-links {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-links a {

    display: inline-flex;

    align-items: center;

    min-height: 36px;

    color: var(--color-footer-link);

    text-decoration: none;

    line-height: 1.6;

    font-size: 14px;

    transition: var(--transition);
}

.footer-links a:hover {

    color: var(--color-footer-text);

    transform: translateX(2px);
}

.footer-links a.active {

    color: var(--color-footer-text);

    font-weight: 800;
}

.footer-link-external::after {

    content: '↗';

    margin-left: 6px;

    font-size: 11px;

    opacity: 0.75;
}

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-6);

    flex-wrap: wrap;

    padding-top: 28px;

    border-top: 1px solid var(--color-footer-border);
}

.footer-copy {

    color: var(--color-footer-text-faint);

    line-height: 1.6;

    font-size: 14px;
}

.footer-mini-links {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}

.footer-mini-links a {

    color: var(--color-footer-link-muted);

    text-decoration: none;

    font-size: 14px;

    transition: var(--transition);
}

.footer-mini-links a:hover {

    color: var(--color-footer-text);
}

.footer-newsletter {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 1.4fr);

    gap: 24px 32px;

    align-items: start;

    margin-top: 36px;

    padding: 28px 32px;

    border-radius: 24px;

    border: 1px solid var(--color-footer-border);

    background: rgba(255, 255, 255, 0.42);
}

.footer-newsletter-copy {

    max-width: 420px;
}

.footer-newsletter-title {

    margin: 0 0 8px;

    font-size: 22px;

    line-height: 1.2;

    color: var(--color-footer-text);
}

.footer-newsletter-description,
.footer-newsletter-disclaimer,
.footer-newsletter-status {

    margin: 0;

    color: var(--color-footer-text-muted);

    font-size: 14px;

    line-height: 1.55;
}

.footer-newsletter-form {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 12px;

    align-items: center;
}

.footer-newsletter-field {

    display: block;

    min-width: 0;
}

.footer-newsletter-input {

    width: 100%;

    min-height: 48px;

    padding: 0 16px;

    border-radius: 999px;

    border: 1px solid var(--color-footer-border);

    background: #fff;

    color: var(--color-text);

    font: inherit;
}

.footer-newsletter-input:focus {

    outline: 2px solid var(--color-accent);

    outline-offset: 2px;
}

.footer-newsletter-button {

    min-height: 48px;

    padding: 0 22px;

    border: 0;

    border-radius: 999px;

    background: var(--color-footer-text);

    color: #fff;

    font: inherit;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}

.footer-newsletter-button:hover {

    opacity: 0.92;
}

.footer-newsletter-button:disabled {

    opacity: 0.65;

    cursor: wait;
}

.footer-newsletter-hp {

    position: absolute;

    left: -10000px;

    width: 1px;

    height: 1px;

    overflow: hidden;
}

.footer-newsletter-status {

    grid-column: 1 / -1;
}

.footer-newsletter-status[data-type="success"] {

    color: var(--color-success-text, #166534);
}

.footer-newsletter-status[data-type="error"] {

    color: var(--color-danger-text, #b91c1c);
}

.footer-newsletter-disclaimer {

    grid-column: 1 / -1;

    font-size: 12px;

    color: var(--color-footer-text-faint);
}

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

@media (max-width: 1200px) {

    .footer-grid {

        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {

        grid-column: 1 / -1;

        max-width: 520px;
    }
}

@media (max-width: 768px) {

    .footer-wrapper {

        margin-top: var(--footer-margin-top-mobile);
    }

    .footer-container {

        padding: 48px var(--page-padding-mobile) var(--space-8);
    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .footer-logo-title {

        font-size: 24px;
    }

    .footer-store-button {

        width: 100%;
    }

    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-newsletter {

        grid-template-columns: 1fr;

        padding: 24px 20px;
    }

    .footer-newsletter-form {

        grid-template-columns: 1fr;
    }

    .footer-newsletter-button {

        width: 100%;
    }
}

/* ===== END components/footer.css ===== */

/* ===== BEGIN components/account-navigation.css ===== */

/*
|--------------------------------------------------------------------------
| Account creator navigation — Wave 4 (account/partials/navigation.php)
|--------------------------------------------------------------------------
| Classes are creator-nav-* prefixed; safe without page scope.
|--------------------------------------------------------------------------
*/
.creator-nav-wrapper {

    margin-bottom: 36px;
}

.creator-nav {

    position: relative;

    overflow: visible;
}

/* ========================================================= */
/* TOP BAR */
/* ========================================================= */

.creator-nav-topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 28px;

    border-bottom:
        1px solid var(--color-border-marketing);
}

.creator-nav-brand {

    display: flex;

    align-items: center;

    gap: 14px;
}

.creator-nav-brand-link {

    display: flex;

    align-items: center;

    gap: 14px;

    text-decoration: none;

    color: inherit;
}

.creator-nav-logo {

    width: 46px;

    height: 46px;

    border-radius: 16px;

    background:
        var(--gradient-brand-logo);

    color: var(--color-surface);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;

    font-size: 16px;
}

.creator-nav-brand-text {

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.creator-nav-title {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);
}

.creator-nav-subtitle {

    font-size: 12px;

    color: var(--color-text-muted);

    font-weight: 600;
}

/* ========================================================= */
/* DESKTOP NAV */
/* ========================================================= */

.creator-nav-desktop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 18px 24px;

    flex-wrap: wrap;
}

.creator-nav-group {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}

.creator-nav-dropdown {

    position: relative;
}

.creator-nav-dropdown-toggle {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 18px;

    border-radius: 16px;

    text-decoration: none;

    background: var(--color-background);

    color: var(--color-text);

    font-size: 14px;

    font-weight: 800;

    transition: 0.18s ease;

    border:
        1px solid transparent;

    cursor: pointer;
}

.creator-nav-dropdown-toggle:hover {

    background: var(--color-surface-alt);
}

.creator-nav-dropdown.active
.creator-nav-dropdown-toggle {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.creator-nav-dropdown-menu {

    position: absolute;

    top: calc(100% + 12px);

    left: 0;

    min-width: 280px;

    background: var(--color-surface);

    border-radius: 22px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 18px 42px var(--color-shadow-lg);

    padding: 14px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

    transition: 0.18s ease;

    z-index: 50;
}

.creator-nav-dropdown:hover
.creator-nav-dropdown-menu,
.creator-nav-dropdown:focus-within
.creator-nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.creator-nav-link {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 16px 18px;

    border-radius: 18px;

    text-decoration: none;

    transition: 0.18s ease;
}

.creator-nav-link:hover {

    background: var(--color-background);
}

.creator-nav-link.active {

    background: var(--color-primary);
}

.creator-nav-link-title {

    font-size: 15px;

    font-weight: 900;

    color: var(--color-text);
}

.creator-nav-link.active
.creator-nav-link-title {

    color: var(--color-text-on-primary);
}

.creator-nav-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 20px;

    height: 20px;

    margin-left: 8px;

    padding: 0 6px;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 11px;

    font-weight: 800;

    line-height: 1;

    vertical-align: middle;
}

.creator-nav-link-description {

    font-size: 12px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.creator-nav-link.active
.creator-nav-link-description {

    color:
        var(--color-text-on-primary-muted);
}

.creator-nav-right {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}

.creator-nav-status {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 18px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.creator-nav-status-indicator {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--primitive-emerald-500);

    flex-shrink: 0;
}

.creator-nav-status-text {

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.creator-nav-status-title {

    color: var(--color-text);

    font-size: 12px;

    font-weight: 900;
}

.creator-nav-status-subtitle {

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 700;

    max-width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.creator-nav-logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 16px;

    text-decoration: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 14px;

    font-weight: 900;

    transition: 0.18s ease;
}

.creator-nav-logout:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

/* ========================================================= */
/* MOBILE */
/* ========================================================= */

.creator-nav-mobile-toggle {

    width: 52px;

    height: 52px;

    border-radius: 16px;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 20px;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;
}

.creator-mobile-menu {

    display: none;

    position: static;

    inset: auto;

    width: 100%;

    box-sizing: border-box;

    border-top:
        1px solid var(--color-border-marketing);

    padding: 18px 24px 24px;

    background: var(--color-surface);

    transform: none;

    box-shadow: none;
}

.creator-mobile-section {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    overflow: hidden;

    margin-bottom: 16px;

    background: var(--color-surface);
}

.creator-mobile-section-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;

    background: var(--color-background);

    border: none;

    cursor: pointer;

    font-size: 15px;

    font-weight: 900;

    color: var(--color-text);
}

.creator-mobile-section-content {

    display: none;

    padding: 12px;
}

.creator-mobile-section.active
.creator-mobile-section-content {

    display: block;
}

.creator-mobile-link {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 16px 18px;

    border-radius: 18px;

    text-decoration: none;

    margin-bottom: 10px;

    transition: 0.18s ease;
}

.creator-mobile-link:hover {

    background: var(--color-background);
}

.creator-mobile-link.active {

    background: var(--color-primary);
}

.creator-mobile-link-title {

    font-size: 14px;

    font-weight: 900;

    color: var(--color-text);
}

.creator-mobile-link.active
.creator-mobile-link-title {

    color: var(--color-text-on-primary);
}

.creator-mobile-link-description {

    font-size: 12px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.creator-mobile-link.active
.creator-mobile-link-description {

    color:
        var(--color-text-on-primary-muted);
}

.creator-mobile-status {

    padding: 20px;

    border-radius: 24px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 8px;

    margin-bottom: 18px;
}

.creator-mobile-logout {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    border-radius: 18px;

    text-decoration: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 900;

    margin-top: 18px;
}

/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media (max-width: 1280px),
       ((hover: none) and (pointer: coarse)) {

    .creator-nav-wrapper {

        position: static;

        top: auto;

        z-index: auto;

        margin-bottom: 28px;
    }

    .creator-nav {

        position: static;
    }

    .creator-nav-wrapper .creator-nav-desktop,
    .creator-nav-wrapper .creator-nav-dropdown-menu {

        display: none !important;
    }

    .creator-nav-wrapper .creator-nav-mobile-toggle {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;
    }

    .creator-nav-wrapper .creator-mobile-menu {

        position: static;

        inset: auto;

        transform: none;

        box-shadow: none;
    }

    .creator-nav-wrapper .creator-mobile-menu:not(.active) {

        display: none !important;
    }

    .creator-nav-wrapper .creator-mobile-menu.active {

        display: block !important;
    }
}

button.creator-nav-mobile-toggle,
button.creator-mobile-section-toggle,
button.creator-nav-dropdown-toggle {

    font: inherit;

    line-height: inherit;

    box-sizing: border-box;
}

/* ===== END components/account-navigation.css ===== */

/* ===== BEGIN components/admin-navigation.css ===== */

/*
|--------------------------------------------------------------------------
| Admin navigation shell — Wave 6 (admin/partials/navigation.php)
|--------------------------------------------------------------------------
| Classes are admin-* prefixed; .page-container is the admin content shell.
|--------------------------------------------------------------------------
*/
.admin-nav-wrapper {

    margin-bottom: 36px;
}

.admin-nav-wrapper.site-chrome-nav-wrapper {

    z-index: 2000;
}

.admin-navbar {

    overflow: visible;
}

.admin-navbar-inner {

    min-height: 88px;

    padding: 0 var(--page-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;
}

/* ========================================================= */
/* BRAND */
/* ========================================================= */

.admin-brand {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-shrink: 0;
}

.admin-logo {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    background:
        var(--gradient-brand-logo);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-surface);

    font-size: 22px;

    font-weight: 900;

    box-shadow:
        0 12px 28px var(--color-shadow-md);
}

.admin-brand-text {

    display: flex;

    flex-direction: column;
}

.admin-brand-title {

    color: var(--color-text);

    text-decoration: none;

    font-size: 24px;

    font-weight: 900;

    line-height: 1.1;
}

.admin-brand-subtitle {

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.05em;
}

/* ========================================================= */
/* DESKTOP NAV */
/* ========================================================= */

.admin-menu {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.admin-item {

    position: relative;
}

.admin-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 18px;

    border-radius: 16px;

    color: var(--color-text-muted);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: 0.18s ease;

    border: none;

    background: transparent;

    font-family: inherit;

    cursor: pointer;
}

.admin-link:hover {

    background: var(--color-background);

    color: var(--color-text);
}

.admin-item.active
.admin-link {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

/* ========================================================= */
/* DROPDOWN */
/* ========================================================= */

.admin-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    left: 0;

    width: 320px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 24px;

    padding: 12px;

    box-shadow:
        0 18px 42px var(--color-shadow-lg);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition: 0.18s ease;

    z-index: 50;
}

.admin-item:hover
.admin-dropdown,
.admin-item:focus-within
.admin-dropdown {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

.dropdown-label {

    padding: 10px 14px;

    color: var(--color-text-placeholder);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.admin-dropdown a {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 16px;

    border-radius: 16px;

    text-decoration: none;

    transition: 0.18s ease;
}

.admin-dropdown a:hover {

    background: var(--color-background);
}

.dropdown-title {

    color: var(--color-text);

    font-size: 14px;

    font-weight: 900;
}

.dropdown-description {

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.7;
}

/* ========================================================= */
/* ACTIONS */
/* ========================================================= */

.admin-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}

.admin-status {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 18px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.admin-status-indicator {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--primitive-emerald-500);
}

.admin-status-text {

    display: flex;

    flex-direction: column;

    min-width: 0;
}

.admin-status-title {

    color: var(--color-text);

    font-size: 12px;

    font-weight: 900;
}

.admin-status-subtitle {

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 700;

    max-width: 200px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.admin-logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    transition: 0.18s ease;

    box-shadow:
        0 10px 24px var(--color-shadow-nav-ui);
}

.admin-logout:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

/* ========================================================= */
/* MOBILE TOGGLE */
/* ========================================================= */

.admin-mobile-toggle {

    display: none;

    width: 54px;

    height: 54px;

    border: none;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 20px;

    font-weight: 900;

    cursor: pointer;
}

/* ========================================================= */
/* INLINE MOBILE MENU (account-style) */
/* ========================================================= */

.admin-inline-mobile-menu {

    display: none;

    position: static;

    inset: auto;

    width: 100%;

    box-sizing: border-box;

    border-top:
        1px solid var(--color-border-marketing);

    padding: 18px 24px 24px;

    background: var(--color-surface);

    transform: none;

    box-shadow: none;
}

.admin-inline-mobile-menu.active {

    display: block;
}

.admin-mobile-status {

    padding: 20px;

    border-radius: 24px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 18px;
}

.admin-mobile-sections {

    padding: 0;
}

.admin-mobile-section {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 24px;

    overflow: hidden;

    margin-bottom: 18px;

    background: var(--color-surface);
}

.admin-mobile-section-toggle {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px;

    border: none;

    background: var(--color-background);

    cursor: pointer;

    font-size: 15px;

    font-weight: 900;

    color: var(--color-text);
}

.admin-mobile-section-content {

    display: none;

    padding: 12px;
}

.admin-mobile-section.active
.admin-mobile-section-content {

    display: block;
}

.admin-mobile-link {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 16px 18px;

    border-radius: 18px;

    text-decoration: none;

    margin-bottom: 10px;

    transition: 0.18s ease;
}

.admin-mobile-link:hover {

    background: var(--color-background);
}

.admin-mobile-link.active {

    background: var(--color-primary);
}

.admin-mobile-link-title {

    font-size: 14px;

    font-weight: 900;

    color: var(--color-text);
}

.admin-mobile-link.active
.admin-mobile-link-title {

    color: var(--color-text-on-primary);
}

.admin-mobile-link-description {

    font-size: 12px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.admin-mobile-link.active
.admin-mobile-link-description {

    color:
        var(--color-text-on-primary-muted);
}

.admin-mobile-logout {

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 900;
}

/* ========================================================= */
/* ADMIN MAIN (content shell — footer stays outside) */
/* ========================================================= */

.admin-main {

    max-width: var(--layout-content-max);

    margin: 42px auto;

    padding: 0 var(--page-padding);

    box-sizing: border-box;
}

.admin-main > .page-container {

    max-width: none;

    margin: 0;

    padding: 0;
}

/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media (max-width: 1280px),
       ((hover: none) and (pointer: coarse)) {

    .admin-nav-wrapper {

        margin-bottom: 28px;
    }

    .admin-navbar {

        position: static;

        top: auto;

        z-index: auto;
    }

    .admin-menu,
    .admin-actions,
    .admin-dropdown {

        display: none !important;
    }

    .admin-mobile-toggle {

        display: inline-flex !important;

        align-items: center;

        justify-content: center;
    }

    .admin-navbar .admin-inline-mobile-menu {

        position: static;

        inset: auto;

        transform: none;

        box-shadow: none;
    }

    .admin-navbar .admin-inline-mobile-menu:not(.active) {

        display: none !important;
    }

    .admin-navbar .admin-inline-mobile-menu.active {

        display: block !important;
    }

}

@media (max-width: 768px) {

    .admin-navbar-inner {

        min-height: 82px;

        padding-left: 18px;

        padding-right: 18px;
    }

    .admin-brand-title {

        font-size: 20px;
    }

    .admin-brand-subtitle {

        font-size: 11px;
    }

    .page-container,
    .admin-main {

        padding-left: 18px;

        padding-right: 18px;
    }

}

/* ===== END components/admin-navigation.css ===== */

/* ===== BEGIN pages/home.css ===== */

/*
|--------------------------------------------------------------------------
| Page: home — Wave 3 (index.php)
|--------------------------------------------------------------------------
| Scoped under .page-home to avoid bleed into campaigns/register.
|--------------------------------------------------------------------------
*/

.page-home.page-container {

    width: 100%;

    max-width: var(--layout-content-max);

    margin: 0 auto;

    box-sizing: border-box;
}

/* Hero */

.page-home .hero {

    position: relative;

    overflow: hidden;

    background: var(--gradient-marketing-hero);

    color: var(--color-hero-text);

    border-radius: 40px;

    padding: 110px 70px;

    margin-top: 40px;

    margin-bottom: 70px;

    box-shadow: var(--shadow-marketing-hero);
}

.page-home .hero::before {

    content: '';

    position: absolute;

    width: 640px;

    height: 640px;

    border-radius: 50%;

    background: var(--color-hero-glow);

    top: -320px;

    right: -180px;
}

.page-home .hero-content {

    position: relative;

    z-index: 2;

    max-width: 980px;
}

.page-home .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: var(--radius-full);

    background: var(--color-hero-glass-strong);

    border: 1px solid var(--color-hero-glass-border);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.04em;

    margin-bottom: 28px;
}

.page-home .hero h1 {

    font-size: 76px;

    line-height: 1.05;

    margin-bottom: 30px;

    color: var(--color-hero-text);

    letter-spacing: -2px;
}

.page-home .hero p {

    font-size: 22px;

    line-height: 2;

    color: var(--color-hero-text-muted);

    max-width: 860px;

    margin: 0 auto 18px;
}

.page-home .hero-note {

    max-width: 720px;

    margin: 0 auto 28px;

    font-size: 16px;

    line-height: 1.85;

    font-weight: 600;

    color: var(--color-hero-text-muted);
}

.page-home .hero-trust {

    margin-top: 24px;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-hero-text-muted);

    letter-spacing: 0.02em;
}

.page-home .hero-copy-mobile {

    display: none;
}

.page-home .hero-actions {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;
}

.page-home .hero-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 30px;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-weight: 800;

    transition: var(--transition);
}

.page-home .hero-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-home .hero-primary:hover {

    background: var(--color-surface-alt);

    transform: translateY(-2px);
}

.page-home .hero-secondary {

    background: var(--color-hero-glass);

    border: 1px solid var(--color-hero-glass-border);

    color: var(--color-hero-text);
}

.page-home .hero-secondary:hover {

    background: var(--color-hero-glass-hover);

    transform: translateY(-2px);
}

/* Stats */

.page-home .stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 24px;

    margin-bottom: 80px;
}

.page-home .stat-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 34px;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card);

    text-align: center;
}

.page-home .stat-number {

    font-size: 54px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-home .stat-label {

    color: var(--color-text-muted);

    font-weight: 700;
}

/* Sections */

.page-home .section {

    margin-bottom: 90px;
}

.page-home .section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 34px;

    flex-wrap: wrap;
}

.page-home .section-title {

    font-size: 48px;

    font-weight: 900;

    color: var(--color-text);

    letter-spacing: -1px;
}

.page-home .section-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 780px;
}

.page-home .section-link {

    color: var(--color-text);

    text-decoration: none;

    font-weight: 900;
}

/* Registration benefits */

.page-home .registration-hero {

    position: relative;

    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border-marketing);

    border-radius: 40px;

    padding: 70px 50px;

    box-shadow: var(--shadow-marketing-card-lg);
}

.page-home .registration-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 26px;

    margin-top: 40px;
}

.page-home .registration-card {

    background: var(--color-background);

    border-radius: 28px;

    padding: 34px;

    border: 1px solid var(--color-border-marketing);
}

.page-home .registration-icon {

    width: 68px;

    height: 68px;

    border-radius: 22px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    margin-bottom: 24px;
}

.page-home .registration-card h3 {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-home .registration-card-highlight {

    font-size: 15px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-home .registration-card p {

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-home .registration-cta-band {

    margin-top: 48px;

    padding: 36px 32px;

    border-radius: 28px;

    background: var(--color-surface);

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card);

    text-align: center;

    display: grid;

    gap: 20px;

    justify-items: center;
}

.page-home .registration-cta-band-text {

    margin: 0;

    max-width: 560px;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.6;

    color: var(--color-text);
}

.page-home .registration-cta-band-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 28px;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    text-decoration: none;

    transition: var(--transition);
}

.page-home .registration-cta-band-button:hover {

    transform: translateY(-2px);

    opacity: 0.95;
}

/* Campaign cards (home preview) */

.page-home .campaign-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));

    gap: 28px;
}

.page-home .campaign-card {

    background: var(--color-surface);

    border-radius: 32px;

    overflow: hidden;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card-md);

    transition: var(--transition);
}

.page-home .campaign-card:hover {

    transform: translateY(-3px);
}

.page-home a.campaign-card,
.page-home .gallery-card-body {

    text-decoration: none;

    color: inherit;
}

.page-home .gallery-card-body {

    display: block;
}

.page-home .campaign-banner {

    position: relative;

    height: 260px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-home .campaign-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-home .campaign-overlay {

    position: absolute;

    inset: 0;

    background: var(--gradient-banner-overlay);
}

.page-home .campaign-content {

    padding: 30px;
}

.page-home .campaign-title {

    font-size: 30px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-home .campaign-deadline {

    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    padding: 6px 12px;

    border-radius: 999px;

    background: var(--color-surface-alt);

    color: var(--color-text);

    font-size: 13px;

    font-weight: 800;
}

.page-home .campaign-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 28px;
}

.page-home .campaign-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}

.page-home .campaign-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-weight: 800;
}

.page-home .campaign-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-home .campaign-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

/* Gallery */

.page-home .gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

.page-home .gallery-card {

    background: var(--color-surface);

    border-radius: 28px;

    overflow: hidden;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card);

    transition: var(--transition);
}

.page-home .gallery-card:hover {

    transform: translateY(-3px);
}

.page-home .gallery-media {

    height: auto;

    overflow: visible;

    background: var(--color-surface-alt);
}

.page-home .gallery-media .upload-media-viewer--compact .umv-main {

    height: 220px;

    border-radius: 0;
}

.page-home .gallery-media .upload-media-viewer--compact .umv-toolbar {

    margin-top: 4px;

    padding: 0 10px;
}

.page-home .gallery-media .upload-media-viewer--compact .umv-count {

    font-size: 12px;
}

.page-home .gallery-media .upload-media-viewer--compact .umv-thumbs {

    padding: 0 10px 10px;
}

.page-home .gallery-media .upload-media-card-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 700;

    font-size: 15px;
}

.page-home .gallery-content {

    padding: 24px;
}

.page-home .gallery-title {

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-home .gallery-meta {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-home .gallery-meta .registered-product-link {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 2px;
}

.page-home .gallery-meta .registered-product-link:hover {

    color: var(--color-primary);
}

/* Steps */

.page-home .steps-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 28px;
}

.page-home .step-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 36px;

    text-align: center;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card);
}

.page-home .step-number {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 22px;

    font-size: 22px;

    font-weight: 900;
}

.page-home .step-card h3 {

    margin-bottom: 16px;

    color: var(--color-text);
}

.page-home .step-card p {

    color: var(--color-text-muted);

    line-height: 1.9;
}

/* Final CTA */

.page-home .final-cta {

    position: relative;

    overflow: hidden;

    background: var(--gradient-marketing-hero);

    color: var(--color-hero-text);

    border-radius: 40px;

    padding: 90px 60px;

    text-align: center;

    margin-bottom: 40px;
}

.page-home .final-cta::before {

    content: '';

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: var(--color-hero-glow);

    top: -260px;

    right: -160px;
}

.page-home .final-cta-content {

    position: relative;

    z-index: 2;
}

.page-home .final-cta h2 {

    font-size: 56px;

    line-height: 1.2;

    margin-bottom: 24px;
}

.page-home .final-cta p {

    max-width: 860px;

    margin: 0 auto 36px;

    line-height: 2;

    color: var(--color-hero-text-muted);
}

.page-home .final-actions {

    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;
}

.page-home .final-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 30px;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-weight: 800;
}

.page-home .final-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-home .final-secondary {

    background: var(--color-hero-glass);

    border: 1px solid var(--color-hero-glass-border);

    color: var(--color-hero-text);
}

@media (max-width: 768px) {

    .page-home.page-container {

        padding-left: var(--page-padding-mobile);

        padding-right: var(--page-padding-mobile);
    }

    .page-home .hero {

        padding: 70px 32px;
    }

    .page-home .hero h1 {

        font-size: 48px;
    }

    .page-home .hero-copy-desktop {

        display: none;
    }

    .page-home .hero-copy-mobile {

        display: block;
    }

    .page-home .hero p {

        font-size: 17px;

        line-height: 1.65;

        margin-bottom: 14px;
    }

    .page-home .hero-trust {

        font-size: 13px;

        line-height: 1.5;
    }

    .page-home .section-title {

        font-size: 36px;
    }

    .page-home .registration-hero {

        padding: 50px 26px;
    }

    .page-home .final-cta {

        padding: 70px 28px;
    }

    .page-home .final-cta h2 {

        font-size: 40px;
    }
}

/* ===== END pages/home.css ===== */

/* ===== BEGIN pages/register.css ===== */

/*
|--------------------------------------------------------------------------
| Page: register — Wave 3 (register/index.php + register/success.php)
|--------------------------------------------------------------------------
| Scoped under .page-register and .page-register-success.
|--------------------------------------------------------------------------
*/

.page-register {

    width: 100%;

    padding: 70px 20px;

    background: var(--gradient-register-page);

    box-sizing: border-box;
}

.page-register .registration-container {

    width: 100%;

    max-width: var(--layout-register-max);

    margin: 0 auto;

    background: var(--color-surface);

    border-radius: 32px;

    padding: 48px;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-register-shell);
}

.page-register .hero-title {

    font-size: 44px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-register .hero-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 820px;

    margin-bottom: 42px;
}

.page-register .registration-benefit-list {

    margin-bottom: 38px;

    padding: 22px 26px;

    background: var(--color-background);

    border: 1px solid var(--color-border-marketing);

    border-radius: 18px;
}

.page-register .registration-benefit-list-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-register .registration-benefit-list-items {

    margin: 0;

    padding-left: 22px;

    color: var(--color-text-muted);

    line-height: 1.85;
}

.page-register .registration-benefit-list-items li {

    margin-bottom: 8px;
}

.page-register .auth-toggle {

    background: var(--color-background);

    border: 1px solid var(--color-border-marketing);

    border-radius: 22px;

    padding: 26px;

    margin-bottom: 38px;
}

.page-register .auth-title {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-register .auth-description {

    color: var(--color-text-muted);

    line-height: 1.8;

    margin-bottom: 22px;
}

.page-register .login-toggle-button {

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 14px 20px;

    border-radius: var(--radius-sm);

    font-weight: 700;

    cursor: pointer;
}

.page-register .inline-login-panel {

    display: none;

    margin-top: 24px;

    padding-top: 24px;

    border-top: 1px solid var(--color-border);
}

.page-register .inline-login-panel.active {

    display: block;
}

.page-register .form-section {

    margin-bottom: 44px;
}

.page-register .section-title {

    font-size: 26px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-register .form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.page-register .form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 0;
}

.page-register .form-group-full {

    grid-column: span 2;
}

.page-register label {

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-register input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.page-register select {

    width: 100%;

    padding: 16px;

    border: 1px solid var(--color-border-strong);

    border-radius: var(--radius-sm);

    box-sizing: border-box;

    background: var(--color-surface);
}

.page-register input:focus:not([type="checkbox"]):not([type="radio"]),
.page-register select:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: var(--shadow-focus-ring-lg);
}

.page-register .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 4px;
}

.page-register .checkbox-row input[type="checkbox"] {

    width: 18px;

    height: 18px;

    min-width: 18px;

    margin: 3px 0 0;

    padding: 0;

    flex-shrink: 0;

    border: 1px solid var(--color-border-strong);

    border-radius: 4px;

    accent-color: var(--color-primary);

    cursor: pointer;
}

.page-register .checkbox-label {

    flex: 1;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;

    font-weight: 600;
}

.page-register .checkbox-label a {

    color: var(--color-primary);

    font-weight: 800;

    text-decoration: underline;

    text-underline-offset: 2px;
}

.page-register .checkbox-label a:hover {

    color: var(--color-text);
}

.page-register .alert {

    padding: 18px;

    border-radius: var(--radius-md);

    margin-bottom: 30px;

    line-height: 1.8;

    font-weight: 600;
}

.page-register .alert-error {

    background: var(--color-danger-bg);

    border: 1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-register .alert-success {

    background: var(--primitive-green-50);

    border: 1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);
}

.page-register .logged-in-banner {

    background: var(--primitive-green-50);

    border: 1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);

    padding: 20px;

    border-radius: var(--radius-md);

    margin-bottom: 36px;

    line-height: 1.8;
}

.page-register .submit-button {

    width: 100%;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 18px;

    border-radius: var(--radius-md);

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;
}

.page-register .submit-button-spaced {

    margin-top: 24px;
}

.page-register .populate-row {

    display: flex;

    gap: 14px;

    align-items: flex-end;

    flex-wrap: wrap;
}

.page-register .populate-row .form-group {

    flex: 1;

    min-width: 180px;
}

.page-register .populate-button {

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 16px 22px;

    border-radius: var(--radius-sm);

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;
}

.page-register .populate-button:disabled {

    opacity: 0.6;

    cursor: not-allowed;
}

.page-register .populate-hint {

    margin: 12px 0 0;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;
}

.page-register .populate-hint-tight {

    margin: 8px 0 0;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;
}

.page-register .populate-status {

    margin-top: 16px;

    padding: 14px 16px;

    border-radius: var(--radius-sm);

    line-height: 1.7;

    font-weight: 600;

    display: none;
}

.page-register .populate-status.visible {

    display: block;
}

.page-register .populate-status-info {

    background: var(--primitive-blue-50);

    border: 1px solid var(--primitive-blue-200);

    color: var(--primitive-blue-900);
}

.page-register .populate-status-error {

    background: var(--color-danger-bg);

    border: 1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-register .populate-lines-panel {

    display: none;

    margin-top: 24px;

    padding: 22px;

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    background: var(--color-background);
}

.page-register .populate-lines-panel.visible {

    display: block;
}

.page-register .populate-lines-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-register .populate-lines-header {

    display: grid;

    grid-template-columns: 44px minmax(0, 1fr) 96px;

    gap: 16px;

    align-items: center;

    padding: 0 0 12px;

    border-bottom: 1px solid var(--color-border);

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.page-register .populate-lines-header span:last-child {

    text-align: center;
}

.page-register .populate-line-row {

    display: grid;

    grid-template-columns: 44px minmax(0, 1fr) 96px;

    gap: 16px;

    align-items: start;

    padding: 16px 0;

    border-bottom: 1px solid var(--color-border);
}

.page-register .populate-line-row:last-child {

    border-bottom: none;
}

.page-register .populate-line-row.disabled {

    opacity: 0.55;
}

.page-register .populate-line-check {

    display: flex;

    justify-content: center;

    padding-top: 2px;
}

.page-register .populate-line-checkbox {

    width: 18px;

    height: 18px;

    margin: 0;

    padding: 0;

    flex: 0 0 18px;

    cursor: pointer;
}

.page-register .populate-line-row.disabled .populate-line-checkbox {

    cursor: not-allowed;
}

.page-register .populate-line-meta {

    min-width: 0;

    line-height: 1.6;
}

.page-register .populate-line-meta strong {

    display: block;

    color: var(--color-text);

    word-break: break-word;
}

.page-register .populate-line-sku {

    display: block;

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 14px;

    word-break: break-word;
}

.page-register .populate-line-qty-wrap {

    display: flex;

    flex-direction: column;

    gap: 6px;
}

.page-register .populate-line-qty-label {

    font-size: 12px;

    font-weight: 700;

    color: var(--color-text-muted);

    text-align: center;
}

.page-register .populate-line-qty {

    width: 100%;

    max-width: 96px;

    margin: 0 auto;

    padding: 10px 12px;

    box-sizing: border-box;

    text-align: center;
}

.page-register .populate-line-qty[readonly] {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    cursor: not-allowed;
}

.page-register .populate-line-badge {

    display: inline-block;

    margin-top: 6px;

    padding: 4px 10px;

    border-radius: var(--radius-full);

    font-size: 12px;

    font-weight: 700;
}

.page-register .populate-line-badge-registered {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-register .populate-line-badge-unmapped {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);
}

.page-register .manual-entry-toggle {

    margin-top: 18px;

    background: none;

    border: none;

    color: var(--color-info);

    font-weight: 700;

    cursor: pointer;

    padding: 0;

    text-decoration: underline;
}

.page-register .manual-product-section {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;
}

.page-register .manual-product-section.hidden {

    display: none;
}

/* Success page */

.page-register-success {

    padding: 40px 20px;
}

.page-register-success .register-success-card {

    max-width: var(--layout-success-max);

    margin: auto;

    background: var(--color-surface);

    padding: 40px;

    border-radius: var(--radius-sm);

    text-align: center;
}

.page-register-success .register-success-card h1 {

    color: var(--primitive-green-register);
}

.page-register-success .register-success-message {

    margin-top: 20px;

    line-height: 1.8;

    color: var(--color-text-muted);
}

.page-register-success .register-success-actions {

    margin-top: 30px;
}

.page-register-success .register-success-actions .button {

    display: inline-block;

    padding: 14px 20px;

    text-decoration: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: var(--radius-xs);

    margin: 10px;
}

.page-register-success .register-success-actions-wrap {

    max-width: var(--layout-success-max);

    margin: 28px auto 0;

    background: var(--color-surface);

    padding: 24px 40px 40px;

    border-radius: var(--radius-sm);

    text-align: center;
}

.page-register-success .register-success-actions .button-secondary {

    background: transparent;

    color: var(--color-primary);

    border: 2px solid var(--color-primary);
}

@media (max-width: 768px) {

    .page-register {

        padding: 32px 16px;
    }

    .page-register .form-grid {

        grid-template-columns: 1fr;
    }

    .page-register .form-group-full {

        grid-column: span 1;
    }

    .page-register .registration-container {

        padding: 28px;
    }

    .page-register .hero-title {

        font-size: 34px;
    }
}

.page-register .project-locked-field {

    padding: 14px 16px;

    border-radius: 12px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    font-weight: 700;

    color: var(--color-text);
}

.page-register .form-help {

    margin: 10px 0 0;

    font-size: 13px;

    line-height: 1.6;

    color: var(--color-text-muted);
}

/* ----- promo/wheel.php ----- */

.page-promo-wheel {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 48px;
}

.page-promo-wheel .page-header {

    margin-bottom: 24px;

    text-align: center;
}

.page-promo-wheel .page-title {

    font-size: 40px;

    font-weight: 800;
}

.page-promo-wheel .page-description {

    color: var(--color-text-muted);

    line-height: 1.7;

    max-width: 720px;

    margin: 12px auto 0;
}

.promo-claim-panel {

    margin-top: 32px;
}

.promo-claim-panel.is-hidden {

    display: none;
}

.promo-claim-card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 28px;

    box-shadow: 0 8px 24px var(--color-shadow-sm);
}

.promo-claim-card h2 {

    margin-bottom: 12px;
}

.promo-claim-note {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 20px;
}

.promo-claim-note.warning {

    color: var(--primitive-amber-900);
}

.promo-claim-tabs {

    display: flex;

    gap: 10px;

    margin-bottom: 18px;
}

.promo-claim-tab {

    border: 1px solid var(--color-border);

    background: var(--color-surface);

    border-radius: 999px;

    padding: 10px 16px;

    font-weight: 700;

    cursor: pointer;
}

.promo-claim-tab.active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.promo-claim-form {

    display: grid;

    gap: 14px;
}

.promo-claim-form.is-hidden {

    display: none;
}

.promo-claim-form label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-weight: 700;
}

.promo-claim-form input {

    min-height: 44px;

    border-radius: 12px;

    border: 1px solid var(--color-border);

    padding: 0 12px;
}

.promo-claim-message {

    margin-top: 16px;

    line-height: 1.6;
}

.promo-claim-message.error {

    color: var(--color-danger);
}

.promo-status-panel {

    max-width: 560px;

    margin: 48px auto 0;

    padding: 36px 28px;

    text-align: center;

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 24px;

    box-shadow: 0 8px 24px var(--color-shadow-sm);
}

.promo-status-panel__message {

    margin: 0 0 24px;

    font-size: 24px;

    font-weight: 800;

    line-height: 1.4;

    color: var(--color-text);
}

.promo-status-panel__cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 14px 28px;

    border-radius: var(--radius-sm);

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 15px;

    font-weight: 800;

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    transition:
        background var(--transition-normal),
        transform var(--transition-normal);
}

.promo-status-panel__cta:hover {

    background: var(--color-primary-hover);

    color: var(--color-text-on-primary);

    transform: translateY(-1px);
}

.promo-status-panel__help {

    margin: 0;

    font-size: 15px;

    line-height: 1.6;

    color: var(--color-text-muted);
}

.promo-status-panel__help a {

    font-weight: 700;

    color: var(--color-primary);
}

/* ----- promo/flyer.php ----- */

.page-promo-flyer {

    padding-bottom: 48px;
}

.promo-flyer-hero {

    max-width: 920px;

    margin: 0 auto 28px;

    padding: 28px 24px 32px;

    border-radius: 24px;

    text-align: center;

    color: #fff8f0;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 214, 150, 0.35),
            transparent 55%
        ),
        linear-gradient(
            135deg,
            #3d2b1f 0%,
            #6b4a2e 42%,
            #8f6238 100%
        );

    box-shadow:
        0 18px 40px rgba(61, 43, 31, 0.22);
}

.promo-flyer-hero__eyebrow {

    margin: 0 0 10px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: rgba(255, 244, 228, 0.82);
}

.promo-flyer-hero__title {

    margin: 0 0 12px;

    font-family: "Plus Jakarta Sans", Inter, sans-serif;

    font-size: clamp(28px, 5vw, 42px);

    line-height: 1.1;
}

.promo-flyer-hero__prize {

    margin: 0 0 12px;

    font-family: "Plus Jakarta Sans", Inter, sans-serif;

    font-size: clamp(22px, 4vw, 32px);

    font-weight: 800;

    color: #ffe7b8;
}

.promo-flyer-hero__note {

    margin: 0;

    max-width: 640px;

    margin-inline: auto;

    font-size: 15px;

    line-height: 1.6;

    color: rgba(255, 248, 240, 0.88);
}

.page-promo-flyer .promo-flyer-layout {

    display: grid;

    gap: 24px;

    max-width: 980px;

    margin: 0 auto;
}

.promo-flyer-wheel-wrap {

    min-width: 0;
}

.page-promo-flyer .zeez-wheel-stage {

    margin: 0;
}

.page-promo-flyer .zeez-wheel-stage--preview {

    border-radius: 24px;

    overflow: hidden;
}

.page-promo-flyer .zeez-wheel-stage--preview .zeez-wheel-stage__inner {

    padding: 24px;
}

.page-promo-flyer .zeez-wheel-stage--preview .zeez-wheel-status {

    min-height: 44px;
}

@media (min-width: 900px) {

    .page-promo-flyer .promo-flyer-layout {

        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);

        align-items: start;
    }

}

.promo-flyer-wheel-locked {

    position: relative;

    border-radius: 24px;

    overflow: hidden;

    background: var(--color-surface-muted, #f5f1ec);

    min-height: 280px;
}

.promo-flyer-wheel-lock-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background: rgba(20, 16, 12, 0.45);

    color: #fff;

    text-align: center;

    z-index: 2;
}

.promo-flyer-wheel-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 280px;
}

.promo-flyer-wheel-ring {

    width: 220px;

    height: 220px;

    border-radius: 50%;

    border: 14px solid rgba(0, 0, 0, 0.08);

    background: conic-gradient(
        from 0deg,
        #c9a46a,
        #efe7dc,
        #8b6a3d,
        #efe7dc,
        #c9a46a
    );

    opacity: 0.45;
}

.promo-flyer-wheel-label {

    position: absolute;

    font-weight: 800;

    color: var(--color-text-muted);
}

.promo-flyer-verify-card {

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 24px;

    background: var(--color-surface);
}

.promo-flyer-verify-card h2 {

    margin: 0 0 0;
}

.promo-flyer-verify-form {

    display: grid;

    gap: 16px;

    margin-top: 16px;
}

.promo-flyer-verify-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;
}

.promo-flyer-verify-tab {

    border: 1px solid var(--color-border);

    border-radius: 999px;

    background: var(--color-background);

    color: var(--color-text);

    padding: 8px 16px;

    font-weight: 700;

    cursor: pointer;
}

.promo-flyer-verify-tab.is-active {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-text-on-primary);
}

.promo-flyer-verify-note {

    margin: 12px 0 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.promo-flyer-verify-panel.is-hidden {

    display: none;
}

.promo-flyer-welcome-panel {

    max-width: 720px;

    margin: 0 auto 24px;

    padding: 24px;

    border-radius: 24px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
}

.promo-flyer-welcome-list {

    margin: 16px 0 0;

    padding-left: 20px;

    line-height: 1.8;
}

/* ===== END pages/register.css ===== */

/* ===== BEGIN pages/account.css ===== */

/*
|--------------------------------------------------------------------------
| Page: account — Wave 4
|--------------------------------------------------------------------------
| Scoped per page to avoid bleed into public marketing / register pages.
|--------------------------------------------------------------------------
*/

.page-account {

    box-sizing: border-box;
}

.page-account-auth,
.page-account-app {

    width: 100%;
}

@media (max-width: 768px) {

    .page-account-login.login-page,
    .page-account-register.account-page,
    .page-account-reset.reset-page {

        padding: 48px 16px;
    }

    .page-account-dashboard.dashboard-container,
    .page-account-settings.uploads-container,
    .page-account-projects.projects-container,
    .page-account-project.project-container,
    .page-account-profile.profile-container,
    .page-account-registrations.registrations-container,
    .page-account-uploads.uploads-container,
    .page-upload-success.upload-success-container,
    .page-account-rewards.rewards-page,
    .page-account-events.events-container {

        padding-left: 16px;

        padding-right: 16px;
    }
}

/* ----- account/login.php ----- */

.page-account-login.login-page {

    min-height: 100vh;

    padding: 90px 20px;

    background:
        var(--gradient-register-page);
}

.page-account-login .login-container {

    max-width: var(--layout-narrow-max);

    margin: 0 auto;

    background: var(--color-surface);

    border-radius: 32px;

    padding: 48px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 12px 42px var(--color-shadow-nav-ui);
}

.page-account-login .login-title {

    font-size: 42px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.1;

    margin-bottom: 18px;
}

.page-account-login .login-description {

    color: var(--color-text-muted);

    line-height: 1.85;

    margin-bottom: 28px;

    font-size: 15px;
}

.page-account-login .login-context-banner {

    margin-bottom: 28px;

    padding: 16px 18px;

    border-radius: 16px;

    background: var(--primitive-blue-50);

    border:
        1px solid var(--primitive-blue-200);

    color: var(--primitive-blue-900);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.7;
}

.page-account-login .alert {

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 28px;

    line-height: 1.8;

    font-weight: 600;
}

.page-account-login .alert-error {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-account-login .alert-success {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);
}

.page-account-login .form-group {

    margin-bottom: 24px;
}

.page-account-login label {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text);
}

.page-account-login input {

    width: 100%;

    padding: 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;

    background: var(--color-surface);

    font-size: 15px;

    transition: 0.18s ease;
}

.page-account-login input:focus {

    outline: none;

    border-color: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-focus-ring);
}

.page-account-login .password-wrapper {

    position: relative;
}

.page-account-login .password-toggle {

    position: absolute;

    right: 14px;

    top: 50%;

    transform:
        translateY(-50%);

    border: none;

    background: transparent;

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    padding: 4px 8px;
}

.page-account-login .password-wrapper input {

    padding-right: 72px;
}

.page-account-login .submit-button {

    width: 100%;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 18px;

    border-radius: 18px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.18s ease;
}

.page-account-login .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-account-login .login-links {

    margin-top: 28px;

    text-align: center;

    display: grid;

    gap: 10px;
}

.page-account-login .login-links p {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.7;
}

.page-account-login .login-links a {

    color: var(--color-text);

    text-decoration: none;

    font-weight: 800;
}

.page-account-login .login-links a:hover {

    text-decoration: underline;
}

.page-account-login .login-footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 16px 24px;

    margin-top: 28px;

    padding-top: 24px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-account-login .login-footer-links a {

    color: var(--color-text-muted);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;
}

.page-account-login .login-footer-links a:hover {

    color: var(--color-text);

    text-decoration: underline;
}

@media (max-width: 768px) {.page-account-login .login-container {

        padding: 30px;
    }

    .page-account-login .login-title {

        font-size: 34px;
    }}
/* ----- account/register.php ----- */

.page-account-register.account-page {

    min-height: 100vh;

    padding: 80px 20px;

    background:
        var(--gradient-register-page);
}

.page-account-register .account-container {

    max-width: var(--layout-form-max);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        540px;

    gap: 48px;

    align-items: start;
}

.page-account-register .hero-panel {

    padding-top: 24px;
}

.page-account-register .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 26px;
}

.page-account-register .hero-title {

    font-size: 58px;

    font-weight: 900;

    line-height: 1.08;

    color: var(--color-text);

    margin-bottom: 26px;
}

.page-account-register .hero-description {

    color: var(--color-text-muted);

    line-height: 2;

    font-size: 17px;

    margin-bottom: 36px;
}

.page-account-register .feature-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;
}

.page-account-register .feature-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    padding: 24px;

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-account-register .feature-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-account-register .feature-description {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-account-register .form-card {

    background: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 12px 42px var(--color-shadow-nav-ui);
}

.page-account-register .form-title {

    font-size: 38px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-account-register .form-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 34px;
}

.page-account-register .alert {

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 28px;

    line-height: 1.8;

    font-weight: 600;
}

.page-account-register .alert-error {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-account-register .form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.page-account-register .form-group {

    display: flex;

    flex-direction: column;
}

.page-account-register .form-group-full {

    grid-column: span 2;
}

.page-account-register label {

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text);
}

.page-account-register input, .page-account-register select {

    width: 100%;

    padding: 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;

    background: var(--color-surface);

    transition: 0.2s ease;
}

.page-account-register input:focus, .page-account-register select:focus {

    outline: none;

    border-color: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-focus-ring);
}

.page-account-register .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 10px;
}

.page-account-register .checkbox-row input {

    width: auto;

    margin-top: 3px;
}

.page-account-register .checkbox-label {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;

    font-weight: 600;
}

.page-account-register .checkbox-label a {

    color: var(--color-primary);

    font-weight: 800;

    text-decoration: underline;

    text-underline-offset: 2px;
}

.page-account-register .checkbox-label a:hover {

    color: var(--color-text);
}

.page-account-register .submit-button {

    width: 100%;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 18px;

    border-radius: 18px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    margin-top: 30px;

    transition: 0.2s ease;
}

.page-account-register .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-account-register .form-links {

    margin-top: 28px;

    text-align: center;
}

.page-account-register .form-links a {

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;
}

.page-account-register .form-links a:hover {

    text-decoration: underline;
}

.page-account-register .security-note {

    margin-top: 28px;

    padding: 18px;

    border-radius: 18px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.9;
}

@media (max-width: 980px) {.page-account-register .account-container {

        grid-template-columns: 1fr;
    }

    .page-account-register .hero-title {

        font-size: 42px;
    }}

@media (max-width: 768px) {.page-account-register .form-grid {

        grid-template-columns: 1fr;
    }

    .page-account-register .form-group-full {

        grid-column: span 1;
    }

    .page-account-register .form-card {

        padding: 28px;
    }}

/* ----- account/forgot-password.php ----- */

.page-account-reset.reset-page {

    min-height: 100vh;

    padding: 90px 20px;

    background:
        var(--gradient-register-page);
}

.page-account-reset .reset-container {

    max-width: var(--layout-narrow-max);

    margin: 0 auto;

    background: var(--color-surface);

    border-radius: 32px;

    padding: 48px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 12px 42px var(--color-shadow-nav-ui);
}

.page-account-reset .reset-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border-radius: 999px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 24px;
}

.page-account-reset .reset-title {

    font-size: 42px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.1;

    margin-bottom: 18px;
}

.page-account-reset .reset-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 34px;

    font-size: 15px;
}

.page-account-reset .alert {

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 28px;

    line-height: 1.8;

    font-weight: 600;
}

.page-account-reset .alert-error {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-account-reset .alert-success {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);
}

.page-account-reset .form-group {

    margin-bottom: 24px;
}

.page-account-reset label {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text);
}

.page-account-reset input {

    width: 100%;

    padding: 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;

    background: var(--color-surface);

    transition: 0.18s ease;
}

.page-account-reset input:focus {

    outline: none;

    border-color: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-focus-ring);
}

.page-account-reset .submit-button {

    width: 100%;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 18px;

    border-radius: 18px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.18s ease;
}

.page-account-reset .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-account-reset .reset-links {

    margin-top: 28px;

    text-align: center;
}

.page-account-reset .reset-links a {

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;
}

.page-account-reset .reset-links a:hover {

    text-decoration: underline;
}

.page-account-reset .security-note {

    margin-top: 30px;

    padding: 18px;

    border-radius: 18px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.9;
}

@media (max-width: 768px) {.page-account-reset .reset-container {

        padding: 30px;
    }

    .page-account-reset .reset-title {

        font-size: 34px;
    }}

/* ----- account/setup.php ----- */

.page-account-setup.container {
            max-width: 550px;
            margin: auto;
            background: var(--color-surface);
            padding: 35px;
            border-radius: 10px;
        }

        .page-account-setup h1 {
            margin-bottom: 10px;
        }

        .page-account-setup .subtitle {
            color: var(--color-text-muted);
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .page-account-setup label {
            display: block;
            margin-top: 20px;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .page-account-setup input {
            width: 100%;
            padding: 12px;
            box-sizing: border-box;
        }

        .page-account-setup button {
            margin-top: 30px;
            width: 100%;
            padding: 14px;
            cursor: pointer;
        }

        .page-account-setup .error {
            background: var(--primitive-red-setup-bg);
            color: red;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .page-account-setup .success {
            background: var(--primitive-green-setup-bg);
            color: green;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .page-account-setup .links {
            margin-top: 25px;
            text-align: center;
        }

        .page-account-setup .links a {
            text-decoration: none;
        }

/* ----- account/dashboard.php ----- */

.page-account-dashboard.dashboard-container {

    width: 100%;

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

/* ========================================================= */
/* TIER B DASHBOARD */
/* ========================================================= */

.page-account-dashboard .dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 28px;

    flex-wrap: wrap;
}

.page-account-dashboard .dashboard-header-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-dashboard .dashboard-header-subtitle {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-account-dashboard .dashboard-header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-account-dashboard .dashboard-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;
}

.page-account-dashboard .dashboard-btn-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-dashboard .dashboard-btn-primary:hover {

    opacity: 0.92;
}

.page-account-dashboard .dashboard-btn-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-dashboard .dashboard-btn-secondary:hover {

    background: var(--color-surface-alt);
}

.page-account-dashboard .dashboard-caught-up {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 20px 24px;

    margin-bottom: 28px;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-account-dashboard .priority-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px, 1fr)
        );

    gap: 18px;

    margin-bottom: 28px;
}

.page-account-dashboard .priority-card {

    border-radius: 20px;

    padding: 22px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;
}

.page-account-dashboard .priority-warning {

    background:
        var(--gradient-admin-warning);
}

.page-account-dashboard .priority-danger {

    background:
        linear-gradient(
            135deg,
            var(--primitive-red-500),
            var(--color-danger)
        );
}

.page-account-dashboard .priority-info {

    background:
        linear-gradient(
            135deg,
            var(--color-info),
            var(--primitive-blue-800)
        );
}

.page-account-dashboard .priority-count {

    font-size: 32px;

    font-weight: 900;

    margin-bottom: 10px;

    line-height: 1.2;
}

.page-account-dashboard .priority-title {

    font-size: 16px;

    font-weight: 800;

    line-height: 1.5;
}

.page-account-dashboard .priority-link {

    display: inline-flex;

    margin-top: 14px;

    color: var(--color-surface);

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;
}

.page-account-dashboard .stats-section-compact {

    margin-bottom: 28px;
}

.page-account-dashboard .dashboard-ready-spins {

    margin-bottom: 32px;

    padding: 24px 26px;

    border-radius: 24px;

    border:
        1px solid var(--color-border-marketing);

    background:
        linear-gradient(
            135deg,
            var(--color-surface) 0%,
            var(--color-background) 100%
        );

    box-shadow:
        0 6px 20px var(--color-shadow-sm);
}

.page-account-dashboard .dashboard-ready-spins__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;

    flex-wrap: wrap;
}

.page-account-dashboard .dashboard-ready-spins__title {

    margin: 0 0 6px;

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);
}

.page-account-dashboard .dashboard-ready-spins__subtitle {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.5;
}

.page-account-dashboard .dashboard-ready-spins__all-link {

    color: var(--color-text-muted);

    font-weight: 700;

    font-size: 14px;

    text-decoration: none;

    white-space: nowrap;
}

.page-account-dashboard .dashboard-ready-spins__all-link:hover {

    color: var(--color-text);
}

.page-account-dashboard .dashboard-ready-spins__grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 14px;
}

.page-account-dashboard .dashboard-ready-spin-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 16px;

    min-height: 100%;

    padding: 18px 18px 16px;

    border-radius: 18px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
}

.page-account-dashboard .dashboard-ready-spin-card__badge {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 10px;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--primitive-green-900);

    background: var(--primitive-green-100-bright);
}

.page-account-dashboard .dashboard-ready-spin-card__title {

    margin: 0 0 6px;

    font-size: 17px;

    font-weight: 800;

    color: var(--color-text);

    line-height: 1.3;
}

.page-account-dashboard .dashboard-ready-spin-card__context {

    margin: 0 0 10px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.45;
}

.page-account-dashboard .dashboard-ready-spin-card__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 12px;

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 700;
}

.page-account-dashboard .dashboard-ready-spin-card__play {

    width: 100%;

    justify-content: center;

    text-align: center;
}

.page-account-dashboard .dashboard-ready-spins__more {

    margin: 16px 0 0;

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-account-dashboard .dashboard-ready-spins__more a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: underline;
}

.page-account-dashboard .section-heading-compact {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0 0 18px;
}

.page-account-dashboard .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );

    gap: 18px;
}

.page-account-dashboard .stat-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 22px 24px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-dashboard .stat-label {

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 10px;
}

.page-account-dashboard .stat-value {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);
}

.page-account-dashboard .stat-meta {

    margin-top: 10px;

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.6;
}

.page-account-dashboard .stat-meta a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: underline;
}

.page-account-dashboard .layout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(320px, 1fr);

    gap: 28px;
}

.page-account-dashboard .card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 20px var(--color-shadow-sm);
}

.page-account-dashboard .card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    flex-wrap: wrap;
}

.page-account-dashboard .card-title {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0;
}

.page-account-dashboard .card-link {

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}

.page-account-dashboard .card-link:hover {

    color: var(--color-text);
}

.page-account-dashboard .list {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.page-account-dashboard .list-item {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 18px;
}

.page-account-dashboard .list-title {

    font-size: 17px;

    font-weight: 800;

    color: var(--color-text);
}

.page-account-dashboard .list-meta {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;
}

.page-account-dashboard .action-link {

    display: inline-flex;

    margin-top: 14px;

    text-decoration: none;

    font-weight: 800;

    color: var(--color-text);

    font-size: 14px;
}

.page-account-dashboard .empty-state {

    color: var(--color-text-muted);

    line-height: 1.8;
}

.page-account-dashboard .empty-state a {

    color: var(--color-text);

    font-weight: 700;
}

.page-account-dashboard .status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-dashboard .status-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-dashboard .status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-account-dashboard .status-winner {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-dashboard .status-active {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-dashboard .status-muted {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-account-dashboard .dashboard-campaign-summary {

    margin: 0 0 16px;

    padding: 0 4px;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.5;
}

.page-account-dashboard .dashboard-campaign-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 8px 0;
}

.page-account-dashboard .dashboard-campaign-badge {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-account-dashboard .dashboard-campaign-footer {

    margin-top: 8px;

    padding-top: 16px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-account-dashboard .cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 16px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-dashboard .cta-button:hover {

    background: var(--color-primary-hover);
}

/* ========================================================= */
/* UPLOADS */
/* ========================================================= */

.page-account-dashboard .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );

    gap: 20px;
}

.page-account-dashboard .upload-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-dashboard .upload-media {

    height: auto;

    background: var(--color-surface-alt);

    overflow: visible;
}

.page-account-dashboard .upload-media .upload-media-viewer--compact .umv-main {

    height: 180px;

    border-radius: 0;
}

.page-account-dashboard .upload-media .upload-media-viewer--compact .umv-main video {

    object-fit: contain;
}

.page-account-dashboard .upload-content {

    padding: 22px;
}

.page-account-dashboard .upload-title {

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-account-dashboard .upload-status {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 14px;
}

.page-account-dashboard .upload-meta {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 14px;
}

/* ========================================================= */
/* MOBILE */
/* ========================================================= */

@media (max-width: 1200px) {.page-account-dashboard .layout-grid {

        grid-template-columns: 1fr;
    }}

@media (max-width: 768px) {.page-account-dashboard.dashboard-container {

        padding:
            26px 18px 70px;
    }

    .page-account-dashboard .dashboard-header-title {

        font-size: 28px;
    }

    .page-account-dashboard .stat-value {

        font-size: 28px;
    }}

/* ----- account/profile.php ----- */

.page-account-profile.profile-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-account-profile .page-header {

    margin-bottom: 35px;
}

.page-account-profile .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-account-profile .page-description {

    color: var(--color-text-muted);

    margin-top: 10px;

    line-height: 1.7;
}

.page-account-profile .profile-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr;

    gap: 30px;
}

.page-account-profile .card {

    background: var(--color-surface);

    border-radius: 20px;

    padding: 35px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 30px;
}

.page-account-profile .card h2 {

    margin-top: 0;

    margin-bottom: 25px;

    color: var(--color-text);
}

.page-account-profile .form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 22px;
}

.page-account-profile .form-group {

    margin-bottom: 22px;
}

.page-account-profile .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-text);
}

.page-account-profile .form-group input {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;

    background: var(--color-surface);
}

.page-account-profile .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    padding: 14px 22px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-profile .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-account-profile .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-account-profile .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-account-profile .info-item {

    margin-bottom: 20px;
}

.page-account-profile .info-label {

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-muted);

    margin-bottom: 6px;

    text-transform: uppercase;
}

.page-account-profile .info-value {

    color: var(--color-text);

    font-weight: 600;
}

.page-account-profile .tag-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 10px;
}

.page-account-profile .tag-item {

    background: var(--color-surface-alt);

    border-radius: 999px;

    padding: 8px 14px;

    font-size: 13px;

    color: var(--color-text-muted);

    font-weight: 600;
}

@media (max-width: 900px) {.page-account-profile .profile-grid {

        grid-template-columns: 1fr;
    }}

/* ----- account/settings.php (Tier B) ----- */

.page-account-settings .settings-sections {

    display: grid;

    gap: 24px;
}

.page-account-settings .settings-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 24px 28px 28px;
}

.page-account-settings .settings-card-muted {

    background: var(--color-background);
}

.page-account-settings .settings-card-title {

    margin: 0 0 8px;

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);
}

.page-account-settings .settings-card-description {

    margin: 0 0 20px;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;
}

.page-account-settings .settings-alert {

    border-radius: 14px;

    padding: 12px 16px;

    margin-bottom: 18px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;
}

.page-account-settings .settings-alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border:
        1px solid var(--primitive-green-200);
}

.page-account-settings .settings-alert-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);
}

.page-account-settings .settings-alert-info {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-account-settings .settings-badge-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 14px;
}

.page-account-settings .settings-badge-item {

    display: grid;

    gap: 6px;
}

.page-account-settings .settings-badge-pill {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding: 6px 12px;

    border-radius: 999px;

    background: var(--gradient-surface-hero);

    color: var(--color-hero-text);

    font-size: 13px;

    font-weight: 800;
}

.page-account-settings .settings-badge-copy {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.5;
}

.page-account-settings .settings-form {

    display: grid;

    gap: 20px;
}

.page-account-settings .settings-form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px 20px;
}

.page-account-settings .settings-form-stack {

    display: grid;

    gap: 18px;
}

.page-account-settings .form-group {

    margin: 0;
}

.page-account-settings .form-group-full {

    grid-column: 1 / -1;
}

.page-account-settings .form-label,
.page-account-settings .form-group > label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 800;

    color: var(--color-text);
}

.page-account-settings .form-input,
.page-account-settings .form-select,
.page-account-settings .address-form-block input,
.page-account-settings .address-form-block select {

    width: 100%;

    padding: 14px 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    font-size: 15px;

    transition: 0.2s ease;

    box-sizing: border-box;
}

.page-account-settings .form-input:focus,
.page-account-settings .form-select:focus,
.page-account-settings .address-form-block input:focus,
.page-account-settings .address-form-block select:focus {

    outline: none;

    border-color: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-focus-ring);
}

.page-account-settings .address-field-hint {

    margin-top: 6px;
}

.page-account-settings .settings-save-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    padding: 12px 20px;

    border: none;

    border-radius: 12px;

    background: var(--color-text);

    color: var(--color-surface);

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-settings .settings-save-button:hover {

    opacity: 0.92;
}

.page-account-settings .settings-account-meta {

    display: grid;

    gap: 14px;

    margin: 0;
}

.page-account-settings .settings-account-meta-row {

    display: grid;

    grid-template-columns: 140px minmax(0, 1fr);

    gap: 12px 20px;

    align-items: baseline;
}

.page-account-settings .settings-account-meta-row dt {

    margin: 0;

    font-size: 13px;

    font-weight: 800;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.page-account-settings .settings-account-meta-row dd {

    margin: 0;

    font-size: 15px;

    font-weight: 700;

    color: var(--color-text);

    line-height: 1.5;
}

.page-account-settings .settings-field-note {

    margin: 8px 0 0;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.5;

    color: var(--color-text-muted);
}

.page-account-settings label.settings-checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;

    color: var(--color-text);

    cursor: pointer;
}

.page-account-settings label.settings-checkbox-row input[type="checkbox"] {

    width: 1.125rem;

    height: 1.125rem;

    min-height: 0;

    margin-top: 0.15rem;

    padding: 0;

    flex-shrink: 0;

    accent-color: var(--color-primary);
}

.page-account-settings label.settings-checkbox-row span {

    flex: 1;

    min-width: 0;
}

@media (max-width: 768px) {.page-account-settings .settings-form-grid {

        grid-template-columns: 1fr;
    }

    .page-account-settings .settings-card {

        padding: 20px 18px 22px;
    }

    .page-account-settings .settings-account-meta-row {

        grid-template-columns: 1fr;

        gap: 4px;
    }}

/* ----- account/projects.php + project-view.php (Tier B) ----- */

.page-account-projects.projects-container,
.page-account-project.project-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-account-projects .projects-header,
.page-account-project .project-view-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}

.page-account-projects .projects-header-main,
.page-account-project .project-view-header-main {

    flex: 1;

    min-width: 0;
}

.page-account-projects .projects-header-title,
.page-account-project .project-view-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-projects .projects-header-subtitle,
.page-account-project .project-view-subtitle {

    margin: 0 0 10px;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-account-projects .projects-header-actions,
.page-account-project .project-view-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-account-projects .projects-btn,
.page-account-project .action-button,
.page-account-uploads .action-button,
.page-upload-view .action-button,
.page-upload-success .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;

    border: none;

    cursor: pointer;
}

.page-account-projects .projects-btn-primary,
.page-account-project .action-primary,
.page-account-uploads .uploads-btn-primary,
.page-account-campaigns .uploads-btn-primary,
.page-account-events .uploads-btn-primary,
.page-account-rewards .uploads-btn-primary,
.page-account-registrations .uploads-btn-primary,
.page-upload-view .action-primary,
.page-upload-success .action-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-projects .projects-btn-primary:hover,
.page-account-project .action-primary:hover,
.page-account-uploads .uploads-btn-primary:hover,
.page-account-campaigns .uploads-btn-primary:hover,
.page-account-events .uploads-btn-primary:hover,
.page-account-rewards .uploads-btn-primary:hover,
.page-account-registrations .uploads-btn-primary:hover,
.page-upload-view .action-primary:hover,
.page-upload-success .action-primary:hover {

    opacity: 0.92;
}

.page-account-projects .projects-btn-secondary,
.page-account-project .action-secondary,
.page-account-uploads .uploads-btn-secondary,
.page-account-campaigns .uploads-btn-secondary,
.page-account-events .uploads-btn-secondary,
.page-account-rewards .uploads-btn-secondary,
.page-account-registrations .uploads-btn-secondary,
.page-upload-view .action-secondary,
.page-upload-success .action-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-projects .projects-btn-secondary:hover,
.page-account-project .action-secondary:hover,
.page-account-uploads .uploads-btn-secondary:hover,
.page-account-campaigns .uploads-btn-secondary:hover,
.page-account-events .uploads-btn-secondary:hover,
.page-account-rewards .uploads-btn-secondary:hover,
.page-account-registrations .uploads-btn-secondary:hover,
.page-upload-view .action-secondary:hover,
.page-upload-success .action-secondary:hover {

    background: var(--color-background);
}

.page-account-projects .projects-summary,
.page-account-project .project-view-summary {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 16px 20px;

    margin-bottom: 20px;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;
}

.page-account-projects .success,
.page-account-projects .error,
.page-account-project .success,
.page-account-project .error,
.page-account-uploads .success,
.page-account-uploads .error {

    border-radius: 16px;

    padding: 14px 18px;

    margin-bottom: 18px;

    font-weight: 600;
}

.page-account-projects .success,
.page-account-project .success,
.page-account-uploads .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-200);
}

.page-account-projects .error,
.page-account-project .error,
.page-account-uploads .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-account-projects .projects-create-panel {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 0 20px;

    margin-bottom: 24px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-projects .projects-create-panel summary {

    cursor: pointer;

    padding: 18px 0;

    font-size: 16px;

    font-weight: 800;

    color: var(--color-text);

    list-style: none;
}

.page-account-projects .projects-create-panel summary::-webkit-details-marker {

    display: none;
}

.page-account-projects .projects-create-form {

    padding-bottom: 20px;
}

.page-account-projects .form-group {

    margin-bottom: 18px;
}

.page-account-projects .form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-account-projects .form-optional {

    font-weight: 600;

    color: var(--color-text-muted);
}

.page-account-projects .form-group input,
.page-account-projects .form-group textarea {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;

    background: var(--color-surface);
}

.page-account-projects .form-group textarea {

    min-height: 96px;

    resize: vertical;
}

.page-account-projects .submit-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border: none;

    border-radius: 12px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;
}

.page-account-projects .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-account-projects .project-list,
.page-account-project .upload-list,
.page-account-uploads .upload-list,
.page-account-project .registration-list {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.page-account-projects .project-card,
.page-account-project .upload-card,
.page-account-uploads .upload-card,
.page-account-project .registration-item {

    display: flex;

    gap: 20px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 18px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-projects .project-card-media,
.page-account-project .upload-media,
.page-account-uploads .upload-media {

    width: 120px;

    height: 120px;

    border-radius: 14px;

    overflow: hidden;

    background: var(--color-background);

    flex-shrink: 0;
}

.page-account-projects .project-card-media img,
.page-account-project .upload-media img,
.page-account-uploads .upload-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-account-projects .project-card-media-empty,
.page-account-project .upload-empty,
.page-account-uploads .upload-empty {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    text-align: center;

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 700;
}

.page-account-projects .project-card-body,
.page-account-project .upload-content,
.page-account-uploads .upload-content {

    flex: 1;

    min-width: 0;
}

.page-account-projects .project-title,
.page-account-project .upload-title,
.page-account-uploads .upload-title,
.page-account-project .registration-item-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-projects .project-description {

    margin: 0 0 8px;

    color: var(--color-text-muted);

    line-height: 1.6;

    font-size: 14px;
}

.page-account-projects .project-meta,
.page-account-project .upload-meta,
.page-account-uploads .upload-meta,
.page-account-project .registration-item-meta {

    margin: 0 0 14px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-projects .project-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-account-projects .project-delete-form,
.page-account-project .project-delete-form,
.page-account-project .upload-delete-form,
.page-account-uploads .upload-delete-form {

    display: inline-flex;

    margin: 0;
}

.page-account-project .upload-card-actions,
.page-account-uploads .upload-card-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-account-projects .action-danger,
.page-account-project .action-danger,
.page-account-uploads .action-danger,
.page-upload-view .action-danger {

    background: transparent;

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-account-projects .action-danger:hover,
.page-account-project .action-danger:hover,
.page-account-uploads .action-danger:hover,
.page-upload-view .action-danger:hover {

    background: var(--color-danger-bg);
}

.page-account-project .project-view-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-account-project .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);

    border-radius: 16px;

    padding: 14px 18px;

    margin-bottom: 18px;

    font-weight: 600;
}

.page-account-projects .empty-state,
.page-account-project .empty-state {

    background: var(--color-surface);

    border-radius: 20px;

    padding: 48px 28px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-projects .empty-state h2,
.page-account-project .empty-state h3 {

    margin: 0 0 10px;

    color: var(--color-text);
}

.page-account-projects .empty-state p,
.page-account-project .empty-state p {

    margin: 0 0 18px;

    color: var(--color-text-muted);

    line-height: 1.7;

    max-width: 520px;

    margin-left: auto;

    margin-right: auto;
}

.page-account-project .project-back-link {

    display: inline-flex;

    margin-bottom: 18px;

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}

.page-account-project .project-back-link:hover {

    color: var(--color-text);
}

.page-account-project .project-view-header {

    align-items: center;
}

.page-account-project .project-view-thumb {

    width: 112px;

    height: 112px;

    border-radius: 16px;

    overflow: hidden;

    flex-shrink: 0;

    background: var(--color-background);
}

.page-account-project .project-view-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-account-project .project-section {

    margin-top: 32px;
}

.page-account-project .section-header {

    margin-bottom: 18px;
}

.page-account-project .section-title {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-project .section-description {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;
}

.page-account-project .section-description a {

    color: var(--color-text);

    font-weight: 700;
}

.page-account-project .upload-status,
.page-account-uploads .upload-status,
.page-upload-view .upload-status,
.page-upload-success .upload-status {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 10px;
}

.page-account-project .status-approved,
.page-account-uploads .status-approved,
.page-upload-view .status-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-project .status-pending,
.page-account-uploads .status-pending,
.page-upload-view .status-pending,
.page-upload-success .status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-project .status-rejected,
.page-account-uploads .status-rejected,
.page-upload-view .status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-account-project .registration-item-note {

    margin: 0 0 14px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

@media (max-width: 768px) {.page-account-projects.projects-container,
    .page-account-project.project-container {

        padding:
            26px 18px 70px;
    }

    .page-account-projects .projects-header-title,
    .page-account-project .project-view-title {

        font-size: 28px;
    }

    .page-account-projects .project-card,
    .page-account-project .upload-card,
    .page-account-uploads .upload-card {

        flex-direction: column;
    }

    .page-account-projects .project-card-media,
    .page-account-project .upload-media,
    .page-account-uploads .upload-media {

        width: 100%;

        height: 180px;
    }}

/* ----- account/registrations.php ----- */

.page-account-registrations.registrations-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-account-registrations .registrations-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}

.page-account-registrations .registrations-header-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-registrations .registrations-header-subtitle {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-account-registrations .registrations-header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-account-registrations .registrations-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;
}

.page-account-registrations .registrations-btn-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-registrations .registrations-btn-primary:hover {

    opacity: 0.92;
}

.page-account-registrations .registrations-summary {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 16px 20px;

    margin-bottom: 24px;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;
}

.page-account-registrations .registrations-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 16px;
}

.page-account-registrations .registrations-filter-tab {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 999px;

    border:
        1px solid var(--color-border-marketing);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-registrations .registrations-filter-tab:hover {

    background: var(--color-background);
}

.page-account-registrations .registrations-filter-tab.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.page-account-registrations .registrations-filter-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 22px;

    padding: 2px 7px;

    border-radius: 999px;

    background:
        var(--color-background);

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 800;
}

.page-account-registrations .registrations-filter-tab.is-active
.registrations-filter-count {

    background:
        var(--color-white-glass-16);

    color: var(--color-surface);
}

.page-account-registrations .registration-list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.page-account-registrations .registration-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-registrations .registration-card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 10px;

    flex-wrap: wrap;
}

.page-account-registrations .product-name {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    line-height: 1.4;

    margin: 0;

    flex: 1;

    min-width: 0;
}

.page-account-registrations .registration-meta,
.page-account-registrations .registration-warranty,
.page-account-registrations .registration-purchase {

    margin: 0 0 10px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.7;
}

.page-account-registrations .registration-warranty {

    color: var(--color-text);

    font-weight: 700;
}

.page-account-registrations .registration-alert {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    border-radius: 14px;

    padding: 14px 16px;

    margin: 12px 0;
}

.page-account-registrations .registration-alert-message {

    margin: 0 0 8px;

    color: var(--color-text);

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;
}

.page-account-registrations .registration-alert-action,
.page-account-registrations .registration-support-note {

    margin: 0 0 10px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-registrations .registration-alert-action a,
.page-account-registrations .registration-support-note a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: underline;
}

.page-account-registrations .registration-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 4px;

    margin-bottom: 4px;
}

.page-account-registrations .registration-receipt-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    border-radius: 12px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    color: var(--color-text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-registrations .registration-receipt-link:hover {

    background: var(--color-surface-alt);
}

.page-account-registrations .registration-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;
}

.page-account-registrations .tag-item {

    background: var(--color-background);

    color: var(--color-text-muted);

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .registration-details {

    margin-top: 16px;

    border-top:
        1px solid var(--color-border-marketing);

    padding-top: 12px;
}

.page-account-registrations .registration-details summary {

    cursor: pointer;

    color: var(--color-text);

    font-size: 14px;

    font-weight: 800;

    list-style: none;
}

.page-account-registrations .registration-details summary::-webkit-details-marker {

    display: none;
}

.page-account-registrations .registration-details-list {

    margin: 14px 0 0;

    display: grid;

    gap: 10px;
}

.page-account-registrations .registration-details-row {

    display: grid;

    grid-template-columns:
        minmax(120px, 34%)
        minmax(0, 1fr);

    gap: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .registration-details-row dt {

    margin: 0;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);
}

.page-account-registrations .registration-details-row dd {

    margin: 0;

    font-size: 14px;

    font-weight: 600;

    color: var(--color-text);

    line-height: 1.5;
}

.page-account-registrations .status-badge {

    display: inline-flex;

    align-items: center;

    padding: 7px 14px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    flex-shrink: 0;
}

.page-account-registrations .status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-registrations .status-flagged,
.page-account-registrations .status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-account-registrations .status-archived,
.page-account-registrations .status-expired,
.page-account-registrations .status-default {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-account-registrations .status-approved,
.page-account-registrations .status-active {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-account-registrations .empty-state {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 56px 32px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-registrations .empty-state h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-account-registrations .empty-state p {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 24px;

    max-width: 480px;

    margin-left: auto;

    margin-right: auto;
}

.page-account-registrations .empty-state-filtered {

    padding: 48px 32px;
}

.page-account-registrations .register-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 14px 22px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-registrations .register-button:hover {

    background: var(--color-primary-hover);
}

.page-account-registrations .register-button-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .register-button-secondary:hover {

    background: var(--color-background);
}

.page-account-registrations .registrations-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 28px;
}

.page-account-registrations .registrations-pagination-pages {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 8px;
}

.page-account-registrations .registrations-pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    padding: 10px 14px;

    border-radius: 12px;

    border:
        1px solid var(--color-border-marketing);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-registrations .registrations-pagination-link:hover {

    background: var(--color-background);
}

.page-account-registrations .registrations-pagination-link.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.page-account-registrations .registrations-pagination-link.is-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

.page-account-registrations .registrations-pagination-prev,
.page-account-registrations .registrations-pagination-next {

    min-width: auto;
}

@media (max-width: 768px) {.page-account-registrations.registrations-container {

        padding:
            26px 18px 70px;
    }

    .page-account-registrations .registrations-header-title {

        font-size: 28px;
    }

    .page-account-registrations .registration-details-row {

        grid-template-columns: 1fr;
    }

    .page-account-registrations .registrations-filter-tab {

        font-size: 12px;

        padding: 9px 12px;
    }}

/* ----- account/rewards.php ----- */

.page-account-rewards.rewards-page {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-account-rewards .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 52px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 36px;
}

.page-account-rewards .hero-card::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-white-glass-05);

    top: -200px;

    right: -120px;
}

.page-account-rewards .hero-title {

    font-size: 48px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-account-rewards .hero-description {

    max-width: 920px;

    line-height: 2;

    color:
        var(--color-white-glass-84);

    position: relative;

    z-index: 2;
}

.page-account-rewards .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 22px;

    margin-bottom: 36px;
}

.page-account-rewards .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);
}

.page-account-rewards .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-account-rewards .stat-value {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);
}

.page-account-rewards .reward-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(420px, 1fr)
        );

    gap: 30px;
}

.page-account-rewards .reward-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    transition: 0.2s ease;
}

.page-account-rewards .reward-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-account-card);
}

.page-account-rewards .reward-banner {

    height: 220px;

    background-size: cover;

    background-position: center;

    position: relative;
}

.page-account-rewards .reward-banner::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            var(--color-overlay-dark-10),
            var(--color-overlay-dark-68)
        );
}

.page-account-rewards .badge-row {

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    z-index: 2;
}

.page-account-rewards .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-account-rewards .badge-winner {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-rewards .badge-featured {

    background: var(--color-featured-bg);

    color: var(--primitive-violet-700);
}

.page-account-rewards .badge-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-rewards .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-rewards .badge-sent {

    background: var(--color-info-bg);

    color: var(--primitive-blue-800);
}

.page-account-rewards .badge-redeemed {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);
}

.page-account-rewards .reward-content {

    padding: 32px;
}

.page-account-rewards .reward-title {

    font-size: 30px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;

    line-height: 1.3;
}

.page-account-rewards .reward-amount {

    font-size: 26px;

    font-weight: 800;

    color: var(--primitive-green-800-text);

    margin-bottom: 24px;
}

.page-account-rewards .campaign-name {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    border-radius: 999px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 800;

    margin-bottom: 24px;
}

.page-account-rewards .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-account-rewards .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-account-rewards .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-account-rewards .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;
}

.page-account-rewards .coupon-box {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 22px;

    padding: 24px;

    text-align: center;

    margin-bottom: 24px;
}

.page-account-rewards .coupon-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.75;

    margin-bottom: 12px;
}

.page-account-rewards .coupon-code {

    font-size: 34px;

    font-weight: 900;

    letter-spacing: 0.08em;

    word-break: break-word;
}

.page-account-rewards .reward-terms {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 20px;

    line-height: 1.9;

    color: var(--color-text-muted);

    margin-bottom: 24px;
}

.page-account-rewards .reward-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    padding-top: 22px;

    border-top:
        1px solid var(--color-surface-alt);
}

.page-account-rewards .reward-date {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.page-account-rewards .action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 24px;
}

.page-account-rewards .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-account-rewards .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-account-rewards .action-primary:hover {

    background: var(--color-primary-hover);
}

.page-account-rewards .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-account-rewards .action-secondary:hover {

    background: var(--color-border);
}

.page-account-rewards .empty-state {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 90px 40px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-account-rewards .empty-title {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-account-rewards .empty-description {

    color: var(--color-text-muted);

    line-height: 2;

    max-width: 760px;

    margin: 0 auto 36px;
}

.page-account-rewards .empty-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 16px;
}

@media (max-width: 768px) {.page-account-rewards .hero-card {

        padding: 38px 28px;
    }

    .page-account-rewards .hero-title {

        font-size: 38px;
    }

    .page-account-rewards .meta-grid {

        grid-template-columns: 1fr;
    }}

/* ----- account/events.php ----- */

.page-account-events.events-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-account-events .page-header {

    margin-bottom: 40px;
}

.page-account-events .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-account-events .page-description {

    color: var(--color-text-muted);

    margin-top: 10px;

    line-height: 1.7;
}

.page-account-events .section-title {

    font-size: 28px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-account-events .section-spacing {

    margin-top: 60px;
}

.page-account-events .campaign-grid, .page-account-events .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(360px, 1fr));

    gap: 28px;
}

.page-account-events .card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    transition: 0.2s ease;
}

.page-account-events .card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 28px
        var(--color-shadow-md);
}

.page-account-events .card-title {

    font-size: 24px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;

    line-height: 1.4;
}

.page-account-events .card-description {

    color: var(--color-text-muted);

    line-height: 1.8;

    margin-bottom: 24px;
}

.page-account-events .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-account-events .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 12px;

    padding: 14px;
}

.page-account-events .meta-label {

    font-size: 12px;

    text-transform: uppercase;

    font-weight: 700;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-account-events .meta-value {

    color: var(--color-text);

    font-weight: 600;

    line-height: 1.5;
}

.page-account-events .prize-box {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 18px;

    padding: 22px;

    margin-bottom: 22px;
}

.page-account-events .prize-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;

    opacity: 0.75;

    margin-bottom: 10px;
}

.page-account-events .prize-title {

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 10px;
}

.page-account-events .prize-description {

    opacity: 0.9;

    line-height: 1.7;
}

.page-account-events .status-badge {

    display: inline-block;

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;
}

.page-account-events .status-active {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-account-events .status-pending {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-700);
}

.page-account-events .status-approved {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-800);
}

.page-account-events .status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-account-events .status-featured {

    background: var(--color-featured-bg);

    color: var(--primitive-violet-700);
}

.page-account-events .featured-badge {

    display: inline-block;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;
}

.page-account-events .card-footer {

    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid var(--color-surface-alt);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;
}

.page-account-events .card-date {

    color: var(--color-text-placeholder);

    font-size: 13px;
}

.page-account-events .empty-state {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 80px 40px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-account-events .empty-state h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-account-events .empty-state p {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 30px;
}

.page-account-events .action-button {

    display: inline-block;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 14px 22px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.2s ease;
}

.page-account-events .action-button:hover {

    background: var(--color-primary-hover);
}

@media (max-width: 768px) {.page-account-events .meta-grid {

        grid-template-columns: 1fr;
    }}

/* ----- account/uploads.php ----- */

.page-account-uploads.uploads-container,
.page-account-campaigns.uploads-container,
.page-account-rewards.uploads-container,
.page-account-registrations.uploads-container,
.page-account-settings.uploads-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-account-uploads .uploads-header,
.page-account-campaigns .uploads-header,
.page-account-events .uploads-header,
.page-account-rewards .uploads-header,
.page-account-registrations .uploads-header,
.page-account-settings .uploads-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}

.page-account-uploads .uploads-header-title,
.page-account-campaigns .uploads-header-title,
.page-account-events .uploads-header-title,
.page-account-rewards .uploads-header-title,
.page-account-registrations .uploads-header-title,
.page-account-settings .uploads-header-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-account-uploads .uploads-header-subtitle,
.page-account-campaigns .uploads-header-subtitle,
.page-account-events .uploads-header-subtitle,
.page-account-rewards .uploads-header-subtitle,
.page-account-registrations .uploads-header-subtitle,
.page-account-settings .uploads-header-subtitle {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-account-uploads .uploads-header-actions,
.page-account-campaigns .uploads-header-actions,
.page-account-rewards .uploads-header-actions,
.page-account-registrations .uploads-header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-account-uploads .uploads-btn,
.page-account-campaigns .uploads-btn,
.page-account-events .uploads-btn,
.page-account-rewards .uploads-btn,
.page-account-registrations .uploads-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;

    border: none;

    cursor: pointer;
}

.page-account-uploads .uploads-summary,
.page-account-campaigns .uploads-summary,
.page-account-rewards .uploads-summary,
.page-account-registrations .uploads-summary {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 16px 20px;

    margin-bottom: 24px;

    color: var(--color-text-muted);

    font-weight: 600;

    line-height: 1.6;
}

.page-account-uploads .uploads-filters,
.page-account-campaigns .uploads-filters,
.page-account-rewards .uploads-filters,
.page-account-registrations .uploads-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;
}

.page-account-uploads .uploads-filter-tab,
.page-account-campaigns .uploads-filter-tab,
.page-account-rewards .uploads-filter-tab,
.page-account-registrations .uploads-filter-tab {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

    color: var(--color-text-muted);

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    transition: 0.2s ease;
}

.page-account-uploads .uploads-filter-tab:hover,
.page-account-campaigns .uploads-filter-tab:hover,
.page-account-rewards .uploads-filter-tab:hover,
.page-account-registrations .uploads-filter-tab:hover {

    color: var(--color-text);
}

.page-account-uploads .uploads-filter-tab.is-active,
.page-account-campaigns .uploads-filter-tab.is-active,
.page-account-rewards .uploads-filter-tab.is-active,
.page-account-registrations .uploads-filter-tab.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.page-account-uploads .uploads-filter-count,
.page-account-campaigns .uploads-filter-count,
.page-account-rewards .uploads-filter-count,
.page-account-registrations .uploads-filter-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 22px;

    height: 22px;

    padding: 0 6px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    background: var(--color-background);

    color: var(--color-text);
}

.page-account-uploads .uploads-filter-tab.is-active
.uploads-filter-count,
.page-account-campaigns .uploads-filter-tab.is-active
.uploads-filter-count,
.page-account-rewards .uploads-filter-tab.is-active
.uploads-filter-count,
.page-account-registrations .uploads-filter-tab.is-active
.uploads-filter-count {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-account-uploads .upload-meta a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: none;
}

.page-account-uploads .upload-meta a:hover {

    text-decoration: underline;
}

.page-account-uploads .empty-state {

    text-align: center;

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 24px;

    padding: 48px 32px;

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-account-uploads .empty-state h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-account-uploads .empty-state p {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 24px;
}

.page-account-uploads .empty-state-filtered {

    margin-top: 0;
}

.page-account-uploads .uploads-pagination {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-top: 28px;

    flex-wrap: wrap;
}

.page-account-uploads .uploads-pagination-pages {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.page-account-uploads .uploads-pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 14px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

    color: var(--color-text);

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    transition: 0.2s ease;
}

.page-account-uploads .uploads-pagination-link:hover {

    background: var(--color-background);
}

.page-account-uploads .uploads-pagination-link.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.page-account-uploads .uploads-pagination-link.is-disabled {

    opacity: 0.45;

    pointer-events: none;
}

@media (max-width: 768px) {.page-account-uploads.uploads-container {

        padding-left: 16px;

        padding-right: 16px;
    }

    .page-account-uploads .uploads-header-title {

        font-size: 30px;
    }

    .page-account-uploads .upload-card {

        flex-direction: column;
    }

    .page-account-uploads .upload-media {

        width: 100%;

        height: 180px;
    }

    .page-account-uploads .uploads-filter-tab,
    .page-account-campaigns .uploads-filter-tab,
    .page-account-rewards .uploads-filter-tab,
    .page-account-registrations .uploads-filter-tab {

        font-size: 13px;

        padding: 8px 12px;
    }}

/* ----- account/events.php upload cards ----- */

.page-account-events .events-section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

    flex-wrap: wrap;
}

.page-account-events .events-section-link {

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}

.page-account-events .events-section-link:hover {

    color: var(--color-text);
}

.page-account-events .events-upload-list {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.page-account-events .events-upload-card {

    display: flex;

    gap: 20px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 18px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-events .events-upload-media {

    width: 120px;

    height: 120px;

    border-radius: 14px;

    overflow: hidden;

    background: var(--color-background);

    flex-shrink: 0;
}

.page-account-events .events-upload-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-account-events .events-upload-media-empty {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 700;
}

.page-account-events .events-upload-body {

    flex: 1;

    min-width: 0;
}

.page-account-events .events-upload-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--color-text);

    margin: 8px 0;
}

.page-account-events .events-upload-meta {

    margin: 0 0 14px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-events .action-button.action-secondary {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

@media (max-width: 768px) {.page-account-events .events-upload-card {

        flex-direction: column;
    }

    .page-account-events .events-upload-media {

        width: 100%;

        height: 180px;
    }}

/* ----- account showcase grid (uploads, projects, project-view) ----- */

.page-account-uploads .account-showcase-grid,
.page-account-project .account-showcase-grid,
.page-account-projects .account-showcase-grid,
.page-account-campaigns .account-showcase-grid,
.page-account-rewards .account-showcase-grid,
.page-account-registrations .account-showcase-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}

.page-account-uploads .account-upload-showcase-card,
.page-account-project .account-upload-showcase-card,
.page-account-projects .account-project-showcase-card,
.page-account-campaigns .account-campaign-showcase-card,
.page-account-registrations .account-registration-showcase-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    display: flex;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.page-account-uploads .account-upload-showcase-card:hover,
.page-account-project .account-upload-showcase-card:hover,
.page-account-projects .account-project-showcase-card:hover,
.page-account-campaigns .account-campaign-showcase-card:hover,
.page-account-registrations .account-registration-showcase-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px var(--color-shadow-nav-ui);
}

.page-account-uploads .account-showcase-media,
.page-account-project .account-showcase-media,
.page-account-campaigns .account-showcase-media {

    position: relative;

    background: var(--color-surface-alt);
}

.page-account-uploads .account-showcase-badges,
.page-account-project .account-showcase-badges,
.page-account-campaigns .account-showcase-badges {

    position: absolute;

    top: 14px;

    left: 14px;

    right: 14px;

    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    pointer-events: none;
}

.page-account-uploads .account-showcase-badge,
.page-account-project .account-showcase-badge,
.page-account-campaigns .account-showcase-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    backdrop-filter: blur(10px);
}

.page-account-uploads .account-showcase-badge.status-approved,
.page-account-project .account-showcase-badge.status-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-uploads .account-showcase-badge.status-pending,
.page-account-project .account-showcase-badge.status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-uploads .account-showcase-badge.status-rejected,
.page-account-project .account-showcase-badge.status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);
}

.page-account-uploads
.account-showcase-media
.upload-media-viewer--compact
.umv-main,
.page-account-project
.account-showcase-media
.upload-media-viewer--compact
.umv-main {

    height: 280px;

    border-radius: 0;
}

.page-account-uploads
.account-showcase-media
.upload-media-viewer--compact
.umv-toolbar,
.page-account-project
.account-showcase-media
.upload-media-viewer--compact
.umv-toolbar {

    margin-top: 4px;

    padding: 0 12px;
}

.page-account-uploads
.account-showcase-media
.upload-media-viewer--compact
.umv-thumbs,
.page-account-project
.account-showcase-media
.upload-media-viewer--compact
.umv-thumbs {

    padding: 0 12px 12px;
}

.page-account-uploads
.account-showcase-media
.upload-media-viewer--compact
.umv-main
img,
.page-account-uploads
.account-showcase-media
.upload-media-viewer--compact
.umv-main
video,
.page-account-project
.account-showcase-media
.upload-media-viewer--compact
.umv-main
img,
.page-account-project
.account-showcase-media
.upload-media-viewer--compact
.umv-main
video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.page-account-uploads .account-showcase-content,
.page-account-project .account-showcase-content,
.page-account-projects .account-showcase-content {

    padding: 20px 22px 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.page-account-uploads .account-showcase-title,
.page-account-project .account-showcase-title,
.page-account-projects .account-showcase-title {

    font-size: 20px;

    font-weight: 800;

    margin: 0 0 8px;

    color: var(--color-text);

    line-height: 1.3;
}

.page-account-projects .account-showcase-description {

    margin: 0 0 8px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-uploads .account-showcase-meta,
.page-account-project .account-showcase-meta,
.page-account-projects .account-showcase-meta {

    margin: 0 0 16px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-uploads .account-showcase-meta a,
.page-account-project .account-showcase-meta a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: none;
}

.page-account-uploads .account-showcase-meta a:hover,
.page-account-project .account-showcase-meta a:hover {

    text-decoration: underline;
}

.page-account-uploads .account-showcase-footer,
.page-account-project .account-showcase-footer,
.page-account-projects .account-showcase-footer {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin-top: auto;
}

.page-account-uploads .account-showcase-button,
.page-account-project .account-showcase-button,
.page-account-projects .account-showcase-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-uploads .account-showcase-button-primary,
.page-account-project .account-showcase-button-primary,
.page-account-projects .account-showcase-button-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-uploads .account-showcase-button-primary:hover,
.page-account-project .account-showcase-button-primary:hover,
.page-account-projects .account-showcase-button-primary:hover {

    opacity: 0.92;
}

.page-account-uploads .account-showcase-button-secondary,
.page-account-project .account-showcase-button-secondary,
.page-account-projects .account-showcase-button-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-uploads .account-showcase-button-secondary:hover,
.page-account-project .account-showcase-button-secondary:hover,
.page-account-projects .account-showcase-button-secondary:hover {

    background: var(--color-background);
}

.page-account-uploads .account-showcase-button-danger,
.page-account-project .account-showcase-button-danger,
.page-account-projects .account-showcase-button-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);

    border:
        1px solid var(--color-danger-border);
}

.page-account-uploads .account-showcase-button-danger:hover,
.page-account-project .account-showcase-button-danger:hover,
.page-account-projects .account-showcase-button-danger:hover {

    opacity: 0.92;
}

.page-account-uploads .account-showcase-delete-form,
.page-account-project .account-showcase-delete-form,
.page-account-projects .account-showcase-delete-form {

    display: inline-flex;

    margin: 0;
}

/* Project cover mosaic — 1 large + up to 4 small */

.page-account-projects .account-project-mosaic {

    position: relative;

    height: 280px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-account-projects .account-project-mosaic-empty {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 700;
}

.page-account-projects .account-project-mosaic--1 {

    display: block;
}

.page-account-projects .account-project-mosaic--1
.account-project-mosaic-hero {

    width: 100%;

    height: 100%;
}

.page-account-projects .account-project-mosaic--2,
.page-account-projects .account-project-mosaic--3,
.page-account-projects .account-project-mosaic--4,
.page-account-projects .account-project-mosaic--5 {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 4px;
}

.page-account-projects .account-project-mosaic-hero {

    overflow: hidden;

    min-height: 0;

    height: 100%;
}

.page-account-projects .account-project-mosaic-tiles {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

    gap: 4px;

    min-height: 0;

    height: 100%;
}

.page-account-projects .account-project-mosaic-tile {

    overflow: hidden;

    background: var(--color-background);

    min-height: 0;
}

.page-account-projects .account-project-mosaic-hero img,
.page-account-projects .account-project-mosaic-hero video,
.page-account-projects .account-project-mosaic-tile img,
.page-account-projects .account-project-mosaic-tile video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.page-account-projects .account-project-mosaic-external {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    font-size: 12px;

    font-weight: 800;

    color: var(--color-text-muted);
}

.page-account-projects .account-project-mosaic-more {

    position: absolute;

    bottom: 12px;

    right: 12px;

    z-index: 2;

    padding: 6px 12px;

    border-radius: 999px;

    background: var(--color-overlay-dark-72);

    color: var(--color-surface);

    font-size: 12px;

    font-weight: 800;
}

@media (max-width: 1100px) {.page-account-uploads .account-showcase-grid,
    .page-account-project .account-showcase-grid,
    .page-account-projects .account-showcase-grid,
    .page-account-campaigns .account-showcase-grid,
    .page-account-rewards .account-showcase-grid,
    .page-account-registrations .account-showcase-grid {

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

@media (max-width: 700px) {.page-account-uploads .account-showcase-grid,
    .page-account-project .account-showcase-grid,
    .page-account-projects .account-showcase-grid,
    .page-account-campaigns .account-showcase-grid,
    .page-account-rewards .account-showcase-grid,
    .page-account-registrations .account-showcase-grid {

        grid-template-columns: 1fr;
    }}

/* ----- account campaigns + activity log ----- */

.page-account-events.events-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-account-campaigns .account-showcase-badge.status-approved,
.page-account-campaigns .account-showcase-badge.status-winner {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-campaigns .account-showcase-badge.status-pending,
.page-account-campaigns .account-showcase-badge.status-active {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-campaigns .account-showcase-badge.status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);
}

.page-account-campaigns .account-showcase-badge.status-muted {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-campaigns
.account-showcase-media
.upload-media-viewer--compact
.umv-main,
.page-account-campaigns
.account-showcase-media
.upload-media-viewer--compact
.umv-main
img,
.page-account-campaigns
.account-showcase-media
.upload-media-viewer--compact
.umv-main
video {

    height: 280px;

    width: 100%;

    object-fit: cover;

    display: block;

    border-radius: 0;
}

.page-account-campaigns
.account-showcase-media
.upload-media-viewer--compact
.umv-toolbar,
.page-account-campaigns
.account-showcase-media
.upload-media-viewer--compact
.umv-thumbs {

    padding: 0 12px 12px;

    margin-top: 4px;
}

.page-account-campaigns .account-showcase-content {

    padding: 20px 22px 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.page-account-campaigns .account-showcase-title {

    font-size: 20px;

    font-weight: 800;

    margin: 0 0 8px;

    color: var(--color-text);

    line-height: 1.3;
}

.page-account-campaigns .account-showcase-description {

    margin: 0 0 8px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-campaigns .account-showcase-meta {

    margin: 0 0 16px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-campaigns .account-showcase-footer {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin-top: auto;
}

.page-account-campaigns .account-showcase-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-campaigns .account-showcase-button-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-campaigns .account-showcase-button-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-campaigns .account-showcase-button-danger {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);

    border:
        1px solid var(--color-danger-border);
}

.page-account-campaigns .account-showcase-delete-form {

    display: inline-flex;

    margin: 0;
}

.page-account-events .events-quick-links {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 20px;

    margin: 0 0 28px;

    padding: 0 0 20px;

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-account-events .events-quick-links a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: none;

    font-size: 14px;
}

.page-account-events .events-quick-links a:hover {

    text-decoration: underline;
}

.page-account-events .events-activity-log {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0;
}

.page-account-events .events-activity-item {

    display: grid;

    grid-template-columns: 24px 1fr;

    gap: 16px;

    position: relative;

    padding-bottom: 24px;
}

.page-account-events .events-activity-item:not(:last-child)::before {

    content: '';

    position: absolute;

    left: 11px;

    top: 18px;

    bottom: 0;

    width: 2px;

    background: var(--color-border-marketing);
}

.page-account-events .events-activity-marker {

    display: flex;

    justify-content: center;

    padding-top: 18px;
}

.page-account-events .events-activity-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-surface);
}

.page-account-events .events-activity-card {

    display: flex;

    gap: 16px;

    padding: 16px 18px;

    border-radius: 20px;

    border:
        1px solid var(--color-border-marketing);

    background: var(--color-surface);

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-account-events .events-activity-media {

    width: 88px;

    height: 88px;

    flex-shrink: 0;

    border-radius: 14px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-account-events .events-activity-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.page-account-events .events-activity-media-empty {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

    color: var(--color-text-muted);
}

.page-account-events .events-activity-body {

    flex: 1;

    min-width: 0;
}

.page-account-events .events-activity-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 8px;
}

.page-account-events .events-activity-type {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-account-events .events-activity-type-campaign {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-events .events-activity-type-project {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-events .events-activity-type-community {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-events .status-badge.status-winner {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-events .events-activity-title {

    margin: 0 0 6px;

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);
}

.page-account-events .events-activity-meta {

    margin: 0 0 12px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.5;
}

.page-account-events .events-activity-footnote {

    margin: 8px 0 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-account-events .events-activity-footnote a {

    color: var(--color-text);

    font-weight: 700;
}

@media (max-width: 768px) {.page-account-events .events-activity-card {

        flex-direction: column;
    }

    .page-account-events .events-activity-media {

        width: 100%;

        height: 160px;
    }}

/* ----- account/rewards.php (Tier B showcase) ----- */

.page-account-rewards .account-reward-showcase-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    display: flex;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.page-account-rewards .account-reward-showcase-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px var(--color-shadow-nav-ui);
}

.page-account-rewards .account-reward-showcase-card.is-expired {

    opacity: 0.88;
}

.page-account-rewards .account-reward-card-header {

    padding: 18px 20px 0;
}

.page-account-rewards .account-reward-badges {

    position: static;

    pointer-events: auto;
}

.page-account-rewards .account-showcase-badge.status-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-rewards .account-showcase-badge.status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-rewards .account-showcase-badge.status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);
}

.page-account-rewards .account-showcase-badge.status-winner {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-rewards .account-showcase-badge.status-muted {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-rewards .account-showcase-badge.status-redeemed {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-rewards .account-reward-showcase-card.is-redeemed {

    opacity: 0.92;
}

.page-account-rewards .account-reward-showcase-card.is-redeemed
.account-reward-coupon-code {

    text-decoration: line-through;

    color: var(--color-text-muted);
}

.page-account-rewards .account-reward-content {

    padding: 16px 22px 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.page-account-rewards .account-reward-value {

    margin: 0 0 10px;

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.2;
}

.page-account-rewards .account-reward-value-type {

    display: inline-block;

    margin-left: 8px;

    font-size: 13px;

    font-weight: 800;

    color: var(--color-text-muted);

    vertical-align: middle;
}

.page-account-rewards .account-reward-coupon {

    background: var(--color-background);

    border:
        2px dashed var(--color-border-marketing);

    border-radius: 18px;

    padding: 18px;

    text-align: center;

    margin: 12px 0 14px;
}

.page-account-rewards .account-reward-showcase-card.is-expired
.account-reward-coupon {

    border-style: solid;

    opacity: 0.75;
}

.page-account-rewards .account-reward-coupon-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--color-text-muted);

    margin-bottom: 8px;
}

.page-account-rewards .account-reward-min-spend {

    margin: 0 0 10px;

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text-muted);

    line-height: 1.5;
}

.page-account-rewards .account-reward-conditions {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin: 0 0 12px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;

    color: var(--color-text-muted);
}

.page-account-rewards .account-reward-coupon-code {

    font-size: 26px;

    font-weight: 900;

    letter-spacing: 0.06em;

    word-break: break-word;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-account-rewards .account-reward-showcase-card.is-expired
.account-reward-coupon-code {

    text-decoration: line-through;

    color: var(--color-text-muted);
}

.page-account-rewards .account-reward-copy-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    border: none;

    background: var(--color-text);

    color: var(--color-surface);

    font-weight: 800;

    font-size: 14px;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-rewards .account-reward-copy-btn:hover {

    opacity: 0.92;
}

.page-account-rewards .account-reward-dates {

    margin: 0 0 12px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

.page-account-rewards .account-reward-terms {

    margin-bottom: 14px;

    font-size: 14px;
}

.page-account-rewards .account-reward-terms summary {

    cursor: pointer;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 8px;
}

.page-account-rewards .account-reward-terms-body {

    color: var(--color-text-muted);

    line-height: 1.7;

    padding: 12px 14px;

    background: var(--color-background);

    border-radius: 12px;

    border:
        1px solid var(--color-border-marketing);
}

.page-account-rewards .account-reward-footer {

    margin-top: auto;
}

.page-account-rewards .account-showcase-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-rewards .account-showcase-button-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-rewards .account-showcase-button-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-rewards .empty-state {

    background: var(--color-surface);

    border-radius: 24px;

    border:
        1px solid var(--color-border-marketing);

    padding: 48px 32px;

    text-align: center;
}

.page-account-rewards .empty-state h2 {

    margin: 0 0 12px;

    font-size: 24px;

    font-weight: 900;
}

.page-account-rewards .empty-state p {

    margin: 0 0 20px;

    color: var(--color-text-muted);

    line-height: 1.7;
}

/* ----- account/registrations.php (Tier B showcase) ----- */

.page-account-registrations .account-registration-showcase-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    display: flex;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.page-account-registrations .account-registration-showcase-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px var(--color-shadow-nav-ui);
}

.page-account-registrations .account-registration-content {

    padding: 22px 22px 24px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.page-account-registrations .account-registration-card-top {

    margin-bottom: 12px;
}

.page-account-registrations .account-showcase-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-account-registrations .account-showcase-badge.status-approved,
.page-account-registrations .account-showcase-badge.status-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-account-registrations .account-showcase-badge.status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-account-registrations .account-showcase-badge.status-rejected,
.page-account-registrations .account-showcase-badge.status-flagged {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);
}

.page-account-registrations .account-showcase-badge.status-expired,
.page-account-registrations .account-showcase-badge.status-archived,
.page-account-registrations .account-showcase-badge.status-default {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .account-showcase-title {

    font-size: 20px;

    font-weight: 800;

    margin: 0 0 16px;

    color: var(--color-text);

    line-height: 1.3;
}

.page-account-registrations .account-registration-info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-bottom: 16px;
}

.page-account-registrations .account-registration-info-cell {

    padding: 12px 14px;

    border-radius: 14px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .account-registration-info-cell.is-highlight {

    background: var(--primitive-green-100-bright);

    border-color: transparent;
}

.page-account-registrations .account-registration-info-cell.is-highlight
.account-registration-info-label {

    color: var(--primitive-green-900);

    opacity: 0.8;
}

.page-account-registrations .account-registration-info-cell.is-highlight
.account-registration-info-value {

    color: var(--primitive-green-900);
}

.page-account-registrations .account-registration-info-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 4px;
}

.page-account-registrations .account-registration-info-value {

    font-size: 15px;

    font-weight: 800;

    color: var(--color-text);

    line-height: 1.4;

    word-break: break-word;
}

.page-account-registrations .account-registration-note {

    margin: 0 0 14px;

    padding: 12px 14px;

    border-radius: 12px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

.page-account-registrations .account-registration-alert {

    margin: 0 0 12px;

    padding: 12px 14px;

    border-radius: 12px;

    background: var(--color-danger-bg);

    border:
        1px solid var(--color-danger-border);

    color: var(--color-danger-text);

    font-size: 13px;

    line-height: 1.6;
}

.page-account-registrations .account-registration-alert p {

    margin: 0;
}

.page-account-registrations .account-registration-footer {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;

    margin-top: auto;
}

.page-account-registrations .account-showcase-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-account-registrations .account-showcase-button-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-account-registrations .account-showcase-button-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-account-registrations .empty-state {

    background: var(--color-surface);

    border-radius: 24px;

    border:
        1px solid var(--color-border-marketing);

    padding: 48px 32px;

    text-align: center;
}

.page-account-registrations .empty-state h2 {

    margin: 0 0 12px;

    font-size: 24px;

    font-weight: 900;
}

.page-account-registrations .empty-state p {

    margin: 0 0 20px;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.page-account-registrations .registrations-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.page-account-registrations .registrations-pagination-pages {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.page-account-registrations .registrations-pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 14px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;

    color: var(--color-text);

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    transition: 0.2s ease;
}

.page-account-registrations .registrations-pagination-link:hover {

    background: var(--color-background);
}

.page-account-registrations .registrations-pagination-link.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.page-account-registrations .registrations-pagination-link.is-disabled {

    opacity: 0.45;

    pointer-events: none;
}

@media (max-width: 768px) {.page-account-registrations .account-registration-info-grid {

        grid-template-columns: 1fr;
    }}

/* ===== END pages/account.css ===== */

/* ===== BEGIN pages/campaigns.css ===== */

/*
|--------------------------------------------------------------------------
| Page: campaigns — Wave 3 (campaigns/index.php)
|--------------------------------------------------------------------------
| Scoped under .page-campaigns.
|--------------------------------------------------------------------------
*/

.page-campaigns {

    width: 100%;

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 50px 24px 90px;

    box-sizing: border-box;
}

.page-campaigns .hero-section {

    position: relative;

    overflow: hidden;

    background: var(--gradient-marketing-hero);

    border-radius: 38px;

    padding: 70px 60px;

    color: var(--color-hero-text);

    margin-bottom: 52px;
}

.page-campaigns .hero-section::after {

    content: '';

    position: absolute;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background: var(--color-hero-glow);

    top: -320px;

    right: -200px;
}

.page-campaigns .hero-content {

    position: relative;

    z-index: 2;
}

.page-campaigns .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: var(--radius-full);

    background: var(--color-hero-glass);

    border: 1px solid var(--color-hero-glass-strong);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.04em;

    margin-bottom: 28px;
}

.page-campaigns .hero-title {

    font-size: 66px;

    font-weight: 900;

    line-height: 1.08;

    margin-bottom: 26px;
}

.page-campaigns .hero-description {

    max-width: 980px;

    line-height: 2;

    color: var(--color-hero-text-muted);

    font-size: 18px;

    margin-bottom: 34px;
}

.page-campaigns .hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.page-campaigns .hero-meta-item {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: var(--radius-full);

    background: var(--color-hero-glass);

    border: 1px solid var(--color-hero-glass-border);

    font-size: 13px;

    font-weight: 700;
}

.page-campaigns .section {

    margin-bottom: 70px;
}

.page-campaigns .section-header {

    margin-bottom: 30px;
}

.page-campaigns .section-title {

    font-size: 48px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-campaigns .section-description {

    max-width: 920px;

    color: var(--color-text-muted);

    line-height: 2;
}

.page-campaigns .campaign-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));

    gap: 30px;
}

.page-campaigns .campaign-card {

    background: var(--color-surface);

    border-radius: 32px;

    overflow: hidden;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card-md);

    transition: 0.22s ease;
}

.page-campaigns .campaign-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 18px 40px var(--color-shadow-sm);
}

.page-campaigns .campaign-banner {

    height: 260px;

    background-size: cover;

    background-position: center;

    position: relative;
}

.page-campaigns .campaign-banner::after {

    content: '';

    position: absolute;

    inset: 0;

    background: var(--gradient-banner-overlay-soft);
}

.page-campaigns .campaign-badges {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-campaigns .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

    border-radius: var(--radius-full);

    font-size: 12px;

    font-weight: 800;
}

.page-campaigns .badge-active {

    background: var(--primitive-emerald-500);

    color: var(--color-text-on-primary);
}

.page-campaigns .badge-ended {

    background: var(--color-text-muted);

    color: var(--color-text-on-primary);
}

.page-campaigns .badge-ending {

    background: var(--color-danger);

    color: var(--color-text-on-primary);
}

.page-campaigns .badge-approved {

    background: var(--color-info-bg);

    color: var(--primitive-blue-800);
}

.page-campaigns .badge-featured {

    background: var(--color-featured-bg);

    color: var(--color-featured);
}

.page-campaigns .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-campaigns .badge-rejected {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);
}

.page-campaigns .badge-winner {

    background: var(--color-success-bg);

    color: var(--primitive-green-900);
}

.page-campaigns .badge-not-winner {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-campaigns .campaign-content {

    padding: 32px;
}

.page-campaigns .campaign-title {

    font-size: 32px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;

    line-height: 1.25;
}

.page-campaigns .campaign-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 26px;
}

.page-campaigns .meta-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 26px;
}

.page-campaigns .meta-card {

    background: var(--color-background);

    border-radius: var(--radius-md);

    padding: 18px;
}

.page-campaigns .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    font-weight: 800;

    margin-bottom: 8px;
}

.page-campaigns .meta-value {

    color: var(--color-text);

    font-weight: 800;

    line-height: 1.8;
}

.page-campaigns .rules-box {

    background: var(--color-background);

    border-radius: 22px;

    padding: 22px;

    margin-bottom: 24px;
}

.page-campaigns .rules-title {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-campaigns .rules-content {

    color: var(--color-text-muted);

    line-height: 1.9;

    white-space: pre-line;
}

.page-campaigns .participation-box {

    background: var(--color-primary);

    border-radius: 22px;

    padding: 22px;

    color: var(--color-text-on-primary);

    margin-bottom: 24px;
}

.page-campaigns .participation-title {

    font-size: 18px;

    font-weight: 900;

    margin-bottom: 12px;
}

.page-campaigns .participation-description {

    color: var(--color-hero-text-muted);

    line-height: 1.9;
}

.page-campaigns .cta-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}

.page-campaigns .countdown {

    color: var(--color-danger);

    font-size: 14px;

    font-weight: 800;
}

.page-campaigns .cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 16px 24px;

    border-radius: var(--radius-md);

    text-decoration: none;

    font-weight: 800;

    transition: var(--transition);
}

.page-campaigns .cta-button:hover {

    background: var(--color-primary-hover);

    transform: translateY(-1px);
}

.page-campaigns .secondary-button {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-campaigns .secondary-button:hover {

    background: var(--color-border);
}

.page-campaigns .info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

.page-campaigns .info-card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 34px;

    border: 1px solid var(--color-border-marketing);

    box-shadow: var(--shadow-marketing-card-md);
}

.page-campaigns .info-title {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-campaigns .info-description {

    color: var(--color-text-muted);

    line-height: 2;
}

.page-campaigns .campaign-description-compact {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.page-campaigns .campaign-winner-line {

    margin-bottom: 22px;

    padding: 14px 16px;

    border-radius: 16px;

    background: var(--color-success-bg);

    color: var(--color-text);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.6;
}

.page-campaigns .campaign-winner-label {

    font-weight: 800;

    margin-right: 6px;
}

.page-campaigns .campaign-winner-pending {

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-campaigns .campaign-card-past .cta-wrapper {

    justify-content: flex-start;
}

.page-campaigns .empty-state {

    background: var(--color-surface);

    border-radius: 32px;

    padding: 80px 40px;

    border: 1px solid var(--color-border-marketing);

    text-align: center;
}

.page-campaigns .empty-title {

    font-size: 38px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-campaigns .empty-description {

    max-width: 760px;

    margin: 0 auto;

    color: var(--color-text-muted);

    line-height: 2;
}

@media (max-width: 768px) {

    .page-campaigns {

        padding: 32px 18px 70px;
    }

    .page-campaigns .hero-section {

        padding: 50px 30px;
    }

    .page-campaigns .hero-title {

        font-size: 44px;
    }

    .page-campaigns .section-title {

        font-size: 38px;
    }

    .page-campaigns .campaign-content {

        padding: 24px;
    }

    .page-campaigns .meta-grid {

        grid-template-columns: 1fr;
    }
}

/* ===== END pages/campaigns.css ===== */

/* ===== BEGIN pages/uploads.css ===== */

/*
|--------------------------------------------------------------------------
| Pages: gallery + upload — Wave 5
|--------------------------------------------------------------------------
| Scoped per page (.page-gallery, .page-upload, etc.).
| Gallery card partial uses creator-gallery-* (included under .page-gallery).
|--------------------------------------------------------------------------
*/

/* ----- gallery/index.php ----- */

.page-gallery.gallery-page,
.gallery-page {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;
}

.page-gallery .hero-card, .gallery-page .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 36px;

    padding: 56px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 38px;
}

.page-gallery .hero-card::after, .gallery-page .hero-card::after {

    content: '';

    position: absolute;

    width: 460px;

    height: 460px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -220px;

    right: -140px;
}

.page-gallery .hero-title, .gallery-page .hero-title {

    font-size: 54px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-gallery .hero-description, .gallery-page .hero-description {

    max-width: 920px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-gallery .hero-badges, .gallery-page .hero-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;

    position: relative;

    z-index: 2;
}

.page-gallery .hero-badge, .gallery-page .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 999px;

    background:
        var(--color-white-glass-10);

    backdrop-filter: blur(10px);

    font-size: 13px;

    font-weight: 800;
}

.page-gallery .hero-eyebrow,
.gallery-page .hero-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    background: var(--color-white-glass-10);

    border: 1px solid var(--color-hero-glass-strong);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.03em;

    color: var(--color-hero-text-muted);

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-gallery .filter-card, .gallery-page .filter-card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    margin-bottom: 40px;
}

.page-gallery .filter-grid, .gallery-page .filter-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

    align-items: end;
}

.page-gallery .form-group, .gallery-page .form-group {

    display: flex;

    flex-direction: column;
}

.page-gallery .form-group label, .gallery-page .form-group label {

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 800;

    color: var(--color-text);
}

.page-gallery .form-group input, .page-gallery .form-group select, .gallery-page .form-group input, .gallery-page .form-group select {

    padding: 15px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    color: var(--color-text);
}

.page-gallery .filter-button, .gallery-page .filter-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 16px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-gallery .filter-button:hover, .gallery-page .filter-button:hover {

    background: var(--color-primary-hover);
}

.page-gallery .filter-clear-link,
.gallery-page .filter-clear-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 10px;

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text-muted);

    text-decoration: underline;

    text-underline-offset: 2px;
}

.page-gallery .filter-clear-link:hover,
.gallery-page .filter-clear-link:hover {

    color: var(--color-text);
}

.page-gallery .gallery-results-summary,
.gallery-page .gallery-results-summary {

    margin-bottom: 22px;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);
}

.page-gallery .form-group-actions,
.gallery-page .form-group-actions {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;
}

.page-gallery .form-group-actions .filter-button,
.gallery-page .form-group-actions .filter-button {

    margin: 0;
}

.page-gallery .gallery-list-footer,
.gallery-page .gallery-list-footer {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 48px;

    padding-top: 32px;

    border-top:
        1px solid var(--color-border);
}

.page-gallery .gallery-per-page-form,
.gallery-page .gallery-per-page-form {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin: 0;
}

.page-gallery .gallery-per-page-label,
.gallery-page .gallery-per-page-label {

    margin: 0;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);
}

.page-gallery .gallery-per-page-select,
.gallery-page .gallery-per-page-select {

    min-width: 88px;

    padding: 10px 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    background: var(--color-surface);

    color: var(--color-text);

    font-size: 14px;

    font-weight: 700;
}

.page-gallery .gallery-per-page-suffix,
.gallery-page .gallery-per-page-suffix {

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);
}

.page-gallery .gallery-pagination,
.gallery-page .gallery-pagination {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-left: auto;
}

.page-gallery .gallery-pagination-pages,
.gallery-page .gallery-pagination-pages {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 8px;
}

.page-gallery .gallery-pagination-link,
.gallery-page .gallery-pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    padding: 10px 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    background: var(--color-surface);

    color: var(--color-text);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.page-gallery .gallery-pagination-link:hover,
.gallery-page .gallery-pagination-link:hover {

    border-color: var(--color-accent);

    color: var(--color-accent);
}

.page-gallery .gallery-pagination-link.is-active,
.gallery-page .gallery-pagination-link.is-active {

    border-color: var(--color-accent);

    background: var(--color-accent);

    color: var(--color-accent-contrast, #fff);

    pointer-events: none;
}

.page-gallery .gallery-pagination-prev,
.page-gallery .gallery-pagination-next,
.gallery-page .gallery-pagination-prev,
.gallery-page .gallery-pagination-next {

    min-width: auto;

    padding-inline: 18px;
}

.page-gallery .stats-grid, .gallery-page .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 22px;

    margin-bottom: 42px;
}

.page-gallery .stat-card, .gallery-page .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 20px var(--color-shadow-sm);
}

.page-gallery .stat-label, .gallery-page .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-gallery .stat-value, .gallery-page .stat-value {

    font-size: 38px;

    font-weight: 900;

    color: var(--color-text);
}

.page-gallery .gallery-grid, .gallery-page .gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(390px, 1fr)
        );

    gap: 32px;
}

.page-gallery .empty-state, .gallery-page .empty-state {

    background: var(--color-surface);

    border-radius: 32px;

    padding: 80px 34px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-gallery .empty-title, .gallery-page .empty-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-gallery .empty-description, .gallery-page .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 700px;

    margin: 0 auto;
}

.page-gallery .empty-actions,
.gallery-page .empty-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    justify-content: center;

    margin-top: 28px;
}

.page-gallery .join-section, .gallery-page .join-section {

    margin-top: 70px;

    background:
        var(--gradient-surface-hero);

    border-radius: 36px;

    padding: 60px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;
}

.page-gallery .join-section::after, .gallery-page .join-section::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    bottom: -220px;

    right: -140px;
}

.page-gallery .join-title, .gallery-page .join-title {

    font-size: 46px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-gallery .join-description, .gallery-page .join-description {

    max-width: 880px;

    line-height: 2;

    color:
        var(--color-white-glass-84);

    margin-bottom: 34px;

    position: relative;

    z-index: 2;
}

.page-gallery .join-actions, .gallery-page .join-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    position: relative;

    z-index: 2;
}

.page-gallery .join-button, .gallery-page .join-button, .page-gallery-view .join-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 22px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-gallery .join-button-primary, .gallery-page .join-button-primary, .page-gallery-view .join-button-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-gallery .join-button-primary:hover, .gallery-page .join-button-primary:hover, .page-gallery-view .join-button-primary:hover {

    transform:
        translateY(-1px);
}

.page-gallery .join-button-secondary, .gallery-page .join-button-secondary, .page-gallery-view .join-button-secondary {

    background:
        var(--color-white-glass-10);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-16);
}

.page-gallery .join-button-secondary:hover, .gallery-page .join-button-secondary:hover, .page-gallery-view .join-button-secondary:hover {

    background:
        var(--color-white-glass-16);
}

@media (max-width: 768px) {.page-gallery .hero-card, .gallery-page .hero-card, .page-gallery .join-section, .gallery-page .join-section {

        padding: 38px 28px;
    }

    .page-gallery .hero-title, .gallery-page .hero-title, .page-gallery .join-title, .gallery-page .join-title {

        font-size: 38px;
    }

    .page-gallery .gallery-list-footer,
    .gallery-page .gallery-list-footer {

        flex-direction: column;

        align-items: stretch;

        gap: 24px;
    }

    .page-gallery .gallery-per-page-form,
    .gallery-page .gallery-per-page-form {

        justify-content: center;
    }

    .page-gallery .gallery-pagination,
    .gallery-page .gallery-pagination {

        margin-left: 0;

        justify-content: center;
    }}

/* ----- gallery/view.php ----- */

.page-gallery-view.gallery-view-page {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 28px 24px 90px;
}

.page-gallery-view .gallery-view-top {

    margin-bottom: 22px;
}

.page-gallery-view .gallery-view-back {

    display: inline-flex;

    align-items: center;

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);

    text-decoration: none;

    transition: var(--transition-fast);
}

.page-gallery-view .gallery-view-back:hover {

    color: var(--color-primary);
}

.page-gallery-view .gallery-view-layout {

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    gap: 28px;
}

.page-gallery-view .gallery-view-media-card {

    min-width: 0;
}

.page-gallery-view .gallery-view-media-wrap {

    padding: 16px;
}

.page-gallery-view .gallery-view-sidebar .card-content {

    padding: 26px;
}

.page-gallery-view .gallery-view-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px;
}

.page-gallery-view .gallery-view-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-gallery-view .gallery-view-badge-featured {

    background: var(--color-featured-bg);

    color: var(--color-featured);
}

.page-gallery-view .gallery-view-badge-winner {

    background: var(--color-success-bg);

    color: var(--primitive-green-900);
}

.page-gallery-view .gallery-view-title {

    font-size: 28px;

    font-weight: 900;

    line-height: 1.3;

    color: var(--color-text);

    margin: 0 0 10px;
}

.page-gallery-view .gallery-view-byline {

    font-size: 14px;

    font-weight: 600;

    color: var(--color-text-muted);

    line-height: 1.5;

    margin-bottom: 10px;
}

.page-gallery-view .gallery-view-creator-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;
}

.page-gallery-view .gallery-view-creator-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 11px;

    border-radius: 999px;

    background: var(--color-primary-bg);

    color: var(--color-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.02em;

    line-height: 1.2;
}

.page-gallery-view .gallery-view-creator-badge-more {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-gallery-view .gallery-view-product {

    margin-bottom: 18px;
}

.page-gallery-view .gallery-view-description {

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.75;

    margin-bottom: 18px;
}

.page-gallery-view .gallery-view-tags {

    margin-bottom: 18px;
}

.page-gallery-view .gallery-view-campaign-note {

    margin: 0 0 18px;

    font-size: 14px;

    line-height: 1.6;

    color: var(--color-text-muted);
}

.page-gallery-view .gallery-view-campaign-note a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 2px;
}

.page-gallery-view .gallery-view-campaign-note a:hover {

    color: var(--color-primary);
}

.page-gallery-view .gallery-view-actions {

    margin-top: 8px;
}

.page-gallery-view .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 36px;

    padding: 54px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 38px;
}

.page-gallery-view .hero-card::after {

    content: '';

    position: absolute;

    width: 460px;

    height: 460px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -220px;

    right: -140px;
}

.page-gallery-view .hero-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 26px;

    position: relative;

    z-index: 2;
}

.page-gallery-view .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-gallery-view .hero-badge-featured {

    background:
        var(--color-badge-violet);

    color: var(--color-surface);
}

.page-gallery-view .hero-badge-campaign {

    background:
        var(--color-badge-blue);

    color: var(--color-surface);
}

.page-gallery-view .hero-badge-winner {

    background:
        var(--color-badge-amber);

    color: var(--color-text);
}

.page-gallery-view .hero-badge-creator {

    background:
        var(--color-badge-green);

    color: var(--color-surface);
}

.page-gallery-view .hero-title {

    font-size: 56px;

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 20px;

    position: relative;

    z-index: 2;
}

.page-gallery-view .hero-description {

    max-width: var(--layout-form-max);

    line-height: 2;

    color:
        var(--color-white-glass-84);

    position: relative;

    z-index: 2;
}

.page-gallery-view .layout-grid {

    display: grid;

    grid-template-columns:
        1.15fr 0.85fr;

    gap: 32px;

    align-items: start;
}

.page-gallery-view .card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-gallery-view .card-content {

    padding: 32px;
}

.page-gallery-view .media-gallery {

    display: grid;

    gap: 18px;
}

.page-gallery-view .main-media {

    border-radius: 26px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-gallery-view .main-media img, .page-gallery-view .main-media video {

    width: 100%;

    display: block;
}

.page-gallery-view .thumbnail-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(140px, 1fr)
        );

    gap: 16px;
}

.page-gallery-view .thumbnail-item {

    border-radius: 18px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-gallery-view .thumbnail-item img {

    width: 100%;

    height: 120px;

    object-fit: cover;

    display: block;
}

.page-gallery-view .section-title {

    font-size: 32px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-gallery-view .description-box {

    line-height: 2;

    color: var(--color-text-muted);

    font-size: 16px;
}

.page-gallery-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 18px;

    margin-top: 30px;
}

.page-gallery-view .meta-item {

    background: var(--color-background);

    border-radius: 18px;

    padding: 18px;

    border:
        1px solid var(--color-border-marketing);
}

.page-gallery-view .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 8px;
}

.page-gallery-view .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.8;
}

.page-gallery-view .tags {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.page-gallery-view .tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    border-radius: 14px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 700;
}

.page-gallery-view .status-box {

    border-radius: 22px;

    padding: 24px;

    line-height: 1.9;

    margin-bottom: 26px;
}

.page-gallery-view .status-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-gallery-view .status-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-gallery-view .status-community {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);
}

.page-gallery-view .action-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 30px;
}

.page-gallery-view .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 22px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-gallery-view .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-gallery-view .action-primary:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-gallery-view .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-gallery-view .action-secondary:hover {

    background: var(--color-border);
}

.page-gallery-view .related-section {

    margin-top: 56px;
}

.page-gallery-view .related-subsection {

    margin-bottom: 48px;
}

.page-gallery-view .related-subsection:last-child {

    margin-bottom: 0;
}

.page-gallery-view .related-section-title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 22px;
}

.page-gallery-view .related-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 24px;
}

.page-gallery-view .join-section {

    margin-top: 70px;

    background:
        var(--gradient-surface-hero);

    border-radius: 36px;

    padding: 56px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;
}

.page-gallery-view .join-section::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    bottom: -220px;

    right: -140px;
}

.page-gallery-view .join-title {

    font-size: 46px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-gallery-view .join-description {

    max-width: 920px;

    line-height: 2;

    color:
        var(--color-white-glass-84);

    margin-bottom: 34px;

    position: relative;

    z-index: 2;
}

.page-gallery-view .join-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    position: relative;

    z-index: 2;
}

@media (max-width: 1100px) {

    .page-gallery-view .gallery-view-layout,
    .page-gallery-view .layout-grid {

        grid-template-columns: 1fr;
    }

    .page-gallery-view .related-grid {

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(280px, 1fr)
            );
    }

}

@media (max-width: 768px) {

    .page-gallery-view .join-section {

        padding: 38px 28px;
    }

    .page-gallery-view .join-title {

        font-size: 32px;
    }

    .page-gallery-view .gallery-view-title {

        font-size: 24px;
    }

    .page-gallery-view .related-section-title {

        font-size: 24px;
    }

}

/* ----- gallery/partials/gallery-card.php ----- */

.creator-gallery-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;

    display: flex;

    flex-direction: column;

    height: 100%;
}

.creator-gallery-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 24px 48px var(--color-shadow-nav-ui);
}

.creator-gallery-media {

    position: relative;

    height: auto;

    overflow: visible;

    background: var(--color-surface-alt);
}

.page-gallery .creator-gallery-media .creator-gallery-overlay,
.page-gallery-view .creator-gallery-media .creator-gallery-overlay {

    top: 0;

    right: 0;

    left: 0;

    bottom: auto;

    height: 280px;
}

.page-gallery .creator-gallery-media .upload-media-viewer--compact .umv-main,
.page-gallery-view .creator-gallery-media .upload-media-viewer--compact .umv-main {

    height: 280px;

    border-radius: 0;
}

.page-gallery .creator-gallery-media .upload-media-viewer--compact .umv-toolbar,
.page-gallery-view .creator-gallery-media .upload-media-viewer--compact .umv-toolbar {

    margin-top: 4px;

    padding: 0 12px;
}

.page-gallery .creator-gallery-media .upload-media-viewer--compact .umv-count,
.page-gallery-view .creator-gallery-media .upload-media-viewer--compact .umv-count {

    font-size: 12px;
}

.page-gallery .creator-gallery-media .upload-media-viewer--compact .umv-thumbs,
.page-gallery-view .creator-gallery-media .upload-media-viewer--compact .umv-thumbs {

    padding: 0 12px 12px;
}

.creator-gallery-media img,
.creator-gallery-media video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.creator-gallery-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            var(--color-shadow-nav-ui),
            var(--color-overlay-dark-42)
        );

    pointer-events: none;
}

.creator-gallery-badges {

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    z-index: 3;
}

.creator-gallery-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    backdrop-filter: blur(10px);

    letter-spacing: 0.01em;
}

.creator-gallery-badge-featured {

    background:
        var(--color-badge-violet);

    color: var(--color-surface);
}

.creator-gallery-badge-campaign {

    background:
        var(--color-badge-blue);

    color: var(--color-surface);
}

.creator-gallery-badge-winner {

    background:
        var(--color-badge-amber);

    color: var(--color-text);
}

.creator-gallery-badge-creator {

    background:
        var(--color-badge-green);

    color: var(--color-surface);
}

.creator-gallery-content {

    padding: 22px;

    display: flex;

    flex-direction: column;

    flex: 1;
}

.creator-gallery-project-title {

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.35;

    margin-bottom: 0;
}

.creator-gallery-tags {

    margin-top: 10px;

    margin-bottom: 10px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.creator-gallery-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 10px;

    border-radius: 10px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 700;
}

.creator-gallery-byline {

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 600;

    line-height: 1.5;

    margin-bottom: 4px;
}

.creator-gallery-creator-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 10px;
}

.creator-gallery-creator-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 9px;

    border-radius: 999px;

    background: var(--color-primary-bg);

    color: var(--color-primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.02em;

    line-height: 1.2;
}

.creator-gallery-creator-badge-more {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.creator-gallery-card-footer {

    margin-top: auto;

    padding-top: 16px;

    display: grid;

    gap: 12px;
}

.creator-gallery-product {

    width: 100%;
}

.creator-gallery-product-link {

    width: 100%;

    min-height: 40px;

    padding: 10px 14px;

    border-radius: 12px;

    background: var(--color-surface-alt);

    border: 1px solid var(--color-border-marketing);

    color: var(--color-text);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.45;

    text-align: center;

    text-decoration: none;

    transition: var(--transition-fast);

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;
}

.creator-gallery-product-link-label {

    font-weight: 800;

    color: var(--color-text-muted);

    margin-right: 4px;
}

.creator-gallery-product-link--text {

    cursor: default;
}

.creator-gallery-product-link:hover {

    background: var(--color-border);

    color: var(--color-primary);
}

.creator-gallery-project-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;
}

.creator-gallery-meta-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    border-radius: 12px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 700;
}

.creator-gallery-meta-pill--link {

    color: var(--color-text);

    text-decoration: none;

    transition: var(--transition-fast);
}

.creator-gallery-meta-pill--link:hover {

    background: var(--color-border);

    color: var(--color-primary);
}

.creator-gallery-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    font-size: 15px;

    flex: 1;
}

.creator-gallery-info {

    margin-top: 26px;

    padding-top: 22px;

    border-top:
        1px solid var(--color-border-marketing);
}

.creator-gallery-info-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 14px;
}

.creator-gallery-info-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);
}

.creator-gallery-info-value {

    color: var(--color-text);

    font-weight: 700;

    text-align: right;

    line-height: 1.6;

    font-size: 13px;
}

.creator-gallery-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.creator-gallery-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 1;

    min-height: 42px;

    padding: 11px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: 0.2s ease;
}

.creator-gallery-button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.creator-gallery-button-primary:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.creator-gallery-button-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.creator-gallery-button-secondary:hover {

    background: var(--color-border);
}

.creator-gallery-empty-media {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 700;
}


/* Legacy inline gallery-card styles on production (bare class names) */
.gallery-page .creator-gallery-button-primary,
.page-gallery .creator-gallery-button-primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.gallery-page .creator-gallery-button-primary:hover,
.page-gallery .creator-gallery-button-primary:hover {
    background: var(--color-primary-hover);
}

.gallery-page .creator-gallery-button-secondary,
.page-gallery .creator-gallery-button-secondary {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.gallery-page .creator-gallery-button-secondary:hover,
.page-gallery .creator-gallery-button-secondary:hover {
    background: var(--color-border);
}
/* ----- upload/index.php ----- */

.page-upload.page-wrapper {

    max-width: var(--layout-form-max);

    margin: 0 auto;

    padding: 40px 20px 90px;
}

.page-upload .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    overflow: hidden;

    color: var(--color-surface);

    margin-bottom: 34px;

    position: relative;
}

.page-upload .hero-banner {

    height: 320px;

    background-size: cover;

    background-position: center;

    position: relative;
}

.page-upload .hero-banner::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            var(--primitive-shadow-overlay-light),
            var(--primitive-shadow-overlay-dark)
        );
}

.page-upload .hero-content {

    position: relative;

    z-index: 2;

    padding: 42px;
}

.page-upload .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--color-hero-badge-bg);

    padding: 10px 16px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 18px;
}

.page-upload .hero-title {

    font-size: 44px;

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 18px;
}

.page-upload .hero-description {

    line-height: 1.9;

    color:
        var(--color-white-glass-84);
}

.page-upload .rules-box {

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-hero-badge-bg);

    border-radius: 22px;

    padding: 24px;

    margin-top: 30px;
}

.page-upload .rules-title {

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 12px;
}

.page-upload .rules-content {

    line-height: 1.9;

    color:
        var(--color-white-glass-84);

    white-space: pre-line;
}

.page-upload .form-card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 40px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-upload .section-title {

    font-size: 30px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-upload .helper-text {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 30px;
}

.page-upload .form-group {

    margin-bottom: 24px;
}

.page-upload .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-upload .form-group input, .page-upload .form-group textarea, .page-upload .form-group select {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;
}

.page-upload .form-group textarea {

    min-height: 140px;

    resize: vertical;
}

.page-upload .tag-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(160px, 1fr)
        );

    gap: 12px;
}

.page-upload .tag-item {

    display: flex;

    align-items: center;

    gap: 10px;

    background: var(--color-background);

    border-radius: 14px;

    padding: 12px 14px;
}

.page-upload .tag-item input {

    width: auto;
}

.page-upload .consent-box {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    background: var(--color-background);

    padding: 20px;

    border-radius: 18px;

    margin-top: 30px;

    line-height: 1.8;
}

.page-upload .consent-box input {

    width: auto;

    margin-top: 5px;
}

.page-upload .notice-box {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-800);

    border:
        1px solid var(--primitive-blue-200);

    border-radius: 18px;

    padding: 20px;

    line-height: 1.8;

    margin-bottom: 26px;
}

.page-upload .error-box {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border-radius: 16px;

    padding: 18px;

    margin-bottom: 24px;
}

.page-upload .success-box {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 30px;

    border-radius: 22px;

    line-height: 1.9;

    border:
        1px solid var(--primitive-green-border-light);
}

.page-upload .success-title {

    font-size: 26px;

    font-weight: 900;

    margin-bottom: 14px;
}

.page-upload .submit-button {

    width: 100%;

    margin-top: 34px;

    padding: 18px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-upload .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-upload .hidden {

    display: none;
}

.page-upload .image-upload-hint {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 16px;

    font-size: 14px;
}

.page-upload .image-file-list {

    list-style: none;

    padding: 0;

    margin: 0 0 16px;

    display: grid;

    gap: 10px;
}

.page-upload .image-file-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    background: var(--color-background);

    border-radius: 14px;

    border:
        1px solid var(--color-border-marketing);
}

.page-upload .image-file-thumb {

    width: 48px;

    height: 48px;

    object-fit: cover;

    border-radius: 10px;

    flex-shrink: 0;

    background: var(--color-border);
}

.page-upload .image-file-name {

    flex: 1;

    font-weight: 600;

    color: var(--color-text-muted);

    font-size: 14px;

    word-break: break-all;
}

.page-upload .image-upload-toolbar {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}

.page-upload .image-count-label {

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;
}

.page-upload .add-image-btn, .page-upload .pick-video-btn {

    padding: 12px 18px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    color: var(--color-text);

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-upload .add-image-btn:hover, .page-upload .pick-video-btn:hover {

    background: var(--color-background);

    border-color: var(--color-text-placeholder);
}

.page-upload .add-image-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;
}

.page-upload .remove-image-btn {

    padding: 8px 12px;

    border: none;

    border-radius: 10px;

    background: var(--color-danger-bg);

    color: var(--color-danger);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    flex-shrink: 0;
}

.page-upload .remove-image-btn:hover {

    background: var(--primitive-red-100);
}

.page-upload .video-file-label {

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;
}

@media (max-width: 768px) {.page-upload .hero-title {

        font-size: 36px;
    }

    .page-upload .hero-content {

        padding: 30px;
    }

    .page-upload .form-card {

        padding: 28px;
    }}

/* ----- upload/view.php ----- */
/* Shares gallery-view layout/classes; account-only additions below. */

.page-upload-view.gallery-view-page {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 28px 24px 90px;

    box-sizing: border-box;
}

.page-upload-view .upload-view-badges {

    align-items: center;
}

.page-upload-view .upload-view-badges .upload-status {

    margin-bottom: 0;
}

.page-upload-view .gallery-view-context {

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 14px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    color: var(--color-text-muted);
}

.page-upload-view .gallery-view-context a {

    color: var(--color-text);

    text-decoration: none;
}

.page-upload-view .gallery-view-context a:hover {

    text-decoration: underline;
}

.page-upload-view .gallery-view-review-notes {

    margin-bottom: 18px;

    padding: 14px 16px;

    border-radius: 14px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.page-upload-view .gallery-view-review-notes-title {

    margin: 0 0 8px;

    font-size: 14px;

    font-weight: 800;

    color: var(--color-text);
}

.page-upload-view .gallery-view-review-notes p {

    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

@media (max-width: 768px) {.page-upload-view.gallery-view-page {

        padding-left: 16px;

        padding-right: 16px;
    }}

/* ----- upload/success.php ----- */

.page-upload-success.upload-success-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-upload-success .upload-success-header {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    margin-bottom: 32px;

    flex-wrap: wrap;
}

.page-upload-success .upload-success-icon {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    font-weight: 900;

    flex-shrink: 0;
}

.page-upload-success .upload-success-header-main {

    flex: 1;

    min-width: 0;
}

.page-upload-success .upload-success-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 12px;

    line-height: 1.15;
}

.page-upload-success .upload-success-lead {

    margin: 0 0 12px;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 16px;

    max-width: 640px;
}

.page-upload-success .upload-success-summary {

    margin: 0 0 18px;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 15px;
}

.page-upload-success .upload-success-summary a {

    color: var(--color-text);

    font-weight: 700;

    text-decoration: none;
}

.page-upload-success .upload-success-summary a:hover {

    text-decoration: underline;
}

.page-upload-success .upload-success-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-upload-success .upload-success-layout {

    display: grid;

    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}

.page-upload-success .upload-success-section-title {

    font-size: 20px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0 0 16px;
}

.page-upload-success .upload-success-media-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 18px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-upload-success .upload-success-media-title {

    margin: 0 0 14px;

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);
}

.page-upload-success .upload-success-next-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 20px;

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-upload-success .upload-success-next-card p {

    margin: 0 0 14px;

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 15px;
}

.page-upload-success .upload-success-next-card p:last-child {

    margin-bottom: 0;
}

.page-upload-success .upload-success-next-card a {

    color: var(--color-text);

    font-weight: 700;
}

@media (max-width: 960px) {.page-upload-success .upload-success-layout {

        grid-template-columns: 1fr;
    }}

@media (max-width: 768px) {.page-upload-success.upload-success-container {

        padding-left: 16px;

        padding-right: 16px;
    }

    .page-upload-success .upload-success-title {

        font-size: 30px;
    }}

.page-upload .project-locked-field,
.page-register .project-locked-field {

    padding: 14px 16px;

    border-radius: 12px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    font-weight: 700;

    color: var(--color-text);
}

.page-upload .form-help,
.page-register .form-help {

    margin: 10px 0 0;

    font-size: 13px;

    line-height: 1.6;

    color: var(--color-text-muted);
}

/* ===== END pages/uploads.css ===== */

/* ===== BEGIN pages/rewards.css ===== */

/*
|--------------------------------------------------------------------------
| Page: rewards — Wave 5
|--------------------------------------------------------------------------
*/

/* Intentionally empty in Wave 0. */

/* ===== END pages/rewards.css ===== */

/* ===== BEGIN pages/reward-center.css ===== */

/*
|--------------------------------------------------------------------------
| Page: reward-center — M9 Wave 3
|--------------------------------------------------------------------------
*/

.page-reward-center .uploads-header-subtitle a {

    color: var(--color-primary);

    font-weight: 700;

    text-decoration: underline;
}

.reward-hub-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 28px;

    padding-bottom: 4px;

    border-bottom: 1px solid var(--color-border);
}

.reward-hub-tab {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 999px;

    border: 1px solid var(--color-border);

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);

    background: var(--color-surface);

    text-decoration: none;

    transition:
        color 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.reward-hub-tab:hover {

    color: var(--color-text);
}

.reward-hub-tab.is-active {

    background: var(--color-text);

    color: var(--color-surface);

    border-color: var(--color-text);
}

.reward-hub-tab__count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 22px;

    padding: 2px 8px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.2;

    color: var(--color-text-muted);

    background: var(--color-background);
}

.reward-hub-tab.is-active .reward-hub-tab__count {

    color: var(--color-text);

    background: var(--color-surface);
}

.reward-center-play-panel {

    margin-bottom: 36px;
}

.reward-center-play-panel__toolbar {

    margin-bottom: 16px;
}

.reward-center-back-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-weight: 700;

    color: var(--color-primary);

    text-decoration: none;
}

.reward-center-back-link:hover {

    text-decoration: underline;
}

.reward-center-section {

    margin-bottom: 40px;

    padding: 28px;

    border-radius: 20px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
}

.reward-center-section--muted {

    background: var(--color-background);
}

.reward-center-section__header {

    margin-bottom: 22px;
}

.reward-center-section__header h2 {

    margin: 0 0 8px;

    font-size: 24px;

    font-weight: 800;

    color: var(--color-text);
}

.reward-center-section__header p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.reward-center-section__empty {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.reward-center-grant-grid {

    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );

    gap: 18px;
}

.reward-center-grant-card {

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-height: 100%;

    padding: 20px;

    border-radius: 18px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);

    box-shadow: var(--shadow-card-sm, 0 8px 24px rgba(0, 0, 0, 0.04));
}

.reward-center-section--muted .reward-center-grant-card {

    background: var(--color-surface);
}

.reward-center-grant-card__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    flex-wrap: wrap;
}

.reward-center-grant-card__badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    background: var(--color-background);

    color: var(--color-text-muted);
}

.reward-center-grant-card--pending_play .reward-center-grant-card__badge,
.reward-center-grant-card--in_progress .reward-center-grant-card__badge {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800);
}

.reward-center-grant-card--completed .reward-center-grant-card__badge {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-600);
}

.reward-center-grant-card--expired .reward-center-grant-card__badge,
.reward-center-grant-card--forfeited .reward-center-grant-card__badge {

    background: var(--color-danger-bg);

    color: var(--primitive-red-700);
}

.reward-center-grant-card--pending_approval .reward-center-grant-card__badge {

    background: var(--primitive-amber-100);

    color: var(--primitive-amber-600);
}

.reward-center-grant-card__expiry {

    font-size: 12px;

    font-weight: 700;

    color: var(--primitive-amber-600);
}

.reward-center-grant-card__title {

    margin: 0;

    font-size: 20px;

    font-weight: 800;

    color: var(--color-text);
}

.reward-center-grant-card__context {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.reward-center-grant-card__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    font-size: 14px;
}

.reward-center-grant-card__spins {

    font-weight: 800;

    color: var(--color-primary);
}

.reward-center-grant-card__date {

    color: var(--color-text-muted);
}

.reward-center-grant-card__prize {

    padding: 14px;

    border-radius: 14px;

    background: var(--color-background);

    border: 1px solid var(--color-border);
}

.reward-center-grant-card__prize-label {

    display: block;

    margin-bottom: 4px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--color-text-muted);
}

.reward-center-grant-card__prize strong {

    display: block;

    font-size: 17px;

    color: var(--color-text);
}

.reward-center-grant-card__conditions {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid var(--color-border);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.45;

    color: var(--color-text-muted);
}

.reward-center-grant-card__prize--legendary {

    border-color: rgba(212, 175, 55, 0.45);

    background: linear-gradient(
        160deg,
        rgba(255, 248, 220, 0.45),
        var(--color-background)
    );
}

.reward-center-grant-card__prize--epic {

    border-color: rgba(251, 191, 36, 0.35);
}

.reward-center-grant-card__code {

    display: inline-block;

    margin-top: 10px;

    padding: 8px 10px;

    border-radius: 8px;

    background: var(--color-surface);

    border: 1px dashed var(--color-border);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.08em;
}

.reward-center-grant-card__actions {

    margin-top: auto;

    padding-top: 4px;
}

.reward-center-grant-card__play {

    width: 100%;

    justify-content: center;

    text-align: center;
}

.reward-center-grant-card__waiting {

    display: block;

    font-size: 14px;

    line-height: 1.6;

    color: var(--color-text-muted);
}

.reward-center-empty__actions {

    display: flex;

    gap: 12px;

    justify-content: center;

    flex-wrap: wrap;

    margin-top: 20px;
}

.reward-center-alert {

    margin-bottom: 24px;
}

@media (max-width: 640px) {

    .reward-center-section {

        padding: 20px 16px;
    }

    .reward-center-grant-grid {

        grid-template-columns: 1fr;
    }

    .reward-hub-tab {

        font-size: 13px;

        padding: 8px 12px;
    }
}

/* ===== END pages/reward-center.css ===== */

/* ===== BEGIN pages/support.css ===== */

/*
|--------------------------------------------------------------------------
| Page: support — Wave 5 (support/index.php)
|--------------------------------------------------------------------------
| Scoped under .page-support.
|--------------------------------------------------------------------------
*/

/* ----- support/index.php ----- */

.page-support.page-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 48px 24px 90px;
}

/* ========================================================== */
/* HERO */
/* ========================================================== */

.page-support .hero {

    position: relative;

    overflow: hidden;

    background:
        var(--gradient-surface-hero);

    border-radius: 40px;

    padding: 90px 65px;

    color: var(--color-surface);

    margin-bottom: 60px;
}

.page-support .hero::after {

    content: '';

    position: absolute;

    width: 620px;

    height: 620px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -320px;

    right: -200px;
}

.page-support .hero-content {

    position: relative;

    z-index: 2;

    max-width: var(--layout-form-max);
}

.page-support .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 999px;

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-white-glass-10);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: none;

    margin-bottom: 28px;
}

.page-support .hero-title {

    font-size: 68px;

    line-height: 1.05;

    font-weight: 900;

    margin-bottom: 28px;
}

.page-support .hero-description {

    max-width: 860px;

    line-height: 1.85;

    color:
        var(--color-hero-text-muted);

    margin-bottom: 28px;

    font-size: 18px;
}

.page-support .support-jump-nav {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;
}

.page-support .support-jump-nav a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-white-glass-10);

    color: var(--color-surface);

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.2s ease;
}

.page-support .support-jump-nav a:hover {

    background:
        var(--color-white-glass-14);
}

.page-support .hero-note {

    max-width: 760px;

    margin-bottom: 28px;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.7;

    color:
        var(--color-hero-text-muted);
}

.page-support .hero-actions {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;
}

.page-support .hero-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 28px;

    border-radius: 18px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-support .hero-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-support .hero-primary:hover {

    background: var(--color-surface-alt);

    transform:
        translateY(-2px);
}

.page-support .hero-secondary {

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-white-glass-08);

    color: var(--color-surface);
}

.page-support .hero-secondary:hover {

    background:
        var(--color-white-glass-14);

    transform:
        translateY(-2px);
}

/* ========================================================== */
/* QUICK ACTIONS */
/* ========================================================== */

.page-support .quick-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap: 24px;

    margin-bottom: 80px;
}

.page-support .quick-card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 34px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    transition: 0.2s ease;

    text-decoration: none;
}

.page-support .quick-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px var(--color-shadow-nav-ui);
}

.page-support .quick-icon {

    width: 70px;

    height: 70px;

    border-radius: 22px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    margin-bottom: 24px;
}

.page-support .quick-title {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-support .quick-description {

    color: var(--color-text-muted);

    line-height: 1.9;
}

/* ========================================================== */
/* SECTION */
/* ========================================================== */

.page-support .section {

    margin-bottom: 90px;
}

.page-support .section-title {

    font-size: 48px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-support .section-description {

    max-width: 900px;

    color: var(--color-text-muted);

    line-height: 1.85;

    margin-bottom: 36px;
}

.page-support .section-description a {

    color: var(--color-accent);

    font-weight: 800;

    text-decoration: none;
}

.page-support .section-description a:hover {

    text-decoration: underline;
}

/* ========================================================== */
/* FAQ */
/* ========================================================== */

.page-support .faq-groups {

    display: grid;

    gap: 48px;
}

.page-support .faq-group-title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 22px;

    scroll-margin-top: 24px;
}

.page-support .faq-grid {

    display: grid;

    gap: 22px;
}

.page-support .faq-item {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-support .faq-question {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-support .faq-answer {

    color: var(--color-text-muted);

    line-height: 1.85;
}

.page-support .faq-answer a {

    color: var(--color-accent);

    font-weight: 800;

    text-decoration: none;
}

.page-support .faq-answer a:hover {

    text-decoration: underline;
}

/* ========================================================== */
/* CONTACT */
/* ========================================================== */

.page-support .contact-section {

    position: relative;

    overflow: hidden;

    background:
        var(--gradient-surface-hero);

    border-radius: 40px;

    padding: 70px 60px;

    color: var(--color-surface);

    scroll-margin-top: 24px;
}

.page-support .contact-section::after {

    content: '';

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -260px;

    right: -160px;
}

.page-support .contact-content {

    position: relative;

    z-index: 2;
}

.page-support .contact-title {

    font-size: 54px;

    font-weight: 900;

    margin-bottom: 24px;
}

.page-support .contact-description {

    max-width: 900px;

    color:
        var(--color-hero-text-muted);

    line-height: 2;

    margin-bottom: 40px;
}

.page-support .contact-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap: 24px;
}

.page-support .contact-card {

    background:
        var(--color-white-glass-06);

    border:
        1px solid var(--color-white-glass-08);

    border-radius: 26px;

    padding: 28px;
}

.page-support .contact-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color:
        var(--color-white-glass-64);

    font-weight: 900;

    margin-bottom: 12px;
}

.page-support .contact-value {

    font-size: 20px;

    font-weight: 800;

    line-height: 1.8;
}

.page-support .contact-value a {

    color: var(--color-surface);

    text-decoration: none;
}

.page-support .contact-value a:hover {

    text-decoration: underline;
}

.page-support .contact-card-note {

    margin-top: 14px;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.7;

    color:
        var(--color-white-glass-64);
}

.page-support #registration,
.page-support #uploads,
.page-support #campaigns,
.page-support #account {

    scroll-margin-top: 24px;
}

/* ========================================================== */
/* RESPONSIVE */
/* ========================================================== */

@media (max-width: 768px) {.page-support .hero {

        padding: 60px 30px;
    }

    .page-support .hero-title {

        font-size: 46px;
    }

    .page-support .hero-actions {

        flex-direction: column;

        align-items: stretch;
    }

    .page-support .hero-actions a {

        width: 100%;
    }

    .page-support .support-jump-nav {

        gap: 8px;
    }

    .page-support .faq-group-title {

        font-size: 24px;
    }

    .page-support .section-title {

        font-size: 38px;
    }

    .page-support .contact-section {

        padding: 50px 28px;
    }

    .page-support .contact-title {

        font-size: 40px;
    }}

/* ===== END pages/support.css ===== */

/* ===== BEGIN pages/admin.css ===== */

/*
|--------------------------------------------------------------------------
| Page: admin — Wave 6 (admin core)
|--------------------------------------------------------------------------
| Scoped per page (.page-admin-*). Compound selectors when scope + layout
| class share one element (.page-admin-campaigns-index.page-container).
|--------------------------------------------------------------------------
*/

/* ----- admin/login.php ----- */

.page-admin-login .page-admin-login {

    margin: 0;

    padding: 0;

    background:
        var(--gradient-admin-login-bg);

    min-height: 100vh;

    font-family:
        Inter,
        Arial,
        sans-serif;

}

.page-admin-login.admin-login-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 20px;

    box-sizing: border-box;
}

.page-admin-login .login-wrapper {

    width: 100%;

    max-width: 1180px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(420px, 0.9fr);

    background: var(--color-surface);

    border-radius: 36px;

    overflow: hidden;

    box-shadow:
        0 24px 60px var(--color-shadow-nav-ui);
}

.page-admin-login .login-hero {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    padding: 70px;

    position: relative;

    overflow: hidden;
}

.page-admin-login .login-hero::after {

    content: '';

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -220px;

    right: -180px;
}

.page-admin-login .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border-radius: 999px;

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-hero-badge-bg);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 28px;

    position: relative;

    z-index: 2;
}

.page-admin-login .hero-title {

    font-size: 54px;

    font-weight: 800;

    line-height: 1.2;

    margin-bottom: 24px;

    position: relative;

    z-index: 2;
}

.page-admin-login .hero-description {

    line-height: 2;

    color:
        var(--color-white-glass-78);

    max-width: 560px;

    position: relative;

    z-index: 2;
}

.page-admin-login .hero-features {

    margin-top: 42px;

    display: grid;

    gap: 18px;

    position: relative;

    z-index: 2;
}

.page-admin-login .hero-feature {

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        var(--color-white-glass-86);
}

.page-admin-login .feature-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--color-surface);

    flex-shrink: 0;
}

.page-admin-login .login-panel {

    padding: 70px 54px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.page-admin-login .panel-title {

    font-size: 38px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-admin-login .panel-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 34px;
}

.page-admin-login .alert {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 16px 18px;

    border-radius: 16px;

    margin-bottom: 24px;

    line-height: 1.7;
}

.page-admin-login .form-group {

    margin-bottom: 24px;
}

.page-admin-login .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-login .form-group input {

    width: 100%;

    padding: 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 16px;

    font-size: 15px;

    transition: 0.2s ease;

    box-sizing: border-box;
}

.page-admin-login .form-group input:focus {

    outline: none;

    border-color: var(--color-text);

    box-shadow:
        0 0 0 4px var(--color-focus-ring);
}

.page-admin-login .login-button {

    width: 100%;

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 18px;

    border-radius: 16px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-login .login-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-login .login-footer {

    margin-top: 28px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.8;

    text-align: center;
}

@media (max-width: var(--layout-form-max)) {.page-admin-login .login-wrapper {

        grid-template-columns: 1fr;
    }

    .page-admin-login .login-hero {

        padding: 50px 40px;
    }

    .page-admin-login .login-panel {

        padding: 50px 40px;
    }

    .page-admin-login .hero-title {

        font-size: 42px;
    }}

/* ----- admin/index.php ----- */

.page-admin-dashboard.dashboard-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding: 40px 24px 90px;

    box-sizing: border-box;
}

.page-admin-dashboard .dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 24px;

    margin-bottom: 28px;

    flex-wrap: wrap;
}

.page-admin-dashboard .dashboard-header-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin: 0 0 8px;
}

.page-admin-dashboard .dashboard-header-subtitle {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-dashboard .dashboard-header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-dashboard .dashboard-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;
}

.page-admin-dashboard .dashboard-btn-primary {

    background: var(--color-text);

    color: var(--color-surface);
}

.page-admin-dashboard .dashboard-btn-primary:hover {

    opacity: 0.92;
}

.page-admin-dashboard .dashboard-btn-secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-dashboard .dashboard-btn-secondary:hover {

    background: var(--color-surface-alt);
}

.page-admin-dashboard .dashboard-caught-up {

    background: var(--color-surface);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 20px 24px;

    margin-bottom: 28px;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-dashboard .priority-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 20px;

    margin-bottom: 36px;
}

.page-admin-dashboard .priority-card {

    border-radius: 24px;

    padding: 26px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;
}

.page-admin-dashboard .priority-warning {

    background:
        var(--gradient-admin-warning);
}

.page-admin-dashboard .priority-danger {

    background:
        linear-gradient(
            135deg,
            var(--primitive-red-500),
            var(--color-danger)
        );
}

.page-admin-dashboard .priority-info {

    background:
        linear-gradient(
            135deg,
            var(--color-info),
            var(--primitive-blue-800)
        );
}

.page-admin-dashboard .priority-count {

    font-size: 46px;

    font-weight: 900;

    margin-bottom: 12px;
}

.page-admin-dashboard .priority-title {

    font-size: 18px;

    font-weight: 800;

    line-height: 1.5;
}

.page-admin-dashboard .priority-link {

    display: inline-flex;

    margin-top: 18px;

    color: var(--color-surface);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-dashboard .stats-section {

    margin-bottom: 32px;
}

.page-admin-dashboard .stats-section-compact {

    margin-bottom: 28px;
}

.page-admin-dashboard .section-heading {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-admin-dashboard .section-heading-compact {

    font-size: 22px;

    font-weight: 800;

    margin: 0 0 18px;
}

.page-admin-dashboard .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 22px;
}

.page-admin-dashboard .stat-card {

    background: var(--color-surface);

    border-radius: 20px;

    padding: 22px 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 16px var(--color-shadow-sm);
}

.page-admin-dashboard .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-admin-dashboard .stat-number {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-dashboard .layout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(420px, 1fr);

    gap: 32px;
}

.page-admin-dashboard .card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 20px var(--color-shadow-sm);

    margin-bottom: 0;
}

.page-admin-dashboard .card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    flex-wrap: wrap;
}

.page-admin-dashboard .card-title {

    font-size: 22px;

    font-weight: 800;

    color: var(--color-text);

    margin: 0;
}

.page-admin-dashboard .card-link {

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}

.page-admin-dashboard .card-link:hover {

    color: var(--color-text);
}

.page-admin-dashboard .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 22px;
}

.page-admin-dashboard .upload-card {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    overflow: hidden;

    background: var(--color-surface);
}

.page-admin-dashboard .upload-media {

    height: auto;

    overflow: visible;

    background: var(--color-surface-alt);
}

.page-admin-dashboard .upload-media .upload-media-viewer--compact .umv-main {

    height: 180px;

    border-radius: 0;
}

.page-admin-dashboard .upload-media .upload-media-viewer--compact .umv-main video {

    object-fit: contain;
}

.page-admin-dashboard .upload-media .upload-media-viewer--compact .umv-toolbar {

    margin-top: 4px;

    padding: 0 10px;
}

.page-admin-dashboard .upload-media .upload-media-viewer--compact .umv-count {

    font-size: 12px;
}

.page-admin-dashboard .upload-media .upload-media-viewer--compact .umv-thumbs {

    padding: 0 10px 10px;
}

.page-admin-dashboard .upload-media .upload-media-card-placeholder {

    width: 100%;

    height: 100%;

    min-height: 240px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 700;

    font-size: 14px;
}

.page-admin-dashboard .upload-content {

    padding: 20px;
}

.page-admin-dashboard .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 12px;
}

.page-admin-dashboard .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-dashboard .badge-approved {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-dashboard .badge-rejected {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-dashboard .badge-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-dashboard .upload-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    line-height: 1.6;
}

.page-admin-dashboard .upload-meta {

    margin-top: 14px;

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-dashboard .action-link {

    display: inline-flex;

    margin-top: 18px;

    text-decoration: none;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-dashboard .list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.page-admin-dashboard .list-item {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 20px;
}

.page-admin-dashboard .list-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-dashboard .list-meta {

    margin-top: 12px;

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-dashboard .empty-state {

    color: var(--color-text-muted);

    line-height: 1.9;
}

@media (max-width: 1200px) {.page-admin-dashboard .layout-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/campaigns/index.php ----- */

.page-admin-campaigns-index.page-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-admin-campaigns-index .hero {

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    padding: 56px;

    margin-bottom: 38px;
}

.page-admin-campaigns-index .hero::after {

    content: '';

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -260px;

    right: -180px;
}

.page-admin-campaigns-index .hero-title {

    position: relative;

    z-index: 2;

    font-size: 58px;

    font-weight: 900;

    margin-bottom: 18px;
}

.page-admin-campaigns-index .hero-description {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    line-height: 2;

    color:
        var(--color-white-glass-84);

    margin-bottom: 30px;
}

.page-admin-campaigns-index .hero-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.page-admin-campaigns-index .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 24px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-admin-campaigns-index .hero-button-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-campaigns-index .hero-button-primary:hover {

    background: var(--color-surface-alt);
}

.page-admin-campaigns-index .hero-button-secondary {

    background:
        var(--color-white-glass-10);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-14);
}

.page-admin-campaigns-index .hero-button-secondary:hover {

    background:
        var(--color-white-glass-18);
}

.page-admin-campaigns-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 22px;

    margin-bottom: 40px;
}

.page-admin-campaigns-index .stat-card {

    background: var(--color-surface);

    border-radius: 26px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-index .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-admin-campaigns-index .stat-number {

    font-size: 44px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-campaigns-index .section {

    margin-bottom: 50px;
}

.page-admin-campaigns-index .section-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 28px;
}

.page-admin-campaigns-index .campaign-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(430px,1fr)
        );

    gap: 28px;
}

.page-admin-campaigns-index .campaign-card {

    background: var(--color-surface);

    border-radius: 32px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    transition: 0.2s ease;
}

.page-admin-campaigns-index .campaign-card:hover {

    transform:
        translateY(-2px);
}

.page-admin-campaigns-index .banner {

    position: relative;

    height: 240px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-admin-campaigns-index .banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-admin-campaigns-index .banner-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            var(--color-overlay-dark-65),
            var(--color-overlay-dark-10)
        );
}

.page-admin-campaigns-index .banner-badges {

    position: absolute;

    top: 18px;

    left: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    z-index: 4;
}

.page-admin-campaigns-index .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-campaigns-index .badge-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-campaigns-index .badge-draft {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-campaigns-index .badge-judging {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-index .badge-completed {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-campaigns-index .badge-archived {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-index .badge-alert {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-index .badge-warning {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-index .card-content {

    padding: 30px;
}

.page-admin-campaigns-index .card-title {

    font-size: 30px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.3;

    margin-bottom: 14px;
}

.page-admin-campaigns-index .card-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 26px;
}

.page-admin-campaigns-index .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 16px;

    margin-bottom: 26px;
}

.page-admin-campaigns-index .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-admin-campaigns-index .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-campaigns-index .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;
}

.page-admin-campaigns-index .metrics-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 14px;

    margin-bottom: 28px;
}

.page-admin-campaigns-index .metric {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;

    text-align: center;
}

.page-admin-campaigns-index .metric-number {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-campaigns-index .metric-label {

    margin-top: 6px;

    color: var(--color-text-muted);

    font-size: 12px;
}

.page-admin-campaigns-index .action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-campaigns-index .inline-form {

    display: inline;

    margin: 0;

}

.page-admin-campaigns-index .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-admin-campaigns-index .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-campaigns-index .action-primary:hover {

    background: var(--color-primary-hover);
}

.page-admin-campaigns-index .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-campaigns-index .action-secondary:hover {

    background: var(--color-border);
}

.page-admin-campaigns-index .action-danger {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border: none;

    cursor: pointer;

    font: inherit;
}

.page-admin-campaigns-index .action-danger:hover {

    background: var(--primitive-red-100);
}

.page-admin-campaigns-index .alert-success {

    background: var(--primitive-green-50);
    color: var(--primitive-green-700);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.page-admin-campaigns-index .alert-error {

    background: var(--color-danger-bg);
    color: var(--primitive-red-900);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.page-admin-campaigns-index .empty-state {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 90px 40px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-index .empty-title {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-campaigns-index .empty-description {

    color: var(--color-text-muted);

    line-height: 2;
}

@media (max-width: 768px) {.page-admin-campaigns-index .hero-title {

        font-size: 42px;
    }

    .page-admin-campaigns-index .meta-grid, .page-admin-campaigns-index .metrics-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/campaigns/create.php ----- */

.page-admin-campaigns-create.page-container {

    max-width: 1380px;

    margin: 0 auto;
}

.page-admin-campaigns-create .hero-card {

    position: relative;

    overflow: hidden;

    border-radius: 36px;

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    padding: 56px;

    margin-bottom: 38px;
}

.page-admin-campaigns-create .hero-card::after {

    content: '';

    position: absolute;

    width: 480px;

    height: 480px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -240px;

    right: -140px;
}

.page-admin-campaigns-create .hero-title {

    font-size: 54px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-admin-campaigns-create .hero-description {

    max-width: var(--layout-form-max);

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-campaigns-create .form-card {

    background: var(--color-surface);

    border-radius: 34px;

    padding: 42px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-create .section {

    margin-bottom: 48px;
}

.page-admin-campaigns-create .section-title {

    font-size: 32px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-campaigns-create .section-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 28px;
}

.page-admin-campaigns-create .form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 24px;
}

.page-admin-campaigns-create .full-width {

    grid-column: 1 / -1;
}

.page-admin-campaigns-create .form-group {

    margin-bottom: 4px;
}

.page-admin-campaigns-create .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-campaigns-create .field-hint {

    margin-top: 8px;

    font-size: 13px;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-campaigns-create .form-group input, .page-admin-campaigns-create .form-group textarea, .page-admin-campaigns-create .form-group select {

    width: 100%;

    padding: 15px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 16px;

    box-sizing: border-box;

    font-size: 15px;

    background: var(--color-surface);
}

.page-admin-campaigns-create .form-group textarea {

    min-height: 150px;

    resize: vertical;
}

.page-admin-campaigns-create .divider {

    height: 1px;

    background: var(--color-border-marketing);

    margin: 42px 0;
}

.page-admin-campaigns-create .checkbox-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 18px;
}

.page-admin-campaigns-create .checkbox-card {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 20px;

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    background: var(--color-background);
}

.page-admin-campaigns-create .checkbox-card input {

    margin-top: 4px;
}

.page-admin-campaigns-create .checkbox-content-title {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-campaigns-create .checkbox-content-description {

    color: var(--color-text-muted);

    line-height: 1.7;

    font-size: 14px;
}

.page-admin-campaigns-create .alert {

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 28px;
}

.page-admin-campaigns-create .alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-campaigns-create .submit-button {

    width: 100%;

    padding: 20px;

    border: none;

    border-radius: 18px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-campaigns-create .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-campaigns-create .notice-box {

    background: var(--primitive-blue-50);

    border:
        1px solid var(--primitive-blue-200);

    color: var(--primitive-blue-800);

    border-radius: 20px;

    padding: 24px;

    line-height: 1.9;

    margin-bottom: 42px;
}

@media (max-width: 900px) {.page-admin-campaigns-create .form-grid, .page-admin-campaigns-create .checkbox-grid {

        grid-template-columns: 1fr;
    }

    .page-admin-campaigns-create .hero-title {

        font-size: 40px;
    }}

/* ----- admin/campaigns/view.php ----- */

.page-admin-campaigns-view.page-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-admin-campaigns-view .hero {

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    margin-bottom: 36px;
}

.page-admin-campaigns-view .hero-banner {

    height: 320px;

    overflow: hidden;

    background: var(--primitive-slate-900);
}

.page-admin-campaigns-view .hero-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.35;
}

.page-admin-campaigns-view .hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            var(--color-overlay-dark-82),
            var(--color-overlay-dark-20)
        );
}

.page-admin-campaigns-view .hero-content {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 48px;

    z-index: 5;
}

.page-admin-campaigns-view .hero-title {

    font-size: 58px;

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 18px;
}

.page-admin-campaigns-view .hero-description {

    max-width: var(--layout-form-max);

    line-height: 2;

    color:
        var(--color-white-glass-84);

    margin-bottom: 26px;
}

.page-admin-campaigns-view .badge-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;
}

.page-admin-campaigns-view .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-admin-campaigns-view .badge-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-campaigns-view .badge-draft {

    background: var(--color-border);

    color: var(--color-text-muted);
}

.page-admin-campaigns-view .badge-judging {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-view .badge-completed {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-campaigns-view .badge-ended {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-view .action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.page-admin-campaigns-view .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 22px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-admin-campaigns-view .action-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-campaigns-view .action-primary:hover {

    background: var(--color-surface-alt);
}

.page-admin-campaigns-view .action-secondary {

    background:
        var(--color-white-glass-10);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-14);
}

.page-admin-campaigns-view .action-secondary:hover {

    background:
        var(--color-white-glass-18);
}

.page-admin-campaigns-view .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 22px;

    margin-bottom: 40px;
}

.page-admin-campaigns-view .stat-card {

    background: var(--color-surface);

    border-radius: 26px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-view .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-admin-campaigns-view .stat-number {

    font-size: 44px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-campaigns-view .layout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(420px,1fr);

    gap: 32px;
}

.page-admin-campaigns-view .card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    margin-bottom: 32px;
}

.page-admin-campaigns-view .card-title {

    font-size: 32px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 26px;
}

.page-admin-campaigns-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 18px;
}

.page-admin-campaigns-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 18px;
}

.page-admin-campaigns-view .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-campaigns-view .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;
}

.page-admin-campaigns-view .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(360px,1fr)
        );

    gap: 26px;
}

.page-admin-campaigns-view .upload-card {

    background: var(--color-surface);

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-view .upload-media {

    background: var(--color-surface-alt);

    overflow: hidden;
}

.page-admin-campaigns-view .upload-content {

    padding: 28px;
}

.page-admin-campaigns-view .upload-title {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.4;

    margin-bottom: 12px;
}

.page-admin-campaigns-view .upload-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 24px;
}

.page-admin-campaigns-view .creator-name {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-campaigns-view .result-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    margin-right: 10px;

    margin-bottom: 10px;
}

.page-admin-campaigns-view .result-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-view .result-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-campaigns-view .result-notwinner {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-view .result-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-campaigns-view .result-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-campaigns-view .action-link {

    display: inline-flex;

    margin-top: 18px;

    text-decoration: none;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-campaigns-view .list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.page-admin-campaigns-view .list-item {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 20px;
}

.page-admin-campaigns-view .list-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-campaigns-view .list-meta {

    margin-top: 12px;

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-campaigns-view .empty-state {

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-admin-campaigns-view .notice-box {

    background: var(--primitive-blue-50);

    border:
        1px solid var(--primitive-blue-200);

    color: var(--primitive-blue-800);

    border-radius: 20px;

    padding: 24px;

    line-height: 1.9;

    margin-bottom: 32px;
}

@media (max-width: 1200px) {.page-admin-campaigns-view .layout-grid {

        grid-template-columns: 1fr;
    }}

@media (max-width: 768px) {.page-admin-campaigns-view .hero-title {

        font-size: 42px;
    }

    .page-admin-campaigns-view .meta-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/campaigns/winners.php ----- */

.page-admin-campaigns-winners.page-container {

    max-width: 1700px;

    margin: 0 auto;
}

.page-admin-campaigns-winners .hero {

    position: relative;

    overflow: hidden;

    border-radius: 36px;

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    padding: 56px;

    margin-bottom: 40px;
}

.page-admin-campaigns-winners .hero::after {

    content: '';

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -260px;

    right: -180px;
}

.page-admin-campaigns-winners .hero-title {

    position: relative;

    z-index: 2;

    font-size: 56px;

    font-weight: 900;

    margin-bottom: 18px;
}

.page-admin-campaigns-winners .hero-description {

    position: relative;

    z-index: 2;

    max-width: 1000px;

    line-height: 2;

    color:
        var(--color-white-glass-84);

    margin-bottom: 28px;
}

.page-admin-campaigns-winners .hero-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.page-admin-campaigns-winners .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 22px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;
}

.page-admin-campaigns-winners .hero-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-campaigns-winners .hero-secondary {

    background:
        var(--color-white-glass-10);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-14);
}

.page-admin-campaigns-winners .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 24px;

    margin-bottom: 40px;
}

.page-admin-campaigns-winners .stat-card {

    background: var(--color-surface);

    border-radius: 26px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-winners .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 800;

    margin-bottom: 10px;
}

.page-admin-campaigns-winners .stat-number {

    font-size: 46px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-campaigns-winners .alert {

    border-radius: 20px;

    padding: 20px;

    margin-bottom: 30px;

    line-height: 1.8;
}

.page-admin-campaigns-winners .alert-success {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);

    border:
        1px solid var(--primitive-green-300);
}

.page-admin-campaigns-winners .alert-error {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-campaigns-winners .section {

    margin-bottom: 50px;
}

.page-admin-campaigns-winners .section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}

.page-admin-campaigns-winners .section-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-campaigns-winners .section-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-campaigns-winners .section-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    border: none;

    cursor: pointer;

    font-weight: 800;
}

.page-admin-campaigns-winners .section-button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-campaigns-winners .section-button-warning {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-winners .grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(420px,1fr)
        );

    gap: 28px;
}

.page-admin-campaigns-winners .card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-campaigns-winners .media {

    position: relative;

    height: 320px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-admin-campaigns-winners .media img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-admin-campaigns-winners .badges {

    position: absolute;

    top: 18px;

    left: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-campaigns-winners .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-campaigns-winners .badge-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-campaigns-winners .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-campaigns-winners .badge-notwinner {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-winners .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-campaigns-winners .badge-reward {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-campaigns-winners .content {

    padding: 30px;
}

.page-admin-campaigns-winners .title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.4;

    margin-bottom: 12px;
}

.page-admin-campaigns-winners .creator {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-campaigns-winners .meta {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 24px;
}

.page-admin-campaigns-winners .description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 26px;
}

.page-admin-campaigns-winners .actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-campaigns-winners .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 18px;

    border-radius: 14px;

    border: none;

    cursor: pointer;

    font-weight: 800;

    text-decoration: none;
}

.page-admin-campaigns-winners .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-campaigns-winners .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-campaigns-winners .action-danger {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-campaigns-winners .empty-state {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 80px 40px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-campaigns-winners .empty-title {

    font-size: 36px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 16px;
}

.page-admin-campaigns-winners .empty-description {

    color: var(--color-text-muted);

    line-height: 2;
}

.page-admin-campaigns-winners .inline-form {

    display: inline;
}

/* ----- admin/uploads/index.php ----- */

.page-admin-uploads-index.page-container {

    max-width: 1580px;

    margin: 0 auto;
}

.page-admin-uploads-index .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 52px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 36px;
}

.page-admin-uploads-index .hero-card::after {

    content: '';

    position: absolute;

    width: 460px;

    height: 460px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -200px;

    right: -140px;
}

.page-admin-uploads-index .hero-title {

    font-size: 48px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-admin-uploads-index .hero-description {

    max-width: 920px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-uploads-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 22px;

    margin-bottom: 34px;
}

.page-admin-uploads-index .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);
}

.page-admin-uploads-index .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--color-text-muted);

    margin-bottom: 10px;

    letter-spacing: 0.05em;
}

.page-admin-uploads-index .stat-value {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-uploads-index .filter-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);

    margin-bottom: 36px;
}

.page-admin-uploads-index .filter-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

    align-items: end;
}

.page-admin-uploads-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-uploads-index .form-group label {

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-uploads-index .form-group input, .page-admin-uploads-index .form-group select {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);
}

.page-admin-uploads-index .filter-button {

    padding: 15px 18px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;
}

.page-admin-uploads-index .grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(400px, 1fr)
        );

    gap: 28px;
}

.page-admin-uploads-index .upload-card {

    background: var(--color-surface);

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    display: flex;

    flex-direction: column;
}

.page-admin-uploads-index .media-preview {

    width: 100%;

    background: var(--color-surface-alt);

    position: relative;
}

.page-admin-uploads-index .queue-media-viewer {

    padding:
        58px 14px 14px;

    background: var(--color-surface-alt);
}

.page-admin-uploads-index .queue-media-viewer
.upload-media-viewer--compact
.umv-main {

    height: 200px;

    border-radius: 14px;
}

.page-admin-uploads-index .queue-media-viewer
.umv-toolbar {

    margin-top: 4px;
}

.page-admin-uploads-index .queue-media-viewer
.umv-count {

    font-size: 12px;
}

.page-admin-uploads-index .media-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-muted);

    font-weight: 800;
}

.page-admin-uploads-index .badge-row {

    position: absolute;

    top: 16px;

    left: 16px;

    right: 16px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    z-index: 2;
}

.page-admin-uploads-index .badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-uploads-index .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-uploads-index .badge-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-uploads-index .badge-rejected {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-uploads-index .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-uploads-index .badge-campaign {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-uploads-index .badge-community {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-uploads-index .badge-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-uploads-index .badge-notwinner {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-uploads-index .badge-expired {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-uploads-index .badge-review {

    background: var(--primitive-lime-100);

    color: var(--primitive-lime-900);
}

.page-admin-uploads-index .card-content {

    padding: 28px;
}

.page-admin-uploads-index .customer-name {

    font-size: 26px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 8px;
}

.page-admin-uploads-index .customer-email {

    color: var(--color-text-muted);

    margin-bottom: 20px;
}

.page-admin-uploads-index .caption {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 24px;
}

.page-admin-uploads-index .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 24px;
}

.page-admin-uploads-index .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 14px;
}

.page-admin-uploads-index .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-uploads-index .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.6;
}

.page-admin-uploads-index .action-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}

.page-admin-uploads-index .action-link {

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-uploads-index .action-link:hover {

    text-decoration: underline;
}

.page-admin-uploads-index .primary-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-uploads-index .primary-link:hover {

    background: var(--color-primary-hover);
}

.page-admin-uploads-index .empty-state {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 90px 30px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);
}

.page-admin-uploads-index .empty-title {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-uploads-index .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-admin-uploads-index .notice-box {

    border-radius: 16px;

    padding: 16px 20px;

    margin-bottom: 24px;

    font-weight: 700;

    line-height: 1.7;
}

.page-admin-uploads-index .notice-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-border-light);
}

.page-admin-uploads-index .notice-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-uploads-index .notice-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);

    font-weight: 400;
}

.page-admin-uploads-index .moderation-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

    padding-top: 16px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-admin-uploads-index .moderation-form {

    display: inline;
}

.page-admin-uploads-index .moderation-btn {

    padding: 10px 16px;

    border: none;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.15s ease;
}

.page-admin-uploads-index .moderation-btn-approve {

    background: var(--primitive-green-900);

    color: var(--color-surface);
}

.page-admin-uploads-index .moderation-btn-approve:hover {

    background: var(--primitive-green-950);
}

.page-admin-uploads-index .moderation-btn-reject {

    background: var(--primitive-red-900);

    color: var(--color-surface);
}

.page-admin-uploads-index .moderation-btn-reject:hover {

    background: var(--primitive-red-900);
}

.page-admin-uploads-index .moderation-btn-review {

    display: inline-flex;

    align-items: center;

    padding: 10px 16px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    background: var(--color-surface);

    color: var(--color-text);

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;
}

.page-admin-uploads-index .moderation-btn-review:hover {

    background: var(--color-background);
}

.page-admin-uploads-index .bulk-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

    background: var(--color-surface);

    border-radius: 24px;

    padding: 20px 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);

    margin-bottom: 28px;

    position: sticky;

    top: 16px;

    z-index: 10;
}

.page-admin-uploads-index .bulk-toolbar-left {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;
}

.page-admin-uploads-index .bulk-select-all {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-weight: 700;

    color: var(--color-text);

    cursor: pointer;
}

.page-admin-uploads-index .bulk-select-all input {

    width: 18px;

    height: 18px;

    cursor: pointer;
}

.page-admin-uploads-index .bulk-selected-count {

    font-size: 14px;

    font-weight: 700;

    color: var(--color-text-muted);
}

.page-admin-uploads-index .bulk-toolbar-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-uploads-index .bulk-toolbar-actions button:disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

.page-admin-uploads-index .upload-card-select {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    padding-bottom: 14px;

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-uploads-index .upload-card-select label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 800;

    color: var(--color-text-muted);

    cursor: pointer;
}

.page-admin-uploads-index .upload-card-select input {

    width: 18px;

    height: 18px;

    cursor: pointer;
}

@media (max-width: 768px) {.page-admin-uploads-index .hero-card {

        padding: 36px 28px;
    }

    .page-admin-uploads-index .hero-title {

        font-size: 38px;
    }}

/* ----- admin/uploads/view.php ----- */

.page-admin-uploads-view.page-container {

    max-width: 1450px;

    margin: 0 auto;
}

.page-admin-uploads-view .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 44px;

    color: var(--color-surface);

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-uploads-view .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -180px;

    right: -120px;
}

.page-admin-uploads-view .hero-title {

    font-size: 42px;

    font-weight: 900;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-uploads-view .hero-description {

    max-width: 920px;

    line-height: 1.9;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-uploads-view .layout-grid {

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 32px;

    align-items: start;
}

.page-admin-uploads-view .card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-uploads-view .section-title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-admin-uploads-view .badges {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

.page-admin-uploads-view .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-admin-uploads-view .badge-campaign {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-uploads-view .badge-general {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-uploads-view .badge-winner {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-uploads-view .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-uploads-view .alert {

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 26px;

    line-height: 1.8;
}

.page-admin-uploads-view .alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-uploads-view .alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-uploads-view .alert-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);
}

.page-admin-uploads-view .media-preview {

    border-radius: 24px;

    overflow: hidden;

    background: var(--color-surface-alt);

    margin-bottom: 28px;
}

.page-admin-uploads-view .media-preview img, .page-admin-uploads-view .media-preview video {

    width: 100%;

    display: block;
}

.page-admin-uploads-view .external-preview {

    padding: 80px 20px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-uploads-view .gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(140px, 1fr)
        );

    gap: 16px;

    margin-bottom: 30px;
}

.page-admin-uploads-view .gallery-item {

    border-radius: 18px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-admin-uploads-view .gallery-item img {

    width: 100%;

    height: 130px;

    object-fit: cover;

    display: block;
}

.page-admin-uploads-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;
}

.page-admin-uploads-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-admin-uploads-view .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    font-weight: 800;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-uploads-view .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.8;
}

.page-admin-uploads-view .caption-box {

    margin-top: 26px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 22px;

    line-height: 1.9;

    color: var(--color-text-muted);
}

.page-admin-uploads-view .form-group {

    margin-bottom: 24px;
}

.page-admin-uploads-view .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-uploads-view .form-group select, .page-admin-uploads-view .form-group textarea {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;
}

.page-admin-uploads-view .form-group textarea {

    min-height: 180px;

    resize: vertical;
}

.page-admin-uploads-view .status-readonly {

    padding: 14px;

    border:
        1px solid var(--color-border);

    border-radius: 14px;

    background: var(--color-background);

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.6;
}

.page-admin-uploads-view .status-readonly-note {

    margin-top: 8px;

    font-size: 13px;

    font-weight: 500;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-uploads-view .checkbox-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 26px;
}

.page-admin-uploads-view .checkbox-row input {

    width: auto;
}

.page-admin-uploads-view .button {

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-uploads-view .button:hover {

    background: var(--color-primary-hover);
}

.page-admin-uploads-view .action-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}

.page-admin-uploads-view .action-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border-radius: 14px;

    background: var(--color-surface-alt);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;

    transition: 0.2s ease;
}

.page-admin-uploads-view .action-link:hover {

    background: var(--color-border);
}

@media (max-width: 1100px) {.page-admin-uploads-view .layout-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/customers/index.php ----- */

.page-admin-customers-index.page-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;
}

.page-admin-customers-index .hero-card {

    position: relative;

    overflow: hidden;

    background:
        var(--gradient-surface-hero);

    border-radius: 28px;

    padding: 52px;

    color: var(--color-surface);

    margin-bottom: 34px;
}

.page-admin-customers-index .hero-card--compact {

    padding: 32px 36px;

    margin-bottom: 28px;
}

.page-admin-customers-index .hero-card--compact .hero-title {

    font-size: 34px;

    margin-bottom: 10px;
}

.page-admin-customers-index .hero-card--compact .hero-description {

    max-width: 720px;

    line-height: 1.65;

    font-size: 15px;
}

.page-admin-customers-index .hero-card::after {

    content: '';

    position: absolute;

    width: 480px;

    height: 480px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -200px;

    right: -120px;
}

.page-admin-customers-index .hero-content {

    position: relative;

    z-index: 2;
}

.page-admin-customers-index .hero-title {

    font-size: 52px;

    font-weight: 900;

    margin-bottom: 18px;
}

.page-admin-customers-index .hero-description {

    max-width: 940px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);
}

.page-admin-customers-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 22px;

    margin-bottom: 36px;
}

.page-admin-customers-index .stat-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-index .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 800;
}

.page-admin-customers-index .stat-number {

    margin-top: 16px;

    font-size: 44px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-customers-index .filters-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);

    margin-bottom: 36px;
}

.page-admin-customers-index .filters-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 20px;

    align-items: end;
}

.page-admin-customers-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-customers-index .form-group label {

    margin-bottom: 10px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-customers-index .form-group input, .page-admin-customers-index .form-group select {

    padding: 15px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 16px;

    background: var(--color-surface);

    font: inherit;
}

.page-admin-customers-index .filter-button {

    padding: 15px 20px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;
}

.page-admin-customers-index .filter-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 12px;
}

.page-admin-customers-index .filter-reset-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 16px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;
}

.page-admin-customers-index .filter-reset-link:hover {

    background: var(--color-background);
}

.page-admin-customers-index .summary-bar {

    margin-bottom: 18px;

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-admin-customers-index .table-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-customers-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-customers-index thead {

    background: var(--color-background);
}

.page-admin-customers-index th {

    padding: 18px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-customers-index td {

    padding: 22px 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-customers-index .creator-name {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-customers-index .creator-meta {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.8;
}

.page-admin-customers-index .badge-group {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.page-admin-customers-index .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-admin-customers-index .badge-consumer {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-customers-index .badge-possible {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-customers-index .badge-contractor {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-customers-index .badge-dealer {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-customers-index .badge-featured {

    background: var(--primitive-pink-100);

    color: var(--primitive-pink-700);
}

.page-admin-customers-index .badge-winner {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-customers-index .metric-value {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-customers-index .metric-helper {

    margin-top: 6px;

    font-size: 12px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.page-admin-customers-index .action-links {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.page-admin-customers-index .action-link {

    color: var(--color-text);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-customers-index .action-link:hover {

    text-decoration: underline;
}

.page-admin-customers-index .empty-state {

    padding: 90px 30px;

    text-align: center;
}

.page-admin-customers-index .empty-title {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-customers-index .empty-description {

    max-width: 760px;

    margin: 0 auto;

    line-height: 2;

    color: var(--color-text-muted);
}

.page-admin-customers-index .list-footer {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-top: 24px;

    padding: 22px 24px 26px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-admin-customers-index .result-count {

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-customers-index .result-count strong {

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-customers-index .pagination-nav {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.page-admin-customers-index .pagination-pages {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}

.page-admin-customers-index .pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 44px;

    padding: 0 14px;

    border-radius: 14px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-customers-index .pagination-link:hover {

    background: var(--color-background);
}

.page-admin-customers-index .pagination-link.is-active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-customers-index .pagination-link.is-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

.page-admin-customers-index .pagination-prev,
.page-admin-customers-index .pagination-next {

    min-width: auto;

    font-size: 14px;

    font-weight: 700;
}

.page-admin-customers-index .pagination-ellipsis {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 44px;

    color: var(--color-text-muted);

    font-weight: 800;
}

@media (max-width: 768px) {.page-admin-customers-index .hero-card {

        padding: 36px 24px;
    }

    .page-admin-customers-index .hero-card--compact {

        padding: 24px 20px;
    }

    .page-admin-customers-index .hero-title {

        font-size: 40px;
    }

    .page-admin-customers-index .hero-card--compact .hero-title {

        font-size: 28px;
    }

    .page-admin-customers-index .list-footer {

        flex-direction: column;

        align-items: stretch;
    }

    .page-admin-customers-index .pagination-nav {

        justify-content: center;
    }}

/* ----- admin/customers/view.php ----- */

.page-admin-customers-view.crm-container {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-customers-view .back-link {

    display: inline-block;

    margin-bottom: 16px;

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;
}

.page-admin-customers-view .back-link:hover {

    text-decoration: underline;
}

.page-admin-customers-view .crm-view-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px 28px;

    margin-bottom: 28px;
}

.page-admin-customers-view .crm-view-header-main {

    min-width: 0;

    flex: 1 1 320px;
}

.page-admin-customers-view .crm-view-title {

    margin: 0;

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.15;
}

.page-admin-customers-view .crm-view-subtitle {

    margin: 10px 0 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-customers-view .crm-view-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}

.page-admin-customers-view .status-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    font-size: 12px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-customers-view .status-pill-featured {

    background: var(--color-warning-bg);

    border-color: var(--color-warning);
}

.page-admin-customers-view .status-pill-winner {

    background: var(--primitive-green-50);

    border-color: var(--primitive-green-200);
}

.page-admin-customers-view .crm-view-header-actions {

    flex: 0 0 auto;
}

.page-admin-customers-view .crm-view-edit-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 800;

    border:
        1px solid var(--color-text);
}

.page-admin-customers-view .crm-view-edit-button:hover {

    filter: brightness(0.96);
}

.page-admin-customers-view .stats-grid--compact {

    margin-bottom: 28px;
}

.page-admin-customers-view .stats-grid--compact .stat-card {

    padding: 22px 24px;
}

.page-admin-customers-view .stats-grid--compact .stat-value {

    font-size: 34px;
}

.page-admin-customers-view .crm-view-stack {

    display: grid;

    gap: 24px;
}

.page-admin-customers-view .crm-overview-section {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 24px 24px 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-view .crm-overview-section-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px 20px;

    margin-bottom: 20px;
}

.page-admin-customers-view .crm-overview-section-title {

    margin: 0;

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-customers-view .crm-overview-section-subtitle {

    margin: 6px 0 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-customers-view .crm-overview-more {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-background);

    color: var(--color-text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;
}

.page-admin-customers-view .crm-overview-more:hover {

    background: var(--color-surface);
}

.page-admin-customers-view .crm-overview-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.page-admin-customers-view .crm-overview-card {

    display: flex;

    flex-direction: column;

    min-height: 100%;

    border-radius: 22px;

    border:
        1px solid var(--color-border-marketing);

    background: var(--color-background);

    overflow: hidden;
}

.page-admin-customers-view .crm-overview-card-media {

    background: var(--color-surface);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-customers-view .crm-overview-card-media
.upload-media-viewer--compact
.umv-main {

    aspect-ratio: 4 / 3;

    max-height: 180px;
}

.page-admin-customers-view .crm-overview-card-body {

    flex: 1;

    padding: 18px 18px 12px;
}

.page-admin-customers-view .crm-overview-card-title {

    margin: 0 0 8px;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.35;
}

.page-admin-customers-view .crm-overview-card-title a {

    color: var(--color-text);

    text-decoration: none;
}

.page-admin-customers-view .crm-overview-card-title a:hover {

    text-decoration: underline;
}

.page-admin-customers-view .crm-overview-card-meta {

    margin: 0 0 6px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

.page-admin-customers-view .crm-overview-status {

    display: inline-flex;

    align-items: center;

    margin-bottom: 10px;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.page-admin-customers-view .crm-overview-status.status-approved,
.page-admin-customers-view .crm-overview-status.status-featured {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800);
}

.page-admin-customers-view .crm-overview-status.status-pending {

    background: var(--color-warning-bg);

    color: var(--color-warning);
}

.page-admin-customers-view .crm-overview-status.status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-customers-view .crm-overview-card-footer {

    padding: 0 18px 18px;

    margin-top: auto;
}

.page-admin-customers-view .crm-overview-card-link {

    display: inline-flex;

    align-items: center;

    color: var(--color-info);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;
}

.page-admin-customers-view .crm-overview-card-link:hover {

    text-decoration: underline;
}

.page-admin-customers-view .crm-overview-empty {

    padding: 28px 20px;

    border-radius: 18px;

    background: var(--color-background);

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.7;
}

.page-admin-customers-view .card .empty-state {

    padding: 28px 20px;

    background: transparent;

    border: none;

    border-radius: 0;

    text-align: left;

    line-height: 1.7;
}

.page-admin-customers-view .hero-card {

    position: relative;

    overflow: hidden;

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 36px;

    padding: 50px;

    margin-bottom: 36px;
}

.page-admin-customers-view .hero-card::after {

    content: '';

    position: absolute;

    width: 460px;

    height: 460px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -220px;

    right: -120px;
}

.page-admin-customers-view .hero-content {

    position: relative;

    z-index: 2;
}

.page-admin-customers-view .hero-title {

    font-size: 52px;

    font-weight: 900;

    margin-bottom: 16px;
}

.page-admin-customers-view .hero-subtitle {

    color:
        var(--color-hero-text-muted);

    line-height: 2;

    max-width: 920px;

    margin-bottom: 24px;
}

.page-admin-customers-view .hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;
}

.page-admin-customers-view .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    background:
        var(--color-white-glass-10);

    border:
        1px solid var(--color-white-glass-08);

    font-size: 12px;

    font-weight: 900;
}

.page-admin-customers-view .hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}

.page-admin-customers-view .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 16px;

    background:
        var(--color-white-glass-08);

    border:
        1px solid var(--color-white-glass-08);

    color: var(--color-surface);

    text-decoration: none;

    font-weight: 800;

    transition: 0.18s ease;
}

.page-admin-customers-view .hero-button:hover {

    background:
        var(--color-white-glass-16);
}

.page-admin-customers-view .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 22px;

    margin-bottom: 40px;
}

.page-admin-customers-view .stat-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-view .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 800;
}

.page-admin-customers-view .stat-value {

    margin-top: 14px;

    font-size: 44px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-customers-view .stat-helper {

    margin-top: 10px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.page-admin-customers-view .section {

    margin-bottom: 50px;
}

.page-admin-customers-view .section-title {

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 20px;
}

.page-admin-customers-view .layout-grid {

    display: grid;

    grid-template-columns:
        1.4fr
        0.9fr;

    gap: 30px;
}

.page-admin-customers-view .card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 34px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 18px;
}

.page-admin-customers-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 18px;

    padding: 18px;
}

.page-admin-customers-view .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 800;

    margin-bottom: 8px;
}

.page-admin-customers-view .meta-value {

    font-weight: 800;

    color: var(--color-text);

    line-height: 1.8;
}

.page-admin-customers-view .marketing-preference-badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;
}

.page-admin-customers-view .marketing-preference-badge.is-opted-in {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);
}

.page-admin-customers-view .marketing-preference-badge.is-opted-out {

    background: var(--primitive-red-50);

    color: var(--primitive-red-700);
}

.page-admin-customers-view .marketing-preference-meta {

    margin-top: 8px;

    font-size: 12px;

    font-weight: 500;

    color: var(--color-text-muted);

    line-height: 1.5;
}

.page-admin-customers-view .marketing-preference-meta-warning {

    color: var(--primitive-amber-700);
}

.page-admin-customers-view .timeline {

    display: grid;

    gap: 18px;
}

.page-admin-customers-view .timeline-item {

    background: var(--primitive-surface-faint);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    padding: 22px;
}

.page-admin-customers-view .timeline-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-customers-view .timeline-meta {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-customers-view .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap: 24px;
}

.page-admin-customers-view .upload-card {

    background: var(--color-surface);

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-view .upload-media {

    background: var(--color-surface-alt);

    overflow: hidden;
}

.page-admin-customers-view .upload-content {

    padding: 22px;
}

.page-admin-customers-view .upload-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    margin-bottom: 14px;
}

.page-admin-customers-view .status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-customers-view .status-approved {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-customers-view .status-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-customers-view .status-rejected {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-customers-view .card-title {

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-admin-customers-view .card-description {

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-admin-customers-view .activity-list {

    display: grid;

    gap: 18px;
}

.page-admin-customers-view .activity-card {

    background: var(--primitive-surface-faint);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 22px;
}

.page-admin-customers-view .activity-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-customers-view .activity-meta {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-customers-view .quick-links {

    display: grid;

    gap: 14px;
}

.page-admin-customers-view .quick-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 20px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 800;

    transition: 0.18s ease;
}

.page-admin-customers-view .quick-link:hover {

    transform:
        translateY(-2px);

    background: var(--color-surface);
}

.page-admin-customers-view .badge-consumer {

    background: var(--color-surface-alt);
}

.page-admin-customers-view .badge-possible {

    background: var(--color-warning-bg);
}

.page-admin-customers-view .badge-contractor {

    background: var(--primitive-blue-100);
}

.page-admin-customers-view .badge-dealer {

    background: var(--primitive-violet-100);
}

.page-admin-customers-view .creator-badges-panel {

    margin-top: 0;
}

.page-admin-customers-view .creator-badges-empty {

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 18px;
}

.page-admin-customers-view .creator-badges-list {

    list-style: none;

    margin: 0 0 22px;

    padding: 0;

    display: grid;

    gap: 12px;
}

.page-admin-customers-view .creator-badges-item {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    padding: 14px 16px;

    border-radius: 16px;

    background: var(--color-surface-alt);

    border: 1px solid var(--color-border-marketing);
}

.page-admin-customers-view .creator-badges-item-main {

    min-width: 0;

    flex: 1;
}

.page-admin-customers-view .creator-badges-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 11px;

    border-radius: 999px;

    background: var(--color-primary-bg);

    color: var(--color-primary);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.02em;
}

.page-admin-customers-view .creator-badges-copy {

    margin-top: 8px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.5;
}

.page-admin-customers-view .creator-badges-meta {

    margin-top: 8px;

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;
}

.page-admin-customers-view .creator-badges-action-form {

    flex-shrink: 0;
}

.page-admin-customers-view .creator-badges-grant-form {

    margin-top: 8px;

    padding-top: 18px;

    border-top: 1px solid var(--color-border-marketing);
}

.page-admin-customers-view .creator-badges-grant-label {

    display: block;

    font-size: 13px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-customers-view .creator-badges-grant-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-admin-customers-view .creator-badges-grant-select {

    min-width: 220px;

    flex: 1;

    max-width: 360px;

    padding: 10px 12px;

    border-radius: 12px;

    border: 1px solid var(--color-border-marketing);

    background: var(--color-surface);

    color: var(--color-text);

    font-size: 14px;

    font-weight: 600;
}

.page-admin-customers-view .creator-badges-all-granted {

    margin: 0;

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 600;
}

.page-admin-customers-view .creator-badges-gallery-link {

    margin-top: 18px;
}

.page-admin-customers-view .empty-state {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 70px 40px;

    border:
        1px solid var(--color-border-marketing);

    text-align: center;

    line-height: 2;

    color: var(--color-text-muted);
}

@media (max-width: 1100px) {.page-admin-customers-view .layout-grid {

        grid-template-columns: 1fr;
    }

    .page-admin-customers-view .crm-overview-grid {

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

@media (max-width: 768px) {.page-admin-customers-view .crm-view-title {

        font-size: 28px;
    }

    .page-admin-customers-view .crm-view-header-actions {

        width: 100%;
    }

    .page-admin-customers-view .crm-view-edit-button {

        width: 100%;
    }

    .page-admin-customers-view .hero-card {

        padding: 36px 26px;
    }

    .page-admin-customers-view .hero-title {

        font-size: 40px;
    }

    .page-admin-customers-view .crm-overview-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/customers/edit.php ----- */

.page-admin-customers-edit.page-container {

    max-width: 1600px;

    margin: 0 auto;
}

.page-admin-customers-edit .hero-card {

    position: relative;

    overflow: hidden;

    background:
        var(--gradient-surface-hero);

    border-radius: 36px;

    padding: 50px;

    color: var(--color-surface);

    margin-bottom: 36px;
}

.page-admin-customers-edit .hero-card::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -180px;

    right: -140px;
}

.page-admin-customers-edit .hero-content {

    position: relative;

    z-index: 2;
}

.page-admin-customers-edit .hero-title {

    font-size: 48px;

    font-weight: 900;

    margin-bottom: 18px;
}

.page-admin-customers-edit .hero-description {

    max-width: 880px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    margin-bottom: 26px;
}

.page-admin-customers-edit .hero-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-customers-edit .hero-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 999px;

    background:
        var(--color-white-glass-10);

    border:
        1px solid var(--color-white-glass-08);

    font-size: 12px;

    font-weight: 900;
}

.page-admin-customers-edit .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap: 22px;

    margin-bottom: 38px;
}

.page-admin-customers-edit .stat-card {

    background: var(--color-surface);

    border-radius: 26px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-edit .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    font-weight: 800;
}

.page-admin-customers-edit .stat-value {

    margin-top: 16px;

    font-size: 42px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-customers-edit .layout-grid {

    display: grid;

    grid-template-columns:
        1.4fr
        0.9fr;

    gap: 30px;

    margin-bottom: 36px;
}

.page-admin-customers-edit .card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 36px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-customers-edit .card-title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 26px;
}

.page-admin-customers-edit .form-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap: 24px;
}

.page-admin-customers-edit .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-customers-edit .form-group label {

    margin-bottom: 10px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-customers-edit .form-group input, .page-admin-customers-edit .form-group select, .page-admin-customers-edit .form-group textarea {

    width: 100%;

    padding: 15px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 16px;

    background: var(--color-surface);

    box-sizing: border-box;

    font: inherit;
}

.page-admin-customers-edit .form-group textarea {

    min-height: 140px;

    resize: vertical;
}

.page-admin-customers-edit .helper {

    margin-top: 8px;

    font-size: 13px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.page-admin-customers-edit .form-group-checkbox .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-weight: 600;

    color: var(--color-text);

    cursor: pointer;
}

.page-admin-customers-edit .form-group-checkbox .checkbox-row input {

    margin-top: 3px;
}

.page-admin-customers-edit .button-row {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}

.page-admin-customers-edit .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 22px;

    border-radius: 16px;

    border: none;

    text-decoration: none;

    font-weight: 800;

    cursor: pointer;
}

.page-admin-customers-edit .button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-customers-edit .button-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-customers-edit .success-message {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 24px;

    font-weight: 800;
}

.page-admin-customers-edit .error-message {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 24px;

    font-weight: 800;
}

.page-admin-customers-edit .activity-list {

    display: grid;

    gap: 18px;
}

.page-admin-customers-edit .activity-card {

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    padding: 22px;

    background: var(--primitive-surface-faint);
}

.page-admin-customers-edit .activity-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-customers-edit .activity-meta {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-customers-edit .quick-links {

    display: grid;

    gap: 14px;
}

.page-admin-customers-edit .quick-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding: 18px 20px;

    border-radius: 20px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 800;

    transition: 0.18s ease;
}

.page-admin-customers-edit .quick-link:hover {

    transform:
        translateY(-2px);

    background: var(--color-surface);
}

@media (max-width: 1100px) {.page-admin-customers-edit .layout-grid {

        grid-template-columns: 1fr;
    }}

@media (max-width: 768px) {.page-admin-customers-edit .hero-card {

        padding: 36px 26px;
    }

    .page-admin-customers-edit .hero-title {

        font-size: 38px;
    }}

/* ----- admin/registrations/index.php ----- */

.page-admin-registrations-index .page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 36px;

    flex-wrap: wrap;
}

.page-admin-registrations-index .page-title {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-registrations-index .page-description {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.8;

    max-width: 760px;
}

.page-admin-registrations-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 34px;
}

.page-admin-registrations-index .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-index .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-registrations-index .stat-number {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-registrations-index .filter-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    margin-bottom: 34px;
}

.page-admin-registrations-index .filter-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 18px;

    align-items: end;
}

.page-admin-registrations-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-registrations-index .form-group label {

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-registrations-index .form-group input, .page-admin-registrations-index .form-group select {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    font: inherit;
}

.page-admin-registrations-index .filter-button {

    padding: 14px 20px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;
}

.page-admin-registrations-index .filter-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 12px;
}

.page-admin-registrations-index .filter-reset-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;
}

.page-admin-registrations-index .filter-reset-link:hover {

    background: var(--color-background);
}

.page-admin-registrations-index .summary-bar {

    margin-bottom: 18px;

    color: var(--color-text-muted);

    line-height: 1.8;
}

.page-admin-registrations-index .table-card {

    background: var(--color-surface);

    border-radius: 24px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-registrations-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-registrations-index thead {

    background: var(--color-background);
}

.page-admin-registrations-index th {

    padding: 18px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-registrations-index td {

    padding: 20px 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-registrations-index .customer-name {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-registrations-index .customer-meta {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.8;
}

.page-admin-registrations-index .product-name {

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-registrations-index .small {

    margin-top: 6px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.page-admin-registrations-index .metric {

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-registrations-index .featured {

    margin-top: 6px;

    font-size: 12px;

    color: var(--primitive-violet-700);

    font-weight: 700;
}

.page-admin-registrations-index .status-badge {

    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-admin-registrations-index .status-approved {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-admin-registrations-index .status-pending {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-700);
}

.page-admin-registrations-index .status-rejected {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-registrations-index .status-expired, .page-admin-registrations-index .status-archived, .page-admin-registrations-index .status-default {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-registrations-index .action-link {

    display: inline-block;

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;

    margin-bottom: 8px;
}

.page-admin-registrations-index .action-link:hover {

    text-decoration: underline;
}

.page-admin-registrations-index .empty-state {

    padding: 80px 30px;

    text-align: center;
}

.page-admin-registrations-index .empty-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-registrations-index .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 680px;

    margin: 0 auto;
}

.page-admin-registrations-index .list-footer {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-top: 24px;

    padding: 22px 24px 26px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-admin-registrations-index .result-count {

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-registrations-index .result-count strong {

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-registrations-index .pagination-nav {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.page-admin-registrations-index .pagination-pages {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}

.page-admin-registrations-index .pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 44px;

    padding: 0 14px;

    border-radius: 14px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-registrations-index .pagination-link:hover {

    background: var(--color-background);
}

.page-admin-registrations-index .pagination-link.is-active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-registrations-index .pagination-link.is-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

.page-admin-registrations-index .pagination-prev,
.page-admin-registrations-index .pagination-next {

    min-width: auto;

    font-size: 14px;

    font-weight: 700;
}

.page-admin-registrations-index .pagination-ellipsis {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 44px;

    color: var(--color-text-muted);

    font-weight: 800;
}

@media (max-width: 768px) {.page-admin-registrations-index .list-footer {

        flex-direction: column;

        align-items: stretch;
    }

    .page-admin-registrations-index .pagination-nav {

        justify-content: center;
    }}

/* ----- admin/users ----- */

.page-admin-users-index,
.page-admin-users-form {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-users-index .page-header,
.page-admin-users-form .page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 28px;

    flex-wrap: wrap;
}

.page-admin-users-index .page-title,
.page-admin-users-form .page-title {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-users-index .page-description,
.page-admin-users-form .page-description {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.8;

    max-width: 760px;
}

.page-admin-users-index .page-header-actions,
.page-admin-users-form .form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;
}

.page-admin-users-index .primary-button,
.page-admin-users-form .primary-button,
.page-admin-users-form .secondary-button,
.page-admin-users-form .danger-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    border:
        1px solid var(--color-border);

    cursor: pointer;
}

.page-admin-users-index .primary-button,
.page-admin-users-form .primary-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-users-form .secondary-button {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-users-form .danger-button {

    background: var(--color-danger);

    color: #fff;

    border-color: var(--color-danger);
}

.page-admin-users-index .notice-box,
.page-admin-users-form .notice-box {

    margin-bottom: 20px;

    padding: 16px 18px;

    border-radius: 16px;

    border:
        1px solid var(--color-border);
}

.page-admin-users-index .notice-success,
.page-admin-users-form .notice-success {

    background: var(--color-success-soft);

    border-color: var(--color-success);

    color: var(--color-text);
}

.page-admin-users-index .notice-error,
.page-admin-users-form .notice-error {

    background: var(--color-danger-soft);

    border-color: var(--color-danger);

    color: var(--color-text);
}

.page-admin-users-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 28px;
}

.page-admin-users-index .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-users-index .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-users-index .stat-number {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-users-index .filter-card,
.page-admin-users-form .form-card,
.page-admin-users-form .danger-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-users-index .filter-grid,
.page-admin-users-form .form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;
}

.page-admin-users-index .form-group,
.page-admin-users-form .form-group {

    display: grid;

    gap: 8px;
}

.page-admin-users-form .form-group-span-full {

    grid-column: 1 / -1;
}

.page-admin-users-index .form-group label,
.page-admin-users-form .form-group label {

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-users-index .form-group input,
.page-admin-users-index .form-group select,
.page-admin-users-form .form-group input,
.page-admin-users-form .form-group select {

    width: 100%;

    min-height: 46px;

    padding: 0 14px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-background);
}

.page-admin-users-index .filter-button {

    min-height: 46px;

    padding: 0 18px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;
}

.page-admin-users-index .table-card {

    background: var(--color-surface);

    border-radius: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    overflow: hidden;
}

.page-admin-users-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-users-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-users-index th,
.page-admin-users-index td {

    padding: 18px 20px;

    text-align: left;

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-users-index th {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);
}

.page-admin-users-index .user-name {

    font-size: 17px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-users-index .user-you-pill {

    display: inline-flex;

    margin-left: 8px;

    padding: 3px 8px;

    border-radius: 999px;

    background: var(--color-background);

    border:
        1px solid var(--color-border);

    font-size: 11px;

    font-weight: 800;
}

.page-admin-users-index .user-meta,
.page-admin-users-index .text-muted {

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-admin-users-index .role-badge,
.page-admin-users-index .status-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;

    border:
        1px solid var(--color-border);
}

.page-admin-users-index .role-super-admin {

    background: var(--color-info-soft);

    border-color: var(--color-info);
}

.page-admin-users-index .status-active {

    background: var(--color-success-soft);

    border-color: var(--color-success);
}

.page-admin-users-index .status-inactive {

    background: var(--color-background);

    color: var(--color-text-muted);
}

.page-admin-users-index .action-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 14px;

    align-items: center;
}

.page-admin-users-index .inline-delete-form {

    display: inline;

    margin: 0;

    padding: 0;
}

.page-admin-users-index .action-link {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 800;

    background: none;

    border: 0;

    padding: 0;

    cursor: pointer;

    font: inherit;
}

.page-admin-users-index .action-link-danger {

    color: var(--color-danger);
}

.page-admin-users-index .empty-state {

    padding: 40px 24px;

    text-align: center;
}

.page-admin-users-index .empty-title {

    font-size: 24px;

    font-weight: 800;
}

.page-admin-users-index .empty-description {

    margin-top: 10px;

    color: var(--color-text-muted);
}

.page-admin-users-form .back-link {

    display: inline-block;

    margin-bottom: 16px;

    color: var(--color-info);

    text-decoration: none;

    font-weight: 700;
}

.page-admin-users-form .help-text {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

.page-admin-users-form .checkbox-row {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 46px;
}

.page-admin-users-form .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 14px;

    margin: 24px 0;
}

.page-admin-users-form .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px 18px;
}

.page-admin-users-form .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 800;
}

.page-admin-users-form .meta-value {

    margin-top: 8px;

    font-weight: 700;
}

.page-admin-users-form .danger-card-title {

    font-size: 20px;

    font-weight: 900;

    color: var(--color-danger);
}

.page-admin-users-form .danger-card-copy {

    margin: 10px 0 18px;

    color: var(--color-text-muted);

    line-height: 1.7;
}

@media (max-width: 768px) {

    .page-admin-users-index .page-title,
    .page-admin-users-form .page-title {

        font-size: 30px;
    }
}

/* ----- admin/projects/index.php ----- */

.page-admin-projects-index {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-projects-index .page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 36px;

    flex-wrap: wrap;
}

.page-admin-projects-index .page-title {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-projects-index .page-description {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.8;

    max-width: 760px;
}

.page-admin-projects-index .page-description a {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-projects-index .page-description a:hover {

    text-decoration: underline;
}

.page-admin-projects-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 34px;
}

.page-admin-projects-index .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-projects-index .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-projects-index .stat-number {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-projects-index .filter-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    margin-bottom: 34px;
}

.page-admin-projects-index .filter-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 18px;

    align-items: end;
}

.page-admin-projects-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-projects-index .form-group label {

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-projects-index .form-group input, .page-admin-projects-index .form-group select {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    font: inherit;
}

.page-admin-projects-index .filter-button {

    padding: 14px 20px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;
}

.page-admin-projects-index .filter-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 12px;
}

.page-admin-projects-index .filter-reset-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 18px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;
}

.page-admin-projects-index .filter-reset-link:hover {

    background: var(--color-background);
}

.page-admin-projects-index .table-card {

    background: var(--color-surface);

    border-radius: 28px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-projects-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-projects-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-projects-index thead {

    background: var(--color-background);
}

.page-admin-projects-index th {

    padding: 18px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-projects-index td {

    padding: 22px 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-projects-index .project-name {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-projects-index .project-meta,
.page-admin-projects-index .customer-meta {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.7;
}

.page-admin-projects-index .customer-name {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 4px;
}

.page-admin-projects-index .metric {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 4px;
}

.page-admin-projects-index .status-badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}

.page-admin-projects-index .status-planning {

    background: var(--color-warning-bg);

    color: var(--color-warning);
}

.page-admin-projects-index .status-active {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800);
}

.page-admin-projects-index .status-completed {

    background: var(--color-background);

    color: var(--color-text-muted);

    border:
        1px solid var(--color-border);
}

.page-admin-projects-index .status-default {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-projects-index .action-links {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.page-admin-projects-index .action-link {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 700;

    font-size: 14px;
}

.page-admin-projects-index .action-link:hover {

    text-decoration: underline;
}

.page-admin-projects-index .empty-state {

    padding: 70px 30px;

    text-align: center;
}

.page-admin-projects-index .empty-title {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-admin-projects-index .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 680px;

    margin: 0 auto;
}

.page-admin-projects-index .list-footer {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 22px 24px 26px;

    border-top:
        1px solid var(--color-border-marketing);
}

.page-admin-projects-index .result-count {

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-projects-index .result-count strong {

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-projects-index .pagination-nav {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.page-admin-projects-index .pagination-pages {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}

.page-admin-projects-index .pagination-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 44px;

    height: 44px;

    padding: 0 14px;

    border-radius: 14px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 800;
}

.page-admin-projects-index .pagination-link:hover {

    background: var(--color-background);
}

.page-admin-projects-index .pagination-link.is-active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-projects-index .pagination-link.is-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

.page-admin-projects-index .pagination-prev,
.page-admin-projects-index .pagination-next {

    min-width: auto;

    font-size: 14px;

    font-weight: 700;
}

.page-admin-projects-index .pagination-ellipsis {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 44px;

    color: var(--color-text-muted);

    font-weight: 800;
}

@media (max-width: 768px) {.page-admin-projects-index .page-title {

        font-size: 32px;
    }

    .page-admin-projects-index .list-footer {

        flex-direction: column;

        align-items: stretch;
    }

    .page-admin-projects-index .pagination-nav {

        justify-content: center;
    }}

/* ----- admin/projects/view.php ----- */

.page-admin-projects-view.page-container {

    max-width: 1450px;

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-projects-view .back-link {

    display: inline-block;

    margin-bottom: 16px;

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;
}

.page-admin-projects-view .back-link:hover {

    text-decoration: underline;
}

.page-admin-projects-view .project-view-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px 28px;

    margin-bottom: 28px;
}

.page-admin-projects-view .project-view-header-main {

    min-width: 0;

    flex: 1 1 320px;
}

.page-admin-projects-view .project-view-title {

    margin: 0;

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.15;
}

.page-admin-projects-view .project-view-subtitle {

    margin: 10px 0 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-projects-view .project-view-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}

.page-admin-projects-view .status-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    font-size: 12px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-projects-view .status-pill-muted {

    background: var(--color-background);

    color: var(--color-text-muted);
}

.page-admin-projects-view .status-pill.status-planning {

    background: var(--color-info-soft);

    border-color: var(--color-info);

    color: var(--color-info);
}

.page-admin-projects-view .status-pill.status-active {

    background: var(--color-success-soft);

    border-color: var(--color-success);

    color: var(--color-success);
}

.page-admin-projects-view .status-pill.status-completed {

    background: var(--color-background);

    border-color: var(--color-border);

    color: var(--color-text-muted);
}

.page-admin-projects-view .project-view-header-actions {

    flex: 0 0 auto;
}

.page-admin-projects-view .project-view-action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 800;

    border:
        1px solid var(--color-text);
}

.page-admin-projects-view .project-view-action-button:hover {

    filter: brightness(0.96);
}

.page-admin-projects-view .project-view-stack {

    display: grid;

    gap: 24px;
}

.page-admin-projects-view .project-view-panels {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

    align-items: start;
}

.page-admin-projects-view .project-view-panel-title {

    margin: 0 0 16px;

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-projects-view .content-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-projects-view .project-description-block {

    margin-bottom: 20px;

    padding: 20px 22px;

    border-radius: 20px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-projects-view .project-description-text {

    margin-top: 10px;

    color: var(--color-text);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.75;

    word-break: break-word;

    overflow-wrap: anywhere;
}

.page-admin-projects-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 14px;
}

.page-admin-projects-view .meta-grid--compact {

    margin-top: 20px;
}

.page-admin-projects-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px 18px;

    min-width: 0;
}

.page-admin-projects-view .meta-item--span-full {

    grid-column: 1 / -1;
}

.page-admin-projects-view .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    font-weight: 800;

    margin-bottom: 8px;
}

.page-admin-projects-view .meta-value {

    color: var(--color-text);

    font-weight: 700;

    font-size: 15px;

    line-height: 1.55;

    word-break: break-word;

    overflow-wrap: anywhere;
}

.page-admin-projects-view .meta-value-muted {

    color: var(--color-text-muted);

    font-weight: 600;
}

.page-admin-projects-view .meta-chip {

    display: inline-flex;

    align-items: center;

    padding: 5px 12px;

    border-radius: 999px;

    background: var(--color-background);

    border:
        1px solid var(--color-border);

    font-size: 13px;

    font-weight: 800;
}

.page-admin-projects-view .meta-inline-link {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-projects-view .meta-inline-link:hover {

    text-decoration: underline;
}

.page-admin-projects-view .creator-summary {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px 18px;

    padding: 18px 20px;

    border-radius: 20px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-projects-view .creator-summary-avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 18px;

    font-weight: 900;

    flex: 0 0 auto;
}

.page-admin-projects-view .creator-summary-body {

    min-width: 0;

    flex: 1 1 180px;
}

.page-admin-projects-view .creator-summary-name {

    font-size: 18px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.3;
}

.page-admin-projects-view .creator-summary-email {

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.5;

    word-break: break-word;

    overflow-wrap: anywhere;
}

.page-admin-projects-view .creator-summary-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    color: var(--color-text);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    flex: 0 0 auto;
}

.page-admin-projects-view .creator-summary-link:hover {

    background: var(--color-background);
}

.page-admin-projects-view .crm-overview-section {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 24px 24px 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 24px var(--color-shadow-sm);
}

.page-admin-projects-view .crm-overview-section-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px 20px;

    margin-bottom: 20px;
}

.page-admin-projects-view .crm-overview-section-title {

    margin: 0;

    font-size: 22px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-projects-view .crm-overview-section-subtitle {

    margin: 6px 0 0;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-projects-view .crm-overview-more {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 14px;

    border:
        1px solid var(--color-border);

    background: var(--color-background);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;
}

.page-admin-projects-view .crm-overview-more:hover {

    background: var(--color-surface);
}

.page-admin-projects-view .crm-overview-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.page-admin-projects-view .crm-overview-card {

    display: flex;

    flex-direction: column;

    min-height: 100%;

    border-radius: 22px;

    overflow: hidden;

    border:
        1px solid var(--color-border);

    background: var(--color-background);
}

.page-admin-projects-view .crm-overview-card-media {

    aspect-ratio: 16 / 10;

    background: var(--color-surface);

    overflow: hidden;
}

.page-admin-projects-view .crm-overview-card-media
img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-admin-projects-view .crm-overview-card-body {

    padding: 16px 16px 12px;

    flex: 1 1 auto;
}

.page-admin-projects-view .crm-overview-card-title {

    margin: 10px 0 0;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.35;
}

.page-admin-projects-view .crm-overview-card-title a {

    color: var(--color-text);

    text-decoration: none;
}

.page-admin-projects-view .crm-overview-card-title a:hover {

    color: var(--color-primary);
}

.page-admin-projects-view .crm-overview-card-meta {

    margin: 8px 0 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.55;
}

.page-admin-projects-view .crm-overview-status {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    border:
        1px solid var(--color-border);
}

.page-admin-projects-view .crm-overview-status.status-approved,
.page-admin-projects-view .crm-overview-status.status-featured {

    background: var(--color-success-soft);

    border-color: var(--color-success);

    color: var(--color-success);
}

.page-admin-projects-view .crm-overview-status.status-pending {

    background: var(--color-warning-soft);

    border-color: var(--color-warning);

    color: var(--color-warning);
}

.page-admin-projects-view .crm-overview-status.status-rejected {

    background: var(--color-danger-soft);

    border-color: var(--color-danger);

    color: var(--color-danger);
}

.page-admin-projects-view .crm-overview-card-footer {

    padding: 0 16px 16px;

    margin-top: auto;
}

.page-admin-projects-view .crm-overview-card-link {

    display: inline-flex;

    align-items: center;

    font-size: 13px;

    font-weight: 800;

    color: var(--color-info);

    text-decoration: none;
}

.page-admin-projects-view .crm-overview-card-link:hover {

    text-decoration: underline;
}

.page-admin-projects-view .crm-overview-empty {

    padding: 28px 24px;

    border-radius: 20px;

    background: var(--color-background);

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

@media (max-width: 1100px) {

    .page-admin-projects-view .project-view-panels {

        grid-template-columns: 1fr;
    }

    .page-admin-projects-view .crm-overview-grid {

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

@media (max-width: 768px) {

    .page-admin-projects-view .project-view-title {

        font-size: 28px;
    }

    .page-admin-projects-view .project-view-header-actions {

        width: 100%;
    }

    .page-admin-projects-view .project-view-action-button {

        width: 100%;
    }

    .page-admin-projects-view .crm-overview-grid {

        grid-template-columns: 1fr;
    }
}

/* ----- admin/registrations/view.php ----- */

.page-admin-registrations-view.page-container {

    max-width: 1450px;

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-registrations-view .back-link {

    display: inline-block;

    margin-bottom: 16px;

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;
}

.page-admin-registrations-view .back-link:hover {

    text-decoration: underline;
}

.page-admin-registrations-view .reg-view-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px 28px;

    margin-bottom: 28px;
}

.page-admin-registrations-view .reg-view-header-main {

    min-width: 0;

    flex: 1 1 320px;
}

.page-admin-registrations-view .reg-view-title {

    margin: 0;

    font-size: 34px;

    font-weight: 900;

    color: var(--color-text);

    line-height: 1.15;
}

.page-admin-registrations-view .reg-view-subtitle {

    margin: 10px 0 0;

    color: var(--color-text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.page-admin-registrations-view .reg-view-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 14px;
}

.page-admin-registrations-view .status-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    border:
        1px solid var(--color-border);

    background: var(--color-surface);

    font-size: 12px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-registrations-view .status-pill-muted {

    background: var(--color-background);

    color: var(--color-text-muted);
}

.page-admin-registrations-view .reg-view-header-actions {

    flex: 0 0 auto;
}

.page-admin-registrations-view .reg-view-customer-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 800;

    border:
        1px solid var(--color-text);
}

.page-admin-registrations-view .reg-view-customer-button:hover {

    filter: brightness(0.96);
}

.page-admin-registrations-view .reg-view-stack {

    display: grid;

    gap: 24px;
}

.page-admin-registrations-view .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-registrations-view .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -140px;
}

.page-admin-registrations-view .hero-title {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-registrations-view .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.9;

    max-width: 760px;

    position: relative;

    z-index: 2;
}

.page-admin-registrations-view .hero-badges {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-registrations-view .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    border-radius: 999px;

    background:
        var(--color-hero-badge-bg);

    font-size: 12px;

    font-weight: 700;
}

.page-admin-registrations-view .hero-actions {

    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-registrations-view .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 700;

    background:
        var(--color-hero-badge-bg);

    color: var(--color-surface);
}

.page-admin-registrations-view .hero-button:hover {

    background:
        var(--color-white-glass-22);
}

.page-admin-registrations-view .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 38px;
}

.page-admin-registrations-view .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-view .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-registrations-view .stat-value {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-registrations-view .section {

    margin-bottom: 48px;
}

.page-admin-registrations-view .section-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-admin-registrations-view .content-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

    gap: 18px;
}

.page-admin-registrations-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 18px;
}

.page-admin-registrations-view .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 700;

    margin-bottom: 8px;
}

.page-admin-registrations-view .meta-value {

    color: var(--color-text);

    font-weight: 600;

    line-height: 1.8;
}

.page-admin-registrations-view .upload-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;
}

.page-admin-registrations-view .upload-card {

    background: var(--color-surface);

    border-radius: 24px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-view .upload-media {

    height: 220px;

    background: var(--color-surface-alt);
}

.page-admin-registrations-view .upload-media img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.page-admin-registrations-view .upload-content {

    padding: 22px;
}

.page-admin-registrations-view .upload-status {

    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 14px;
}

.page-admin-registrations-view .status-approved {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-registrations-view .status-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-registrations-view .status-rejected {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-registrations-view .status-expired {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-registrations-view .status-archived {

    background: var(--color-border);

    color: var(--color-text-muted);
}

.page-admin-registrations-view .status-default {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-registrations-view .card-title {

    font-size: 22px;

    font-weight: 700;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-registrations-view .card-description {

    color: var(--color-text-muted);

    line-height: 1.8;
}

.page-admin-registrations-view .timeline {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.page-admin-registrations-view .timeline-item {

    background: var(--color-surface);

    border-radius: 20px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-registrations-view .timeline-title {

    font-weight: 700;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-registrations-view .timeline-meta {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-registrations-view .empty-state {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 60px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    line-height: 1.9;
}

.page-admin-registrations-view .review-message {

    border-radius: 16px;

    padding: 16px 18px;

    margin-bottom: 24px;

    font-weight: 600;

}

.page-admin-registrations-view .review-message-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-200-border);

}

.page-admin-registrations-view .review-message-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);

}

.page-admin-registrations-view .review-form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 18px;

    margin-bottom: 18px;

}

.page-admin-registrations-view .review-form-group label {

    display: block;

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 700;

    margin-bottom: 8px;

}

.page-admin-registrations-view .review-form-group input, .page-admin-registrations-view .review-form-group select, .page-admin-registrations-view .review-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    padding: 12px 14px;

    font: inherit;

}

.page-admin-registrations-view .review-form-group textarea {

    min-height: 110px;

    resize: vertical;

}

.page-admin-registrations-view .review-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 18px;

}

.page-admin-registrations-view .review-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 18px;

    border: 0;

    border-radius: 12px;

    font-weight: 700;

    cursor: pointer;

}

.page-admin-registrations-view .review-button-approve {

    background: var(--primitive-green-800-text);

    color: var(--color-surface);

}

.page-admin-registrations-view .review-button-reject {

    background: var(--primitive-red-900);

    color: var(--color-surface);

}

.page-admin-registrations-view .review-button-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-registrations-view .review-button-danger {

    background: var(--primitive-red-950);

    color: var(--color-surface);

}

.page-admin-registrations-view .review-card {

    margin-bottom: 24px;

}

.page-admin-registrations-view .review-card-title {

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);

    margin-bottom: 14px;

}

.page-admin-registrations-view .review-card-copy {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 16px;

}

@media (max-width: 768px) {.page-admin-registrations-view .reg-view-title {

        font-size: 28px;
    }

    .page-admin-registrations-view .reg-view-header-actions {

        width: 100%;
    }

    .page-admin-registrations-view .reg-view-customer-button {

        width: 100%;
    }}

/* ----- admin/products/index.php ----- */

.page-admin-products-index .page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 36px;

    flex-wrap: wrap;
}

.page-admin-products-index .page-title {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-products-index .page-description {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.8;

    max-width: 760px;
}

.page-admin-products-index .header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-products-index .header-link {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-products-index .header-link.secondary {

    background: var(--color-surface);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-products-index .header-link:hover {

    opacity: 0.92;
}

.page-admin-products-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 34px;
}

.page-admin-products-index .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-products-index .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-products-index .stat-number {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-products-index .filter-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 24px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    margin-bottom: 34px;
}

.page-admin-products-index .filter-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px
        auto;

    gap: 18px;

    align-items: end;
}

.page-admin-products-index .filter-grid select {

    width: 100%;

    padding: 14px 16px;

    border-radius: 12px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);

    font-size: 15px;
}

.page-admin-products-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-products-index .form-group label {

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-products-index .form-group input {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);
}

.page-admin-products-index .filter-button {

    padding: 14px 20px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;
}

.page-admin-products-index .summary-bar {

    margin-bottom: 18px;

    color: var(--color-text-muted);

    line-height: 1.8;
}

.page-admin-products-index .table-card {

    background: var(--color-surface);

    border-radius: 24px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-products-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-products-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-products-index thead {

    background: var(--color-background);
}

.page-admin-products-index th {

    padding: 18px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-products-index td {

    padding: 20px 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-products-index .product-name {

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-products-index .product-meta {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.8;
}

.page-admin-products-index .badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;
}

.page-admin-products-index .badge-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-products-index .badge-inactive {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-products-index .metric {

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-products-index .featured-count {

    margin-top: 6px;

    font-size: 12px;

    color: var(--primitive-violet-700);

    font-weight: 700;
}

.page-admin-products-index .action-link {

    display: inline-block;

    color: var(--color-text);

    text-decoration: none;

    font-weight: 700;

    margin-bottom: 8px;
}

.page-admin-products-index .action-link:hover {

    text-decoration: underline;
}

.page-admin-products-index .empty-state {

    padding: 80px 30px;

    text-align: center;
}

.page-admin-products-index .empty-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 14px;
}

.page-admin-products-index .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 680px;

    margin: 0 auto;
}

.page-admin-products-index .pagination {

    margin-top: 26px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-products-index .pagination a {

    padding: 11px 15px;

    border-radius: 12px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 700;
}

.page-admin-products-index .pagination a:hover {

    background: var(--color-background);
}

.page-admin-products-index .pagination .active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-products-index .pagination-meta {

    margin-top: 14px;

    color: var(--color-text-muted);

    font-size: 14px;
}

/* ----- admin/products/edit.php ----- */

.page-admin-products-edit.page-container {

    max-width: 1200px;

    margin: 0 auto;
}

.page-admin-products-edit .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-products-edit .hero-card::after {

    content: '';

    position: absolute;

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -120px;
}

.page-admin-products-edit .hero-title {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-products-edit .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.9;

    max-width: 760px;

    position: relative;

    z-index: 2;
}

.page-admin-products-edit .hero-badges {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-products-edit .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    border-radius: 999px;

    background:
        var(--color-hero-badge-bg);

    font-size: 12px;

    font-weight: 700;
}

.page-admin-products-edit .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 36px;
}

.page-admin-products-edit .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-products-edit .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-products-edit .stat-number {

    margin-top: 14px;

    font-size: 38px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-products-edit .form-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 36px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-admin-products-edit .form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

.page-admin-products-edit .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-products-edit .form-group label {

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-products-edit .form-group input, .page-admin-products-edit .form-group select {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);

    box-sizing: border-box;
}

.page-admin-products-edit .readonly {

    background: var(--color-surface-alt);
}

.page-admin-products-edit .helper {

    margin-top: 8px;

    font-size: 13px;

    line-height: 1.7;

    color: var(--color-text-muted);
}

.page-admin-products-edit .checkbox-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;
}

.page-admin-products-edit .checkbox-row input {

    width: auto;
}

.page-admin-products-edit .button-row {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    margin-top: 36px;
}

.page-admin-products-edit .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 700;

    border: none;

    cursor: pointer;
}

.page-admin-products-edit .button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-products-edit .button-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-products-edit .success-message {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 24px;

    font-weight: 700;
}

.page-admin-products-edit .error-message {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 24px;

    font-weight: 700;
}

.page-admin-products-edit .badge-active {

    background: var(--primitive-green-100-bright);
}

.page-admin-products-edit .badge-inactive {

    background: var(--primitive-red-100);
}

.page-admin-products-edit .alias-card {

    margin-top: 0;
}

.page-admin-products-edit .section-title {

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);

    margin-bottom: 8px;
}

.page-admin-products-edit .alias-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 16px;
}

.page-admin-products-edit .alias-table th, .page-admin-products-edit .alias-table td {

    padding: 12px 14px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;
}

.page-admin-products-edit .alias-table th {

    background: var(--color-background);

    font-size: 13px;

    text-transform: uppercase;

    color: var(--color-text-muted);
}

.page-admin-products-edit .alias-remove-button {

    background: var(--color-surface);

    border: 1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);

    border-radius: 10px;

    padding: 8px 12px;

    cursor: pointer;

    font-weight: 600;
}

.page-admin-products-edit .alias-add-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

    margin-top: 20px;

    align-items: end;
}

.page-admin-products-edit .alias-helper {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;

    margin-top: 8px;
}

/* ----- admin/products/import.php ----- */

.page-admin-products-import.page-container {

    max-width: 1000px;

    margin: 0 auto;
}

.page-admin-products-import .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-products-import .card h1, .page-admin-products-import .card h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-admin-products-import .description {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 24px;
}

.page-admin-products-import .download-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

.page-admin-products-import .button-link {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-products-import .button-link:hover {

    background: var(--color-surface-alt);
}

.page-admin-products-import .column-list {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 10px;

    margin: 16px 0 24px;
}

.page-admin-products-import .column-item {

    background: var(--color-background);

    border: 1px solid var(--color-border-marketing);

    border-radius: 10px;

    padding: 10px 12px;

    font-family: monospace;

    font-size: 13px;
}

.page-admin-products-import .form-group {

    margin-bottom: 20px;
}

.page-admin-products-import .form-group label {

    display: block;

    font-weight: 600;

    margin-bottom: 8px;
}

.page-admin-products-import .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 18px 0;
}

.page-admin-products-import .checkbox-row input {

    margin-top: 4px;
}

.page-admin-products-import .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    padding: 14px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;
}

.page-admin-products-import .success, .page-admin-products-import .error {

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 20px;
}

.page-admin-products-import .success {

    background: var(--primitive-green-50);

    border: 1px solid var(--primitive-green-200);

    color: var(--primitive-green-800-text);
}

.page-admin-products-import .error {

    background: var(--color-danger-bg);

    border: 1px solid var(--primitive-red-200);

    color: var(--color-danger);
}

.page-admin-products-import .result-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

    margin-top: 20px;
}

.page-admin-products-import .result-item {

    background: var(--color-background);

    border: 1px solid var(--color-border-marketing);

    border-radius: 12px;

    padding: 16px;
}

.page-admin-products-import .result-label {

    font-size: 13px;

    color: var(--color-text-muted);

    text-transform: uppercase;

    margin-bottom: 6px;
}

.page-admin-products-import .result-value {

    font-size: 24px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-products-import .error-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 16px;
}

.page-admin-products-import .error-table th, .page-admin-products-import .error-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;
}

.page-admin-products-import .error-table th {

    background: var(--color-background);
}

/* ----- admin/products/sync.php ----- */

.page-admin-products-sync.page-container {

    max-width: 1200px;

    margin: 0 auto;
}

.page-admin-products-sync .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-products-sync .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -140px;
}

.page-admin-products-sync .hero-title {

    font-size: 44px;

    font-weight: 800;

    margin-bottom: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-products-sync .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.9;

    max-width: 780px;

    position: relative;

    z-index: 2;
}

.page-admin-products-sync .hero-badges {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-products-sync .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    border-radius: 999px;

    background:
        var(--color-hero-badge-bg);

    font-size: 12px;

    font-weight: 700;
}

.page-admin-products-sync .warning-card {

    background: var(--color-surface)7ed;

    border:
        1px solid var(--primitive-orange-300);

    color: var(--primitive-orange-900);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 34px;

    line-height: 1.9;
}

.page-admin-products-sync .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 22px;

    margin-bottom: 34px;
}

.page-admin-products-sync .stat-card {

    background: var(--color-surface);

    border-radius: 22px;

    padding: 26px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-products-sync .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-products-sync .stat-number {

    margin-top: 14px;

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-products-sync .operation-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 36px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px var(--color-shadow-sm);

    margin-bottom: 34px;
}

.page-admin-products-sync .section-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-admin-products-sync .section-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 28px;

    max-width: 760px;
}

.page-admin-products-sync .sync-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 24px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    font-size: 15px;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-products-sync .sync-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-products-sync .success-card {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);

    border-radius: 22px;

    padding: 26px;

    margin-top: 30px;
}

.page-admin-products-sync .error-card {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);

    border-radius: 22px;

    padding: 26px;

    margin-top: 30px;
}

.page-admin-products-sync .result-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 18px;

    margin-top: 24px;
}

.page-admin-products-sync .result-box {

    background: var(--color-white-glass-50);

    border-radius: 16px;

    padding: 18px;
}

.page-admin-products-sync .result-label {

    font-size: 12px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    font-weight: 700;

    margin-bottom: 8px;
}

.page-admin-products-sync .result-value {

    font-size: 30px;

    font-weight: 800;
}

.page-admin-products-sync .meta {

    margin-top: 18px;

    font-size: 13px;

    line-height: 1.8;
}

.page-admin-products-sync .last-sync-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-admin-products-sync .last-sync-title {

    font-size: 24px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-products-sync .last-sync-meta {

    color: var(--color-text-muted);

    line-height: 2;
}

.page-admin-products-sync .back-link {

    display: inline-flex;

    margin-top: 28px;

    color: var(--color-text);

    font-weight: 700;

    text-decoration: none;
}

.page-admin-products-sync .back-link:hover {

    text-decoration: underline;
}

/* ----- admin/rewards/index.php ----- */

.page-admin-rewards-index.page-container {

    max-width: 1600px;

    margin: 0 auto;
}

.page-admin-rewards-index .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 54px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 36px;
}

.page-admin-rewards-index .hero-card::after {

    content: '';

    position: absolute;

    width: 460px;

    height: 460px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -220px;

    right: -120px;
}

.page-admin-rewards-index .hero-title {

    font-size: 48px;

    font-weight: 900;

    margin-bottom: 18px;

    position: relative;

    z-index: 2;
}

.page-admin-rewards-index .hero-description {

    max-width: 920px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-rewards-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 22px;

    margin-bottom: 36px;
}

.page-admin-rewards-index .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);
}

.page-admin-rewards-index .stat-label {

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-admin-rewards-index .stat-value {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);
}

.page-admin-rewards-index .filter-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);

    margin-bottom: 36px;
}

.page-admin-rewards-index .filter-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

    align-items: end;
}

.page-admin-rewards-index .form-group {

    display: flex;

    flex-direction: column;
}

.page-admin-rewards-index .form-group label {

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-rewards-index .form-group input, .page-admin-rewards-index .form-group select {

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    background: var(--color-surface);
}

.page-admin-rewards-index .filter-button {

    padding: 15px 18px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 800;

    cursor: pointer;
}

.page-admin-rewards-index .header-actions {

    display: flex;

    justify-content: flex-end;

    gap: 16px;

    margin-bottom: 30px;
}

.page-admin-rewards-index .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 20px;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 800;
}

.page-admin-rewards-index .action-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-rewards-index .grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(420px, 1fr)
        );

    gap: 30px;
}

.page-admin-rewards-index .reward-card {

    background: var(--color-surface);

    border-radius: 30px;

    overflow: hidden;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);

    transition: 0.2s ease;
}

.page-admin-rewards-index .reward-card:hover {

    transform:
        translateY(-2px);
}

.page-admin-rewards-index .reward-banner {

    height: 220px;

    background-size: cover;

    background-position: center;

    position: relative;
}

.page-admin-rewards-index .reward-banner::after {

    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            var(--color-shadow-nav-ui),
            var(--color-overlay-dark-68)
        );
}

.page-admin-rewards-index .badge-row {

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    z-index: 2;
}

.page-admin-rewards-index .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-rewards-index .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-rewards-index .badge-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-rewards-index .badge-sent {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-rewards-index .badge-redeemed {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-rewards-index .badge-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-rewards-index .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-rewards-index .reward-content {

    padding: 32px;
}

.page-admin-rewards-index .customer-name {

    font-size: 28px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 6px;
}

.page-admin-rewards-index .customer-email {

    color: var(--color-text-muted);

    margin-bottom: 22px;
}

.page-admin-rewards-index .reward-title {

    font-size: 26px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 10px;
}

.page-admin-rewards-index .reward-amount {

    font-size: 24px;

    font-weight: 800;

    color: var(--primitive-green-800-text);

    margin-bottom: 22px;
}

.page-admin-rewards-index .campaign-pill {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 14px;

    border-radius: 999px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 13px;

    font-weight: 800;

    margin-bottom: 24px;
}

.page-admin-rewards-index .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-rewards-index .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-admin-rewards-index .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-rewards-index .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;
}

.page-admin-rewards-index .coupon-box {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 22px;

    padding: 24px;

    text-align: center;

    margin-bottom: 24px;
}

.page-admin-rewards-index .coupon-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.75;

    margin-bottom: 12px;
}

.page-admin-rewards-index .coupon-code {

    font-size: 32px;

    font-weight: 900;

    letter-spacing: 0.08em;

    word-break: break-word;
}

.page-admin-rewards-index .action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 24px;
}

.page-admin-rewards-index .card-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-admin-rewards-index .card-button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-rewards-index .card-button-primary:hover {

    background: var(--color-primary-hover);
}

.page-admin-rewards-index .card-button-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-rewards-index .card-button-secondary:hover {

    background: var(--color-border);
}

.page-admin-rewards-index .footer-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;

    margin-top: 24px;

    padding-top: 22px;

    border-top:
        1px solid var(--color-surface-alt);
}

.page-admin-rewards-index .small-text {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;
}

.page-admin-rewards-index .empty-state {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 90px 40px;

    text-align: center;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-rewards-index .empty-title {

    font-size: 40px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-rewards-index .empty-description {

    color: var(--color-text-muted);

    line-height: 2;
}

@media (max-width: 768px) {.page-admin-rewards-index .hero-card {

        padding: 38px 28px;
    }

    .page-admin-rewards-index .hero-title {

        font-size: 38px;
    }

    .page-admin-rewards-index .meta-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/rewards/create.php ----- */

.page-admin-rewards-create.page-container {

    max-width: 1250px;

    margin: 0 auto;
}

.page-admin-rewards-create .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 48px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 36px;
}

.page-admin-rewards-create .hero-card::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -200px;

    right: -120px;
}

.page-admin-rewards-create .hero-title {

    font-size: 46px;

    font-weight: 900;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-rewards-create .hero-description {

    max-width: 900px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-rewards-create .context-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 6px 24px var(--color-shadow-sm);

    margin-bottom: 30px;
}

.page-admin-rewards-create .context-title {

    font-size: 24px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 20px;
}

.page-admin-rewards-create .context-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;
}

.page-admin-rewards-create .context-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-admin-rewards-create .context-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-rewards-create .context-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;
}

.page-admin-rewards-create .form-card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 36px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-rewards-create .form-title {

    font-size: 32px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 30px;
}

.page-admin-rewards-create .alert {

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 24px;

    line-height: 1.8;
}

.page-admin-rewards-create .alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-rewards-create .alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-rewards-create .form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 24px;
}

.page-admin-rewards-create .form-group {

    margin-bottom: 24px;
}

.page-admin-rewards-create .form-group-full {

    grid-column: 1 / -1;
}

.page-admin-rewards-create .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-rewards-create .form-group input, .page-admin-rewards-create .form-group select, .page-admin-rewards-create .form-group textarea {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;
}

.page-admin-rewards-create .form-group textarea {

    min-height: 160px;

    resize: vertical;
}

.page-admin-rewards-create .checkbox-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;
}

.page-admin-rewards-create .checkbox-row input {

    width: auto;
}

.page-admin-rewards-create .submit-button {

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-rewards-create .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-rewards-create .badge-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;
}

.page-admin-rewards-create .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 14px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-rewards-create .badge-winner {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-rewards-create .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

@media (max-width: 900px) {.page-admin-rewards-create .form-grid, .page-admin-rewards-create .context-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/rewards/view.php ----- */

.page-admin-rewards-view.page-container {

    max-width: 1450px;

    margin: 0 auto;
}

.page-admin-rewards-view .hero-card {

    background:
        var(--gradient-surface-hero);

    border-radius: 34px;

    padding: 52px;

    color: var(--color-surface);

    position: relative;

    overflow: hidden;

    margin-bottom: 36px;
}

.page-admin-rewards-view .hero-card::after {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -200px;

    right: -120px;
}

.page-admin-rewards-view .hero-title {

    font-size: 46px;

    font-weight: 900;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-rewards-view .hero-description {

    max-width: 900px;

    line-height: 2;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-rewards-view .badge-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;

    position: relative;

    z-index: 2;
}

.page-admin-rewards-view .badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 15px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}

.page-admin-rewards-view .badge-pending {

    background: var(--color-warning-bg);

    color: var(--primitive-amber-900);
}

.page-admin-rewards-view .badge-approved {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-rewards-view .badge-sent {

    background: var(--primitive-blue-100);

    color: var(--primitive-blue-800);
}

.page-admin-rewards-view .badge-redeemed {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-rewards-view .badge-winner {

    background: var(--primitive-yellow-100);

    color: var(--primitive-amber-800);
}

.page-admin-rewards-view .badge-featured {

    background: var(--primitive-violet-100);

    color: var(--primitive-violet-700);
}

.page-admin-rewards-view .badge-expired {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-rewards-view .alert {

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 24px;

    line-height: 1.8;
}

.page-admin-rewards-view .alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-rewards-view .alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-rewards-view .layout-grid {

    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 30px;
}

.page-admin-rewards-view .card {

    background: var(--color-surface);

    border-radius: 30px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 8px 28px var(--color-shadow-sm);
}

.page-admin-rewards-view .section-title {

    font-size: 30px;

    font-weight: 900;

    color: var(--color-text);

    margin-bottom: 26px;
}

.page-admin-rewards-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 16px;
}

.page-admin-rewards-view .meta-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 16px;
}

.page-admin-rewards-view .meta-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--color-text-muted);

    margin-bottom: 6px;
}

.page-admin-rewards-view .meta-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.7;

    word-break: break-word;
}

.page-admin-rewards-view .coupon-box {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 24px;

    padding: 28px;

    text-align: center;

    margin-top: 28px;
}

.page-admin-rewards-view .coupon-label {

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    opacity: 0.75;

    margin-bottom: 12px;
}

.page-admin-rewards-view .coupon-code {

    font-size: 38px;

    font-weight: 900;

    letter-spacing: 0.08em;

    word-break: break-word;
}

.page-admin-rewards-view .content-box {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 20px;

    padding: 22px;

    line-height: 1.9;

    color: var(--color-text-muted);

    margin-top: 24px;
}

.page-admin-rewards-view .media-preview {

    margin-top: 28px;

    border-radius: 24px;

    overflow: hidden;

    background: var(--color-surface-alt);
}

.page-admin-rewards-view .media-preview img, .page-admin-rewards-view .media-preview video {

    width: 100%;

    display: block;
}

.page-admin-rewards-view .external-box {

    padding: 80px 20px;

    text-align: center;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-rewards-view .form-group {

    margin-bottom: 24px;
}

.page-admin-rewards-view .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-rewards-view .form-group select {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;
}

.page-admin-rewards-view .submit-button {

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 16px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}

.page-admin-rewards-view .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-rewards-view .action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}

.page-admin-rewards-view .action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 18px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: 0.2s ease;
}

.page-admin-rewards-view .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-rewards-view .action-primary:hover {

    background: var(--color-primary-hover);
}

.page-admin-rewards-view .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-rewards-view .action-secondary:hover {

    background: var(--color-border);
}

@media (max-width: 1100px) {.page-admin-rewards-view .layout-grid {

        grid-template-columns: 1fr;
    }}

@media (max-width: 768px) {.page-admin-rewards-view .meta-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/automation/index.php ----- */

.page-admin-automation-index.page-container {

    max-width: 1450px;

    margin: 0 auto;
}

.page-admin-automation-index .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 44px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-automation-index .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -120px;
}

.page-admin-automation-index .hero-title {

    font-size: 46px;

    font-weight: 800;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-automation-index .hero-subtitle {

    max-width: 920px;

    line-height: 1.9;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-automation-index .hero-actions {

    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-automation-index .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 700;
}

.page-admin-automation-index .hero-button-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-automation-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 24px;

    margin-bottom: 36px;
}

.page-admin-automation-index .stat-card {

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-automation-index .stat-label {

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-automation-index .stat-number {

    font-size: 42px;

    font-weight: 800;

    color: var(--color-text);

    margin-top: 14px;
}

.page-admin-automation-index .card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-automation-index .section-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 22px;
}

.page-admin-automation-index .table-wrapper {

    overflow-x: auto;
}

.page-admin-automation-index table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-automation-index thead {

    background: var(--color-background);
}

.page-admin-automation-index th {

    padding: 16px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-automation-index td {

    padding: 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-automation-index .badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;
}

.page-admin-automation-index .badge-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-automation-index .badge-inactive {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-automation-index .action-group {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-automation-index .action-button {

    border: none;

    cursor: pointer;

    padding: 10px 14px;

    border-radius: 12px;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}

.page-admin-automation-index .action-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-automation-index .action-secondary {

    background: var(--color-surface-alt);

    color: var(--color-text);
}

.page-admin-automation-index .action-danger {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-automation-index .empty-state {

    padding: 70px 30px;

    text-align: center;
}

.page-admin-automation-index .empty-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 12px;
}

.page-admin-automation-index .empty-description {

    color: var(--color-text-muted);

    line-height: 1.9;

    max-width: 700px;

    margin: 0 auto;
}

.page-admin-automation-index .code-block {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 12px;

    padding: 14px;

    font-size: 13px;

    overflow-x: auto;

    white-space: pre-wrap;

    line-height: 1.7;
}

.page-admin-automation-index .notice-box {

    border-radius: 16px;

    padding: 16px 20px;

    margin-bottom: 24px;

    line-height: 1.7;
}

.page-admin-automation-index .notice-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);
}

.page-admin-automation-index .notice-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border:
        1px solid var(--primitive-green-200);
}

/* ----- admin/automation/create.php ----- */

.page-admin-automation-create.page-container {

    max-width: 1100px;

    margin: 0 auto;
}

.page-admin-automation-create .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 44px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-automation-create .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -120px;
}

.page-admin-automation-create .hero-title {

    font-size: 46px;

    font-weight: 800;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-automation-create .hero-subtitle {

    max-width: 920px;

    line-height: 1.9;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-automation-create .form-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 36px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);
}

.page-admin-automation-create .section-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-automation-create .helper-text {

    color: var(--color-text-muted);

    line-height: 1.9;

    margin-bottom: 28px;
}

.page-admin-automation-create .form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.page-admin-automation-create .full-width {

    grid-column: 1 / -1;
}

.page-admin-automation-create .form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-automation-create .form-group input, .page-admin-automation-create .form-group select, .page-admin-automation-create .form-group textarea {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    box-sizing: border-box;
}

.page-admin-automation-create .form-group textarea {

    min-height: 180px;

    font-family: monospace;

    line-height: 1.8;
}

.page-admin-automation-create .submit-button {

    width: 100%;

    margin-top: 36px;

    padding: 16px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;
}

.page-admin-automation-create .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-automation-create .alert {

    padding: 16px;

    border-radius: 14px;

    margin-bottom: 24px;
}

.page-admin-automation-create .alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-automation-create .alert-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);
}

.page-admin-automation-create .code-example {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 16px;

    padding: 18px;

    font-size: 13px;

    overflow-x: auto;

    line-height: 1.8;

    margin-top: 14px;
}

.page-admin-automation-create .divider {

    height: 1px;

    background: var(--color-border-marketing);

    margin: 40px 0;
}

/* ----- admin/automation/view.php ----- */

.page-admin-automation-view.page-container {

    max-width: 1400px;

    margin: 0 auto;
}

.page-admin-automation-view .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 44px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-automation-view .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -120px;
}

.page-admin-automation-view .hero-title {

    font-size: 46px;

    font-weight: 800;

    margin-bottom: 16px;

    position: relative;

    z-index: 2;
}

.page-admin-automation-view .hero-subtitle {

    max-width: 920px;

    line-height: 1.9;

    color:
        var(--color-hero-text-muted);

    position: relative;

    z-index: 2;
}

.page-admin-automation-view .hero-actions {

    margin-top: 28px;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-automation-view .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 700;
}

.page-admin-automation-view .hero-button-primary {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-automation-view .hero-button-secondary {

    background:
        var(--color-hero-badge-bg);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-14);
}

.page-admin-automation-view .layout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(340px, 0.8fr);

    gap: 32px;
}

.page-admin-automation-view .card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 18px var(--color-shadow-sm);

    margin-bottom: 30px;
}

.page-admin-automation-view .section-title {

    font-size: 30px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 22px;
}

.page-admin-automation-view .meta-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.page-admin-automation-view .meta-card {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 16px;

    padding: 18px;
}

.page-admin-automation-view .meta-label {

    font-size: 11px;

    text-transform: uppercase;

    font-weight: 700;

    color: var(--color-text-muted);

    margin-bottom: 8px;
}

.page-admin-automation-view .meta-value {

    font-weight: 600;

    color: var(--color-text);

    line-height: 1.8;
}

.page-admin-automation-view .badge {

    display: inline-flex;

    align-items: center;

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;
}

.page-admin-automation-view .badge-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);
}

.page-admin-automation-view .badge-inactive {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);
}

.page-admin-automation-view .code-block {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-radius: 18px;

    padding: 20px;

    font-size: 13px;

    overflow-x: auto;

    white-space: pre-wrap;

    line-height: 1.8;
}

.page-admin-automation-view .table-wrapper {

    overflow-x: auto;
}

.page-admin-automation-view table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-automation-view thead {

    background: var(--color-background);
}

.page-admin-automation-view th {

    padding: 16px;

    text-align: left;

    font-size: 12px;

    text-transform: uppercase;

    color: var(--color-text-muted);

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-automation-view td {

    padding: 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    vertical-align: top;
}

.page-admin-automation-view .event-success {

    color: var(--primitive-green-900);

    font-weight: 700;
}

.page-admin-automation-view .event-failed {

    color: var(--primitive-red-900);

    font-weight: 700;
}

.page-admin-automation-view .empty-state {

    padding: 60px 30px;

    text-align: center;

    color: var(--color-text-muted);
}

.page-admin-automation-view .sidebar-note {

    line-height: 1.9;

    color: var(--color-text-muted);
}

@media (max-width: 1100px) {.page-admin-automation-view .layout-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/notifications/index.php ----- */

.page-admin-notifications-index.page-container {

    max-width: 1400px;

    margin: 0 auto;
}

.page-admin-notifications-index .page-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-admin-notifications-index .page-header h1 {

    margin: 0;
    color: var(--color-text);
}

.page-admin-notifications-index .page-description {

    color: var(--color-text-muted);
    margin-top: 8px;
    line-height: 1.7;
    max-width: 720px;
}

.page-admin-notifications-index .alert {

    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 600;
}

.page-admin-notifications-index .alert-success {

    background: var(--primitive-green-50);
    color: var(--primitive-green-800-text);
    border: 1px solid var(--primitive-green-200);
}

.page-admin-notifications-index .alert-error {

    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--primitive-red-200);
}

.page-admin-notifications-index .stats-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.page-admin-notifications-index .stat-card {

    background: var(--color-surface);
    border: 1px solid var(--color-border-marketing);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 4px 18px var(--color-shadow-subtle);
}

.page-admin-notifications-index .stat-label {

    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.page-admin-notifications-index .stat-value {

    color: var(--color-text);
    font-size: 28px;
    font-weight: 700;
}

.page-admin-notifications-index .filter-card {

    background: var(--color-surface);
    border: 1px solid var(--color-border-marketing);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px var(--color-shadow-subtle);
}

.page-admin-notifications-index .filter-grid {

    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr auto auto;
    gap: 14px;
    align-items: end;
}

.page-admin-notifications-index .form-group label {

    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--color-text);
    font-size: 14px;
}

.page-admin-notifications-index .form-group input, .page-admin-notifications-index .form-group select {

    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 12px;
    background: var(--color-surface);
}

.page-admin-notifications-index .filter-button, .page-admin-notifications-index .action-button {

    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.page-admin-notifications-index .filter-button {

    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.page-admin-notifications-index .action-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-notifications-index .action-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-notifications-index .action-button.secondary {

    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.page-admin-notifications-index .summary-bar {

    margin-bottom: 14px;
    color: var(--color-text-muted);
}

.page-admin-notifications-index .table-card {

    background: var(--color-surface);
    border-radius: 18px;
    border: 1px solid var(--color-border-marketing);
    box-shadow: 0 4px 18px var(--color-shadow-sm);
    overflow-x: auto;
}

.page-admin-notifications-index table {

    width: 100%;
    border-collapse: collapse;
}

.page-admin-notifications-index thead {

    background: var(--color-background);
}

.page-admin-notifications-index th, .page-admin-notifications-index td {

    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-surface-alt);
    vertical-align: top;
}

.page-admin-notifications-index th {

    color: var(--color-text-muted);
    font-size: 13px;
}

.page-admin-notifications-index td {

    color: var(--color-text-muted);
    font-size: 14px;
}

.page-admin-notifications-index .status-badge {

    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.page-admin-notifications-index .status-sent {

    background: var(--primitive-green-50);
    color: var(--primitive-green-800-text);
}

.page-admin-notifications-index .status-pending {

    background: var(--primitive-blue-50);
    color: var(--primitive-blue-800);
}

.page-admin-notifications-index .status-failed {

    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.page-admin-notifications-index .status-cancelled {

    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.page-admin-notifications-index .type-pill {

    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border);
}

.page-admin-notifications-index .small-text {

    color: var(--color-text-placeholder);
    font-size: 12px;
    line-height: 1.6;
}

.page-admin-notifications-index .error-text {

    color: var(--color-danger);
    font-size: 12px;
    line-height: 1.5;
    max-width: 220px;
}

.page-admin-notifications-index .view-link, .page-admin-notifications-index .inline-link {

    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}

.page-admin-notifications-index .view-link:hover, .page-admin-notifications-index .inline-link:hover {

    text-decoration: underline;
}

.page-admin-notifications-index .row-actions {

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-admin-notifications-index .row-actions form {

    margin: 0;
}

.page-admin-notifications-index .mini-button {

    padding: 6px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.page-admin-notifications-index .mini-button.danger {

    color: var(--color-danger);
    border-color: var(--primitive-red-200);
}

.page-admin-notifications-index .pagination {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.page-admin-notifications-index .pagination-links {

    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin-notifications-index .pagination-links a, .page-admin-notifications-index .pagination-links span {

    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.page-admin-notifications-index .pagination-links a:hover {

    background: var(--color-background);
}

.page-admin-notifications-index .pagination-links .active {

    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-text);
}

.page-admin-notifications-index .empty-state {

    padding: 60px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 960px) {.page-admin-notifications-index .filter-grid {

        grid-template-columns: 1fr;
    }}

/* ----- admin/notifications/view.php ----- */

.page-admin-notifications-view.page-container {

    max-width: 1100px;

    margin: 0 auto;
}

.page-admin-notifications-view .page-header {

    margin-bottom: 24px;
}

.page-admin-notifications-view .page-header h1 {

    margin: 0;
    color: var(--color-text);
}

.page-admin-notifications-view .page-description {

    color: var(--color-text-muted);
    margin-top: 8px;
    line-height: 1.7;
}

.page-admin-notifications-view .back-link {

    display: inline-block;
    margin-bottom: 14px;
    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}

.page-admin-notifications-view .back-link:hover {

    text-decoration: underline;
}

.page-admin-notifications-view .alert {

    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 600;
}

.page-admin-notifications-view .alert-success {

    background: var(--primitive-green-50);
    color: var(--primitive-green-800-text);
    border: 1px solid var(--primitive-green-200);
}

.page-admin-notifications-view .alert-error {

    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--primitive-red-200);
}

.page-admin-notifications-view .detail-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.page-admin-notifications-view .detail-card {

    background: var(--color-surface);
    border: 1px solid var(--color-border-marketing);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px var(--color-shadow-subtle);
}

.page-admin-notifications-view .detail-card h2 {

    margin: 0 0 16px;
    font-size: 18px;
    color: var(--color-text);
}

.page-admin-notifications-view .detail-row {

    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-surface-alt);
}

.page-admin-notifications-view .detail-row:last-child {

    border-bottom: none;
}

.page-admin-notifications-view .detail-label {

    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.page-admin-notifications-view .detail-value {

    color: var(--color-text);
    font-size: 14px;
    text-align: right;
    max-width: 65%;
    word-break: break-word;
}

.page-admin-notifications-view .status-badge {

    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.page-admin-notifications-view .status-sent {

    background: var(--primitive-green-50);
    color: var(--primitive-green-800-text);
}

.page-admin-notifications-view .status-pending {

    background: var(--primitive-blue-50);
    color: var(--primitive-blue-800);
}

.page-admin-notifications-view .status-failed {

    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.page-admin-notifications-view .status-cancelled {

    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.page-admin-notifications-view .error-box {

    background: var(--color-danger-bg);
    border: 1px solid var(--primitive-red-200);
    color: var(--primitive-red-900);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.page-admin-notifications-view .preview-card {

    background: var(--color-surface);
    border: 1px solid var(--color-border-marketing);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px var(--color-shadow-subtle);
    margin-bottom: 18px;
}

.page-admin-notifications-view .preview-header {

    padding: 16px 20px;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border-marketing);
}

.page-admin-notifications-view .preview-header h2 {

    margin: 0;
    font-size: 18px;
    color: var(--color-text);
}

.page-admin-notifications-view .preview-meta {

    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.page-admin-notifications-view .preview-body {

    padding: 24px;
    background: var(--color-surface);
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* Stored email CTAs keep legacy inline backgrounds — re-theme in admin preview */
.page-admin-notifications-view .preview-body a.email-cta-button,
.page-admin-notifications-view .preview-body a[style*="padding:16px 24px"],
.page-admin-notifications-view .preview-body a[style*="padding: 16px 24px"] {

    display: inline-block !important;

    padding: 16px 24px !important;

    background: var(--color-primary) !important;

    color: var(--color-text-on-primary) !important;

    text-decoration: none !important;

    border-radius: 16px !important;

    font-weight: 700 !important;
}

.page-admin-notifications-view .preview-body a.email-cta-button:hover,
.page-admin-notifications-view .preview-body a[style*="padding:16px 24px"]:hover,
.page-admin-notifications-view .preview-body a[style*="padding: 16px 24px"]:hover {

    background: var(--color-primary-hover) !important;
}

.page-admin-notifications-view .action-row {

    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-admin-notifications-view .action-button {

    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.page-admin-notifications-view .action-button.primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-notifications-view .action-button.primary:hover {

    background: var(--color-primary-hover);
}

.page-admin-notifications-view .action-button.secondary {

    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.page-admin-notifications-view .action-button.danger {

    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--primitive-red-200);
}

.page-admin-notifications-view .inline-link {

    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}

.page-admin-notifications-view .inline-link:hover {

    text-decoration: underline;
}

@media (max-width: 860px) {.page-admin-notifications-view .detail-grid {

        grid-template-columns: 1fr;
    }

    .page-admin-notifications-view .detail-value {

        text-align: left;
        max-width: 100%;
    }

    .page-admin-notifications-view .detail-row {

        flex-direction: column;
        gap: 4px;
    }}

/* ----- admin/settings/email.php ----- */

.page-admin-settings-email.page-container {

    max-width: 1300px;

    margin: 0 auto;
}

.page-admin-settings-email .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-settings-email .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -130px;
}

.page-admin-settings-email .hero-title {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-email .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.9;

    max-width: 760px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-email .hero-badges {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-email .hero-badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 14px;

    border-radius: 999px;

    background:
        var(--color-hero-badge-bg);

    font-size: 12px;

    font-weight: 700;
}

.page-admin-settings-email .notice-box {

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

    line-height: 1.8;
}

.page-admin-settings-email .notice-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);
}

.page-admin-settings-email .notice-info a {

    color: var(--primitive-blue-800);

    font-weight: 700;
}

.page-admin-settings-email .warning-card {

    background: var(--color-surface)7ed;

    border:
        1px solid var(--primitive-orange-300);

    color: var(--primitive-orange-900);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 34px;

    line-height: 1.9;
}

.page-admin-settings-email .alert {

    padding: 18px 22px;

    border-radius: 18px;

    margin-bottom: 28px;

    font-weight: 700;
}

.page-admin-settings-email .alert-success {

    background: var(--primitive-green-50);

    border:
        1px solid var(--primitive-green-200);

    color: var(--primitive-green-700);
}

.page-admin-settings-email .alert-error {

    background: var(--color-danger-bg);

    border:
        1px solid var(--primitive-red-200);

    color: var(--primitive-red-900);
}

.page-admin-settings-email .settings-form {

    display: flex;

    flex-direction: column;

    gap: 32px;
}

.page-admin-settings-email .category-card {

    background: var(--color-surface);

    border-radius: 28px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-admin-settings-email .category-title {

    font-size: 28px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 24px;
}

.page-admin-settings-email .setting-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(340px, 1fr));

    gap: 22px;
}

.page-admin-settings-email .setting-card {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 22px;

    padding: 24px;
}

.page-admin-settings-email .setting-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: flex-start;
}

.page-admin-settings-email .setting-title {

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);

    margin-bottom: 8px;
}

.page-admin-settings-email .setting-key {

    font-size: 12px;

    color: var(--color-text-muted);

    margin-bottom: 10px;
}

.page-admin-settings-email .setting-description {

    color: var(--color-text-muted);

    line-height: 1.8;

    font-size: 14px;
}

.page-admin-settings-email .toggle {

    position: relative;

    width: 56px;

    height: 30px;

    flex-shrink: 0;
}

.page-admin-settings-email .toggle input {

    opacity: 0;

    width: 0;

    height: 0;
}

.page-admin-settings-email .slider {

    position: absolute;

    cursor: pointer;

    inset: 0;

    background: var(--color-border-strong);

    transition: 0.2s ease;

    border-radius: 999px;
}

.page-admin-settings-email .slider::before {

    content: '';

    position: absolute;

    width: 24px;

    height: 24px;

    left: 3px;

    top: 3px;

    background: var(--color-surface);

    transition: 0.2s ease;

    border-radius: 50%;
}

.page-admin-settings-email .toggle input:checked + .slider {

    background: var(--color-primary);
}

.page-admin-settings-email .toggle input:checked + .slider::before {

    transform:
        translateX(26px);
}

.page-admin-settings-email .button-row {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.page-admin-settings-email .button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 24px;

    border-radius: 14px;

    border: none;

    cursor: pointer;

    font-weight: 700;

    text-decoration: none;
}

.page-admin-settings-email .button-primary {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-settings-email .meta-card {

    margin-top: 40px;

    background: var(--color-surface);

    border-radius: 24px;

    padding: 28px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px var(--color-shadow-sm);
}

.page-admin-settings-email .meta-title {

    font-size: 24px;

    font-weight: 800;

    color: var(--color-text);

    margin-bottom: 18px;
}

.page-admin-settings-email .meta-content {

    color: var(--color-text-muted);

    line-height: 2;
}

/* ----- admin/settings/email-templates.php ----- */

.page-admin-settings-email-templates.page-container {

    max-width: 1100px;

    margin: 0 auto;

}

.page-admin-settings-email-templates .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

}

.page-admin-settings-email-templates .hero-title {

    font-size: 38px;

    font-weight: 800;

    margin-bottom: 12px;

}

.page-admin-settings-email-templates .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.8;

    max-width: 720px;

}

.page-admin-settings-email-templates .notice-box {

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

    line-height: 1.8;

}

.page-admin-settings-email-templates .notice-info {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border:
        1px solid var(--primitive-blue-200);

}

.page-admin-settings-email-templates .notice-info a {

    color: var(--primitive-blue-800);

    font-weight: 700;

}

.page-admin-settings-email-templates .notice-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);

}

.page-admin-settings-email-templates .template-table {

    width: 100%;

    border-collapse: collapse;

    background: var(--color-surface);

    border-radius: 24px;

    overflow: hidden;

    border:
        1px solid var(--color-border);

}

.page-admin-settings-email-templates .template-table th, .page-admin-settings-email-templates .template-table td {

    padding: 18px 22px;

    text-align: left;

    border-bottom:
        1px solid var(--color-surface-alt);

}

.page-admin-settings-email-templates .template-table th {

    background: var(--color-background);

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--color-text-muted);

}

.page-admin-settings-email-templates .template-table tr:last-child td {

    border-bottom: none;

}

.page-admin-settings-email-templates .status-pill {

    display: inline-flex;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

}

.page-admin-settings-email-templates .status-active {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);

}

.page-admin-settings-email-templates .status-inactive {

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

}

.page-admin-settings-email-templates .edit-link {

    display: inline-flex;

    padding: 10px 16px;

    border-radius: 12px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    text-decoration: none;

    font-weight: 700;

    font-size: 13px;

}

/* ----- admin/settings/site-content.php + site-content-edit.php ----- */

.page-admin-settings-site-content .hero-actions {

    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 24px;

}

.page-admin-settings-site-content .hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 22px;

    border-radius: 16px;

    text-decoration: none;

    font-weight: 800;

    font-size: 14px;

    transition: 0.2s ease;

    cursor: pointer;

    border: none;

}

.page-admin-settings-site-content .hero-button-primary {

    background: var(--color-surface);

    color: var(--color-text);

}

.page-admin-settings-site-content .hero-button-primary:hover {

    background: var(--color-surface-alt);

}

.page-admin-settings-site-content .hero-button-secondary {

    background:
        var(--color-white-glass-10);

    color: var(--color-surface);

    border:
        1px solid var(--color-white-glass-14);
}

.page-admin-settings-site-content .hero-button-secondary:hover {

    background:
        var(--color-white-glass-18);
}

.page-admin-settings-site-content .site-content-preview-link-inline {

    background: var(--color-background);

    color: var(--color-text);

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-settings-site-content .site-content-preview-link-inline:hover {

    background: var(--color-surface-alt);

}

.page-admin-settings-site-content .site-content-field-label-row {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

}

.page-admin-settings-site-content .site-content-field-label-row label {

    margin-bottom: 0;

}

.page-admin-settings-site-content .site-content-char-count {

    flex-shrink: 0;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.01em;

    color: var(--color-text-muted);

    white-space: nowrap;

}

.page-admin-settings-site-content .site-content-char-count.is-near {

    color: var(--color-warning, #b45309);

}

.page-admin-settings-site-content .site-content-char-count.is-over {

    color: var(--color-danger, #b42318);

}

/* ----- admin/settings/email-template-edit.php ----- */

.page-admin-settings-email-template-edit.page-container {

    max-width: 1100px;

    margin: 0 auto;

}

.page-admin-settings-email-template-edit .back-link {

    display: inline-flex;

    margin-bottom: 24px;

    color: var(--color-text-muted);

    text-decoration: none;

    font-weight: 600;

}

.page-admin-settings-email-template-edit .form-card, .page-admin-settings-email-template-edit .preview-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 28px;

}

.page-admin-settings-email-template-edit .form-card h2, .page-admin-settings-email-template-edit .preview-card h2 {

    margin: 0 0 8px;

    font-size: 22px;

}

.page-admin-settings-email-template-edit .field-label {

    display: block;

    font-weight: 700;

    margin: 18px 0 8px;

}

.page-admin-settings-email-template-edit .field-input, .page-admin-settings-email-template-edit .field-textarea {

    width: 100%;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    padding: 14px 16px;

    font-size: 15px;

    font-family: inherit;

}

.page-admin-settings-email-template-edit .field-textarea {

    min-height: 280px;

    font-family: Consolas, monospace;

    line-height: 1.6;

}

.page-admin-settings-email-template-edit .help-text {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;

    margin-top: 8px;

}

.page-admin-settings-email-template-edit .notice-box {

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

    line-height: 1.8;

}

.page-admin-settings-email-template-edit .notice-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border:
        1px solid var(--primitive-green-200);

}

.page-admin-settings-email-template-edit .notice-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);

}

.page-admin-settings-email-template-edit .save-btn {

    display: inline-flex;

    padding: 14px 22px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;

    margin-top: 20px;

}

.page-admin-settings-email-template-edit .toggle-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

}

.page-admin-settings-email-template-edit .preview-frame {

    border:
        1px solid var(--color-border);

    border-radius: 16px;

    padding: 24px;

    background: var(--primitive-surface-faint);

    line-height: 1.8;

}

.page-admin-settings-email-template-edit .preview-frame a.email-cta-button,
.page-admin-settings-email-template-edit .preview-frame a[style*="padding:16px 24px"],
.page-admin-settings-email-template-edit .preview-frame a[style*="padding: 16px 24px"] {

    display: inline-block !important;

    padding: 16px 24px !important;

    background: var(--color-primary) !important;

    color: var(--color-text-on-primary) !important;

    text-decoration: none !important;

    border-radius: 16px !important;

    font-weight: 700 !important;
}

.page-admin-settings-email-template-edit .preview-subject {

    margin-bottom: 16px;

    padding: 12px 16px;

    background: var(--color-surface-alt);

    border-radius: 12px;

    font-family: Consolas, monospace;

    font-size: 14px;

}

/* ----- admin/settings/teapplix-order-test.php ----- */

.page-admin-settings-teapplix-order-test.page-container {

    max-width: 960px;

    margin: 0 auto;

}

.page-admin-settings-teapplix-order-test .hero-card {

    background:
        var(--gradient-admin-hero-navy);

    color: var(--color-surface);

    border-radius: 24px;

    padding: 32px;

    margin-bottom: 28px;

}

.page-admin-settings-teapplix-order-test .hero-title {

    font-size: 32px;

    font-weight: 800;

    margin-bottom: 10px;

}

.page-admin-settings-teapplix-order-test .hero-description {

    color:
        var(--color-white-glass-85);

    line-height: 1.8;

}

.page-admin-settings-teapplix-order-test .warning-card {

    background: var(--color-surface)7ed;

    border:
        1px solid var(--primitive-orange-300);

    color: var(--primitive-orange-900);

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

    line-height: 1.8;

}

.page-admin-settings-teapplix-order-test .status-pill {

    display: inline-flex;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    margin-top: 12px;

}

.page-admin-settings-teapplix-order-test .status-ok {

    background: var(--primitive-green-100-bright);

    color: var(--primitive-green-900);

}

.page-admin-settings-teapplix-order-test .status-bad {

    background: var(--primitive-red-100);

    color: var(--primitive-red-900);

}

.page-admin-settings-teapplix-order-test .form-card, .page-admin-settings-teapplix-order-test .result-card {

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 28px;

}

.page-admin-settings-teapplix-order-test .field-label {

    display: block;

    font-weight: 700;

    margin: 16px 0 8px;

}

.page-admin-settings-teapplix-order-test .field-input, .page-admin-settings-teapplix-order-test .field-select {

    width: 100%;

    border:
        1px solid var(--color-border-strong);

    border-radius: 14px;

    padding: 14px 16px;

    font-size: 15px;

}

.page-admin-settings-teapplix-order-test .submit-btn {

    display: inline-flex;

    margin-top: 22px;

    padding: 14px 22px;

    border: none;

    border-radius: 14px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: 700;

    cursor: pointer;

}

.page-admin-settings-teapplix-order-test .notice-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border:
        1px solid var(--primitive-red-200);

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

}

.page-admin-settings-teapplix-order-test .notice-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border:
        1px solid var(--primitive-green-200);

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

}

.page-admin-settings-teapplix-order-test .json-box {

    background: var(--primitive-slate-900);

    color: var(--primitive-slate-200);

    border-radius: 16px;

    padding: 20px;

    overflow-x: auto;

    font-family: Consolas, monospace;

    font-size: 13px;

    line-height: 1.6;

    white-space: pre-wrap;

}

.page-admin-settings-teapplix-order-test .lines-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 16px;

}

.page-admin-settings-teapplix-order-test .lines-table th, .page-admin-settings-teapplix-order-test .lines-table td {

    padding: 12px 14px;

    border-bottom:
        1px solid var(--color-border);

    text-align: left;

}

.page-admin-settings-teapplix-order-test .lines-table th {

    background: var(--color-background);

    font-size: 12px;

    text-transform: uppercase;

}

.page-admin-settings-teapplix-order-test .meta-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 16px;

}

.page-admin-settings-teapplix-order-test .meta-item {

    background: var(--color-background);

    border-radius: 12px;

    padding: 14px 16px;

}

.page-admin-settings-teapplix-order-test .meta-label {

    font-size: 12px;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}

.page-admin-settings-teapplix-order-test .meta-value {

    margin-top: 6px;

    font-weight: 700;

    word-break: break-all;

}

.page-admin-settings-teapplix-order-test .field-checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 8px 0 20px;

    line-height: 1.6;

}

.page-admin-settings-teapplix-order-test .field-checkbox-row input {

    margin-top: 4px;

}

.page-admin-settings-teapplix-order-test .field-checkbox-label {

    color: var(--primitive-orange-900);

    font-weight: 600;

}

/* ----- admin/settings/smoke-test.php ----- */

.page-admin-settings-smoke-test.smoke-page {
    max-width: var(--layout-form-max);
    margin: 0 auto;
}

.page-admin-settings-smoke-test .smoke-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 8px 24px var(--color-shadow-sm);
    margin-bottom: 24px;
}

.page-admin-settings-smoke-test .smoke-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 10px;
}

.page-admin-settings-smoke-test .smoke-copy {
    color: var(--color-text-muted);
    line-height: 1.8;
}

.page-admin-settings-smoke-test .warning {
    background: var(--color-surface)beb;
    border: 1px solid var(--primitive-amber-200);
    color: var(--primitive-amber-900);
}

.page-admin-settings-smoke-test .run-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: 14px 20px;
    font-weight: 900;
    cursor: pointer;
}

.page-admin-settings-smoke-test .result-summary {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 18px;
}

.page-admin-settings-smoke-test .result-pass {
    background: var(--primitive-green-50);
    color: var(--primitive-green-800-text);
}

.page-admin-settings-smoke-test .result-fail {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.page-admin-settings-smoke-test .result-list {
    display: grid;
    gap: 12px;
}

.page-admin-settings-smoke-test .result-row {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px;
}

.page-admin-settings-smoke-test .result-name {
    font-weight: 900;
    color: var(--color-text);
}

.page-admin-settings-smoke-test .result-message {
    margin-top: 8px;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Admin marketing & contacts — Wave 7
|--------------------------------------------------------------------------
*/

/* ----- admin/marketing/campaigns.php ----- */

.page-admin-marketing-campaigns .page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    gap: 20px;

    flex-wrap: wrap;
}

.page-admin-marketing-campaigns .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-admin-marketing-campaigns .page-description {

    color: var(--color-text-muted);

    margin-top: 8px;

    line-height: 1.6;
}

.page-admin-marketing-campaigns .create-button {

    display: inline-block;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    padding: 14px 22px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.2s ease;

    box-shadow:
        0 4px 12px
        var(--color-shadow-nav-ui);
}

.page-admin-marketing-campaigns .create-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-marketing-campaigns .table-card {

    background: var(--color-surface);

    border-radius: 18px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    overflow-x: auto;
}

.page-admin-marketing-campaigns table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-campaigns table th {

    background: var(--color-background);

    padding: 18px;

    text-align: left;

    color: var(--color-text-muted);

    font-size: 14px;

    border-bottom:
        1px solid var(--color-border-marketing);
}

.page-admin-marketing-campaigns table td {

    padding: 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    color: var(--color-text-muted);

    vertical-align: top;
}

.page-admin-marketing-campaigns table tr:last-child td {

    border-bottom: none;
}

.page-admin-marketing-campaigns .status-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

.page-admin-marketing-campaigns .status-active {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-admin-marketing-campaigns .status-inactive {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-marketing-campaigns .sync-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-800);
}

.page-admin-marketing-campaigns .empty-state {

    padding: 60px 30px;

    text-align: center;

    color: var(--color-text-muted);
}

.page-admin-marketing-campaigns .action-links {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-marketing-campaigns .action-link {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;

    font-size: 14px;
}

.page-admin-marketing-campaigns .action-link:hover {

    text-decoration: underline;
}

.page-admin-marketing-campaigns .action-button {

    background: none;

    border: none;

    padding: 0;

    margin: 0;

    color: var(--color-danger);

    cursor: pointer;

    font-weight: 600;

    font-size: 14px;
}

.page-admin-marketing-campaigns .action-button:hover {

    text-decoration: underline;
}

.page-admin-marketing-campaigns .small-text {

    font-size: 13px;

    color: var(--color-text-placeholder);

    margin-top: 5px;
}

.page-admin-marketing-campaigns .inline-form {

    display: inline;
}

/* ----- admin/marketing/create.php ----- */

.page-admin-marketing-create.form-card {

    max-width: 1000px;

    margin: auto;

    background: var(--color-surface);

    border-radius: 18px;

    padding: 40px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-admin-marketing-create.form-card h1 {

    margin-top: 0;

    margin-bottom: 12px;

    color: var(--color-text);
}

.page-admin-marketing-create .form-description {

    color: var(--color-text-muted);

    margin-bottom: 35px;

    line-height: 1.7;
}

.page-admin-marketing-create .form-group {

    margin-bottom: 28px;
}

.page-admin-marketing-create .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-marketing-create .form-group input, .page-admin-marketing-create .form-group textarea, .page-admin-marketing-create .form-group select {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;

    background: var(--color-surface);

    transition: 0.2s ease;
}

.page-admin-marketing-create .form-group input:focus, .page-admin-marketing-create .form-group textarea:focus, .page-admin-marketing-create .form-group select:focus {

    outline: none;

    border-color: var(--color-text-muted);

    box-shadow:
        0 0 0 3px
        var(--color-muted-border-soft);
}

.page-admin-marketing-create .checkbox-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;

    margin-top: 12px;
}

.page-admin-marketing-create .checkbox-item {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    background: var(--color-background);

    padding: 12px 14px;

    border-radius: 10px;

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-marketing-create .checkbox-item input {

    width: auto;

    min-height: 0;

    padding: 0;

    margin-top: 3px;
}

.page-admin-marketing-create .section-title {

    margin-top: 40px;

    margin-bottom: 15px;

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-create .section-help {

    margin: -8px 0 16px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-marketing-create .submit-button, .page-admin-marketing-create .preview-button {

    margin-top: 35px;

    margin-right: 12px;

    border: none;

    padding: 15px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;

    box-shadow:
        0 4px 12px
        var(--color-shadow-nav-ui);
}

.page-admin-marketing-create .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-create .preview-button {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-marketing-create .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-marketing-create .preview-button:hover {

    background: var(--color-border);
}

.page-admin-marketing-create .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-marketing-create .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-marketing-create .toggle-group {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.page-admin-marketing-create .toggle-item {

    display: flex;

    align-items: center;

    gap: 10px;
}

.page-admin-marketing-create .toggle-item input {

    width: auto;
}

/* ----- admin/marketing/edit.php ----- */

.page-admin-marketing-edit.form-card {

    max-width: 1000px;

    margin: auto;

    background: var(--color-surface);

    border-radius: 18px;

    padding: 40px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-admin-marketing-edit.form-card h1 {

    margin-top: 0;

    margin-bottom: 12px;

    color: var(--color-text);
}

.page-admin-marketing-edit .form-description {

    color: var(--color-text-muted);

    margin-bottom: 35px;

    line-height: 1.7;
}

.page-admin-marketing-edit .form-group {

    margin-bottom: 28px;
}

.page-admin-marketing-edit .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-marketing-edit .form-group input, .page-admin-marketing-edit .form-group textarea, .page-admin-marketing-edit .form-group select {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;

    background: var(--color-surface);
}

.page-admin-marketing-edit .checkbox-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;

    margin-top: 12px;
}

.page-admin-marketing-edit .checkbox-item {

    display: flex;

    align-items: center;

    gap: 10px;

    background: var(--color-background);

    padding: 12px 14px;

    border-radius: 10px;

    border:
        1px solid var(--color-border-marketing);
}

.page-admin-marketing-edit .checkbox-item input {

    width: auto;

    min-height: 0;

    padding: 0;
}

.page-admin-marketing-edit .section-title {

    margin-top: 40px;

    margin-bottom: 15px;

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-edit .section-help {

    margin: -8px 0 16px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-marketing-edit .submit-button, .page-admin-marketing-edit .preview-button {

    margin-top: 35px;

    margin-right: 12px;

    border: none;

    padding: 15px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;
}

.page-admin-marketing-edit .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-edit .submit-button:hover {

    background: var(--color-primary-hover);
}

.page-admin-marketing-edit .preview-button {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-marketing-edit .preview-button:hover {

    background: var(--color-border);
}

.page-admin-marketing-edit .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-marketing-edit .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-marketing-edit .toggle-group {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 10px;
}

.page-admin-marketing-edit .toggle-item {

    display: flex;

    align-items: center;

    gap: 10px;
}

.page-admin-marketing-edit .toggle-item input {

    width: auto;
}

/* ----- admin/marketing/view.php ----- */

.page-admin-marketing-view .page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

    flex-wrap: wrap;
}

.page-admin-marketing-view .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-admin-marketing-view .page-description {

    color: var(--color-text-muted);

    margin-top: 8px;

    line-height: 1.6;
}

.page-admin-marketing-view .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 30px;
}

.page-admin-marketing-view .card h2 {

    margin-top: 0;

    margin-bottom: 20px;

    color: var(--color-text);
}

.page-admin-marketing-view .audience-rule-subheading {

    margin: 20px 0 12px;

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-view .audience-rule-subheading-first {

    margin-top: 0;
}

.page-admin-marketing-view .audience-rule-account-type {

    margin-bottom: 4px;
}

.page-admin-marketing-view .info-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;
}

.page-admin-marketing-view .info-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 12px;

    padding: 18px;
}

.page-admin-marketing-view .info-label {

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-muted);

    margin-bottom: 8px;

    text-transform: uppercase;
}

.page-admin-marketing-view .info-value {

    color: var(--color-text);

    font-weight: 600;

    word-break: break-word;
}

.page-admin-marketing-view .tag-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 12px;
}

.page-admin-marketing-view .tag-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 10px;

    padding: 12px 14px;

    color: var(--color-text-muted);

    font-weight: 500;
}

.page-admin-marketing-view .sync-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    padding: 14px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;

    box-shadow:
        0 4px 12px
        var(--color-shadow-nav-ui);
}

.page-admin-marketing-view .sync-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-marketing-view .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-marketing-view .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-marketing-view .info-banner {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 20px;

    border:
        1px solid var(--primitive-blue-200);

    line-height: 1.6;
}

.page-admin-marketing-view .status-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

.page-admin-marketing-view .status-active {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-admin-marketing-view .status-inactive {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-marketing-view .result-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;
}

.page-admin-marketing-view .result-table th {

    background: var(--color-background);

    padding: 14px;

    text-align: left;

    border-bottom:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);
}

.page-admin-marketing-view .result-table td {

    padding: 14px;

    border-bottom:
        1px solid var(--color-surface-alt);

    color: var(--color-text-muted);
}

.page-admin-marketing-view .result-success {

    color: var(--primitive-green-800-text);

    font-weight: 600;
}

.page-admin-marketing-view .result-failed {

    color: var(--color-danger);

    font-weight: 600;
}

.page-admin-marketing-view .customer-link {

    color: var(--color-info);

    font-weight: 600;

    text-decoration: none;
}

.page-admin-marketing-view .customer-link:hover {

    text-decoration: underline;
}

.page-admin-marketing-view .audience-meta {

    color: var(--color-text-muted);

    font-size: 14px;

    margin-bottom: 18px;
}

.page-admin-marketing-view .pagination {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: center;
}

.page-admin-marketing-view .pagination a, .page-admin-marketing-view .pagination span {

    padding: 10px 14px;

    border-radius: 12px;

    background: var(--color-surface);

    border:
        1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

    font-weight: 700;
}

.page-admin-marketing-view .pagination a:hover {

    background: var(--color-background);
}

.page-admin-marketing-view .pagination .active {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-view .small-text {

    color: var(--color-text-placeholder);

    font-size: 13px;

    margin-top: 8px;
}

/* ----- admin/marketing/logs.php ----- */

.page-admin-marketing-logs .page-header {

    margin-bottom: 30px;
}

.page-admin-marketing-logs .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-admin-marketing-logs .page-description {

    color: var(--color-text-muted);

    margin-top: 10px;

    line-height: 1.7;
}

.page-admin-marketing-logs .table-card {

    background: var(--color-surface);

    border-radius: 18px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    overflow-x: auto;
}

.page-admin-marketing-logs table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-logs table th {

    background: var(--color-background);

    padding: 18px;

    text-align: left;

    border-bottom:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    font-size: 14px;
}

.page-admin-marketing-logs table td {

    padding: 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    color: var(--color-text-muted);

    vertical-align: top;
}

.page-admin-marketing-logs table tr:last-child td {

    border-bottom: none;
}

.page-admin-marketing-logs .status-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

.page-admin-marketing-logs .status-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-admin-marketing-logs .status-partial {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-700);
}

.page-admin-marketing-logs .status-failed {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-marketing-logs .status-running {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-800);
}

.page-admin-marketing-logs .view-link {

    color: var(--color-info);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-marketing-logs .view-link:hover {

    text-decoration: underline;
}

.page-admin-marketing-logs .empty-state {

    padding: 60px 30px;

    text-align: center;

    color: var(--color-text-muted);
}

.page-admin-marketing-logs .small-text {

    color: var(--color-text-placeholder);

    font-size: 13px;
}

/* ----- admin/marketing/log-view.php ----- */

.page-admin-marketing-log-view .page-header {

    margin-bottom: 30px;
}

.page-admin-marketing-log-view .page-header h1 {

    margin: 0;

    color: var(--color-text);
}

.page-admin-marketing-log-view .page-description {

    color: var(--color-text-muted);

    margin-top: 10px;

    line-height: 1.7;
}

.page-admin-marketing-log-view .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 30px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 30px;
}

.page-admin-marketing-log-view .card h2 {

    margin-top: 0;

    margin-bottom: 20px;

    color: var(--color-text);
}

.page-admin-marketing-log-view .info-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;
}

.page-admin-marketing-log-view .info-item {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 12px;

    padding: 18px;
}

.page-admin-marketing-log-view .info-label {

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-muted);

    margin-bottom: 8px;

    text-transform: uppercase;
}

.page-admin-marketing-log-view .info-value {

    color: var(--color-text);

    font-weight: 600;

    word-break: break-word;
}

.page-admin-marketing-log-view .status-badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

.page-admin-marketing-log-view .status-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);
}

.page-admin-marketing-log-view .status-partial {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-700);
}

.page-admin-marketing-log-view .status-failed {

    background: var(--color-danger-bg);

    color: var(--color-danger);
}

.page-admin-marketing-log-view .table-card {

    background: var(--color-surface);

    border-radius: 18px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    overflow-x: auto;
}

.page-admin-marketing-log-view table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-log-view table th {

    background: var(--color-background);

    padding: 18px;

    text-align: left;

    border-bottom:
        1px solid var(--color-border-marketing);

    color: var(--color-text-muted);

    font-size: 14px;
}

.page-admin-marketing-log-view table td {

    padding: 18px;

    border-bottom:
        1px solid var(--color-surface-alt);

    color: var(--color-text-muted);

    vertical-align: top;
}

.page-admin-marketing-log-view table tr:last-child td {

    border-bottom: none;
}

.page-admin-marketing-log-view .result-success {

    color: var(--primitive-green-800-text);

    font-weight: 600;
}

.page-admin-marketing-log-view .result-failed {

    color: var(--color-danger);

    font-weight: 600;
}

.page-admin-marketing-log-view .empty-state {

    padding: 60px 30px;

    text-align: center;

    color: var(--color-text-muted);
}

.page-admin-marketing-log-view .message-box {

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 10px;

    padding: 12px;

    font-size: 13px;

    color: var(--color-text-muted);

    white-space: pre-wrap;

    word-break: break-word;
}

/* ----- admin/marketing/classification.php ----- */

.page-admin-marketing-classification.settings-card {

    max-width: 900px;

    margin: auto;

    background: var(--color-surface);

    border-radius: 18px;

    padding: 40px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-admin-marketing-classification.settings-card h1 {

    margin-top: 0;

    margin-bottom: 10px;

    color: var(--color-text);
}

.page-admin-marketing-classification .settings-description {

    color: var(--color-text-muted);

    margin-bottom: 35px;

    line-height: 1.7;
}

.page-admin-marketing-classification .form-group {

    margin-bottom: 28px;
}

.page-admin-marketing-classification .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-marketing-classification .form-group input {

    width: 100%;

    max-width: 240px;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;
}

.page-admin-marketing-classification .form-group .helper {

    margin-top: 8px;

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-marketing-classification .section-title {

    margin-top: 36px;

    margin-bottom: 18px;

    font-size: 18px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-classification .checkbox-group {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 28px;
}

.page-admin-marketing-classification .checkbox-group input {

    width: auto;

    margin-top: 4px;
}

.page-admin-marketing-classification .submit-button {

    margin-top: 28px;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    padding: 14px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;
}

.page-admin-marketing-classification .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-marketing-classification .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-marketing-classification .threshold-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;
}

/* ----- admin/marketing/klaviyo.php ----- */

.page-admin-marketing-klaviyo.settings-card {

    max-width: 900px;

    margin: auto;

    background: var(--color-surface);

    border-radius: 18px;

    padding: 40px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-admin-marketing-klaviyo.settings-card h1 {

    margin-top: 0;

    margin-bottom: 10px;

    color: var(--color-text);
}

.page-admin-marketing-klaviyo .settings-description {

    color: var(--color-text-muted);

    margin-bottom: 35px;

    line-height: 1.7;
}

.page-admin-marketing-klaviyo .form-group {

    margin-bottom: 28px;
}

.page-admin-marketing-klaviyo .form-group label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-marketing-klaviyo .form-group input {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--color-border-strong);

    border-radius: 12px;

    box-sizing: border-box;

    background: var(--color-surface);

    transition: 0.2s ease;
}

.page-admin-marketing-klaviyo .form-group input:focus {

    outline: none;

    border-color: var(--color-text-muted);

    box-shadow:
        0 0 0 3px
        var(--color-muted-border-soft);
}

.page-admin-marketing-klaviyo .checkbox-group {

    display: flex;

    align-items: center;

    gap: 12px;
}

.page-admin-marketing-klaviyo .checkbox-group input {

    width: auto;
}

.page-admin-marketing-klaviyo .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    padding: 14px 24px;

    border-radius: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;

    box-shadow:
        0 4px 12px
        var(--color-shadow-nav-ui);
}

.page-admin-marketing-klaviyo .submit-button:hover {

    background: var(--color-primary-hover);

    transform:
        translateY(-1px);
}

.page-admin-marketing-klaviyo .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800-text);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-green-200);
}

.page-admin-marketing-klaviyo .error {

    background: var(--color-danger-bg);

    color: var(--color-danger);

    padding: 15px;

    border-radius: 10px;

    margin-bottom: 25px;

    border:
        1px solid var(--primitive-red-200);
}

.page-admin-marketing-klaviyo .info-box {

    margin-top: 40px;

    background: var(--color-background);

    border:
        1px solid var(--color-border-marketing);

    border-radius: 14px;

    padding: 24px;
}

.page-admin-marketing-klaviyo .info-box h2 {

    margin-top: 0;

    color: var(--color-text);

    font-size: 20px;
}

.page-admin-marketing-klaviyo .info-box ul {

    margin: 0;

    padding-left: 20px;

    color: var(--color-text-muted);

    line-height: 1.8;
}

/* ----- admin/marketing/contacts/index.php ----- */

.page-admin-marketing-contacts-index.page-container {

    max-width: 1200px;

    margin: 0 auto;
}

.page-admin-marketing-contacts-index .page-header {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-index .page-header h1 {

    margin: 0 0 8px;

    color: var(--color-text);
}

.page-admin-marketing-contacts-index .page-header p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-marketing-contacts-index .header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-marketing-contacts-index .button-link {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-marketing-contacts-index .button-link:hover {

    background: var(--color-surface-alt);
}

.page-admin-marketing-contacts-index .button-link.primary {

    background: var(--color-primary);

    border-color: var(--color-text);

    color: var(--color-surface);
}

.page-admin-marketing-contacts-index .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 24px;

    border: 1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-index .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-index .stat-box {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 14px;

    padding: 18px;
}

.page-admin-marketing-contacts-index .stat-label {

    color: var(--color-text-muted);

    font-size: 13px;

    margin-bottom: 8px;
}

.page-admin-marketing-contacts-index .stat-value {

    color: var(--color-text);

    font-size: 28px;

    font-weight: 700;
}

.page-admin-marketing-contacts-index .warning-box {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;

    background: var(--color-surface)beb;

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);
}

.page-admin-marketing-contacts-index .filters {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: flex-end;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-index .filters label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-index .filter-field input, .page-admin-marketing-contacts-index .filter-field select {

    min-width: 180px;

    padding: 10px 12px;

    border: 1px solid var(--color-border-strong);

    border-radius: 10px;

    font-size: 14px;
}

.page-admin-marketing-contacts-index .filter-actions {

    display: flex;

    gap: 10px;
}

.page-admin-marketing-contacts-index .submit-button, .page-admin-marketing-contacts-index .secondary-button {

    border: none;

    border-radius: 10px;

    padding: 10px 16px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    display: inline-block;
}

.page-admin-marketing-contacts-index .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-contacts-index .secondary-button {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-marketing-contacts-index .table-wrap {

    overflow-x: auto;
}

.page-admin-marketing-contacts-index .data-table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-contacts-index .data-table th, .page-admin-marketing-contacts-index .data-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;

    vertical-align: top;
}

.page-admin-marketing-contacts-index .data-table th {

    background: var(--color-background);

    font-size: 13px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-index .email-cell {

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-marketing-contacts-index .meta-cell {

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-admin-marketing-contacts-index .badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 600;
}

.page-admin-marketing-contacts-index .badge-prospect {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);
}

.page-admin-marketing-contacts-index .badge-linked {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-800);
}

.page-admin-marketing-contacts-index .badge-marketing-in {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);
}

.page-admin-marketing-contacts-index .badge-marketing-out {

    background: var(--primitive-red-50);

    color: var(--primitive-red-700);
}

.page-admin-marketing-contacts-index .marketing-contact-meta {

    margin-top: 6px;

    font-size: 11px;

    color: var(--color-text-muted);

    line-height: 1.4;
}

.page-admin-marketing-contacts-index .tag-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.page-admin-marketing-contacts-index .tag-pill {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 999px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 11px;
}

.page-admin-marketing-contacts-index .empty-state {

    text-align: center;

    padding: 40px 20px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-index .list-footer {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-top: 20px;
}

.page-admin-marketing-contacts-index .pagination {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.page-admin-marketing-contacts-index .pagination a {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 8px;

    border: 1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);
}

.page-admin-marketing-contacts-index .pagination a.active {

    background: var(--color-primary);

    border-color: var(--color-text);

    color: var(--color-surface);
}

.page-admin-marketing-contacts-index .result-count {

    color: var(--color-text-muted);

    font-size: 14px;
}

.page-admin-marketing-contacts-index .alert-success, .page-admin-marketing-contacts-index .alert-error {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-index .alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);
}

.page-admin-marketing-contacts-index .alert-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border: 1px solid var(--primitive-red-200);
}

.page-admin-marketing-contacts-index .row-actions a {

    color: var(--primitive-blue-800);

    font-weight: 600;

    text-decoration: none;
}

.page-admin-marketing-contacts-index .row-actions a:hover {

    text-decoration: underline;
}

/* ----- admin/marketing/contacts/edit.php ----- */

.page-admin-marketing-contacts-edit.page-container {

    max-width: 720px;

    margin: 0 auto;
}

.page-admin-marketing-contacts-edit .page-header {

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-edit .page-header h1 {

    margin: 0 0 8px;

    color: var(--color-text);
}

.page-admin-marketing-contacts-edit .page-header p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;
}

.page-admin-marketing-contacts-edit .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 24px;

    border: 1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);
}

.page-admin-marketing-contacts-edit .alert-success, .page-admin-marketing-contacts-edit .alert-error {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-edit .alert-success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);
}

.page-admin-marketing-contacts-edit .alert-error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border: 1px solid var(--primitive-red-200);
}

.page-admin-marketing-contacts-edit .form-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;
}

.page-admin-marketing-contacts-edit .form-field label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-edit .form-field input, .page-admin-marketing-contacts-edit .form-field select {

    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border: 1px solid var(--color-border-strong);

    border-radius: 10px;

    font-size: 14px;
}

.page-admin-marketing-contacts-edit .form-field input[readonly] {

    background: var(--color-background);

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-edit .form-field .hint {

    margin-top: 6px;

    font-size: 12px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-edit .form-field-checkbox .checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-weight: 600;

    color: var(--color-text);

    cursor: pointer;
}

.page-admin-marketing-contacts-edit .form-field-checkbox .checkbox-row input {

    margin-top: 3px;
}

.page-admin-marketing-contacts-edit .section-title {

    margin: 24px 0 12px;

    font-size: 15px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-contacts-edit .form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;
}

.page-admin-marketing-contacts-edit .submit-button, .page-admin-marketing-contacts-edit .secondary-button {

    border: none;

    border-radius: 10px;

    padding: 10px 16px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    display: inline-block;
}

.page-admin-marketing-contacts-edit .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-contacts-edit .secondary-button {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);
}

.page-admin-marketing-contacts-edit .meta-box {

    margin-top: 20px;

    padding: 14px 16px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

/* ----- admin/marketing/contacts/import.php ----- */

.page-admin-marketing-contacts-import.page-container {

    max-width: 1000px;

    margin: 0 auto;
}

.page-admin-marketing-contacts-import .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 32px;

    border:
        1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-import .card h1, .page-admin-marketing-contacts-import .card h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-admin-marketing-contacts-import .description {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-import .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-import .stat-box {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 14px;

    padding: 18px;
}

.page-admin-marketing-contacts-import .stat-label {

    color: var(--color-text-muted);

    font-size: 13px;

    margin-bottom: 8px;
}

.page-admin-marketing-contacts-import .stat-value {

    color: var(--color-text);

    font-size: 28px;

    font-weight: 700;
}

.page-admin-marketing-contacts-import .download-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-import .button-link {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-marketing-contacts-import .button-link:hover {

    background: var(--color-surface-alt);
}

.page-admin-marketing-contacts-import .button-link.primary {

    background: var(--color-primary);

    border-color: var(--color-text);

    color: var(--color-surface);
}

.page-admin-marketing-contacts-import .column-list {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(140px, 1fr));

    gap: 10px;

    margin-bottom: 16px;
}

.page-admin-marketing-contacts-import .column-item {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 10px;

    padding: 10px 12px;

    font-family: monospace;

    font-size: 13px;
}

.page-admin-marketing-contacts-import .success, .page-admin-marketing-contacts-import .error, .page-admin-marketing-contacts-import .warning-box {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-import .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);
}

.page-admin-marketing-contacts-import .error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border: 1px solid var(--primitive-red-200);
}

.page-admin-marketing-contacts-import .warning-box {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);
}

.page-admin-marketing-contacts-import .form-group {

    margin-bottom: 18px;
}

.page-admin-marketing-contacts-import .form-group label {

    display: block;

    font-weight: 600;

    margin-bottom: 8px;
}

.page-admin-marketing-contacts-import .checkbox-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-import .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border: none;

    border-radius: 12px;

    padding: 12px 20px;

    font-weight: 600;

    cursor: pointer;
}

.page-admin-marketing-contacts-import .result-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(120px, 1fr));

    gap: 16px;

    margin-top: 20px;
}

.page-admin-marketing-contacts-import .result-value {

    font-size: 24px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-contacts-import .error-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 16px;
}

.page-admin-marketing-contacts-import .error-table th, .page-admin-marketing-contacts-import .error-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;
}

.page-admin-marketing-contacts-import .error-table th {

    background: var(--color-background);
}

/* ----- admin/marketing/contacts/geo.php ----- */

.page-admin-marketing-contacts-geo.page-container {

    max-width: 1200px;

    margin: 0 auto;
}

.page-admin-marketing-contacts-geo .page-header {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-geo .page-header h1 {

    margin: 0 0 8px;

    color: var(--color-text);
}

.page-admin-marketing-contacts-geo .page-header p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.6;

    max-width: 720px;
}

.page-admin-marketing-contacts-geo .header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.page-admin-marketing-contacts-geo .button-link {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);

    text-decoration: none;

    font-weight: 600;
}

.page-admin-marketing-contacts-geo .button-link.primary {

    background: var(--color-primary);

    border-color: var(--color-text);

    color: var(--color-surface);
}

.page-admin-marketing-contacts-geo .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 24px;

    border: 1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-geo .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-geo .stat-box {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 14px;

    padding: 18px;
}

.page-admin-marketing-contacts-geo .stat-label {

    color: var(--color-text-muted);

    font-size: 13px;

    margin-bottom: 8px;
}

.page-admin-marketing-contacts-geo .stat-value {

    color: var(--color-text);

    font-size: 28px;

    font-weight: 700;
}

.page-admin-marketing-contacts-geo .warning-box {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;

    background: var(--color-surface)beb;

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);
}

.page-admin-marketing-contacts-geo .filters {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: flex-end;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-geo .filter-field label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-geo .filter-field select {

    min-width: 180px;

    padding: 10px 12px;

    border: 1px solid var(--color-border);

    border-radius: 10px;
}

.page-admin-marketing-contacts-geo .submit-button, .page-admin-marketing-contacts-geo .secondary-button {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    font-weight: 600;

    text-decoration: none;

    border: none;

    cursor: pointer;
}

.page-admin-marketing-contacts-geo .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-contacts-geo .secondary-button {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);
}

.page-admin-marketing-contacts-geo .analytics-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 24px;
}

.page-admin-marketing-contacts-geo .analytics-table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-contacts-geo .analytics-table th, .page-admin-marketing-contacts-geo .analytics-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;

    vertical-align: middle;
}

.page-admin-marketing-contacts-geo .analytics-table th {

    font-size: 13px;

    color: var(--color-text-muted);

    background: var(--color-background);
}

.page-admin-marketing-contacts-geo .bar-cell {

    min-width: 140px;
}

.page-admin-marketing-contacts-geo .bar-track {

    height: 8px;

    background: var(--color-border-marketing);

    border-radius: 999px;

    overflow: hidden;

    margin-top: 6px;
}

.page-admin-marketing-contacts-geo .bar-fill {

    height: 100%;

    background: var(--color-primary);

    border-radius: 999px;
}

.page-admin-marketing-contacts-geo .row-link {

    color: var(--color-text);

    font-weight: 600;

    text-decoration: none;
}

.page-admin-marketing-contacts-geo .row-link:hover {

    text-decoration: underline;
}

.page-admin-marketing-contacts-geo .percent-cell {

    white-space: nowrap;

    font-weight: 600;
}

.page-admin-marketing-contacts-geo .section-note {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;

    margin: 0 0 16px;
}

/* ----- admin/marketing/contacts/teapplix-sync.php ----- */

.page-admin-marketing-contacts-teapplix-sync.page-container {

    max-width: 1100px;

    margin: 0 auto;
}

.page-admin-marketing-contacts-teapplix-sync .card {

    background: var(--color-surface);

    border-radius: 18px;

    padding: 32px;

    border: 1px solid var(--color-border-marketing);

    box-shadow:
        0 4px 20px
        var(--color-shadow-sm);

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-teapplix-sync .card h1, .page-admin-marketing-contacts-teapplix-sync .card h2 {

    margin-top: 0;

    color: var(--color-text);
}

.page-admin-marketing-contacts-teapplix-sync .description {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-teapplix-sync .stats-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

    margin-bottom: 24px;
}

.page-admin-marketing-contacts-teapplix-sync .stat-box {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 14px;

    padding: 18px;
}

.page-admin-marketing-contacts-teapplix-sync .stat-label {

    color: var(--color-text-muted);

    font-size: 13px;

    margin-bottom: 8px;
}

.page-admin-marketing-contacts-teapplix-sync .stat-value {

    color: var(--color-text);

    font-size: 22px;

    font-weight: 700;

}

.page-admin-marketing-contacts-teapplix-sync .warning-box, .page-admin-marketing-contacts-teapplix-sync .success, .page-admin-marketing-contacts-teapplix-sync .error {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;
}

.page-admin-marketing-contacts-teapplix-sync .warning-box {

    background: var(--color-surface)beb;

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);
}

.page-admin-marketing-contacts-teapplix-sync .success {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);
}

.page-admin-marketing-contacts-teapplix-sync .error {

    background: var(--color-danger-bg);

    color: var(--primitive-red-900);

    border: 1px solid var(--primitive-red-200);
}

.page-admin-marketing-contacts-teapplix-sync .button-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 16px;
}

.page-admin-marketing-contacts-teapplix-sync .button-link, .page-admin-marketing-contacts-teapplix-sync .submit-button, .page-admin-marketing-contacts-teapplix-sync .secondary-button {

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    font-weight: 600;

    text-decoration: none;

    border: none;

    cursor: pointer;
}

.page-admin-marketing-contacts-teapplix-sync .button-link, .page-admin-marketing-contacts-teapplix-sync .secondary-button {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text);
}

.page-admin-marketing-contacts-teapplix-sync .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-admin-marketing-contacts-teapplix-sync .log-table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-marketing-contacts-teapplix-sync .log-table th, .page-admin-marketing-contacts-teapplix-sync .log-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border-marketing);

    text-align: left;

    vertical-align: top;
}

.page-admin-marketing-contacts-teapplix-sync .log-table th {

    background: var(--color-background);

    font-size: 13px;

    color: var(--color-text-muted);
}

.page-admin-marketing-contacts-teapplix-sync .result-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(120px, 1fr));

    gap: 16px;

    margin-top: 16px;
}

.page-admin-marketing-contacts-teapplix-sync .result-value {

    font-size: 22px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-marketing-contacts-teapplix-sync .button-row label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--color-text-muted);

    font-size: 14px;
}

.page-admin-marketing-contacts-teapplix-sync .batch-field {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--color-text-muted);

    font-size: 14px;
}

.page-admin-marketing-contacts-teapplix-sync .batch-field input[type="number"] {

    width: 72px;

    padding: 8px 10px;

    border: 1px solid var(--color-border);

    border-radius: 8px;
}

.page-admin-marketing-contacts-teapplix-sync .info-box {

    background: var(--primitive-blue-50);

    color: var(--primitive-blue-900);

    border: 1px solid var(--primitive-blue-200);

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;

    line-height: 1.7;
}

.page-admin-marketing-contacts-teapplix-sync .auto-continue-notice {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);

    padding: 12px 16px;

    border-radius: 12px;

    margin-bottom: 16px;

    font-weight: 600;
}

/* ----- admin/engagement/package-flyer-sync.php ----- */

.page-admin-engagement-package-flyer-sync.page-container {

    max-width: 1100px;

    margin: 0 auto;
}

.page-admin-engagement-package-flyer-sync .card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 28px;

    box-shadow: var(--shadow-card);

}

.page-admin-engagement-package-flyer-sync .card h1,
.page-admin-engagement-package-flyer-sync .card h2 {

    margin: 0 0 12px;

}

.page-admin-engagement-package-flyer-sync .description {

    color: var(--color-text-muted);

    line-height: 1.7;

    margin-bottom: 20px;

}

.page-admin-engagement-package-flyer-sync .stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 14px;

    margin: 20px 0;

}

.page-admin-engagement-package-flyer-sync .stat-box {

    border: 1px solid var(--color-border);

    border-radius: 16px;

    padding: 14px 16px;

    background: var(--color-background);

}

.page-admin-engagement-package-flyer-sync .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

}

.page-admin-engagement-package-flyer-sync .stat-value {

    margin-top: 8px;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;

}

.page-admin-engagement-package-flyer-sync .warning-box,
.page-admin-engagement-package-flyer-sync .success,
.page-admin-engagement-package-flyer-sync .error {

    border-radius: 12px;

    padding: 12px 16px;

    margin-bottom: 16px;

}

.page-admin-engagement-package-flyer-sync .warning-box {

    background: var(--primitive-amber-50);

    border: 1px solid var(--primitive-amber-200);

    color: var(--primitive-amber-900);

}

.page-admin-engagement-package-flyer-sync .success {

    background: var(--primitive-green-50);

    border: 1px solid var(--primitive-green-200);

    color: var(--primitive-green-800);

}

.page-admin-engagement-package-flyer-sync .error {

    background: var(--primitive-red-50);

    border: 1px solid var(--primitive-red-200);

    color: var(--primitive-red-800);

}

.page-admin-engagement-package-flyer-sync .button-row {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    margin: 12px 0 0;

}

.page-admin-engagement-package-flyer-sync .button-link,
.page-admin-engagement-package-flyer-sync .submit-button,
.page-admin-engagement-package-flyer-sync .secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 999px;

    font-weight: 700;

    text-decoration: none;

}

.page-admin-engagement-package-flyer-sync .button-link,
.page-admin-engagement-package-flyer-sync .secondary-button {

    border: 1px solid var(--color-border);

    color: var(--color-text);

    background: var(--color-surface);

}

.page-admin-engagement-package-flyer-sync .submit-button {

    border: none;

    background: var(--color-primary);

    color: var(--color-text-on-primary);

}

.page-admin-engagement-package-flyer-sync .sync-action-form {

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid var(--color-border);

}

.page-admin-engagement-package-flyer-sync .log-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 12px;

}

.page-admin-engagement-package-flyer-sync .log-table th,
.page-admin-engagement-package-flyer-sync .log-table td {

    border-bottom: 1px solid var(--color-border);

    padding: 10px 12px;

    text-align: left;

}

.page-admin-engagement-package-flyer-sync .log-table th {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

}

.page-admin-engagement-package-flyer-sync .result-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 14px;

    margin-top: 12px;

}

.page-admin-engagement-package-flyer-sync .result-value {

    font-size: 16px;

    font-weight: 700;

    margin-top: 6px;

}

.page-admin-engagement-package-flyer-sync .batch-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-weight: 600;

}

.page-admin-engagement-package-flyer-sync .batch-field input[type="number"] {

    width: 88px;

    min-height: 40px;

    padding: 0 10px;

}

.page-admin-engagement-package-flyer-sync .info-box {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    border-radius: 16px;

    padding: 16px 18px;

    line-height: 1.7;

    color: var(--color-text-muted);

}

.page-admin-engagement-package-flyer-sync .auto-continue-notice {

    background: var(--primitive-green-50);

    color: var(--primitive-green-700);

    border: 1px solid var(--primitive-green-200);

    padding: 12px 16px;

    border-radius: 12px;

    margin-bottom: 16px;

    font-weight: 600;
}

.page-admin-engagement-package-flyer-sync .danger-zone {

    margin-top: 28px;

}

.page-admin-engagement-package-flyer-sync .sync-page-header {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 12px;

}

.page-admin-engagement-package-flyer-sync .sync-page-header .button-link {

    display: inline-flex;

    align-items: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 999px;

    border: 1px solid var(--color-border);

    text-decoration: none;

    font-weight: 700;

    color: var(--color-text);

    background: var(--color-surface);

}

/* ----- admin/engagement/shipped-orders.php ----- */

.page-admin-engagement-shipped-orders.page-container {

    max-width: 1280px;

    margin: 0 auto;
}

.page-admin-engagement-shipped-orders .page-header {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 20px;

}

.page-admin-engagement-shipped-orders .page-header h1 {

    margin: 0 0 8px;

}

.page-admin-engagement-shipped-orders .page-header p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.7;

    max-width: 720px;

}

.page-admin-engagement-shipped-orders .header-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.page-admin-engagement-shipped-orders .button-link {

    display: inline-flex;

    align-items: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 999px;

    border: 1px solid var(--color-border);

    text-decoration: none;

    font-weight: 700;

    color: var(--color-text);

    background: var(--color-surface);

}

.page-admin-engagement-shipped-orders .button-link.primary {

    background: var(--color-primary);

    border-color: var(--color-primary);

    color: var(--color-text-on-primary);

}

.page-admin-engagement-shipped-orders .warning-box {

    padding: 14px 16px;

    border-radius: 12px;

    margin-bottom: 20px;

    background: var(--primitive-amber-50);

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);

}

.page-admin-engagement-shipped-orders .stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 14px;

    margin-bottom: 20px;

}

.page-admin-engagement-shipped-orders .stat-box {

    border: 1px solid var(--color-border);

    border-radius: 16px;

    padding: 14px 16px;

    background: var(--color-surface);

}

.page-admin-engagement-shipped-orders .stat-label {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

}

.page-admin-engagement-shipped-orders .stat-value {

    margin-top: 8px;

    font-size: 22px;

    font-weight: 700;

}

.page-admin-engagement-shipped-orders .stat-value-small {

    font-size: 14px;

    line-height: 1.5;

}

.page-admin-engagement-shipped-orders .card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 28px;

    box-shadow: var(--shadow-card);

}

.page-admin-engagement-shipped-orders .filters {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: flex-end;

    margin-bottom: 20px;

}

.page-admin-engagement-shipped-orders .filters label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 6px;

    color: var(--color-text-muted);

}

.page-admin-engagement-shipped-orders .filter-field input,
.page-admin-engagement-shipped-orders .filter-field select {

    min-width: 180px;

    padding: 10px 12px;

    border: 1px solid var(--color-border-strong);

    border-radius: 10px;

    font-size: 14px;

}

.page-admin-engagement-shipped-orders .filter-actions {

    display: flex;

    gap: 10px;

}

.page-admin-engagement-shipped-orders .submit-button,
.page-admin-engagement-shipped-orders .secondary-button {

    border: none;

    border-radius: 10px;

    padding: 10px 16px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: none;

    display: inline-block;

}

.page-admin-engagement-shipped-orders .submit-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

}

.page-admin-engagement-shipped-orders .secondary-button {

    background: var(--color-surface-alt);

    color: var(--color-text);

    border: 1px solid var(--color-border);

}

.page-admin-engagement-shipped-orders .table-wrap {

    overflow-x: auto;

}

.page-admin-engagement-shipped-orders .data-table {

    width: 100%;

    border-collapse: collapse;

}

.page-admin-engagement-shipped-orders .data-table th,
.page-admin-engagement-shipped-orders .data-table td {

    padding: 12px;

    border-bottom: 1px solid var(--color-border);

    text-align: left;

    vertical-align: top;

}

.page-admin-engagement-shipped-orders .data-table th {

    background: var(--color-background);

    font-size: 13px;

    color: var(--color-text-muted);

}

.page-admin-engagement-shipped-orders .txn-cell code {

    font-weight: 700;

}

.page-admin-engagement-shipped-orders .meta-cell {

    margin-top: 6px;

    font-size: 12px;

    color: var(--color-text-muted);

    line-height: 1.5;

}

.page-admin-engagement-shipped-orders .verify-cell code {

    font-weight: 700;

}

.page-admin-engagement-shipped-orders .verify-label {

    display: inline-block;

    min-width: 28px;

    font-size: 11px;

    text-transform: uppercase;

    color: var(--color-text-muted);

}

.page-admin-engagement-shipped-orders .address-cell {

    min-width: 180px;

    max-width: 280px;

    line-height: 1.5;

}

.page-admin-engagement-shipped-orders .status-badge {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;

    text-transform: capitalize;

}

.page-admin-engagement-shipped-orders .badge-eligible {

    background: var(--primitive-green-50);

    color: var(--primitive-green-800);

    border: 1px solid var(--primitive-green-200);

}

.page-admin-engagement-shipped-orders .badge-ineligible {

    background: var(--primitive-amber-50);

    color: var(--primitive-amber-900);

    border: 1px solid var(--primitive-amber-200);

}

.page-admin-engagement-shipped-orders .badge-invite {

    background: var(--color-background);

    color: var(--color-text);

    border: 1px solid var(--color-border);

}

.page-admin-engagement-shipped-orders .empty-state {

    padding: 28px 16px;

    text-align: center;

    color: var(--color-text-muted);

}

.page-admin-engagement-shipped-orders .list-footer {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

}

.page-admin-engagement-shipped-orders .pagination {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.page-admin-engagement-shipped-orders .pagination a {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 8px;

    border: 1px solid var(--color-border);

    text-decoration: none;

    color: var(--color-text);

}

.page-admin-engagement-shipped-orders .pagination a.active {

    background: var(--color-primary);

    border-color: var(--color-text);

    color: var(--color-surface);

}

.page-admin-engagement-shipped-orders .result-count {

    color: var(--color-text-muted);

    font-size: 14px;

}

/* ----- admin/marketing/partials/campaign-rule-fields.php ----- */

.marketing-campaign-rules .rules-help {



    background: var(--color-background);



    border: 1px solid var(--color-border-marketing);



    border-radius: 12px;



    padding: 16px 18px;



    color: var(--color-text-muted);



    line-height: 1.6;



    margin-bottom: 24px;

}



.marketing-campaign-rules .radio-grid {



    display: grid;



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



    gap: 12px;



    margin-bottom: 24px;

}



.marketing-campaign-rules .radio-item {



    display: flex;



    align-items: center;



    gap: 10px;



    padding: 12px 14px;



    border: 1px solid var(--color-border-marketing);



    border-radius: 10px;



    background: var(--color-background);



    cursor: pointer;



    line-height: 1.4;

}



.marketing-campaign-rules .radio-item input[type="radio"] {



    width: 16px;



    height: 16px;



    min-height: 16px;



    padding: 0;



    margin: 0;



    flex: 0 0 16px;



    border-radius: 50%;



    border: 1px solid var(--color-border-strong);



    box-shadow: none;



    background: var(--color-surface);



    cursor: pointer;

}



.marketing-campaign-rules .radio-item input[type="radio"]:focus {



    outline: none;



    border-color: var(--color-text-muted);



    box-shadow:
        0 0 0 3px
        var(--color-muted-border-soft);

}



.marketing-campaign-rules .empty-tag-group {



    color: var(--color-text-muted);



    font-size: 14px;



    margin-bottom: 24px;

}



.marketing-campaign-rules .match-preview {



    margin-top: 28px;



    padding: 16px 18px;



    border-radius: 12px;



    background: var(--primitive-blue-50);



    border: 1px solid var(--primitive-blue-200);



    color: var(--primitive-blue-900);

}

/* Spin Wheel Configuration — admin/settings/engagement-wheel.php */

.page-admin-settings-engagement.page-container {

    max-width: 1300px;

    margin: 0 auto;
}

.page-admin-settings-engagement .hero-card {

    background:
        var(--gradient-surface-hero);

    color: var(--color-surface);

    border-radius: 32px;

    padding: 42px;

    margin-bottom: 36px;

    position: relative;

    overflow: hidden;
}

.page-admin-settings-engagement .hero-card::after {

    content: '';

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background:
        var(--color-hero-overlay-soft);

    top: -150px;

    right: -130px;
}

.page-admin-settings-engagement .hero-title {

    font-size: 42px;

    font-weight: 800;

    margin-bottom: 14px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-engagement .hero-description {

    color:
        var(--color-hero-text-muted);

    line-height: 1.9;

    max-width: 760px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-engagement .hero-badges {

    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    position: relative;

    z-index: 2;
}

.page-admin-settings-engagement .hero-badge {

    background:
        var(--color-hero-badge-bg);

    border: 1px solid
        var(--color-hero-badge-border);

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.02em;
}

.page-admin-settings-engagement .notice-box {

    border-radius: 18px;

    padding: 18px 22px;

    margin-bottom: 28px;

    line-height: 1.75;
}

.page-admin-settings-engagement .notice-info {

    background:
        var(--color-info-bg);

    border: 1px solid
        var(--color-info-border);

    color: var(--color-text);
}

.page-admin-settings-engagement .alert {

    border-radius: 14px;

    padding: 14px 18px;

    margin-bottom: 20px;

    line-height: 1.6;
}

.page-admin-settings-engagement .alert-success {

    background:
        var(--color-success-bg);

    border: 1px solid
        var(--color-success-border);

    color: var(--color-success-text);
}

.page-admin-settings-engagement .alert-error {

    background:
        var(--color-error-bg);

    border: 1px solid
        var(--color-error-border);

    color: var(--color-error-text);
}

.page-admin-settings-engagement .settings-card,
.page-admin-settings-engagement .engagement-master-card {

    margin-bottom: 24px;

    padding: 24px;

    border-radius: 18px;

    border: 1px solid var(--color-border);

    background: var(--color-surface);
}

.page-admin-settings-engagement .settings-card-header h2 {

    margin: 0 0 8px;

    font-size: 22px;
}

.page-admin-settings-engagement .settings-card-header p {

    margin: 0 0 18px;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.page-admin-settings-engagement .engagement-toggle-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 18px;

    border-radius: 14px;

    border: 1px solid var(--color-border);

    background: var(--color-background);
}

.page-admin-settings-engagement .engagement-toggle-copy strong {

    display: block;

    margin-bottom: 4px;
}

.page-admin-settings-engagement .engagement-toggle-copy span {

    color: var(--color-text-muted);

    font-size: 14px;

    line-height: 1.6;
}

.page-admin-settings-engagement .engagement-toggle-switch {

    position: relative;

    display: inline-block;

    width: 54px;

    height: 30px;

    flex-shrink: 0;
}

.page-admin-settings-engagement .engagement-toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;
}

.page-admin-settings-engagement .engagement-toggle-slider {

    position: absolute;

    inset: 0;

    border-radius: 999px;

    background: var(--primitive-gray-400);

    transition: background 0.2s ease;
}

.page-admin-settings-engagement .engagement-toggle-slider::before {

    content: "";

    position: absolute;

    width: 22px;

    height: 22px;

    left: 4px;

    top: 4px;

    border-radius: 50%;

    background: #fff;

    transition: transform 0.2s ease;
}

.page-admin-settings-engagement .engagement-toggle-switch input:checked + .engagement-toggle-slider {

    background: var(--primitive-green-600);
}

.page-admin-settings-engagement .engagement-toggle-switch input:checked + .engagement-toggle-slider::before {

    transform: translateX(24px);
}

.page-admin-settings-engagement .engagement-rules-table-wrap {

    overflow-x: auto;
}

.page-admin-settings-engagement .engagement-rules-table {

    width: 100%;

    border-collapse: collapse;
}

.page-admin-settings-engagement .engagement-rules-table th,
.page-admin-settings-engagement .engagement-rules-table td {

    padding: 14px 12px;

    border-bottom: 1px solid var(--color-border);

    text-align: left;

    vertical-align: top;
}

.page-admin-settings-engagement .engagement-rules-table th {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-rule-sub {

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-admin-settings-engagement .engagement-rule-key {

    display: inline-block;

    margin-top: 6px;

    font-size: 11px;
}

.page-admin-settings-engagement .engagement-input-spin {

    width: 72px;

    padding: 8px 10px;
}

.page-admin-settings-engagement .engagement-input-date {

    min-width: 150px;

    padding: 8px 10px;
}

.page-admin-settings-engagement .engagement-status-pill {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 700;
}

.page-admin-settings-engagement .engagement-status-pill--on {

    background: var(--primitive-green-100);

    color: var(--primitive-green-800);
}

.page-admin-settings-engagement .engagement-status-pill--off {

    background: var(--primitive-gray-100);

    color: var(--primitive-gray-700);
}

.page-admin-settings-engagement .engagement-rule-window {

    margin-top: 8px;

    font-size: 12px;

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-prize-table-wrap {

    overflow-x: auto;
}

.page-admin-settings-engagement .engagement-prize-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;
}

.page-admin-settings-engagement .engagement-prize-table th,
.page-admin-settings-engagement .engagement-prize-table td {

    padding: 12px 10px;

    border-bottom: 1px solid var(--color-border);

    text-align: left;

    vertical-align: top;
}

.page-admin-settings-engagement .engagement-prize-table th {

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted);

    white-space: nowrap;
}

.page-admin-settings-engagement .engagement-prize-label {

    font-weight: 600;

    margin-bottom: 4px;
}

.page-admin-settings-engagement .engagement-prize-config {

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.5;
}

.page-admin-settings-engagement .engagement-input-weight,
.page-admin-settings-engagement .engagement-input-cap {

    width: 72px;

    padding: 8px 10px;
}

.page-admin-settings-engagement .engagement-prize-odds {

    font-variant-numeric: tabular-nums;

    font-weight: 600;

    white-space: nowrap;
}

.page-admin-settings-engagement .engagement-prize-odds--off {

    color: var(--color-text-muted);

    font-weight: 400;
}

.page-admin-settings-engagement .engagement-prize-type-pill,
.page-admin-settings-engagement .engagement-rarity-pill {

    display: inline-block;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    white-space: nowrap;
}

.page-admin-settings-engagement .engagement-prize-type-pill {

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-rarity-pill--common {

    background: #eef2f7;

    color: #475569;
}

.page-admin-settings-engagement .engagement-rarity-pill--uncommon {

    background: #dcfce7;

    color: #166534;
}

.page-admin-settings-engagement .engagement-rarity-pill--rare {

    background: #dbeafe;

    color: #1d4ed8;
}

.page-admin-settings-engagement .engagement-rarity-pill--epic {

    background: #f3e8ff;

    color: #7e22ce;
}

.page-admin-settings-engagement .engagement-rarity-pill--legendary {

    background: #fef3c7;

    color: #b45309;
}

.page-admin-settings-engagement .engagement-prize-footnote {

    margin-top: 14px;

    padding: 12px 14px;

    border-radius: 12px;

    background: var(--color-background);

    border: 1px solid var(--color-border);

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.6;
}

.page-admin-settings-engagement .engagement-prize-footnote strong {

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-prize-link-card .btn {

    margin-top: 4px;
}

.page-admin-settings-engagement .engagement-pool-overview__header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px 24px;
}

.page-admin-settings-engagement .engagement-pool-overview__legend {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;
}

.page-admin-settings-engagement .engagement-pool-legend-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    border: 1px solid transparent;
}

.page-admin-settings-engagement .engagement-pool-legend-item--live {

    background: #ecfdf5;

    color: #047857;

    border-color: #a7f3d0;
}

.page-admin-settings-engagement .engagement-pool-legend-item--off {

    background: #fff7ed;

    color: #c2410c;

    border-color: #fed7aa;
}

.page-admin-settings-engagement .engagement-pool-legend-item--global {

    background: #eff6ff;

    color: #1d4ed8;

    border-color: #bfdbfe;
}

.page-admin-settings-engagement .engagement-pool-layout {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.page-admin-settings-engagement .engagement-pool-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.page-admin-settings-engagement .engagement-pool-card {

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding: 0;

    border-radius: 16px;

    border: 1px solid var(--color-border);

    background: var(--color-background);

    text-decoration: none;

    color: inherit;

    overflow: hidden;

    min-height: 0;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.page-admin-settings-engagement .engagement-pool-card--featured {

    width: 100%;
}

.page-admin-settings-engagement .engagement-pool-card--featured .engagement-pool-card__stats {

    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-admin-settings-engagement .engagement-pool-card:hover {

    border-color: var(--color-primary);

    box-shadow: 0 8px 20px rgb(0 0 0 / 7%);

    transform: translateY(-1px);
}

.page-admin-settings-engagement .engagement-pool-card--active {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 2px rgb(59 130 246 / 18%);
}

.page-admin-settings-engagement .engagement-pool-card--global,
.page-admin-settings-engagement .engagement-pool-card--featured {

    border-color: #bfdbfe;
}

.page-admin-settings-engagement .engagement-pool-card--live {

    border-color: #a7f3d0;
}

.page-admin-settings-engagement .engagement-pool-card--off,
.page-admin-settings-engagement .engagement-pool-card--empty {

    border-color: #fed7aa;
}

.page-admin-settings-engagement .engagement-pool-card__top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    padding: 16px 16px 0;
}

.page-admin-settings-engagement .engagement-pool-card__identity {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;
}

.page-admin-settings-engagement .engagement-pool-card__glyph {

    flex: 0 0 10px;

    width: 10px;

    height: 10px;

    margin-top: 6px;

    border-radius: 999px;

    background: currentColor;
}

.page-admin-settings-engagement .engagement-pool-card__glyph--global {

    color: #2563eb;

    box-shadow: 0 0 0 4px #dbeafe;
}

.page-admin-settings-engagement .engagement-pool-card__glyph--live {

    color: #059669;

    box-shadow: 0 0 0 4px #d1fae5;
}

.page-admin-settings-engagement .engagement-pool-card__glyph--off,
.page-admin-settings-engagement .engagement-pool-card__glyph--empty {

    color: #ea580c;

    box-shadow: 0 0 0 4px #ffedd5;
}

.page-admin-settings-engagement .engagement-pool-card__badge {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    white-space: nowrap;
}

.page-admin-settings-engagement .engagement-pool-card__badge--global {

    background: #dbeafe;

    color: #1d4ed8;
}

.page-admin-settings-engagement .engagement-pool-card__badge--live {

    background: #d1fae5;

    color: #047857;
}

.page-admin-settings-engagement .engagement-pool-card__badge--off,
.page-admin-settings-engagement .engagement-pool-card__badge--empty {

    background: #ffedd5;

    color: #c2410c;
}

.page-admin-settings-engagement .engagement-pool-card__title {

    margin: 0;

    font-weight: 700;

    font-size: 15px;

    line-height: 1.3;

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-pool-card__subtitle {

    margin: 4px 0 0;

    font-size: 12px;

    line-height: 1.4;

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-pool-card__stats {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin: 0 16px;

    border: 1px solid var(--color-border);

    border-radius: 12px;

    overflow: hidden;

    background: var(--color-border);
}

.page-admin-settings-engagement .engagement-pool-card__stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    padding: 12px 8px;

    background: var(--color-background);

    text-align: center;
}

.page-admin-settings-engagement .engagement-pool-card__stat-value {

    font-size: 20px;

    font-weight: 700;

    line-height: 1;

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-pool-card__stat-label {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-pool-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding: 12px 16px 16px;

    border-top: 1px solid var(--color-border);

    background: rgb(0 0 0 / 2%);
}

.page-admin-settings-engagement .engagement-pool-card__source {

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;
}

.page-admin-settings-engagement .engagement-pool-card__source--live {

    background: #ecfdf5;

    color: #047857;
}

.page-admin-settings-engagement .engagement-pool-card__source--global,
.page-admin-settings-engagement .engagement-pool-card__source--off,
.page-admin-settings-engagement .engagement-pool-card__source--empty {

    background: #f8fafc;

    color: #64748b;
}

.page-admin-settings-engagement .engagement-pool-card__manage {

    font-size: 12px;

    font-weight: 600;

    color: var(--color-primary);
}

@media (max-width: 1100px) {

    .page-admin-settings-engagement .engagement-pool-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 680px) {

    .page-admin-settings-engagement .engagement-pool-grid {

        grid-template-columns: 1fr;

    }

}

.page-admin-settings-engagement .engagement-pool-editor-title-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px 14px;
}

.page-admin-settings-engagement .engagement-pool-editor-title-row h2 {

    margin: 0;
}

.page-admin-settings-engagement .engagement-pool-editor-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    align-items: flex-start;
}

.page-admin-settings-engagement .engagement-pool-toggle-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 14px 16px;

    border-radius: 14px;

    border: 1px solid var(--color-border);

    background: var(--color-background);

    max-width: 560px;
}

.page-admin-settings-engagement .engagement-pool-toggle-copy {

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.page-admin-settings-engagement .engagement-pool-toggle-copy strong {

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-pool-toggle-copy span {

    font-size: 13px;

    color: var(--color-text-muted);
}

.page-admin-settings-engagement .engagement-pool-disabled-notice {

    margin: 0 0 16px;

    padding: 12px 14px;

    border-radius: 12px;

    border: 1px solid #fed7aa;

    background: #fff7ed;

    color: #9a3412;

    font-size: 13px;

    line-height: 1.55;
}

.page-admin-settings-engagement .engagement-pool-editor-heading {

    display: flex;

    flex-direction: column;

    gap: 12px;

    flex: 1;

    min-width: 0;
}

.page-admin-settings-engagement .engagement-pool-selector {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    max-width: 420px;
}

.page-admin-settings-engagement .engagement-pool-selector label {

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-pool-selector select {

    flex: 1;

    min-width: 200px;
}

.page-admin-settings-engagement .engagement-settings-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.page-admin-settings-engagement .engagement-prize-editor__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;
}

.page-admin-settings-engagement .engagement-prize-editor__header h2 {

    margin-top: 0;
}

.page-admin-settings-engagement .engagement-prize-empty {

    padding: 20px;

    border-radius: 14px;

    border: 1px dashed var(--color-border);

    color: var(--color-text-muted);

    line-height: 1.7;
}

.page-admin-settings-engagement .engagement-prize-edit-btn {

    white-space: nowrap;

    padding: 6px 12px;

    font-size: 13px;
}

.page-admin-settings-engagement .engagement-prize-archived-list {

    margin: 0;

    padding: 0;

    list-style: none;
}

.page-admin-settings-engagement .engagement-prize-archived-list li {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 16px;

    align-items: baseline;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border);

    line-height: 1.6;
}

.page-admin-settings-engagement .engagement-prize-archived-list li:last-child {

    border-bottom: none;
}

.page-admin-settings-engagement .engagement-prize-archived-date {

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-admin-settings-engagement .engagement-grants-filters .filter-row,
.page-admin-settings-engagement .engagement-simulator-form .filter-row {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    align-items: flex-end;
}

.page-admin-settings-engagement .engagement-grants-filters label,
.page-admin-settings-engagement .engagement-simulator-form label {

    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 13px;

    font-weight: 700;
}

.page-admin-settings-engagement .filter-search {

    flex: 1 1 220px;
}

.page-admin-settings-engagement .engagement-grants-table tr.is-selected td {

    background: color-mix(
        in srgb,
        var(--color-primary) 8%,
        transparent
    );
}

.page-admin-settings-engagement .engagement-grant-detail-grid {

    display: grid;

    grid-template-columns: repeat(
        auto-fit,
        minmax(200px, 1fr)
    );

    gap: 20px;

    margin-top: 8px;
}

.page-admin-settings-engagement .engagement-grant-detail-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid var(--color-border);
}

.page-admin-settings-engagement .engagement-grant-action-form {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;
}

.page-admin-settings-engagement .engagement-grant-reason-input {

    min-width: 180px;
}

.page-admin-settings-engagement .engagement-jackpot-manual-form {

    display: grid;

    gap: 16px;
}

.page-admin-settings-engagement .engagement-jackpot-manual-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;
}

.page-admin-settings-engagement .engagement-jackpot-manual-grid label {

    display: grid;

    gap: 8px;

    font-size: 13px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-settings-engagement .engagement-jackpot-manual-label-wide {

    grid-column: 1 / -1;
}

.page-admin-settings-engagement .engagement-jackpot-source-manual {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    background: var(--color-surface-alt);

    color: var(--color-text-muted);

    font-size: 11px;

    font-weight: 800;
}

.page-admin-settings-engagement .pagination-bar {

    display: flex;

    gap: 16px;

    align-items: center;

    justify-content: center;

    margin-top: 20px;
}

.page-admin-settings-engagement .engagement-simulator-summary {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 20px;
}

.page-admin-settings-engagement .engagement-simulator-stat {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 16px 20px;

    border-radius: var(--radius-md, 12px);

    background: var(--color-surface-muted, #f5f5f5);

    min-width: 180px;
}

.page-admin-settings-engagement .engagement-simulator-stat span {

    font-size: 12px;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.04em;
}

.page-admin-settings-engagement .engagement-grant-detail-token {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid var(--color-border);
}

.page-admin-settings-engagement .engagement-grant-detail-token strong {

    display: block;

    margin-bottom: 8px;
}

.page-admin-settings-engagement .engagement-grant-token-value {

    display: block;

    max-width: 100%;

    padding: 10px 12px;

    border-radius: var(--radius-sm, 8px);

    background: var(--color-surface-muted, #f5f5f5);

    font-size: 12px;

    line-height: 1.5;

    word-break: break-all;

    overflow-wrap: anywhere;

    white-space: pre-wrap;
}

.page-admin-settings-engagement .engagement-grant-suspend-note {

    flex: 1 1 100%;

    margin: 0;
}

.page-admin-settings-engagement .engagement-simulator-stat strong {

    font-size: 22px;
}

body.engagement-prize-modal-open {

    overflow: hidden;
}

.engagement-prize-modal {

    position: fixed;

    inset: 0;

    z-index: 1200;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;
}

.engagement-prize-modal[hidden] {

    display: none !important;
}

.engagement-prize-modal__backdrop {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.55);
}

.engagement-prize-modal__panel {

    position: relative;

    z-index: 2;

    width: min(720px, 100%);

    max-height: calc(100vh - 48px);

    overflow: auto;

    background: var(--color-surface);

    border-radius: 22px;

    border: 1px solid var(--color-border);

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);

    padding: 24px;
}

.engagement-prize-modal__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;
}

.engagement-prize-modal__header h2 {

    margin: 0;

    font-size: 24px;
}

.engagement-prize-modal__close {

    border: none;

    background: transparent;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    color: var(--color-text-muted);

    padding: 4px 8px;
}

.engagement-prize-modal__notice {

    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 12px;

    background: var(--color-info-bg);

    border: 1px solid var(--color-info-border);

    color: var(--color-text);

    font-size: 14px;

    line-height: 1.6;
}

.engagement-prize-field {

    margin-bottom: 16px;
}

.engagement-prize-field-row {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 14px;

    margin-bottom: 8px;
}

.engagement-prize-field label {

    display: block;

    margin-bottom: 6px;

    font-weight: 600;

    font-size: 14px;
}

.engagement-prize-field__input,
.engagement-prize-field__textarea {

    width: 100%;

    padding: 10px 12px;

    border-radius: 10px;

    border: 1px solid var(--color-border);

    background: var(--color-background);

    color: var(--color-text);
}

.engagement-prize-field__textarea {

    resize: vertical;

    min-height: 88px;
}

.engagement-prize-field__hint {

    margin: 6px 0 0;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.5;
}

.engagement-prize-config-section {

    margin: 18px 0;

    padding: 16px;

    border-radius: 14px;

    border: 1px solid var(--color-border);

    background: var(--color-background);
}

.engagement-prize-config-section h3 {

    margin: 0 0 12px;

    font-size: 16px;
}

.engagement-prize-toggle {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 8px 0 16px;

    font-weight: 600;
}

.engagement-prize-modal__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 8px;

    padding-top: 8px;
}

.engagement-prize-modal__archive {

    margin-left: auto;
}

.engagement-prize-archive-form {

    display: none;
}

/* ----- admin/engagement/promo-campaigns.php ----- */

.page-admin-engagement-promo-campaigns,
.page-admin-engagement-promo-campaign-form,
.page-admin-engagement-package-flyer-campaigns,
.page-admin-engagement-package-flyer-campaign-form {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-engagement-promo-campaigns .page-header,
.page-admin-engagement-promo-campaign-form .page-header,
.page-admin-engagement-package-flyer-campaigns .page-header,
.page-admin-engagement-package-flyer-campaign-form .page-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;

    flex-wrap: wrap;
}

.page-admin-engagement-promo-campaigns .page-header-actions,
.page-admin-engagement-promo-campaign-form .page-header-actions,
.page-admin-engagement-package-flyer-campaigns .page-header-actions,
.page-admin-engagement-package-flyer-campaign-form .page-header-actions,
.page-admin-engagement-promo-campaign-form .form-actions,
.page-admin-engagement-package-flyer-campaign-form .form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    align-items: center;
}

.page-admin-engagement-promo-campaigns .primary-button,
.page-admin-engagement-promo-campaigns .secondary-button,
.page-admin-engagement-promo-campaign-form .primary-button,
.page-admin-engagement-promo-campaign-form .secondary-button,
.page-admin-engagement-package-flyer-campaigns .primary-button,
.page-admin-engagement-package-flyer-campaigns .secondary-button,
.page-admin-engagement-package-flyer-campaign-form .primary-button,
.page-admin-engagement-package-flyer-campaign-form .secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    border: 1px solid var(--color-border);

    cursor: pointer;

    font-size: 14px;

    line-height: 1.2;

    white-space: nowrap;
}

.page-admin-engagement-promo-campaigns .primary-button,
.page-admin-engagement-promo-campaign-form .primary-button,
.page-admin-engagement-package-flyer-campaigns .primary-button,
.page-admin-engagement-package-flyer-campaign-form .primary-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-engagement-promo-campaigns .secondary-button,
.page-admin-engagement-promo-campaign-form .secondary-button,
.page-admin-engagement-package-flyer-campaigns .secondary-button,
.page-admin-engagement-package-flyer-campaign-form .secondary-button {

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-engagement-promo-campaigns .primary-button:hover,
.page-admin-engagement-promo-campaign-form .primary-button:hover,
.page-admin-engagement-package-flyer-campaigns .primary-button:hover,
.page-admin-engagement-package-flyer-campaign-form .primary-button:hover {

    background: var(--color-primary-hover);

    color: var(--color-text-on-primary);
}

.page-admin-engagement-promo-campaigns .secondary-button:hover,
.page-admin-engagement-promo-campaign-form .secondary-button:hover,
.page-admin-engagement-package-flyer-campaigns .secondary-button:hover,
.page-admin-engagement-package-flyer-campaign-form .secondary-button:hover {

    background: var(--color-background);
}

.page-admin-engagement-promo-campaigns .table-actions,
.page-admin-engagement-package-flyer-campaigns .table-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

    align-items: flex-start;
}

.page-admin-engagement-promo-campaigns .inline-form,
.page-admin-engagement-package-flyer-campaigns .inline-form {

    display: inline;
}

.page-admin-engagement-promo-campaign-form .form-grid,
.page-admin-engagement-package-flyer-campaign-form .form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 24px;
}

.page-admin-engagement-package-flyer-campaigns .flyer-url-cell code {

    font-size: 12px;

    word-break: break-all;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-panel {

    margin-top: 28px;

    max-width: 520px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-note {

    color: var(--color-text-muted);

    margin: 0 0 16px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-url-block {

    margin-bottom: 20px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-label {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--color-text-muted);

    margin-bottom: 8px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-url {

    display: block;

    font-size: 13px;

    word-break: break-all;

    padding: 12px;

    border-radius: 12px;

    background: var(--color-surface-muted, #f6f4f1);
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-preview-wrap {

    display: flex;

    justify-content: center;

    padding: 20px;

    border-radius: 16px;

    background: #fff;

    border: 1px solid var(--color-border);

    margin-bottom: 16px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-preview {

    display: block;

    width: 280px;

    height: 280px;

    object-fit: contain;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.page-admin-engagement-package-flyer-campaign-form .flyer-qr-format-note {

    margin: 0;

    font-size: 13px;

    color: var(--color-text-muted);

    flex: 1 1 100%;
}

.page-admin-engagement-promo-campaign-form label,
.page-admin-engagement-package-flyer-campaign-form label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-weight: 700;
}

.page-admin-engagement-promo-campaign-form input,
.page-admin-engagement-promo-campaign-form select,
.page-admin-engagement-package-flyer-campaign-form input,
.page-admin-engagement-package-flyer-campaign-form select {

    min-height: 44px;

    border-radius: 12px;

    border: 1px solid var(--color-border);

    padding: 0 12px;
}

.page-admin-engagement-promo-campaign-form .field-hint,
.page-admin-engagement-package-flyer-campaign-form .field-hint {

    font-weight: 500;

    color: var(--color-text-muted);

    font-size: 13px;
}

.page-admin-engagement-promo-campaign-form .linked-field-readout code,
.page-admin-engagement-package-flyer-campaign-form .linked-field-readout code {

    font-size: 12px;
}

@media (max-width: 900px) {

    .page-admin-engagement-promo-campaign-form .form-grid,
    .page-admin-engagement-package-flyer-campaign-form .form-grid {

        grid-template-columns: 1fr;
    }

}

.page-admin-engagement-promo-campaign-email .form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;

}

/* ----- admin/settings/cron-logs.php ----- */

.page-admin-settings-cron-logs,
.page-admin-settings-cron-log-view {

    max-width: var(--layout-content-max);

    margin: 0 auto;

    padding-bottom: 40px;
}

.page-admin-settings-cron-logs .page-header,
.page-admin-settings-cron-log-view .page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 28px;

    flex-wrap: wrap;
}

.page-admin-settings-cron-logs .page-title,
.page-admin-settings-cron-log-view .page-title {

    font-size: 40px;

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-settings-cron-logs .page-description,
.page-admin-settings-cron-log-view .page-description {

    margin-top: 10px;

    color: var(--color-text-muted);

    line-height: 1.8;

    max-width: 760px;
}

.page-admin-settings-cron-log-view .page-header-actions {

    display: flex;

    gap: 12px;

    align-items: center;
}

.page-admin-settings-cron-logs .notice-box,
.page-admin-settings-cron-log-view .notice-box {

    margin-bottom: 20px;

    padding: 16px 18px;

    border-radius: 16px;

    border: 1px solid var(--color-border);
}

.page-admin-settings-cron-logs .notice-success,
.page-admin-settings-cron-log-view .notice-success {

    background: var(--color-success-soft);

    border-color: var(--color-success);
}

.page-admin-settings-cron-logs .notice-error,
.page-admin-settings-cron-log-view .notice-error {

    background: var(--color-danger-soft);

    border-color: var(--color-danger);
}

.page-admin-settings-cron-logs .notice-warning {

    background: var(--color-surface);

    border-color: var(--primitive-amber-200);

    color: var(--primitive-amber-900);
}

.page-admin-settings-cron-logs .cron-settings-card,
.page-admin-settings-cron-logs .cron-tip-card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 24px;

    padding: 24px 28px;

    margin-bottom: 24px;

    box-shadow: 0 8px 24px var(--color-shadow-sm);
}

.page-admin-settings-cron-logs .cron-settings-card h2,
.page-admin-settings-cron-logs .output-card h2,
.page-admin-settings-cron-log-view .output-card h2 {

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 12px;

    color: var(--color-text);
}

.page-admin-settings-cron-logs .settings-copy,
.page-admin-settings-cron-logs .field-hint,
.page-admin-settings-cron-logs .purge-note {

    color: var(--color-text-muted);

    line-height: 1.7;
}

.page-admin-settings-cron-logs .settings-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 18px;
}

.page-admin-settings-cron-logs .field-block {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.page-admin-settings-cron-logs .field-label {

    font-weight: 800;

    color: var(--color-text);
}

.page-admin-settings-cron-logs .field-block input,
.page-admin-settings-cron-logs .filter-bar select {

    min-height: 46px;

    border-radius: 14px;

    border: 1px solid var(--color-border);

    padding: 0 14px;

    background: var(--color-surface);
}

.page-admin-settings-cron-logs .field-checkbox-row {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 10px 0;

    line-height: 1.6;
}

.page-admin-settings-cron-logs .field-checkbox-row input {

    margin-top: 4px;
}

.page-admin-settings-cron-logs .field-checkbox-label {

    color: var(--color-text);

    font-weight: 600;
}

.page-admin-settings-cron-logs .form-actions,
.page-admin-settings-cron-logs .purge-form {

    margin-top: 18px;
}

.page-admin-settings-cron-logs .primary-button,
.page-admin-settings-cron-logs .secondary-button,
.page-admin-settings-cron-log-view .secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    border: 1px solid var(--color-border);

    cursor: pointer;

    background: var(--color-surface);

    color: var(--color-text);
}

.page-admin-settings-cron-logs .primary-button {

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    border-color: var(--color-text);
}

.page-admin-settings-cron-logs .cron-tip-card code {

    font-size: 0.95em;
}

.page-admin-settings-cron-logs .filter-bar {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    align-items: flex-end;

    margin-bottom: 20px;
}

.page-admin-settings-cron-logs .filter-bar label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-weight: 700;

    color: var(--color-text);
}

.page-admin-settings-cron-logs .clear-link {

    align-self: center;

    color: var(--color-primary);

    font-weight: 700;

    text-decoration: none;
}

.page-admin-settings-cron-logs .summary-cell {

    max-width: 320px;
}

.page-admin-settings-cron-logs .error-text {

    color: var(--color-danger);

    margin-top: 6px;
}

.page-admin-settings-cron-logs .list-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

    flex-wrap: wrap;
}

.page-admin-settings-cron-logs .pagination-meta {

    color: var(--color-text-muted);

    font-weight: 700;
}

.page-admin-settings-cron-logs .pagination-nav {

    display: flex;

    gap: 10px;
}

.page-admin-settings-cron-log-view .detail-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 20px;
}

.page-admin-settings-cron-log-view .detail-card,
.page-admin-settings-cron-log-view .output-card,
.page-admin-settings-cron-log-view .summary-card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: 20px;

    padding: 18px 20px;

    margin-bottom: 20px;

    box-shadow: 0 8px 24px var(--color-shadow-sm);
}

.page-admin-settings-cron-log-view .detail-label {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--color-text-muted);

    margin-bottom: 8px;
}

.page-admin-settings-cron-log-view .detail-value {

    color: var(--color-text);

    font-weight: 700;

    line-height: 1.6;
}

.page-admin-settings-cron-log-view .log-output {

    margin: 0;

    padding: 18px;

    border-radius: 16px;

    background: var(--color-bg);

    border: 1px solid var(--color-border);

    overflow-x: auto;

    white-space: pre-wrap;

    word-break: break-word;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 13px;

    line-height: 1.6;

    color: var(--color-text);
}

.page-admin-settings-cron-log-view .inline-empty {

    padding: 12px 0;
}

@media (max-width: 900px) {

    .page-admin-settings-cron-logs .settings-grid,
    .page-admin-settings-cron-log-view .detail-grid {

        grid-template-columns: 1fr;
    }

}

/* ===== END pages/admin.css ===== */

/* ===== BEGIN pages/install.css ===== */

/*
|--------------------------------------------------------------------------
| Page: install — Wave 8 (install/index.php)
|--------------------------------------------------------------------------
| Standalone installer; excluded from public header.php shell.
|--------------------------------------------------------------------------
*/

.page-install {

    min-height: 100vh;

    padding: var(--space-9);

    background: var(--color-background);

    font-family: var(--font-body);
}

.page-install.container {

    max-width: var(--layout-narrow-max);

    margin: auto;

    background: var(--color-surface);

    padding: var(--space-8);

    border-radius: var(--radius-sm);

    border: 1px solid var(--color-border);
}

.page-install input {

    width: 100%;

    padding: var(--space-3);

    margin-top: var(--space-2);

    margin-bottom: var(--space-5);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);
}

.page-install button {

    padding: var(--space-3) var(--space-5);

    cursor: pointer;

    border: none;

    border-radius: var(--radius-sm);

    background: var(--color-primary);

    color: var(--color-text-on-primary);

    font-weight: var(--font-weight-semibold);
}

.page-install .success {

    color: var(--color-success-text);

    margin-bottom: var(--space-5);
}

.page-install .error {

    color: var(--color-danger);

    margin-bottom: var(--space-5);
}

/* ===== END pages/install.css ===== */

/* ===== BEGIN pages/theme-preview.css ===== */

/*
|--------------------------------------------------------------------------
| Admin theme preview — /admin/settings/theme-preview.php
|--------------------------------------------------------------------------
*/

.page-theme-preview {

    padding: var(--space-8) var(--page-padding) var(--space-11);
}

.page-theme-preview .theme-preview-header {

    margin-bottom: var(--space-8);
}

.page-theme-preview .theme-preview-header h1 {

    margin: 0 0 var(--space-2);

    font-family: var(--font-heading);

    font-size: var(--font-size-lg);

    color: var(--color-text);
}

.page-theme-preview .theme-preview-header p {

    margin: 0;

    color: var(--color-text-muted);

    max-width: 720px;
    line-height: var(--line-height-body);
}

.page-theme-preview .theme-preview-layout {

    display: grid;

    grid-template-columns: 360px 1fr;

    gap: var(--space-8);

    align-items: start;
}

.page-theme-preview .theme-preview-panel {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    padding: var(--space-6);

    box-shadow: var(--shadow-sm);
}

.page-theme-preview .theme-preview-panel h2 {

    margin: 0 0 var(--space-4);

    font-size: 15px;

    font-weight: var(--font-weight-bold);

    color: var(--color-text);
}

.page-theme-preview .theme-preset-row {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-3);

    margin-bottom: var(--space-6);
}

.page-theme-preview .theme-preset-btn {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    padding: var(--space-3);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-background);

    cursor: pointer;

    text-align: left;

    transition: var(--transition);
}

.page-theme-preview .theme-preset-btn:hover,
.page-theme-preview .theme-preset-btn.is-selected {

    border-color: var(--color-primary);

    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.page-theme-preview .theme-preset-btn strong {

    font-size: 13px;

    color: var(--color-text);
}

.page-theme-preview .theme-preset-btn span {

    font-size: 11px;

    line-height: 1.4;

    color: var(--color-text-muted);
}

.page-theme-preview .theme-knob {

    margin-bottom: var(--space-4);
}

.page-theme-preview .theme-knob label {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: var(--space-2);

    font-size: 12px;

    font-weight: var(--font-weight-semibold);

    color: var(--color-text);
}

.page-theme-preview .theme-knob input[type="color"] {

    width: 100%;

    height: 42px;

    padding: 4px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    background: var(--color-surface);

    cursor: pointer;
}

.page-theme-preview .theme-knob code {

    font-size: 11px;

    color: var(--color-text-muted);
}

.page-theme-preview .theme-actions {

    display: flex;

    flex-direction: column;

    gap: var(--space-3);

    margin-top: var(--space-6);
}

.page-theme-preview .theme-actions .btn {

    width: 100%;

    justify-content: center;
}

.page-theme-preview .theme-note {

    margin-top: var(--space-4);

    padding: var(--space-3);

    border-radius: var(--radius-sm);

    background: var(--color-surface-alt);

    font-size: 12px;

    line-height: 1.5;

    color: var(--color-text-muted);
}

.page-theme-preview .theme-preview-stage {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    box-shadow: var(--shadow-md);
}

.page-theme-preview .theme-mock-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-4);

    padding: var(--space-4) var(--space-5);

    background: var(--color-nav-glass-bg);

    border-bottom: 1px solid var(--color-border);
}

.page-theme-preview .theme-mock-brand {

    display: flex;

    align-items: center;

    gap: var(--space-3);
}

.page-theme-preview .theme-mock-logo {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    background: var(--gradient-brand-logo);

    color: var(--color-text-on-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;
}

.page-theme-preview .theme-mock-brand strong {

    display: block;

    font-size: 14px;

    color: var(--color-text);
}

.page-theme-preview .theme-mock-brand small {

    color: var(--color-text-muted);

    font-size: 11px;
}

.page-theme-preview .theme-mock-links {

    display: flex;

    gap: var(--space-2);
}

.page-theme-preview .theme-mock-link {

    padding: 10px 14px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 800;

    color: var(--color-nav-link);

    background: transparent;
}

.page-theme-preview .theme-mock-link.is-active {

    background: var(--color-primary);

    color: var(--color-text-on-primary);
}

.page-theme-preview .theme-mock-body {

    padding: var(--space-6);

    background: var(--color-background);
}

.page-theme-preview .theme-mock-hero {

    padding: var(--space-8);

    border-radius: var(--radius-lg);

    background: var(--gradient-marketing-hero);

    color: var(--color-hero-text);

    margin-bottom: var(--space-5);
}

.page-theme-preview .theme-mock-hero h3 {

    margin: 0 0 var(--space-2);

    font-family: var(--font-heading);

    font-size: 22px;
}

.page-theme-preview .theme-mock-hero p {

    margin: 0 0 var(--space-4);

    color: var(--color-hero-text-muted);
}

.page-theme-preview .theme-mock-row {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-3);

    margin-bottom: var(--space-5);
}

.page-theme-preview .theme-mock-card {

    flex: 1 1 220px;

    padding: var(--space-5);

    border-radius: var(--radius-md);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
}

.page-theme-preview .theme-mock-card h4 {

    margin: 0 0 var(--space-2);

    font-size: 14px;

    color: var(--color-text);
}

.page-theme-preview .theme-mock-card p {

    margin: 0;

    font-size: 13px;

    color: var(--color-text-muted);
}

.page-theme-preview .theme-mock-footer {

    padding: var(--space-6);

    background: var(--gradient-footer);

    color: var(--color-footer-text);
}

.page-theme-preview .theme-mock-footer strong {

    display: block;

    margin-bottom: var(--space-2);
}

.page-theme-preview .theme-mock-footer p {

    margin: 0;

    color: var(--color-footer-text-muted);

    font-size: 13px;
}

.page-theme-preview .theme-alert {

    margin-bottom: var(--space-5);

    padding: var(--space-4);

    border-radius: var(--radius-md);

    font-size: 14px;
}

.page-theme-preview .theme-alert-success {

    background: var(--color-success-bg);

    color: var(--color-success-text);

    border: 1px solid var(--color-success);
}

.page-theme-preview .theme-alert-error {

    background: var(--color-danger-bg);

    color: var(--color-danger-text);

    border: 1px solid var(--color-danger);
}

@media (max-width: 1024px) {

    .page-theme-preview .theme-preview-layout {

        grid-template-columns: 1fr;
    }
}

/* ===== END pages/theme-preview.css ===== */