/* ============================================================
   POPmercial® Configuration Interface — POPOLOGY Design System
   Tokens sourced from the canonical Figma file
   ("POPOLOGY (Shared - 29 Aug 2025)") via the Claude Design bundle.
   Class names (.btn-primary, .card, .sidebar, .header, etc.) are
   kept stable so existing Razor pages adopt the new visuals
   without per-page edits. Pages with inline light-theme styles
   will need a follow-up sweep.
   ============================================================ */

/* ============================================================
   1. POPOLOGY Tokens (canonical)
   ============================================================ */
:root {
    /* Core palette — exact rgb literals from the Figma file */
    --pop-navy-900: #081B2E;
    --pop-navy-800: #0A1726;
    --pop-navy-700: #163149;
    --pop-navy-600: #264465;

    --pop-cyan-200: #C8EAFB;
    --pop-cyan-300: #85E4FF;
    --pop-cyan-400: #7BD6F5;   /* PRIMARY ACCENT */
    --pop-cyan-500: #3DBAD0;

    --pop-blue-300: #779FC7;
    --pop-blue-400: #2252CC;
    --pop-blue-500: #133480;   /* gradient anchor */
    --pop-blue-600: #1A007F;

    --pop-cool-100: #F3F5F9;
    --pop-cool-200: #DBDBDB;
    --pop-cool-300: #C5C6DD;
    --pop-cool-400: #AEB5C7;
    --pop-cool-500: #6B7690;
    --pop-cool-600: #40444E;

    --pop-magenta: #FF65E6;
    --pop-gold-300: #E8C77A;
    --pop-gold-500: #B89048;

    --pop-success: #4EC02D;
    --pop-success-soft: rgba(78, 192, 45, 0.14);
    --pop-warning: #F5C26B;
    --pop-warning-soft: rgba(245, 194, 107, 0.14);
    --pop-danger: #F26E6E;
    --pop-danger-soft: rgba(242, 110, 110, 0.14);

    --pop-stroke-cta: rgba(123, 245, 225, 0.90);

    /* Semantic surfaces — cards use the kit's 55% navy glass so they
       read as discrete surfaces on the navy page (the 8% cool-gray
       tint from the README is too subtle to use as the default). */
    --bg-page:       var(--pop-navy-900);
    --bg-surface:    rgba(8, 27, 46, 0.72);
    --bg-elevated:   var(--pop-navy-700);
    --bg-card:       rgba(22, 49, 73, 0.65);    /* navy-700 @ 65% — the readable card surface */
    --bg-card-hover: rgba(38, 68, 101, 0.70);
    --bg-card-flat:  rgba(197, 198, 221, 0.08); /* the README's flat-tint variant, kept for opt-in */
    --bg-input:      rgba(8, 27, 46, 0.65);
    --bg-hover:      rgba(255, 255, 255, 0.06);
    --bg-active:     rgba(255, 255, 255, 0.10);

    --fg-primary:   #FFFFFF;
    --fg-secondary: var(--pop-cool-300);  /* #C5C6DD — body copy at comfortable contrast */
    --fg-muted:     var(--pop-cool-400);  /* #AEB5C7 — secondary copy */
    --fg-subtle:    var(--pop-cool-500);  /* #6B7690 — supporting copy */
    --fg-disabled:  var(--pop-cool-600);
    --fg-accent:    var(--pop-cyan-400);

    --border-hairline: rgba(255, 255, 255, 0.10);
    --border-subtle:   rgba(255, 255, 255, 0.12);
    --border-default:  rgba(255, 255, 255, 0.20);
    --border-bright:   rgba(255, 255, 255, 0.36);
    --border-cta:      var(--pop-stroke-cta);

    /* Signature diamond-radial CTA gradient */
    --grad-cta:
        radial-gradient(120% 120% at 30% 20%,
            #7BD6F5 0%,
            #2E76C9 45%,
            #133480 100%);
    --grad-cta-hover:
        radial-gradient(120% 120% at 30% 20%,
            #B2EAFF 0%,
            #4A93D9 45%,
            #1A4099 100%);

    /* Page background — aurora glows on deep navy */
    --grad-page-bg:
        radial-gradient(1100px 700px at 90% -10%, rgba(123,214,245,0.10), transparent 60%),
        radial-gradient(800px 600px at -10% 100%, rgba(34,82,204,0.18), transparent 60%),
        linear-gradient(180deg, #081B2E 0%, #051221 100%);

    --grad-card-sheen:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);

    /* Shadows */
    --shadow-card:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 24px 60px -20px rgba(0, 0, 0, 0.55),
        0 4px 16px -4px rgba(0, 0, 0, 0.35);
    --shadow-card-hover:
        0 1px 0 rgba(255, 255, 255, 0.10) inset,
        0 30px 80px -20px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.18);
    /* The 4px teal ring is provided by the .btn-primary `border`,
       so the inset 0 0 0 4px line is removed here — keeping it
       was effectively doubling the rim to ~8px thick. */
    --shadow-cta:
        0 8px 24px -6px rgba(19, 52, 128, 0.65),
        0 0 32px rgba(123, 214, 245, 0.35);
    --shadow-cta-hover:
        0 8px 24px -6px rgba(19, 52, 128, 0.75),
        0 0 40px rgba(123, 214, 245, 0.50);
    --shadow-glow-cyan:
        0 0 24px rgba(123, 214, 245, 0.40),
        0 0 60px rgba(123, 214, 245, 0.18);

    /* Type scale (iOS-style names from Figma Typography frame) */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fs-caption: 12px; --lh-caption: 16px;
    --fs-footnote: 13px; --lh-footnote: 20px;
    --fs-callout: 14px; --lh-callout: 20px;
    --fs-subhead: 15px; --lh-subhead: 20px;
    --fs-body: 16px; --lh-body: 24px;
    --fs-headline: 17px; --lh-headline: 24px;
    --fs-title-3: 24px; --lh-title-3: 32px;
    --fs-title-2: 28px; --lh-title-2: 36px;
    --fs-title-1: 32px; --lh-title-1: 40px;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 32px;
    --radius-pill: 999px;

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 140ms;
    --dur-base: 240ms;

    /* Layout */
    --vz-sidebar-width: 260px;
    --vz-header-height: 70px;

    /* ============================================================
       Compatibility shims — existing pages reference --vz-* tokens.
       Re-point them at the POPOLOGY system so the dark theme
       propagates everywhere without renaming variables in pages.
       ============================================================ */
    --vz-primary:        var(--pop-cyan-400);
    --vz-primary-dark:   var(--pop-cyan-500);
    --vz-primary-light:  var(--pop-cyan-300);
    --vz-success:        var(--pop-success);
    --vz-warning:        var(--pop-warning);
    --vz-danger:         var(--pop-danger);
    --vz-info:           var(--pop-cyan-400);
    --vz-secondary:      var(--pop-cool-400);
    --vz-accent:         var(--pop-cyan-400);
    --vz-accent-dark:    var(--pop-cyan-500);
    --vz-gold:           var(--pop-gold-300);
    --vz-gold-dark:      var(--pop-gold-500);
    --vz-token-green:    var(--pop-success);
    --vz-blockchain:     var(--pop-cyan-400);

    --vz-body-bg:        var(--bg-page);
    --vz-card-bg:        var(--bg-card);
    --vz-sidebar-bg:     rgba(8, 27, 46, 0.72);
    --vz-sidebar-active: rgba(123, 214, 245, 0.14);

    --vz-text-primary:   var(--fg-primary);
    --vz-text-muted:     var(--fg-muted);
    --vz-text-light:     var(--fg-subtle);

    --vz-border-color:   var(--border-subtle);
    --vz-shadow:         var(--shadow-card);
    --vz-shadow-lg:      var(--shadow-card-hover);
    --vz-shadow-glow:    var(--shadow-glow-cyan);

    --vz-gradient-primary: var(--grad-cta);
    --vz-gradient-gold:    linear-gradient(135deg, #E8C77A 0%, #B89048 100%);
    --vz-gradient-success: linear-gradient(135deg, #4EC02D 0%, #2E8F1A 100%);
    --vz-gradient-dark:    linear-gradient(180deg, rgba(8,27,46,0.85) 0%, rgba(5,18,33,0.95) 100%);
    --vz-gradient-token:   linear-gradient(135deg, #4EC02D 0%, #2E8F1A 100%);

    --vz-transition:      all var(--dur-base) var(--ease-standard);
    --vz-transition-fast: all var(--dur-fast) var(--ease-standard);
    --vz-radius-sm:       var(--radius-sm);
    --vz-radius:          var(--radius-md);
    --vz-radius-lg:       var(--radius-lg);
    --vz-radius-xl:       var(--radius-xl);
}

/* ============================================================
   2. Global baseline
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--bg-page);
    background-image: var(--grad-page-bg);
    background-attachment: fixed;
    color: var(--fg-secondary);
    font-size: var(--fs-callout);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--fg-primary); font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--fg-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--pop-cyan-300); }

/* The luminous wordmark — used in sidebar brand & sign-in */
.pop-wordmark {
    font-family: var(--font-sans);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pop-cyan-400);
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.45),
        0 0 32px rgba(123, 214, 245, 0.30);
}

.pop-mono { font-family: var(--font-mono); }
.pop-glow-cyan { box-shadow: var(--shadow-glow-cyan); }

/* ============================================================
   3. Layout
   ============================================================ */
.page-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--vz-sidebar-width);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    background: rgba(8, 27, 46, 0.72) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid var(--border-hairline) !important;
    transition: var(--vz-transition);
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 10px; }

.main-content {
    flex: 1;
    margin-left: var(--vz-sidebar-width);
    transition: var(--vz-transition);
}

.page-content { padding: 32px; min-height: calc(100vh - var(--vz-header-height)); }

.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--vz-sidebar-width)); }

/* When the sidebar is hidden, distribute its 260px reserved space
   evenly on both sides of .main-content. The effective content
   width stays identical to the sidebar-visible state (viewport
   minus sidebar width); only the position changes from
   left-aligned to centered. No max-width — content keeps its
   natural dimensions. */
.sidebar-collapsed .main-content {
    margin-left: calc(var(--vz-sidebar-width) / 2);
    margin-right: calc(var(--vz-sidebar-width) / 2);
}

/* Header blends into the page when the sidebar is collapsed —
   no glass fill, no divider — so the chrome quiets down and the
   content reads as the focus. */
.sidebar-collapsed .header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
}

/* ============================================================
   4. Sidebar navigation
   ============================================================ */
.sidebar-brand {
    /* Match the header height exactly so the brand divider lines up
       with the header's bottom border across the page. */
    height: var(--vz-header-height);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-hairline);
}

.sidebar-brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    /* Soft cyan halo on the white mark to match the wordmark glow. */
    filter: drop-shadow(0 0 6px rgba(123, 214, 245, 0.45));
}

.sidebar-brand-text {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pop-cyan-400);
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.45),
        0 0 32px rgba(123, 214, 245, 0.30);
}

.sidebar-menu { list-style: none; padding: 12px 14px 24px; }

.sidebar-menu-item { margin: 2px 0; }

.sidebar-menu-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--fg-muted);
    text-decoration: none;
    font-size: var(--fs-callout);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: var(--vz-transition-fast);
}

.sidebar-menu-link:hover {
    background-color: var(--bg-hover);
    color: var(--fg-primary);
}

.sidebar-menu-link.active {
    background-color: var(--vz-sidebar-active);
    color: var(--pop-cyan-400);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(123, 214, 245, 0.22);
}

.sidebar-menu-link i {
    width: 20px;
    margin-right: 12px;
    font-size: 16px;
}

.sidebar-submenu {
    list-style: none;
    padding-left: 52px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-submenu.show { max-height: 500px; }

.sidebar-submenu-link {
    display: block;
    padding: 8px 0;
    color: var(--fg-subtle);
    text-decoration: none;
    font-size: var(--fs-footnote);
    transition: var(--vz-transition-fast);
}

.sidebar-submenu-link:hover { color: var(--fg-primary); padding-left: 8px; }

.menu-label {
    padding: 20px 14px 8px;
    color: var(--fg-subtle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}


/* ============================================================
   5. Header / topbar
   ============================================================ */
.header {
    height: var(--vz-header-height);
    background: rgba(8, 27, 46, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.header-left { display: flex; align-items: center; gap: 20px; }
.header-right { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--fg-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: var(--vz-transition-fast);
}

.menu-toggle:hover { background-color: var(--bg-hover); color: var(--fg-primary); }

.search-box { position: relative; width: 320px; }

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: rgba(10, 18, 38, 0.65);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--fg-primary);
    font-size: var(--fs-callout);
    font-family: var(--font-sans);
    transition: var(--vz-transition-fast);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
}

.search-box input::placeholder { color: var(--fg-subtle); }

.search-box input:focus {
    outline: none;
    border-color: var(--border-bright);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25),
                0 0 0 3px rgba(123, 214, 245, 0.20);
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-subtle);
}

.header-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: rgba(10, 18, 38, 0.65);
    border: 1px solid var(--border-subtle);
    color: var(--fg-secondary);
    cursor: pointer;
    transition: var(--vz-transition-fast);
}

.header-icon:hover { border-color: var(--border-bright); color: var(--fg-primary); }

.header-icon .badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: var(--pop-cyan-400);
    color: var(--pop-navy-900);
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--pop-navy-900);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--vz-transition-fast);
    color: var(--fg-secondary);
}

.user-profile:hover { background: var(--bg-hover); color: var(--fg-primary); }

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 600; font-size: var(--fs-callout); color: var(--fg-primary); }
.user-role { font-size: var(--fs-footnote); color: var(--fg-muted); }

/* ============================================================
   6. Cards (glass)
   ------------------------------------------------------------
   Override Bootstrap's --bs-card-* variables (which default to
   white / light borders) so any Bootstrap-internal card styling
   inherits the dark theme.
   ============================================================ */
.card {
    --bs-card-bg: var(--bg-card);
    --bs-card-color: var(--fg-secondary);
    --bs-card-border-color: var(--border-subtle);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--fg-primary);
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    color: var(--fg-secondary);
    overflow: hidden;
    position: relative;
    transition: var(--vz-transition);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-card-sheen);
    pointer-events: none;
}

.card > * { position: relative; }

.card:hover { box-shadow: var(--shadow-card-hover); }

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

.card-title {
    font-size: var(--fs-headline);
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0;
}

.card-body { padding: 24px; color: var(--fg-secondary); }

/* Stat cards */
.stat-card { background: var(--bg-card); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; }

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(123, 214, 245, 0.18), transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.stat-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    border: 1px solid var(--border-subtle);
}

.stat-card-icon.success {
    background: rgba(78, 192, 45, 0.14);
    color: var(--pop-success);
    border-color: rgba(78, 192, 45, 0.28);
}

.stat-card-icon.primary,
.stat-card-icon.accent,
.stat-card-icon.info {
    background: rgba(123, 214, 245, 0.14);
    color: var(--pop-cyan-400);
    border-color: rgba(123, 214, 245, 0.32);
}

.stat-card-icon.warning {
    background: rgba(245, 194, 107, 0.14);
    color: var(--pop-warning);
    border-color: rgba(245, 194, 107, 0.28);
}

.stat-card-icon.gold {
    background: rgba(232, 199, 122, 0.14);
    color: var(--pop-gold-300);
    border-color: rgba(232, 199, 122, 0.28);
}

.stat-card-icon.token {
    background: rgba(78, 192, 45, 0.14);
    color: var(--pop-success);
    border-color: rgba(78, 192, 45, 0.28);
}

.stat-card-title {
    font-size: var(--fs-footnote);
    color: var(--fg-muted);
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat-card-value {
    font-size: var(--fs-title-2);
    font-weight: 700;
    color: var(--fg-primary);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1;
}

.stat-card-change { display: flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); font-weight: 600; }
.stat-card-change.positive { color: var(--pop-success); }
.stat-card-change.negative { color: var(--pop-danger); }
.stat-card-change i { font-size: 12px; }

/* ============================================================
   7. Buttons — signature diamond-radial CTA
   ============================================================ */
.btn {
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--fs-callout);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--fg-primary);
    background: transparent;
}

.btn:hover { text-decoration: none; }

.btn:focus,
.btn:active {
    outline: none;
    box-shadow: 0 0 0 3px rgba(123, 214, 245, 0.25);
}

/* PRIMARY — the "lit gem" diamond radial.
   The 4px bright-teal inner border is non-negotiable. */
.btn-primary {
    height: 48px;
    padding: 12px 24px;
    color: #FFFFFF !important;
    background: var(--grad-cta) !important;
    border: 2px solid var(--border-cta) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-cta);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--grad-cta-hover) !important;
    border-color: rgba(255, 255, 255, 0.90) !important;
    box-shadow: var(--shadow-cta-hover);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

.btn-primary:active { transform: scale(0.98); }

.btn-primary.btn-sm {
    height: 36px;
    padding: 6px 16px;
    font-size: var(--fs-footnote);
    border-width: 1.5px;
    border-radius: var(--radius-sm);
}

.btn-primary.btn-lg {
    height: 56px;
    padding: 16px 28px;
    font-size: var(--fs-body);
    border-radius: var(--radius-xl);
}

.btn-success {
    background: rgba(78, 192, 45, 0.14) !important;
    border: 1px solid rgba(78, 192, 45, 0.40) !important;
    color: var(--pop-success) !important;
}

.btn-success:hover {
    background: rgba(78, 192, 45, 0.22) !important;
    border-color: var(--pop-success) !important;
    color: var(--pop-success) !important;
}

.btn-warning {
    background: rgba(245, 194, 107, 0.14) !important;
    border: 1px solid rgba(245, 194, 107, 0.40) !important;
    color: var(--pop-warning) !important;
}

.btn-warning:hover {
    background: rgba(245, 194, 107, 0.22) !important;
    border-color: var(--pop-warning) !important;
    color: var(--pop-warning) !important;
}

.btn-danger {
    background: rgba(242, 110, 110, 0.14) !important;
    border: 1px solid rgba(242, 110, 110, 0.40) !important;
    color: var(--pop-danger) !important;
}

.btn-danger:hover {
    background: rgba(242, 110, 110, 0.22) !important;
    border-color: var(--pop-danger) !important;
    color: var(--pop-danger) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background: var(--bg-card) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle) !important;
    color: var(--fg-primary) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    border-color: var(--border-bright) !important;
    background: var(--bg-card-hover) !important;
    color: var(--fg-primary) !important;
}

.btn-outline-danger {
    background: transparent !important;
    border: 1px solid rgba(242, 110, 110, 0.40) !important;
    color: var(--pop-danger) !important;
}

.btn-outline-danger:hover {
    background: rgba(242, 110, 110, 0.10) !important;
    border-color: var(--pop-danger) !important;
    color: var(--pop-danger) !important;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--pop-cyan-400);
    padding: 10px 12px;
    font-weight: 500;
}

.btn-link:hover {
    background: transparent !important;
    color: var(--pop-cyan-300) !important;
    text-decoration: underline;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-sm { padding: 6px 12px; font-size: var(--fs-footnote); border-radius: var(--radius-sm); }
.btn-lg { padding: 12px 22px; font-size: var(--fs-subhead); border-radius: var(--radius-lg); }

/* ============================================================
   8. Badges & chips
   ------------------------------------------------------------
   Bootstrap's .bg-success / .bg-warning / etc. use !important
   on background-color, which forces a saturated fill behind a
   bright-colored text → unreadable (green text on green bg).
   We use !important here so the design-system "tinted bg +
   accent text + matched border" pattern wins against Bootstrap.
   Text colors are bumped to lighter shades for AA contrast on
   the tinted backgrounds.
   ============================================================ */
.badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-block;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--fg-secondary);
}

.badge.bg-success {
    background: rgba(78, 192, 45, 0.18) !important;
    color: #8BE070 !important;             /* lighter green for contrast on the tint */
    border-color: rgba(78, 192, 45, 0.45) !important;
}

.badge.bg-warning {
    background: rgba(245, 194, 107, 0.18) !important;
    color: #FFD68A !important;
    border-color: rgba(245, 194, 107, 0.45) !important;
}

.badge.bg-danger {
    background: rgba(242, 110, 110, 0.18) !important;
    color: #FF9C9C !important;
    border-color: rgba(242, 110, 110, 0.45) !important;
}

.badge.bg-primary,
.badge.bg-info {
    background: rgba(123, 214, 245, 0.18) !important;
    color: #B2EAFF !important;
    border-color: rgba(123, 214, 245, 0.45) !important;
}

.badge.bg-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--fg-secondary) !important;
    border-color: var(--border-subtle) !important;
}


/* ============================================================
   9. Tables
   ------------------------------------------------------------
   Bootstrap 5's .table sets --bs-table-bg/-color on every cell
   from --bs-body-bg, which defaults to white. We override the
   bs-table-* variables so cells inherit the dark theme instead
   of painting themselves white.
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fg-secondary);
    --bs-table-border-color: var(--border-hairline);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: var(--fg-secondary);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--fg-primary);
    --bs-table-active-bg: var(--bg-active);
    --bs-table-active-color: var(--fg-primary);
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    color: var(--fg-secondary);
}

/* Bootstrap paints each cell with background-color: var(--bs-table-bg).
   Force transparent on body cells (leave thead alone — its tinted
   background is set further below). !important is needed to beat
   page-local <style> blocks that re-declare .table tbody td. */
.table > :not(caption) > * > *,
.table > tbody > tr > td,
.table > tbody > tr > th {
    background-color: transparent !important;
}
.table > :not(caption) > * > * { color: inherit; }

.table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 14px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-subtle);
}

.table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--border-hairline);
    border-top: 0;
    font-size: var(--fs-callout);
    color: var(--fg-secondary);
}

.table tbody tr { transition: background-color var(--dur-fast) var(--ease-standard); }

.table-hover > tbody > tr:hover > *,
.table tbody tr:hover { background: var(--bg-hover) !important; color: var(--fg-primary); }

.table tbody tr:last-child td { border-bottom: none; }

/* The .table-responsive wrapper on dark cards must not paint white. */
.table-responsive { background: transparent; }

/* ============================================================
   10. Forms
   ============================================================ */
.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-footnote);
    font-weight: 500;
    color: var(--fg-muted);
}

.form-control,
.form-select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md);
    font-size: var(--fs-callout);
    font-family: var(--font-sans);
    color: var(--fg-primary) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--fg-subtle) !important;
    opacity: 1;
}

.form-control:hover,
.form-select:hover { background: var(--bg-input) !important; }

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--border-bright) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25),
                0 0 0 3px rgba(123, 214, 245, 0.20) !important;
    background: var(--bg-input) !important;
    color: var(--fg-primary) !important;
}

/* Browser autofill — keep dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:autofill,
textarea:autofill,
select:autofill {
    -webkit-text-fill-color: var(--fg-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--pop-navy-700) inset !important;
    box-shadow: 0 0 0 1000px var(--pop-navy-700) inset !important;
    caret-color: var(--fg-primary) !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

.form-text {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-footnote);
    color: var(--fg-muted);
}

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

.form-check-input {
    background-color: rgba(8, 27, 46, 0.65);
    border: 1px solid var(--border-default);
    width: 1.1em;
    height: 1.1em;
}

.form-check-input:checked {
    background-color: var(--pop-cyan-400);
    border-color: var(--pop-cyan-400);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(123, 214, 245, 0.20);
    border-color: var(--pop-cyan-400);
}

.form-check-label { color: var(--fg-secondary); font-size: var(--fs-callout); }

.input-group-text {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--fg-muted);
}

/* ============================================================
   11. Animations
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.fade-in { animation: fadeIn 0.5s var(--ease-emphasis); }
.slide-in { animation: slideIn 0.3s var(--ease-emphasis); }
.slide-down { animation: slideDown 0.3s var(--ease-emphasis); }
.pulse { animation: pulse 2s infinite; }

/* ============================================================
   12. Utilities
   ============================================================ */
.text-primary { color: var(--pop-cyan-400) !important; }
.text-success { color: var(--pop-success) !important; }
.text-warning { color: var(--pop-warning) !important; }
.text-danger  { color: var(--pop-danger) !important; }
.text-info    { color: var(--pop-cyan-400) !important; }
.text-muted   { color: var(--fg-muted) !important; }

.bg-primary { background-color: var(--pop-cyan-400) !important; color: var(--pop-navy-900) !important; }
.bg-success { background-color: var(--pop-success) !important; }
.bg-warning { background-color: var(--pop-warning) !important; }
.bg-danger  { background-color: var(--pop-danger) !important; }
.bg-info    { background-color: var(--pop-cyan-400) !important; color: var(--pop-navy-900) !important; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-4 { margin-top: 24px; }

.p-3 { padding: 16px; }
.p-4 { padding: 24px; }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

/* ============================================================
   13. Tabs / breadcrumbs
   ============================================================ */
.nav-tabs-custom { border-bottom: 1px solid var(--border-subtle); }

.nav-tabs-custom .nav-link {
    border: none;
    padding: 12px 20px;
    color: var(--fg-muted);
    font-weight: 500;
    transition: var(--vz-transition-fast);
    position: relative;
    background: transparent;
}

.nav-tabs-custom .nav-link:hover { color: var(--fg-primary); background: transparent; }

.nav-tabs-custom .nav-link.active {
    color: var(--pop-cyan-400);
    background: transparent;
    border: none;
}

.nav-tabs-custom .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pop-cyan-400);
    box-shadow: 0 0 12px rgba(123, 214, 245, 0.6);
}

.breadcrumb { background: none; padding: 0; margin-bottom: 1rem; }

.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--fg-subtle); }

.breadcrumb-item a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: var(--vz-transition-fast);
}

.breadcrumb-item a:hover { color: var(--pop-cyan-400); }

.breadcrumb-item.active { color: var(--fg-primary); }

/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .sidebar { margin-left: calc(-1 * var(--vz-sidebar-width)); }
    .sidebar.show { margin-left: 0; }
    /* Sidebar auto-hides — distribute its space evenly to keep the
       content centered with the same natural width as before. */
    .main-content {
        margin-left: calc(var(--vz-sidebar-width) / 2);
        margin-right: calc(var(--vz-sidebar-width) / 2);
    }
    .search-box { width: 200px; }
}

/* On narrow phones the sidebar shrinks and we want full-width
   content rather than centered (otherwise content gets squeezed). */
@media (max-width: 640px) {
    .main-content,
    .sidebar-collapsed .main-content {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    :root { --vz-sidebar-width: 220px; }
    .header { padding: 0 16px; }
    .page-content { padding: 16px; }
    .search-box { display: none; }
    .user-info { display: none; }
    .stat-card-value { font-size: var(--fs-title-3); }
    .card-body { padding: 16px; }
}

@media (max-width: 576px) {
    .page-content { padding: 12px; }
    .header-right { gap: 8px; }
    .stat-card-icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============================================================
   15. File upload
   ============================================================ */
.file-upload-wrapper { position: relative; margin-bottom: 0.5rem; }

.file-upload-box {
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    background: var(--bg-card);
    color: var(--fg-secondary);
    cursor: pointer;
    transition: var(--vz-transition);
}

.file-upload-box:hover {
    border-color: var(--pop-cyan-400);
    background: rgba(123, 214, 245, 0.06);
    transform: translateY(-2px);
}

.file-upload-box i {
    color: var(--pop-cyan-400);
    transition: var(--vz-transition-fast);
}

.file-upload-box:hover i { transform: scale(1.1); color: var(--pop-cyan-300); }

.file-upload-box p { margin: 0; color: var(--fg-muted); }

.file-upload-box .text-success { font-weight: 600; animation: fadeIn 0.3s ease; }

/* ============================================================
   16. POPmercial / Web3 components
   ============================================================ */
.portal-explainer {
    background: linear-gradient(180deg, rgba(8, 27, 46, 0.85) 0%, rgba(5, 18, 33, 0.95) 100%);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(123, 214, 245, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-explainer h6 {
    color: var(--fg-primary);
    font-size: var(--fs-callout);
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-explainer p {
    color: var(--fg-muted);
    font-size: var(--fs-footnote);
    margin: 0;
}

.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-footnote);
    font-weight: 600;
    border: 1px solid var(--border-subtle);
}

.token-badge.popologycoin {
    background: rgba(232, 199, 122, 0.14);
    color: var(--pop-gold-300);
    border-color: rgba(232, 199, 122, 0.32);
}

.token-badge.pops {
    background: rgba(78, 192, 45, 0.14);
    color: var(--pop-success);
    border-color: rgba(78, 192, 45, 0.32);
}

.token-badge i { font-size: 12px; }

.token-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.token-symbol.gold { background: var(--vz-gradient-gold); color: var(--pop-navy-900); }
.token-symbol.green { background: var(--vz-gradient-token); color: #FFFFFF; }

.card-web3 {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--vz-transition);
}

.card-web3:hover {
    box-shadow: var(--shadow-glow-cyan);
    border-color: rgba(123, 214, 245, 0.32);
}

.card-web3-gradient {
    background: var(--grad-cta);
    border: 2px solid var(--border-cta);
    color: #FFFFFF;
    box-shadow: var(--shadow-cta);
}

.card-web3-dark {
    background: linear-gradient(180deg, rgba(8, 27, 46, 0.85) 0%, rgba(5, 18, 33, 0.95) 100%);
    border: 1px solid rgba(123, 214, 245, 0.20);
    color: var(--fg-primary);
}

/* Balance Card */
.balance-card {
    background: linear-gradient(180deg, rgba(8, 27, 46, 0.85) 0%, rgba(5, 18, 33, 0.95) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-3xl);
    padding: 32px;
    color: var(--fg-primary);
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(123, 214, 245, 0.30) 0%, transparent 70%);
    border-radius: 50%;
}

.balance-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(34, 82, 204, 0.25) 0%, transparent 70%);
    border-radius: 50%;
}

.balance-card-content { position: relative; z-index: 1; }

.balance-item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    padding: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    transition: var(--vz-transition);
}

.balance-item:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
}

.balance-label {
    font-size: var(--fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 8px;
}

.balance-value {
    font-size: var(--fs-title-2);
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg-primary);
    font-feature-settings: 'tnum' 1;
}

.balance-value.gold { color: var(--pop-gold-300); }
.balance-value.green { color: var(--pop-success); }

/* How It Works steps */
.how-it-works { display: flex; gap: 24px; padding: 24px 0; }

.how-it-works-step { flex: 1; text-align: center; position: relative; }

.how-it-works-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    right: -12px;
    width: 24px;
    height: 2px;
    background: var(--border-subtle);
}

.step-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--grad-cta);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-title-3);
    font-weight: 700;
    margin: 0 auto 16px;
    border: 2px solid var(--border-cta);
    box-shadow: var(--shadow-cta);
}

.step-title {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--fg-primary);
    margin-bottom: 8px;
}

.step-description {
    font-size: var(--fs-footnote);
    color: var(--fg-muted);
    line-height: 1.5;
}

/* BrandSmart progress */
.brandsmart-progress {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border-subtle);
}

.brandsmart-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.brandsmart-progress-fill {
    height: 100%;
    background: var(--grad-cta);
    border-radius: 4px;
    transition: width 0.5s var(--ease-emphasis);
    box-shadow: 0 0 12px rgba(123, 214, 245, 0.6);
}

.brandsmart-status { display: flex; justify-content: space-between; font-size: var(--fs-footnote); }
.brandsmart-status-label { color: var(--fg-muted); }
.brandsmart-status-value { font-weight: 600; color: var(--pop-cyan-400); }

/* Distribution legend */
.distribution-legend { display: flex; flex-direction: column; gap: 12px; }

.distribution-legend-item { display: flex; align-items: center; gap: 12px; }

.distribution-legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.distribution-legend-dot.audience  { background: var(--pop-success); }
.distribution-legend-dot.popologist { background: var(--pop-cyan-400); }
.distribution-legend-dot.platform  { background: var(--pop-blue-400); }

.distribution-legend-label { flex: 1; font-size: var(--fs-callout); color: var(--fg-secondary); }
.distribution-legend-value { font-weight: 600; color: var(--fg-primary); }

/* Glow utilities */
.glow-primary { box-shadow: var(--shadow-glow-cyan); }
.glow-gold { box-shadow: 0 0 24px rgba(232, 199, 122, 0.40), 0 0 60px rgba(232, 199, 122, 0.18); }
.glow-success { box-shadow: 0 0 24px rgba(78, 192, 45, 0.40), 0 0 60px rgba(78, 192, 45, 0.18); }

/* Gallery cards */
.gallery-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--vz-transition);
    backdrop-filter: blur(12px);
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(123, 214, 245, 0.32);
}

.gallery-card-media {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--pop-navy-700);
    overflow: hidden;
}

.gallery-card-media img { width: 100%; height: 100%; object-fit: cover; }

.gallery-card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; }

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

.gallery-card-title {
    font-size: var(--fs-headline);
    font-weight: 700;
    color: var(--fg-primary);
    margin-bottom: 8px;
}

.gallery-card-meta {
    display: flex;
    gap: 16px;
    font-size: var(--fs-footnote);
    color: var(--fg-muted);
}

/* Info icon tooltip */
.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(123, 214, 245, 0.14);
    color: var(--pop-cyan-400);
    font-size: 11px;
    cursor: pointer;
    position: relative;
    margin-left: 6px;
    vertical-align: middle;
    transition: var(--vz-transition-fast);
    flex-shrink: 0;
    border: 1px solid rgba(123, 214, 245, 0.32);
}

.info-tooltip:hover {
    background: var(--pop-cyan-400);
    color: var(--pop-navy-900);
    transform: scale(1.1);
}

.info-tooltip .tooltip-content { display: none !important; }

/* Reach calculator */
.reach-calculator {
    background: rgba(78, 192, 45, 0.08);
    border: 1px solid rgba(78, 192, 45, 0.28);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
}

.reach-calculator .reach-value {
    font-size: var(--fs-title-2);
    font-weight: 700;
    color: var(--pop-success);
    font-feature-settings: 'tnum' 1;
}

.reach-calculator .reach-label {
    font-size: var(--fs-caption);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Dollar equivalent */
.dollar-equiv { font-size: var(--fs-caption); color: var(--fg-muted); font-weight: 400; }

/* Conversion preview */
.conversion-preview {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 24px;
    border: 1px solid var(--border-subtle);
}

.conversion-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.conversion-arrow { color: var(--fg-subtle); font-size: 20px; }

.conversion-value {
    font-size: var(--fs-title-3);
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
}

.conversion-value.usd   { color: var(--fg-primary); }
.conversion-value.token { color: var(--pop-gold-300); }
.conversion-value.views { color: var(--pop-success); }

.conversion-label {
    font-size: var(--fs-caption);
    color: var(--fg-muted);
    text-align: center;
}

/* Distribution slider */
.distribution-slider { padding: 20px 0; }

.distribution-slider-track {
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.distribution-slider-segment { height: 100%; float: left; transition: width 0.3s var(--ease-emphasis); }
.distribution-slider-segment.audience   { background: var(--pop-success); }
.distribution-slider-segment.popologist { background: var(--pop-cyan-400); }
.distribution-slider-segment.platform   { background: var(--pop-blue-400); }

/* Smart contract status */
.contract-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-footnote);
    font-weight: 500;
    border: 1px solid var(--border-subtle);
}

.contract-status.approved {
    background: rgba(78, 192, 45, 0.18);
    color: #8BE070;
    border-color: rgba(78, 192, 45, 0.45);
}

.contract-status.pending {
    background: rgba(245, 194, 107, 0.18);
    color: #FFD68A;
    border-color: rgba(245, 194, 107, 0.45);
}

.contract-status.review {
    background: rgba(123, 214, 245, 0.18);
    color: #B2EAFF;
    border-color: rgba(123, 214, 245, 0.45);
}

/* Blockchain trust */
.blockchain-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}

.blockchain-trust-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
}

.blockchain-trust-icon.ledger {
    background: rgba(123, 214, 245, 0.14);
    color: var(--pop-cyan-400);
    border-color: rgba(123, 214, 245, 0.32);
}

.blockchain-trust-icon.contract {
    background: rgba(34, 82, 204, 0.20);
    color: var(--pop-blue-300);
    border-color: rgba(34, 82, 204, 0.40);
}

.blockchain-trust-icon.transparent {
    background: rgba(78, 192, 45, 0.14);
    color: var(--pop-success);
    border-color: rgba(78, 192, 45, 0.32);
}

.blockchain-trust-content h6 {
    font-size: var(--fs-callout);
    font-weight: 600;
    color: var(--fg-primary);
    margin-bottom: 4px;
}

.blockchain-trust-content p {
    font-size: var(--fs-footnote);
    color: var(--fg-muted);
    margin: 0;
}

/* Aurora accents (used on auth/landing surfaces) */
.aurora-right {
    position: absolute;
    top: 0;
    right: -80px;
    bottom: 0;
    width: 400px;
    background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(43, 184, 166, 0.40), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.aurora-bottom-left {
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(34, 82, 204, 0.30), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   17. Modal — dark glass
   ============================================================ */
.modal-content {
    background: linear-gradient(180deg, rgba(22, 49, 73, 0.95), rgba(8, 27, 46, 0.98));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    color: var(--fg-secondary);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-card-hover);
}

.modal-header { border-bottom: 1px solid var(--border-hairline); color: var(--fg-primary); }
.modal-footer { border-top: 1px solid var(--border-hairline); }
.modal-title { color: var(--fg-primary); font-weight: 700; }
.btn-close {
    filter: invert(1) brightness(2) hue-rotate(180deg);
    opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

/* ============================================================
   18. Alerts
   ============================================================ */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    padding: 12px 16px;
    font-size: var(--fs-callout);
    color: var(--fg-secondary);
}

.alert-success {
    background: rgba(78, 192, 45, 0.10);
    color: var(--pop-success);
    border-color: rgba(78, 192, 45, 0.32);
}

.alert-warning {
    background: rgba(245, 194, 107, 0.10);
    color: var(--pop-warning);
    border-color: rgba(245, 194, 107, 0.32);
}

.alert-danger {
    background: rgba(242, 110, 110, 0.10);
    color: var(--pop-danger);
    border-color: rgba(242, 110, 110, 0.32);
}

.alert-info,
.alert-primary {
    background: rgba(123, 214, 245, 0.10);
    color: var(--pop-cyan-400);
    border-color: rgba(123, 214, 245, 0.32);
}

/* ============================================================
   20. Target Audience selector + radio-option (shared)
   ------------------------------------------------------------
   Used by CreateCampaign step 3 and CampaignDetail's
   Placement Parameters tab. Stays in sync via this single
   global rule set instead of duplicated page-local <style>.
   ============================================================ */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .audience-grid { grid-template-columns: 1fr; }
}
.audience-option { display: flex; flex-direction: column; }
.audience-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.audience-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
    position: relative;
}
.audience-card:hover { border-color: rgba(123, 214, 245, 0.40); }
.audience-radio:checked + .audience-card {
    border-color: var(--pop-cyan-400);
    background: rgba(123, 214, 245, 0.08);
    box-shadow: 0 0 0 1px var(--pop-cyan-400),
                0 0 24px rgba(123, 214, 245, 0.18);
}
.audience-radio:focus-visible + .audience-card {
    outline: 2px solid var(--pop-cyan-400);
    outline-offset: 2px;
}
.audience-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(123, 214, 245, 0.10);
    color: var(--pop-cyan-400);
    border: 1px solid rgba(123, 214, 245, 0.32);
    font-size: 16px;
}
.audience-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.audience-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-primary);
    letter-spacing: -0.01em;
}
.audience-card__pitch {
    font-size: 13px;
    color: var(--fg-muted);
    line-height: 1.4;
}
.audience-card__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: all var(--dur-fast) var(--ease-standard);
}
.audience-radio:checked + .audience-card .audience-card__check {
    background: var(--pop-cyan-400);
    border-color: var(--pop-cyan-400);
    color: var(--pop-navy-900);
}

/* Distribution-channel and similar single-select radio rows */
.radio-option {
    padding: 14px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}
.radio-option:hover { border-color: rgba(123, 214, 245, 0.40); }
.radio-option .radio-label,
.radio-option label.radio-label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    color: var(--fg-primary);
}
.radio-option:has(input[type="radio"]:checked) {
    border-color: var(--pop-cyan-400);
    background: rgba(123, 214, 245, 0.08);
}
.radio-option:has(input[type="radio"]:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.radio-option:has(input[type="radio"]:disabled):hover {
    border-color: var(--border-subtle);
}

/* fieldset[disabled] dims everything inside it for the read-only edit state. */
fieldset[disabled] .audience-card,
fieldset[disabled] .radio-option {
    cursor: not-allowed;
    opacity: 0.65;
}
fieldset[disabled] .audience-card:hover { border-color: var(--border-subtle); }

/* ----- BrandSmart Guidelines attachment widget ----- */
.bs-attachment {
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-input);
}
.bs-attachment[data-state="filled"] {
    border-color: rgba(123, 214, 245, 0.45);
    background: rgba(123, 214, 245, 0.06);
}
.bs-attachment__filled {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}
.bs-attachment__name {
    color: var(--pop-cyan-400);
    font-weight: 600;
}
.bs-attachment__name:hover { color: var(--pop-cyan-300); }

/* ----- Rules Builder JSON preview ----- */
.rules-builder__preview {
    background: rgba(8, 27, 46, 0.65);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--fg-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    overflow: auto;
}

.rules-builder__preview:empty::before {
    content: '// (empty — fill Targeting, Guidelines, or add a Rule)';
    color: var(--fg-subtle);
}

/* ============================================================
   19. Inline light-theme neutralizers (transitional)
   ------------------------------------------------------------
   ~15 existing pages hardcode light-theme hex values inside
   `style="..."` attributes (color: #0f172a, background: #fff,
   border-color: #e2e8f0, etc.). Inline styles win over normal
   CSS, but `!important` on attribute selectors wins over inline.
   These rules catch the common patterns from the audit so the
   dark theme reads correctly without touching every page.
   Drop this block once the per-page migration is complete.
   ============================================================ */

/* Dark text → primary white (for headings/values) */
[style*="color: #0f172a"],
[style*="color:#0f172a"],
[style*="color: #1e293b"],
[style*="color:#1e293b"] { color: var(--fg-primary) !important; }

/* Mid-slate text → muted */
[style*="color: #475569"],
[style*="color:#475569"],
[style*="color: #334155"],
[style*="color:#334155"] { color: var(--fg-muted) !important; }

/* Light-slate text → subtle */
[style*="color: #64748b"],
[style*="color:#64748b"],
[style*="color: #94a3b8"],
[style*="color:#94a3b8"] { color: var(--fg-subtle) !important; }

/* Primary blue text → cyan accent */
[style*="color: #3b82f6"],
[style*="color:#3b82f6"],
[style*="color: #2563eb"],
[style*="color:#2563eb"] { color: var(--pop-cyan-400) !important; }

/* White / off-white card backgrounds → glass card */
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #f8fafc"],
[style*="background:#f8fafc"] {
    background: var(--bg-card) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Light-gray borders → subtle dark border */
[style*="border: 1px solid #e2e8f0"],
[style*="border:1px solid #e2e8f0"],
[style*="border-color: #e2e8f0"],
[style*="border-color:#e2e8f0"] { border-color: var(--border-subtle) !important; }

/* Inline blue→navy gradients used as branded chips/headers */
[style*="linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"] {
    background: var(--grad-cta) !important;
    border: 1px solid var(--border-cta) !important;
    box-shadow: var(--shadow-cta) !important;
}

/* Pages that wrap their content in `<body style="background: #f8fafc">`
   (the auth pages with custom <body>) — neutralize so the navy
   gradient on body background-image still shows. */
body[style*="background: #f8fafc"],
body[style*="background:#f8fafc"] {
    background: var(--bg-page) !important;
    background-image: var(--grad-page-bg) !important;
}

/* ------------------------------------------------------------
   Inline badge color-pair fixes
   ------------------------------------------------------------
   Several pages have:
     <span class="badge" style="background: rgba(R,G,B,0.1);
                                color: var(--vz-success);">
   The bg tint and text often share the same hue, so on the dark
   theme the text fades into the tint (green-on-green, etc).
   Bump opacity + force a light-shade text + matching border so
   each badge reads cleanly on the navy page.
   ------------------------------------------------------------ */

/* Green tints (success / token / completion) */
.badge[style*="rgba(16, 185, 129"],
.badge[style*="rgba(16,185,129"],
.badge[style*="rgba(34, 197, 94"],
.badge[style*="rgba(34,197,94"],
.badge[style*="rgba(78, 192, 45"],
.badge[style*="rgba(78,192,45"] {
    background: rgba(78, 192, 45, 0.18) !important;
    color: #8BE070 !important;
    border: 1px solid rgba(78, 192, 45, 0.45) !important;
}

/* Gold tints */
.badge[style*="rgba(251, 191, 36"],
.badge[style*="rgba(251,191,36"],
.badge[style*="rgba(245, 158, 11"],
.badge[style*="rgba(245,158,11"] {
    background: rgba(232, 199, 122, 0.18) !important;
    color: #FFD68A !important;
    border: 1px solid rgba(232, 199, 122, 0.45) !important;
}

/* Indigo / purple / blue tints — remap to the cyan accent */
.badge[style*="rgba(99, 102, 241"],
.badge[style*="rgba(99,102,241"],
.badge[style*="rgba(59, 130, 246"],
.badge[style*="rgba(59,130,246"],
.badge[style*="rgba(139, 92, 246"],
.badge[style*="rgba(139,92,246"] {
    background: rgba(123, 214, 245, 0.18) !important;
    color: #B2EAFF !important;
    border: 1px solid rgba(123, 214, 245, 0.45) !important;
}