/*
 * MewUI — the SHARED CORE (MGCS-123).
 *
 * This file is BYTE-IDENTICAL in mymewgem, spaces, Support, MGgg and staff_dash. Those are
 * separate repos with no shared bundle, so each keeps a copy; the copies used to drift until
 * the same component looked different, or was missing, depending on the site.
 *
 *   - Change a shared component HERE, then copy this file to the other four and run
 *     `node tools/mewui-check.js` in mymewgem (it fails on any difference).
 *   - Anything only one site uses goes in that site's mewui-app.css, loaded after this file,
 *     which is also where a site deliberately overrides a shared rule.
 */
/*
 * MewUI v1.0.0
 * A class-based, mobile-first CSS framework for MewGem
 * All theming via CSS custom properties — ready for theme engine
 */

/* ============================================
   THEME VARIABLES
   ============================================ */
:root {
    /* Core palette */
    --mu-primary: #19f5aa;
    --mu-secondary: #47508b;
    --mu-background: #1f285f;
    --mu-highlight: #10218f;
    --mu-surface: rgba(31, 40, 95, 0.85);
    --mu-surface-light: rgba(71, 80, 139, 0.5);
    --mu-text: #e0e0e0;
    --mu-text-bright: #ffffff;
    --mu-text-muted: #9a9abf;
    --mu-danger: #ff4d6a;
    --mu-success: #19f5aa;
    --mu-warning: #ffb347;

    /* Borders */
    --mu-border-color: var(--mu-secondary);
    --mu-border-radius: 10px;
    --mu-border-radius-sm: 6px;
    --mu-border-radius-lg: 16px;
    --mu-border-radius-full: 9999px;

    /* Spacing scale */
    --mu-space-xs: 4px;
    --mu-space-sm: 8px;
    --mu-space-md: 16px;
    --mu-space-lg: 24px;
    --mu-space-xl: 32px;
    --mu-space-2xl: 48px;

    /* Typography */
    --mu-font-family: "Jockey One", sans-serif;
    --mu-font-family-body: "Nunito", sans-serif;
    --mu-font-size-xs: 0.75rem;
    --mu-font-size-sm: 0.875rem;
    --mu-font-size-md: 1rem;
    --mu-font-size-lg: 1.25rem;
    --mu-font-size-xl: 1.5rem;
    --mu-font-size-2xl: 2rem;
    --mu-font-size-3xl: 2.5rem;

    /* Shadows */
    --mu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --mu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --mu-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --mu-transition: 0.2s ease;

    /* Layout */
    --mu-navbar-height: 64px;
    --mu-sidebar-width: 220px;
    --mu-container-max: 1200px;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body, html {
    min-height: 100vh;
    background: var(--mu-background) url('/assets/img/backgrounds/garden.png') no-repeat center center fixed;
    background-size: cover;
    color: var(--mu-primary);
    cursor: url("/assets/img/cursors/mgcursor.png"), default;
    font-family: var(--mu-font-family);
    font-weight: 400;
    font-style: normal;
    text-shadow: var(--mu-highlight) 0 0.1rem 0.4rem;
    line-height: 1.5;
}

body {
    display: flex;
    flex-direction: column;
    padding-top: var(--mu-navbar-height);
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--mu-secondary);
    text-decoration: none;
    transition: color var(--mu-transition);
}

a:hover {
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    color: var(--mu-primary);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--mu-font-family);
    color: var(--mu-text-bright);
    margin-bottom: var(--mu-space-sm);
    line-height: 1.2;
}

h1 { font-size: var(--mu-font-size-3xl); }
h2 { font-size: var(--mu-font-size-2xl); }
h3 { font-size: var(--mu-font-size-xl); }
h4 { font-size: var(--mu-font-size-lg); }
h5 { font-size: var(--mu-font-size-md); }
h6 { font-size: var(--mu-font-size-sm); }

p {
    margin-bottom: var(--mu-space-sm);
    color: var(--mu-text);
}

.mu-text-primary { color: var(--mu-primary); }
.mu-text-secondary { color: var(--mu-secondary); }
.mu-text-light { color: var(--mu-text); }
.mu-text-bright { color: var(--mu-text-bright); }
.mu-text-muted { color: var(--mu-text-muted); }
.mu-text-danger { color: var(--mu-danger); }
.mu-text-center { text-align: center; }
.mu-text-bold { font-weight: 700; }
.mu-text-sm { font-size: var(--mu-font-size-sm); }
.mu-text-lg { font-size: var(--mu-font-size-lg); }
.mu-text-xl { font-size: var(--mu-font-size-xl); }

/* ============================================
   LAYOUT — CONTAINER
   ============================================ */
.mu-container {
    width: 100%;
    max-width: var(--mu-container-max);
    margin: 0 auto;
    padding: 0 var(--mu-space-md);
}

.mu-container-fluid {
    width: 100%;
    padding: 0 var(--mu-space-md);
}

/* Main content area — offset for sidebar on desktop */
.mu-main {
    padding: var(--mu-space-lg);
    min-height: calc(100vh - var(--mu-navbar-height) - 60px);
}

@media (min-width: 769px) {
    .mu-main {
        margin-left: var(--mu-sidebar-width);
    }
}

/* ============================================
   GRID
   ============================================ */
.mu-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-space-md);
}

.mu-col { flex: 1 1 0; min-width: 0; }
.mu-col-auto { flex: 0 0 auto; }
.mu-col-12 { flex: 0 0 100%; max-width: 100%; }
.mu-col-6 { flex: 0 0 calc(50% - var(--mu-space-md) / 2); max-width: calc(50% - var(--mu-space-md) / 2); }
.mu-col-4 { flex: 0 0 calc(33.333% - var(--mu-space-md) * 2 / 3); max-width: calc(33.333% - var(--mu-space-md) * 2 / 3); }
.mu-col-3 { flex: 0 0 calc(25% - var(--mu-space-md) * 3 / 4); max-width: calc(25% - var(--mu-space-md) * 3 / 4); }

/* Responsive columns */
@media (max-width: 768px) {
    .mu-col-6, .mu-col-4, .mu-col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .mu-col-3 {
        flex: 0 0 calc(50% - var(--mu-space-md) / 2);
        max-width: calc(50% - var(--mu-space-md) / 2);
    }
}

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */
.mu-flex { display: flex; }
.mu-flex-col { flex-direction: column; }
.mu-flex-wrap { flex-wrap: wrap; }
.mu-flex-center { align-items: center; justify-content: center; }
.mu-flex-between { justify-content: space-between; }
.mu-flex-start { justify-content: flex-start; }
.mu-flex-end { justify-content: flex-end; }
.mu-items-center { align-items: center; }
.mu-items-start { align-items: flex-start; }
.mu-gap-sm { gap: var(--mu-space-sm); }
.mu-gap-md { gap: var(--mu-space-md); }
.mu-gap-lg { gap: var(--mu-space-lg); }

/* ============================================
   NAVBAR
   ============================================ */
.mu-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--mu-navbar-height);
    background: var(--mu-background);
    border-bottom: 2px solid var(--mu-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mu-space-lg);
}

.mu-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    color: var(--mu-primary);
    font-size: var(--mu-font-size-lg);
    text-decoration: none;
}

.mu-navbar-brand:hover {
    color: var(--mu-primary);
}

.mu-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--mu-space-md);
}

.mu-navbar-actions a {
    display: flex;
    align-items: center;
    gap: var(--mu-space-xs);
    color: var(--mu-text);
    transition: color var(--mu-transition);
}

.mu-navbar-actions a:hover {
    color: var(--mu-primary);
}

/* Hamburger menu toggle (mobile only) */
.mu-sidebar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--mu-primary);
    font-size: var(--mu-font-size-xl);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    padding: var(--mu-space-xs);
}

@media (max-width: 768px) {
    .mu-sidebar-toggle {
        display: flex;
        align-items: center;
    }

    .mu-navbar-actions {
        gap: var(--mu-space-sm);
    }
}

/* ============================================
   SIDEBAR
   ============================================ */
.mu-sidebar {
    position: fixed;
    top: var(--mu-navbar-height);
    left: 0;
    bottom: 0;
    width: var(--mu-sidebar-width);
    background: var(--mu-background);
    border-right: 2px solid var(--mu-secondary);
    padding: var(--mu-space-md) 0;
    overflow-y: auto;
    z-index: 90;
    transition: transform var(--mu-transition);
}

.mu-sidebar-item {
    display: block;
}

.mu-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--mu-space-sm);
    padding: var(--mu-space-sm) var(--mu-space-lg);
    color: var(--mu-text);
    font-size: var(--mu-font-size-md);
    transition: background var(--mu-transition), color var(--mu-transition);
    border-left: 3px solid transparent;
}

.mu-sidebar-link:hover {
    background: var(--mu-surface-light);
    color: var(--mu-primary);
    border-left-color: var(--mu-primary);
}

.mu-sidebar-link i {
    width: 24px;
    text-align: center;
    font-size: var(--mu-font-size-md);
}

/* Mobile sidebar */
@media (max-width: 768px) {
    .mu-sidebar {
        transform: translateX(-100%);
    }

    .mu-sidebar.mu-open {
        transform: translateX(0);
    }

    /* Overlay when sidebar is open */
    .mu-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 85;
    }

    .mu-sidebar-overlay.mu-open {
        display: block;
    }
}

/* ============================================
   CARDS
   ============================================ */
.mu-card {
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius);
    box-shadow: var(--mu-shadow-md);
    overflow: hidden;
    margin-bottom: var(--mu-space-md);
    backdrop-filter: blur(8px);
}

.mu-card-header {
    padding: var(--mu-space-md);
    border-bottom: 1px solid var(--mu-border-color);
    font-weight: 700;
}

.mu-card-body {
    padding: var(--mu-space-lg);
}

.mu-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ============================================
   BUTTONS
   ============================================ */
.mu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mu-space-xs);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    background: var(--mu-secondary);
    color: var(--mu-primary);
    border: 2px solid var(--mu-primary);
    border-radius: var(--mu-border-radius);
    padding: var(--mu-space-sm) var(--mu-space-lg);
    font-family: var(--mu-font-family);
    font-size: var(--mu-font-size-md);
    text-decoration: none;
    transition: background var(--mu-transition), transform var(--mu-transition), box-shadow var(--mu-transition);
    white-space: nowrap;
}

.mu-btn:hover {
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    background: var(--mu-highlight);
    box-shadow: var(--mu-shadow-md);
    transform: translateY(-1px);
    color: var(--mu-primary);
}

.mu-btn:active {
    transform: translateY(0);
}

.mu-btn-sm {
    padding: var(--mu-space-xs) var(--mu-space-md);
    font-size: var(--mu-font-size-sm);
}

.mu-btn-lg {
    padding: var(--mu-space-md) var(--mu-space-xl);
    font-size: var(--mu-font-size-lg);
}

.mu-btn-full {
    width: 100%;
}

.mu-btn-danger {
    background: var(--mu-danger);
    border-color: var(--mu-danger);
    color: var(--mu-text-bright);
}

.mu-btn-danger:hover {
    background: color-mix(in srgb, var(--mu-danger) 85%, black);
    color: var(--mu-text-bright);
}

.mu-btn-ghost {
    background: transparent;
    border-color: var(--mu-secondary);
    color: var(--mu-text);
}

.mu-btn-ghost:hover {
    background: var(--mu-surface-light);
    border-color: var(--mu-primary);
    color: var(--mu-primary);
}

/* ============================================
   FORMS
   ============================================ */
.mu-form-group {
    margin-bottom: var(--mu-space-md);
}

.mu-label {
    display: block;
    margin-bottom: var(--mu-space-xs);
    font-weight: 700;
    color: var(--mu-text-bright);
    font-size: var(--mu-font-size-sm);
}

.mu-input {
    width: 100%;
    padding: var(--mu-space-sm) var(--mu-space-md);
    background: var(--mu-surface);
    border: 2px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
    color: var(--mu-text-bright);
    font-family: var(--mu-font-family-body);
    font-size: var(--mu-font-size-md);
    transition: border-color var(--mu-transition), box-shadow var(--mu-transition);
}

.mu-input::placeholder {
    color: var(--mu-text-muted);
}

.mu-input:focus {
    outline: none;
    border-color: var(--mu-primary);
    box-shadow: 0 0 0 3px rgba(25, 245, 170, 0.15);
}

.mu-input[type="file"] {
    padding: var(--mu-space-xs) var(--mu-space-sm);
    font-size: var(--mu-font-size-sm);
}

.mu-input[type="file"]::file-selector-button {
    background: var(--mu-secondary);
    color: var(--mu-primary);
    border: 1px solid var(--mu-primary);
    border-radius: var(--mu-border-radius-sm);
    padding: var(--mu-space-xs) var(--mu-space-md);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    font-family: var(--mu-font-family);
    margin-right: var(--mu-space-sm);
}

.mu-select {
    width: 100%;
    padding: var(--mu-space-sm) var(--mu-space-md);
    background: var(--mu-surface);
    border: 2px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
    color: var(--mu-text-bright);
    font-family: var(--mu-font-family-body);
    font-size: var(--mu-font-size-md);
}

.mu-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--mu-space-sm);
    margin-bottom: var(--mu-space-sm);
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text);
}

.mu-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--mu-primary);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
}

.mu-divider {
    border: none;
    border-top: 1px solid var(--mu-border-color);
    margin: var(--mu-space-lg) 0;
}

/* ============================================
   MODAL
   ============================================ */
.mu-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: var(--mu-space-md);
    overflow-y: auto;
}

.mu-modal.mu-open {
    display: flex;
}

.mu-modal-dialog {
    background: var(--mu-background);
    border: 2px solid var(--mu-secondary);
    border-radius: var(--mu-border-radius-lg);
    max-width: 500px;
    width: 100%;
    box-shadow: var(--mu-shadow-lg);
    /* Cap height so tall modals stay on-screen; the body scrolls instead of clipping. */
    max-height: calc(100vh - 2 * var(--mu-space-md));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mu-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mu-space-md) var(--mu-space-lg);
    border-bottom: 1px solid var(--mu-border-color);
    flex-shrink: 0;
}

.mu-modal-header h5 {
    margin: 0;
    color: var(--mu-danger);
}

.mu-modal-close {
    background: none;
    border: none;
    color: var(--mu-text-muted);
    font-size: var(--mu-font-size-xl);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    line-height: 1;
}

.mu-modal-close:hover {
    color: var(--mu-primary);
}

.mu-modal-body {
    padding: var(--mu-space-lg);
    overflow-y: auto;
    min-height: 0;
}

/* ============================================
   PROFILE COMPONENTS
   ============================================ */
.mu-avatar {
    border-radius: var(--mu-border-radius-full);
    border: 2px solid var(--mu-primary);
    object-fit: cover;
}

.mu-avatar-sm { width: 40px; height: 40px; }
.mu-avatar-md { width: 80px; height: 80px; }
.mu-avatar-lg { width: 160px; height: 160px; }

.mu-brand-icon {
    width: 44px;
    height: 44px;
}

.mu-banner {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--mu-border-radius) var(--mu-border-radius) 0 0;
}

@media (max-width: 768px) {
    .mu-banner {
        height: 140px;
    }
    .mu-avatar-lg {
        width: 120px;
        height: 120px;
    }
}

/* ============================================
   FOOTER
   ============================================ */
.mu-footer {
    background: var(--mu-background);
    color: var(--mu-text-muted);
    border-top: 2px solid var(--mu-primary);
    padding: var(--mu-space-md) var(--mu-space-lg);
    text-align: center;
    font-size: var(--mu-font-size-sm);
}

@media (min-width: 769px) {
    .mu-footer {
        margin-left: var(--mu-sidebar-width);
    }
}

/* ============================================
   AUTH PAGES (login/register/verify)
   ============================================ */
.mu-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--mu-navbar-height));
    padding: var(--mu-space-lg);
}

.mu-auth-card {
    background: var(--mu-surface);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-lg);
    box-shadow: var(--mu-shadow-lg);
    backdrop-filter: blur(12px);
    width: 100%;
    max-width: 440px;
    padding: var(--mu-space-2xl);
}

@media (max-width: 480px) {
    .mu-auth-card {
        padding: var(--mu-space-lg);
        margin: var(--mu-space-sm);
    }
}

/* ============================================
   QR / CHECK-IN
   ============================================ */
.mu-qr-container {
    text-align: center;
    padding: var(--mu-space-xl);
}

.mu-qr-img {
    max-width: 400px;
    width: 100%;
    height: auto;
    border-radius: var(--mu-border-radius);
    border: 2px solid var(--mu-primary);
}

/* ============================================
   404 PAGE
   ============================================ */
.mu-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - var(--mu-navbar-height));
    padding: var(--mu-space-xl);
}

.mu-error-page img {
    max-width: 300px;
    margin-bottom: var(--mu-space-lg);
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.mu-m-0 { margin: 0; }
.mu-mt-sm { margin-top: var(--mu-space-sm); }
.mu-mt-md { margin-top: var(--mu-space-md); }
.mu-mt-lg { margin-top: var(--mu-space-lg); }
.mu-mb-sm { margin-bottom: var(--mu-space-sm); }
.mu-mb-md { margin-bottom: var(--mu-space-md); }
.mu-mb-lg { margin-bottom: var(--mu-space-lg); }
.mu-mb-xl { margin-bottom: var(--mu-space-xl); }
.mu-my-md { margin-top: var(--mu-space-md); margin-bottom: var(--mu-space-md); }
.mu-my-lg { margin-top: var(--mu-space-lg); margin-bottom: var(--mu-space-lg); }

.mu-p-0 { padding: 0; }
.mu-p-sm { padding: var(--mu-space-sm); }
.mu-p-md { padding: var(--mu-space-md); }
.mu-p-lg { padding: var(--mu-space-lg); }
.mu-p-xl { padding: var(--mu-space-xl); }
.mu-px-md { padding-left: var(--mu-space-md); padding-right: var(--mu-space-md); }
.mu-py-md { padding-top: var(--mu-space-md); padding-bottom: var(--mu-space-md); }
.mu-py-lg { padding-top: var(--mu-space-lg); padding-bottom: var(--mu-space-lg); }

/* ============================================
   DISPLAY UTILITIES
   ============================================ */
.mu-block { display: block; }
.mu-inline-block { display: inline-block; }
.mu-hidden { display: none; }
.mu-w-full { width: 100%; }

/* Hide on mobile / desktop */
@media (max-width: 768px) {
    .mu-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .mu-hide-desktop { display: none !important; }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--mu-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mu-primary);
}

/* ============================================
   COLOR PICKER
   ============================================ */
.mu-input[type="color"] {
    height: 48px;
    padding: 4px;
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
}

.mu-input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.mu-input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
}

.mu-input[type="color"]::-moz-color-swatch {
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-sm);
}

/* ─── Badges ─── */

.mu-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.mu-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--mu-surface, #1e1e36);
    border: 1px solid var(--mu-border-color, rgba(255,255,255,0.08));
    font-size: 0.8rem;
    color: var(--mu-text, #c4c4d4);
    cursor: default;
}

.mu-badge-pill i {
    font-size: 0.85rem;
}

.mu-badge-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--mu-surface, #1e1e36);
    border: 2px solid var(--mu-border-color, rgba(255,255,255,0.08));
    font-size: 0.85rem;
    color: var(--mu-text-muted, #888);
    cursor: pointer;
    margin: 0.25rem;
    transition: border-color 0.15s, opacity 0.15s;
    user-select: none;
}

.mu-badge-pick:hover {
    border-color: var(--mu-primary, #19f5aa);
    opacity: 0.9;
}

.mu-badge-pick.active {
    border-color: var(--mu-primary, #19f5aa);
    color: var(--mu-text-bright, #fff);
    background: rgba(25, 245, 170, 0.08);
}

/* A tier badge the member is not currently paying for: still in the picker, still in the
   showcase, just not shown to visitors until they renew (MGCS-62). Faded rather than hidden,
   because the point is that it is still theirs. */
.mu-badge-pick.mu-badge-lapsed {
    opacity: 0.55;
    border-style: dashed;
}

/* ─── Official vs space badges (MGCS-129) ───
   A badge's look comes from --mu-badge-bg / --mu-badge-text, set inline from its own colours.
   The OFFICIAL frame (gradient border, glow, the MewGem mark, first in the row) comes only
   from .mu-badge-official, which MGBadgeIcon.pill() adds from the API's `official` flag and
   nothing else - no space badge can reach it, whatever colours or icon it picks. */
.mu-badge-pill {
    background: var(--mu-badge-bg, var(--mu-surface, #1e1e36));
    color: var(--mu-badge-text, var(--mu-text, #c4c4d4));
}

.mu-badge-pill.mu-badge-icon {
    padding: 0.3rem 0.5rem;
}

.mu-badge-pill.mu-badge-official {
    order: -1;
    border: 2px solid transparent;
    /* MewGem's own green, as a fixed hex: members can re-theme --mu-primary, and the
       official frame must look the same in everybody's theme. */
    background:
        linear-gradient(var(--mu-badge-bg, #1e1e36), var(--mu-badge-bg, #1e1e36)) padding-box,
        linear-gradient(#19f5aa, #19f5aa) border-box;
    box-shadow: 0 0 10px rgba(25, 245, 170, 0.35);
    padding-left: 0.5rem;
    font-weight: 600;
}

.mu-badge-mark {
    flex: none;
    width: 0.7em;
    height: 0.7em;
    margin: 0 0.15em;
    border-radius: 2px;
    transform: rotate(45deg);
    background: #19f5aa;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

.mu-badge-src {
    font-size: 0.72em;
    opacity: 0.75;
    padding-left: 0.4rem;
    border-left: 1px solid currentColor;
}

/* Pickers hold a pill rather than being one. */
.mu-badge-pick .mu-badge-pill {
    cursor: inherit;
}

/* ─── Badge icons ─── */

/* A space badge's icon is one of three things (see assets/scripts/badgeicon.js): an
   emote image, an icon-font glyph, or literal characters. All three have to sit on the
   same baseline at the same size, or a pill visibly changes height with its icon. */
.mu-badge-emote {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    object-fit: contain;
}

.mu-badge-glyph {
    font-size: 1.05em;
    line-height: 1;
}

/* The settings list and the create form both show the value drawn exactly as the badge
   will draw it — that divergence is what let a broken icon ship unnoticed. */
.mu-badge-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    font-size: 1.2rem;
}

.mu-badge-emote-pick {
    background: var(--mu-surface, #1e1e36);
    border: 2px solid var(--mu-border-color, rgba(255,255,255,0.08));
    border-radius: var(--mu-border-radius-sm, 6px);
    padding: 0.25rem;
    cursor: pointer;
    line-height: 0;
    transition: border-color 0.15s;
}

.mu-badge-emote-pick:hover {
    border-color: var(--mu-primary, #19f5aa);
}

.mu-badge-emote-pick img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Spoilers (MGCS-47). Message HTML marks them with data-spoiler and no inline script; the
   click handler in main.js adds .mu-spoiler-open. */
.mu-spoiler { background: #3a3a4a; color: transparent; border-radius: 3px; cursor: pointer; }
.mu-spoiler.mu-spoiler-open { background: transparent; color: inherit; cursor: auto; }

/* A subscriber's theme background gradient (MGCS-70). _applyTheme sets the custom property and
   the class; without them nothing here applies, so the default background is untouched for
   everybody else. Inside a space, the space's own background wins — it is set on a lower
   element and paints over this one. */
html.mu-has-theme-gradient,
html.mu-has-theme-gradient body {
    background: var(--mu-background-gradient) fixed;
    background-size: cover;
}

/* A member's own page background image (MGCS-75). Declared after the gradient, so a member who
   has both sees the image — it is the more specific choice, and the gradient shows again if
   they remove it. */
html.mu-has-theme-background,
html.mu-has-theme-background body {
    background-image: var(--mu-theme-background);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ============================================
   CLASSES PAGES ALREADY USE (MGCS-133)
   Each of these was written into markup in one app or the other and never defined here,
   so the layout it asked for silently did not happen: headers with their buttons jammed
   against the title, "primary" buttons that looked like every other button, a "large"
   modal at the 500px default, org and app cards that never went two-up. Defined once,
   in every copy of this file.
   ============================================ */
.mu-justify-between { justify-content: space-between; }   /* the same as .mu-flex-between */
.mu-items-end { align-items: flex-end; }
.mu-mb-xs { margin-bottom: var(--mu-space-xs); }
.mu-mt-xs { margin-top: var(--mu-space-xs); }

/* The main action on a page: filled. */
.mu-btn-primary {
    background: var(--mu-primary);
    border-color: var(--mu-primary);
    color: var(--mu-background);
}
.mu-btn-primary:hover {
    background: color-mix(in srgb, var(--mu-primary) 85%, white);
    color: var(--mu-background);
}

/* A lesser action beside a main one (Cancel, Copy, Withdraw): quiet. */
.mu-btn-secondary {
    background: transparent;
    border-color: var(--mu-secondary);
    color: var(--mu-text);
}
.mu-btn-secondary:hover {
    background: var(--mu-surface-light);
    border-color: var(--mu-primary);
    color: var(--mu-primary);
}

/* Outlined in the accent colour, no fill. */
.mu-btn-outline {
    background: transparent;
    border-color: var(--mu-primary);
    color: var(--mu-primary);
}
.mu-btn-outline:hover {
    background: var(--mu-surface-light);
    color: var(--mu-primary);
}

.mu-modal-dialog.mu-modal-lg { max-width: 860px; }

/* Responsive columns: full width on a phone, then two-up, then three-up. */
@media (min-width: 769px) {
    .mu-col-md-6 { flex: 0 0 calc(50% - var(--mu-space-md) / 2); max-width: calc(50% - var(--mu-space-md) / 2); }
}
@media (min-width: 1025px) {
    .mu-col-lg-4 { flex: 0 0 calc(33.333% - var(--mu-space-md) * 2 / 3); max-width: calc(33.333% - var(--mu-space-md) * 2 / 3); }
}

/* A small status label ("Pending review", "Approved"). */
.mu-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--mu-border-radius-full);
    font-size: var(--mu-font-size-xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--mu-text-bright);
    background: var(--mu-surface-light);
    vertical-align: middle;
    white-space: nowrap;
}
.mu-badge-success { background: color-mix(in srgb, var(--mu-success) 30%, transparent); color: var(--mu-success); }
.mu-badge-danger { background: color-mix(in srgb, var(--mu-danger) 30%, transparent); color: var(--mu-danger); }
.mu-badge-warning { background: color-mix(in srgb, var(--mu-warning) 30%, transparent); color: var(--mu-warning); }

/* A progress track; the fill is its child. */
.mu-progress {
    height: 12px;
    background: var(--mu-surface-light);
    border-radius: var(--mu-border-radius-full);
    overflow: hidden;
}

/* The page you are on (MGCS-133). */
.mu-sidebar-link.mu-active {
    background: var(--mu-surface-light);
    color: var(--mu-primary);
    border-left-color: var(--mu-primary);
    font-weight: 600;
}

/* ============================================
   TOASTS (MGCS-134) - the result of something the member did.
   See assets/scripts/mgfeedback.js. Bottom-right on a desktop, full width at the bottom
   on a phone, above everything but the version banner.
   ============================================ */
.mu-toast-stack {
    position: fixed;
    right: var(--mu-space-md);
    bottom: var(--mu-space-md);
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mu-space-sm);
    max-width: min(380px, calc(100vw - 2 * var(--mu-space-md)));
    pointer-events: none;
}

.mu-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--mu-space-sm);
    width: 100%;
    padding: 10px 12px;
    background: var(--mu-background);
    color: var(--mu-text);
    border: 1px solid var(--mu-border-color);
    border-left: 4px solid var(--mu-toast-accent, var(--mu-primary));
    border-radius: var(--mu-border-radius);
    box-shadow: var(--mu-shadow-lg);
    font-size: var(--mu-font-size-sm);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mu-toast.mu-toast-in { opacity: 1; transform: none; }
.mu-toast-ok { --mu-toast-accent: var(--mu-success); }
.mu-toast-error { --mu-toast-accent: var(--mu-danger); }
.mu-toast-info { --mu-toast-accent: var(--mu-primary); }
.mu-toast-clickable { cursor: pointer; }

.mu-toast-icon { color: var(--mu-toast-accent); margin-top: 2px; }
.mu-toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mu-toast-title { font-weight: 700; color: var(--mu-text-bright); }
.mu-toast-close {
    background: none;
    border: none;
    color: var(--mu-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.mu-toast-close:hover { color: var(--mu-text-bright); }

@media (max-width: 480px) {
    .mu-toast-stack { left: var(--mu-space-sm); right: var(--mu-space-sm); bottom: var(--mu-space-sm); max-width: none; align-items: stretch; }
}

/* MGDialog's modals sit above page modals they may be opened from. */
.mu-modal.mu-dialog { z-index: 10000; }
/* Same as the spaces site's: one "something new here" mark everywhere (MGCS-140). */
.mu-unread-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--mu-primary); vertical-align: middle; flex-shrink: 0;
}
.mu-tab:focus-visible { outline: 2px solid var(--mu-primary); outline-offset: 2px; }

/* ── The notification bell (MGCS-137). The same block in mymewgem and spaces. ── */
.mu-bell-wrap { position: relative; display: flex; align-items: center; }
.mu-bell {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--mu-text); cursor: pointer; font-size: 1rem;
}
.mu-bell:hover, .mu-bell[aria-expanded="true"] { color: var(--mu-primary); background: var(--mu-surface-light); }
.mu-bell:focus-visible { outline: 2px solid var(--mu-primary); outline-offset: 2px; }
.mu-bell-count {
    position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--mu-danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.mu-bell-count.mu-hidden { display: none; }
/* `.mu-navbar-actions a` sets display:flex and is more specific than .mu-hidden, so a hidden
   navbar link (Support's "Sign In" for a signed-in member) still showed. Hidden must hide. */
.mu-navbar-actions .mu-hidden { display: none; }
/* Fixed under the navbar so it fits a phone: never wider than the screen minus a margin. */
.mu-bell-panel {
    position: fixed; top: calc(var(--mu-navbar-height) - 4px); right: 8px; z-index: 200;
    width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--mu-background); color: var(--mu-text);
    border: 1px solid var(--mu-border-color); border-radius: var(--mu-border-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.mu-bell-panel[hidden] { display: none; }
.mu-bell-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--mu-border-color);
}
.mu-bell-list { overflow-y: auto; }
.mu-bell-empty { margin: 0; padding: 18px 14px; font-size: var(--mu-font-size-sm); color: var(--mu-text-muted); }
.mu-navbar-actions .mu-bell-item, .mu-bell-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    color: var(--mu-text); text-decoration: none; cursor: pointer;
    border-bottom: 1px solid var(--mu-border-color);
}
.mu-bell-item:last-child { border-bottom: 0; }
.mu-bell-item:hover { background: var(--mu-surface-light); color: var(--mu-text); }
.mu-bell-unread { background: rgba(25, 245, 170, 0.06); }
.mu-bell-icon { flex: none; width: 18px; margin-top: 2px; color: var(--mu-primary); text-align: center; }
.mu-bell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.mu-bell-title { font-size: var(--mu-font-size-sm); font-weight: 600; }
.mu-bell-unread .mu-bell-title { color: var(--mu-text-bright, var(--mu-text)); }
.mu-bell-body {
    font-size: 12px; color: var(--mu-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mu-bell-time { font-size: 11px; color: var(--mu-text-muted); }
.mu-bell-item .mu-unread-dot { margin-top: 6px; }
/* Each notification sits in a row with its own dismiss button beside the link (MGCS-195): a
   button cannot go inside the <a>, so the row carries the divider instead of the item. */
.mu-bell-row { position: relative; border-bottom: 1px solid var(--mu-border-color); }
.mu-bell-row:last-child { border-bottom: 0; }
.mu-bell-row .mu-bell-item { border-bottom: 0; padding-right: 36px; }
.mu-bell-dismiss {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--mu-text-muted); cursor: pointer;
}
.mu-bell-dismiss:hover, .mu-bell-dismiss:focus-visible { background: var(--mu-surface-light); color: var(--mu-text); }
.mu-bell-actions { display: flex; gap: 6px; }

/* ── Shared components from the spaces copy (MGCS-123) ── */

/* ============================================
   TABS
   ============================================ */
.mu-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--mu-border-color);
    margin-bottom: var(--mu-space-md);
    gap: 0;
}

.mu-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--mu-space-sm) var(--mu-space-md);
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    cursor: url("/assets/img/cursors/mgcursor_hov.png"), pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.mu-tab:hover {
    color: var(--mu-text-bright);
}

.mu-tab.mu-active {
    color: var(--mu-primary);
    border-bottom-color: var(--mu-primary);
}

.mu-tab-panel {
    display: none;
}

.mu-tab-panel.mu-active {
    display: block;
}
/* ── Profile sections (MGCS-82, shared since MGCS-118) ──
   Drawn by profilesections.js (served from mewgem.me, loaded by Spaces too), on the public
   profile, the member's own previews and the full profile inside Spaces. One stylesheet for
   all of them, so no view can flatter or differ from the real thing. The editor's drag
   handles stay in mymewgem's mewui-app.css. */

/* Drawn by assets/scripts/profilesections.js, on the public profile and in the editor's
   preview. One stylesheet for both, so the preview cannot flatter the real thing. */
.mu-section { margin-bottom: var(--mu-space-md); }

.mu-section-text { color: var(--mu-text); overflow-wrap: anywhere; }

.mu-section-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-space-sm);
}

.mu-section-link {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-full);
    color: var(--mu-text-bright);
    /* A label can be sixty characters of anything, including one long word. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mu-section-link:hover { border-color: var(--mu-primary); }

.mu-section-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--mu-space-sm);
}

.mu-section-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--mu-border-radius-sm);
    background: var(--mu-surface-light);
}

.mu-section-space {
    display: flex;
    align-items: center;
    gap: var(--mu-space-md);
}

.mu-section-space-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mu-border-radius);
    object-fit: cover;
}

/* Sections placed freely on the profile, like CES elements (see profilesections.js). Across
   is a share of the width, down is pixels; a card that is shorter than its content scrolls
   inside itself rather than spilling over the one below. */
.mu-section-board { position: relative; }
.mu-section-board > .mu-section {
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.mu-section-board > .mu-section > .mu-card-body { flex: 1; min-height: 0; overflow: auto; }
.mu-section-stacked > .mu-section { margin-bottom: var(--mu-space-md); }


/* A section the owner has saved but cannot currently show (over their limit, or a lapsed
   perk). Only the owner ever sees one: visitors are sent the visible ones. */
.mu-section-locked {
    opacity: 0.55;
    border-style: dashed;
}

/* A gallery image at full size, over the page rather than away from it. */
.mu-section-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;   /* above a modal (200): Spaces opens it from the full-profile panel */
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mu-space-lg);
    cursor: zoom-out;
}

.mu-section-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--mu-border-radius);
}