/* ═══════════════════════════════════════════════════════
   SCGE Core CSS v1.1.0
   ═══════════════════════════════════════════════════════
   ALWAYS LOADED — foundation for all SCGE components.
   Feature modules (guest-grid.css, etc.) depend on this.

   Load order: Theme → Elementor → scge-core → features
   ═══════════════════════════════════════════════════════ */

/* ─── SCOPED RESET ─── */
.scge-app,
.scge-app *,
.scge-app *::before,
.scge-app *::after {
    box-sizing: border-box !important;
}
.scge-app img { max-width: 100% !important; height: auto; border: none !important; }
.scge-app button { font-family: inherit !important; cursor: pointer; }
.scge-app a { color: inherit !important; }
.scge-app h1,.scge-app h2,.scge-app h3,.scge-app h4 {
    font-family: inherit !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.scge-app p { margin: 0; }

/* ─── CSS VARIABLES ─── */
.scge-app {
    /* Brand */
    --scge-primary: #3b82f6;
    --scge-primary-h: #2563eb;
    --scge-secondary: #6366f1;
    --scge-accent: #e94560;
    --scge-accent2: #0f3460;

    /* Neutrals */
    --scge-text: #111827;
    --scge-muted: #6b7280;
    --scge-hint: #9ca3af;
    --scge-bg: #f8f9fb;
    --scge-white: #fff;
    --scge-border: #e5e7eb !important;

    /* Status */
    --scge-green: #16a34a;
    --scge-yellow: #ca8a04;
    --scge-red: #dc2626;
    --scge-green-bg: #ecfdf5;
    --scge-yellow-bg: #fefce8;

    /* Sizing */
    --scge-radius: 14px;
    --scge-radius-sm: 8px;

    /* Shadows */
    --scge-shadow: 0 2px 12px rgba(0,0,0,.06);
    --scge-shadow-lg: 0 12px 40px rgba(0,0,0,.1);

    /* Motion */
    --scge-tr: .3s cubic-bezier(.25,.46,.45,.94);
    --scge-tr-fast: .2s ease;

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    color: var(--scge-text) !important;
    font-size: 14px !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* ─── Z-INDEX HIERARCHY ─── */
/*
    1    = base content
    2    = card overlays, badges
    10   = sticky bars, save bars
    100  = sidebar
    200  = burger menu
    1000 = dropdown menus
    9998 = modal backdrop
    9999 = modal box
    999999 = modal container (fixed overlay)
*/

/* ─── GRID FOUNDATION ─── */
.scge-app .sg-grid {
    display: grid !important;
    gap: 20px;
    padding: 8px 0 !important;
}
.scge-app .sg-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.scge-app .sg-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.scge-app .sg-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.scge-app .sg-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.scge-app .sg-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* ─── MODAL SYSTEM (critical — must never break) ─── */
.scge-app .sg-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .3s ease;
}
.scge-app .sg-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.scge-app .sg-modal-bg {
    position: absolute;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(8px);
    pointer-events: inherit;
}
.scge-app .sg-modal-box {
    position: relative;
    z-index: 9999;
    background: var(--scge-white) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    width: 94% !important;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 60px rgba(0,0,0,.2) !important;
    transform: scale(.88) translateY(30px);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
    opacity: 0;
}
.scge-app .sg-modal.is-open .sg-modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.scge-app .sg-modal-body {
    padding: 28px !important;
    position: relative;
}

/* Staggered entrance animations for popup content */
.scge-app .sg-modal.is-open .sg-popup-head {
    animation: scgePopIn .4s cubic-bezier(.4,0,.2,1) .1s both;
}
.scge-app .sg-modal.is-open .sg-popup-tabs {
    animation: scgePopIn .4s cubic-bezier(.4,0,.2,1) .2s both;
}
.scge-app .sg-modal.is-open .sg-popup-panel {
    animation: scgePopIn .4s cubic-bezier(.4,0,.2,1) .25s both;
}
.scge-app .sg-modal.is-open .sg-btn-profile {
    animation: scgePopIn .4s cubic-bezier(.4,0,.2,1) .3s both;
}
.scge-app .sg-modal.is-open .sg-popup-img {
    animation: scgePopScale .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}
.scge-app .sg-modal.is-open .sg-popup-close {
    animation: scgePopSpin .4s cubic-bezier(.4,0,.2,1) .35s both;
}
@keyframes scgePopIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scgePopScale {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes scgePopSpin {
    from { opacity: 0; transform: rotate(-90deg) scale(.5); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

/* ─── BUTTON BASE ─── */
.scge-app .sg-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    transition: all var(--scge-tr-fast);
    text-align: center;
    font-family: inherit !important;
    position: relative;
    z-index: 1;
}
.scge-app .sg-btn-profile {
    display: block !important;
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    background: #18181B !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    text-align: center;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transition: all .2s ease;
}
.scge-app .sg-btn-profile:hover {
    background: #333 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
}
.scge-app .sg-btn-profile:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
.scge-app .sg-btn--amazon {
    display: inline-block !important;
    padding: 8px 18px !important;
    border-radius: 10px !important;
    background: var(--scge-accent2) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all var(--scge-tr-fast);
}
.scge-app .sg-btn--amazon:hover { background: #0c2a4d !important; }
.scge-app .sg-btn--load {
    background: var(--scge-white) !important;
    color: var(--scge-text) !important;
    border: 1px solid var(--scge-border) !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    font-family: inherit !important;
}
.scge-app .sg-btn--load:hover { border-color: var(--scge-accent) !important; color: var(--scge-accent) !important; }

/* ─── BADGE BASE ─── */
.scge-app .sg-badge {
    position: absolute;
    top: 10px;
    z-index: 2;
    font-size: .65rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.scge-app .sg-badge--feat { right: 10px; background: linear-gradient(135deg, #f59e0b, #f97316) !important; color: #fff !important; }
.scge-app .sg-badge--top  { left: 10px; background: linear-gradient(135deg, #e94560, #d63384) !important; color: #fff !important; }
.scge-app .sg-badge--cat  { position: static; display: inline-block !important; background: rgba(59,130,246,.1) !important; color: var(--scge-primary) !important; font-size: .7rem !important; padding: 3px 10px !important; border-radius: 20px !important; text-transform: none; margin-right: 4px; }

/* ─── ANIMATION KEYFRAMES ─── */
@keyframes scgeFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scgeSpin {
    to { transform: rotate(360deg); }
}

/* ─── SPINNER ─── */
.scge-app .sg-spinner { text-align: center; padding: 32px !important; }
.scge-app .sg-spinner-dot {
    width: 32px !important; height: 32px; border-radius: 50% !important;
    border: 3px solid var(--scge-border) !important;
    border-top-color: var(--scge-accent) !important;
    animation: scgeSpin .7s linear infinite;
    margin: 0 auto;
}

/* ─── LOAD MORE / EMPTY ─── */
.scge-app .sg-load-more { text-align: center; margin-top: 28px; }
.scge-app .sg-empty { text-align: center; padding: 40px !important; color: var(--scge-muted) !important; }

/* ─── LINK PILL ─── */
.scge-app .sg-link-pill {
    display: inline-flex !important; align-items: center; gap: 5px;
    padding: 6px 14px !important; border-radius: 20px !important;
    font-size: .78rem !important; font-weight: 600 !important;
    color: var(--scge-muted) !important; background: var(--scge-bg) !important;
    border: 1px solid var(--scge-border) !important;
    text-decoration: none !important; cursor: pointer;
    transition: all var(--scge-tr-fast);
}
.scge-app .sg-link-pill:hover { border-color: var(--scge-accent) !important; color: var(--scge-accent) !important; }
.scge-app .sg-link-pill svg { width: 14px !important; height: 14px; }
.scge-app .sg-share-btn { border: none !important; font-family: inherit !important; }

/* ─── RESPONSIVE FOUNDATION ─── */
@media (max-width: 1200px) {
    .scge-app .sg-grid[data-columns="6"] { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px) {
    .scge-app .sg-grid[data-columns="4"],
    .scge-app .sg-grid[data-columns="5"],
    .scge-app .sg-grid[data-columns="6"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
    .scge-app .sg-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
}
@media (max-width: 400px) {
    .scge-app .sg-grid { grid-template-columns: 1fr !important; }
}

/* ─── DEBUG MODE ─── */
body.scge-debug .scge-app [data-scge-module] {
    outline: 2px dashed rgba(233,69,96,.3) !important;
    outline-offset: 2px;
    position: relative;
}
body.scge-debug .scge-app [data-scge-module]::before {
    content: attr(data-scge-module);
    position: absolute; top: -1px; right: -1px;
    font-size: 9px !important; padding: 1px 6px !important;
    background: var(--scge-accent) !important; color: #fff !important;
    border-radius: 0 0 0 4px !important; z-index: 9999;
    pointer-events: none;
}

/* ═══ LEADERBOARD ═══ */
.scge-app .scge-lb { max-width: 800px !important; margin: 0 auto !important; }
.scge-app .scge-lb-head { text-align: center !important; margin-bottom: 24px !important; }
.scge-app .scge-lb-title { font-size: 24px !important; font-weight: 800 !important; margin: 0 0 4px !important; }
.scge-app .scge-lb-sub { font-size: 13px !important; color: var(--scge-muted, #6b7280) !important; margin: 0 !important; }
.scge-app .scge-lb-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.scge-app .scge-lb-row { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 18px !important; background: var(--scge-white, #fff) !important; border: 1px solid var(--scge-border, #e8eaed) !important; border-radius: 14px !important; transition: all .2s ease !important; }
.scge-app .scge-lb-row:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,.05) !important; }
/* v10.15.6 — rows are now clickable links; reset link defaults */
.scge-app a.scge-lb-row,
.scge-app a.scge-lb-row:link,
.scge-app a.scge-lb-row:visited { text-decoration: none !important; color: inherit !important; cursor: pointer !important; }
.scge-app a.scge-lb-row:hover { text-decoration: none !important; color: inherit !important; border-color: var(--sp-gold, #B8862A) !important; box-shadow: 0 6px 20px rgba(184,134,42,.12) !important; }
.scge-app .scge-lb-row--top { border-color: rgba(59,130,246,.15) !important; background: linear-gradient(135deg, rgba(59,130,246,.02), rgba(99,102,241,.02)) !important; }
.scge-app .scge-lb-rank { width: 36px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; color: var(--scge-muted, #6b7280) !important; flex-shrink: 0 !important; }
.scge-app .scge-lb-medal { font-size: 22px !important; }
.scge-app .scge-lb-av { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--scge-accent, #3b82f6), #6366f1) !important; background-size: cover !important; background-position: center !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important; }
.scge-app .scge-lb-av span { color: #fff !important; font-size: 13px !important; font-weight: 700 !important; }
.scge-app .scge-lb-info { flex: 1 !important; min-width: 0 !important; }
.scge-app .scge-lb-name { font-size: 14px !important; font-weight: 600 !important; }
.scge-app .scge-lb-meta { font-size: 12px !important; color: var(--scge-muted, #6b7280) !important; }
.scge-app .scge-lb-stats { display: flex !important; gap: 14px !important; font-size: 12px !important; color: var(--scge-muted, #6b7280) !important; }
.scge-app .scge-lb-stat { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.scge-app .scge-lb-score { font-size: 16px !important; font-weight: 800 !important; background: linear-gradient(135deg, var(--scge-accent, #3b82f6), #6366f1) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; min-width: 60px !important; text-align: right !important; }
@media (max-width: 640px) {
    .scge-app .scge-lb-stats { display: none !important; }
    .scge-app .scge-lb-row { padding: 10px 12px !important; gap: 10px !important; }
}

/* ═══ ANALYTICS PAGE — [scge_guest_analytics] ═══ */
.scge-app .scge-ap { max-width: 900px !important; margin: 0 auto !important; padding: 0 16px 40px !important; }
.scge-app .scge-ap-head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 24px !important; flex-wrap: wrap !important; gap: 12px !important; }
.scge-app .scge-ap-title { font-size: 24px !important; font-weight: 800 !important; margin: 0 0 2px !important; letter-spacing: -.02em !important; }
.scge-app .scge-ap-sub { font-size: 13px !important; color: var(--scge-muted, #6b7280) !important; margin: 0 !important; }

.scge-app .scge-ap-summary { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin-bottom: 20px !important; }
.scge-app .scge-ap-card { background: var(--scge-white, #fff) !important; border: 1px solid var(--scge-border, #e8eaed) !important; border-radius: 14px !important; padding: 18px 14px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; transition: all .2s ease !important; }
.scge-app .scge-ap-card:hover { border-color: rgba(59,130,246,.2) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(59,130,246,.06) !important; }
.scge-app .scge-ap-card--score { border-color: rgba(59,130,246,.15) !important; background: linear-gradient(135deg, rgba(59,130,246,.03), rgba(99,102,241,.03)) !important; }
.scge-app .scge-ap-icon { width: 22px !important; height: 22px !important; color: var(--scge-accent, #3b82f6) !important; }
.scge-app .scge-ap-num { font-size: 22px !important; font-weight: 800 !important; color: var(--scge-text, #111827) !important; line-height: 1.1 !important; }
.scge-app .scge-ap-card--score .scge-ap-num { background: linear-gradient(135deg, var(--scge-accent, #3b82f6), #6366f1) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.scge-app .scge-ap-label { font-size: 10px !important; font-weight: 600 !important; color: var(--scge-muted, #6b7280) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }

.scge-app .scge-ap-perf { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-bottom: 20px !important; }
.scge-app .scge-ap-perf-card { background: var(--scge-white, #fff) !important; border: 1px solid var(--scge-border, #e8eaed) !important; border-radius: 14px !important; padding: 16px 18px !important; }
.scge-app .scge-ap-perf-card--best { border-color: rgba(22,163,74,.15) !important; background: rgba(22,163,74,.02) !important; }
.scge-app .scge-ap-perf-badge { display: inline-block !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 6px !important; background: #ecfdf5 !important; color: #16a34a !important; margin-bottom: 6px !important; }
.scge-app .scge-ap-perf-badge--low { background: #fef2f2 !important; color: #dc2626 !important; }
.scge-app .scge-ap-perf-card h4 { font-size: 14px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.scge-app .scge-ap-perf-stat { font-size: 13px !important; color: var(--scge-muted, #6b7280) !important; }

.scge-app .scge-ap-section { margin-bottom: 20px !important; }
.scge-app .scge-ap-section-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 12px !important; }
.scge-app .scge-ap-table-wrap { background: var(--scge-white, #fff) !important; border: 1px solid var(--scge-border, #e8eaed) !important; border-radius: 14px !important; overflow: hidden !important; }
.scge-app .scge-ap-table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.scge-app .scge-ap-table th { padding: 10px 14px !important; text-align: left !important; font-size: 11px !important; font-weight: 600 !important; color: var(--scge-muted, #9ca3af) !important; background: var(--scge-bg, #f8f9fb) !important; border-bottom: 1px solid var(--scge-border, #e8eaed) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.scge-app .scge-ap-table td { padding: 12px 14px !important; border-bottom: 1px solid rgba(0,0,0,.04) !important; vertical-align: middle !important; }
.scge-app .scge-ap-table tr:last-child td { border-bottom: none !important; }
.scge-app .scge-ap-table tr:hover td { background: rgba(59,130,246,.02) !important; }

@media (max-width: 640px) {
    .scge-app .scge-ap-summary { grid-template-columns: repeat(2, 1fr) !important; }
    .scge-app .scge-ap-perf { grid-template-columns: 1fr !important; }
}