/* ===================================
   SONIC ATLAS - GAMIFIED METAL THEME
   Enhanced with Road Warrior, Leaderboard, Future Shows
   =================================== */

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

:root {
    /* Metal Color Palette */
    --gunmetal: #2a3439;
    --dark-gunmetal: #1a1f24;
    --charcoal: #0d0f12;
    --silver: #c0c5ce;
    --steel: #8b94a0;
    
    /* Accent Colors */
    --flame-red: #ff4500;
    --hot-orange: #ff6b35;
    --electric-blue: #00d9ff;
    --neon-purple: #b537f2;
    
    /* UI Colors */
    --success-green: #4caf50;
    --warning-yellow: #ffc107;
    
    /* Shadows & Glows */
    --glow-red: 0 0 20px rgba(255, 69, 0, 0.4);
    --glow-blue: 0 0 20px rgba(0, 217, 255, 0.3);
    --glow-cyan: 0 0 30px rgba(0, 217, 255, 0.6);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.6);
}

body {
    background: linear-gradient(135deg, var(--charcoal) 0%, var(--dark-gunmetal) 100%);
    color: var(--silver);
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 69, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.hidden {
    display: none !important;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3 {
    font-family: 'Rubik Mono One', monospace;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.app-title {
    font-size: 3rem;
    margin: 0;
    background: linear-gradient(135deg, var(--flame-red), var(--hot-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== BUTTONS ========== */
.game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 48px;
    box-shadow: var(--shadow-soft);
}

.game-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.game-btn:hover::before {
    opacity: 1;
}

.game-btn:active {
    transform: scale(0.96);
}

.primary-game-btn {
    background: linear-gradient(135deg, var(--flame-red), var(--hot-orange));
    color: white;
    box-shadow: var(--glow-red), var(--shadow-soft);
}

.primary-game-btn:hover {
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.6), var(--shadow-medium);
    transform: translateY(-2px);
}

.secondary-game-btn {
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    color: var(--silver);
    border: 2px solid var(--steel);
}

.secondary-game-btn:hover {
    background: linear-gradient(135deg, var(--steel), var(--gunmetal));
    border-color: var(--silver);
    transform: translateY(-2px);
}

/* Icon Buttons */
.icon-btn {
    height: 48px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    border: none;
    border-radius: 12px;
    background: var(--gunmetal);
    color: var(--silver);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.icon-btn .btn-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.icon-btn .btn-label {
    font-size: 0.65rem;
    line-height: 1;
}

.icon-btn:hover {
    background: var(--steel);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.icon-btn:active {
    transform: scale(0.95);
}

.btn-icon {
    font-size: 1.2rem;
}

.close-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: rgba(255, 69, 0, 0.1);
    color: var(--flame-red);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-icon-btn:hover {
    background: var(--flame-red);
    color: white;
    transform: rotate(90deg);
}

/* ========== AUTH / GATEKEEPER ========== */
.overlay {
    position: fixed;
    inset: 0;
    background: #0d0f12;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.glass-card {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.9), rgba(26, 31, 36, 0.9));
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 69, 0, 0.3);
    border-radius: 24px;
    padding: 32px 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--glow-red), var(--shadow-strong);
    text-align: center;
    margin: auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.logo-container {
    margin-bottom: 20px;
}

.logo-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.4));
    animation: pulse 2s ease-in-out infinite;
}

.logo-icon {
    font-size: 4rem;
    margin-bottom: 12px;
    animation: pulse 2s ease-in-out infinite;
}

.logo-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 12px;
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.tagline {
    font-size: 1rem;
    color: var(--steel);
    margin-bottom: 24px;
    line-height: 1.6;
}

.price-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 107, 53, 0.2));
    border: 2px solid var(--flame-red);
    border-radius: 20px;
    margin-bottom: 32px;
    box-shadow: var(--glow-red);
}

.price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--flame-red);
    line-height: 1;
}

.price-label {
    font-size: 0.9rem;
    color: var(--silver);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.payment-section {
    margin-top: 32px;
}

.payment-msg {
    margin-bottom: 20px;
    font-size: 1rem;
}

.post-payment-box {
    margin-top: 24px;
    padding: 20px;
    background: rgba(42, 52, 57, 0.5);
    border-radius: 16px;
    border: 1px solid var(--steel);
}

.hint-text {
    font-size: 0.85rem;
    color: var(--steel);
    margin-bottom: 16px;
}

/* ========== MAIN APP LAYOUT ========== */
#app-content {
    position: relative;
    width: 100%;
    height: 100vh;
}

#map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--charcoal);
}

#ui-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

/* ========== HEADER ========== */
.app-header {
    pointer-events: auto;
    /* OLD STYLE - Solid background with border (uncomment to revert) */
    /* background: linear-gradient(180deg, rgba(13, 15, 18, 0.95), rgba(13, 15, 18, 0.7)); */
    /* backdrop-filter: blur(10px); */
    /* border-bottom: 1px solid rgba(255, 69, 0, 0.2); */
    /* box-shadow: var(--shadow-soft); */

    /* NEW STYLE - Transparent to show map underneath */
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;

    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.role-dropdown {
    position: relative;
    margin-left: 8px;
}

.role-dropdown-btn {
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-dropdown-btn:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: rgba(255, 107, 53, 0.5);
}

.role-icon {
    font-size: 1.2rem;
}

.role-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--gunmetal);
    border: 2px solid var(--flame-red);
    border-radius: 12px;
    padding: 8px;
    min-width: 120px;
    box-shadow: var(--glow-red);
    z-index: 1000;
}

.role-dropdown-menu.hidden {
    display: none;
}

.role-dropdown-menu button {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.role-dropdown-menu button:hover {
    background: rgba(255, 107, 53, 0.2);
}

.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 8px;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
}

.view-toggle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--steel);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-toggle-btn:hover {
    background: rgba(255, 69, 0, 0.1);
    color: var(--flame-red);
}

.view-toggle-btn.active {
    background: linear-gradient(135deg, var(--flame-red), var(--hot-orange));
    color: white;
    box-shadow: var(--glow-red);
}

.toggle-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-icon svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
}

.toggle-label {
    font-size: 0.7rem;
}

.stats-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    border: 2px solid var(--steel);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: var(--shadow-soft);
}

.stat-icon {
    font-size: 1.2rem;
}

/* ========== BAND LEGEND ========== */
.band-legend-container {
    pointer-events: auto;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(13, 15, 18, 0.7), transparent);
    backdrop-filter: blur(8px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.band-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(42, 52, 57, 0.8);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.band-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.band-filter-container {
    pointer-events: auto;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(13, 15, 18, 0.7), transparent);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 10px;
}

.band-filter-select {
    flex: 1;
    max-width: 300px;
    padding: 10px 16px;
    background: rgba(42, 52, 57, 0.95);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 12px;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

.band-filter-select:hover {
    border-color: rgba(255, 69, 0, 0.6);
    background: rgba(42, 52, 57, 1);
    box-shadow: var(--shadow-medium);
}

.band-filter-select:focus {
    outline: none;
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.2);
}

.band-filter-select option {
    background: #1a1f23;
    color: var(--text-color);
    padding: 10px;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px currentColor;
}

/* ========== ACTION MENU ========== */
.action-menu {
    pointer-events: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* OLD STYLE - Solid background with border (uncomment to revert) */
    /* background: linear-gradient(135deg, rgba(42, 52, 57, 0.98), rgba(26, 31, 36, 0.98)); */
    /* backdrop-filter: blur(20px); */
    /* border-top: 2px solid rgba(255, 69, 0, 0.3); */
    /* border-radius: 20px 20px 0 0; */
    /* box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5), var(--glow-red); */

    /* NEW STYLE - Transparent to show map underneath */
    background: transparent;
    backdrop-filter: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;

    padding: 16px 16px 20px;
    /* Add safe area for mobile devices with rounded corners/notches */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
    max-width: 100vw;
}

.add-show-btn {
    width: 100%;
}

.util-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
}

/* ========== SEARCH BAR ========== */
.search-bar-container {
    position: relative;
    width: 100%;
}

.show-search-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    background: rgba(26, 26, 46, 0.6);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 12px;
    color: white;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.show-search-input:focus {
    outline: none;
    border-color: var(--flame-red);
    background: rgba(26, 26, 46, 0.8);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.show-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 107, 53, 0.2);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-clear-btn:hover {
    background: rgba(255, 107, 53, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.search-clear-btn.hidden {
    display: none;
}

/* ========== MODALS ========== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

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

.modal-card {
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    border: 2px solid rgba(255, 69, 0, 0.4);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--glow-red), var(--shadow-strong);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 69, 0, 0.2);
}

.modal-title {
    font-size: 1.5rem;
    margin: 0;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 200px);
}

/* Profile Pic Selector Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    border: 2px solid rgba(255, 69, 0, 0.4);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--glow-red), var(--shadow-strong);
    animation: slideUp 0.3s ease;
}

.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--flame-red);
}

.profile-pic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px;
    max-height: 400px;
    overflow-y: auto;
}

.profile-pic-option {
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 50%;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0;
}

.profile-pic-option:hover {
    transform: scale(1.1);
    border-color: rgba(255, 107, 53, 0.5);
}

.profile-pic-option.selected {
    border-color: var(--flame-red);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.profile-pic-option svg {
    width: 100%;
    height: 100%;
    display: block;
}

.modal-body.scrollable {
    max-height: 60vh;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(255, 69, 0, 0.2);
}

.modal-action-btn {
    flex: 1;
}

/* ========== INPUTS ========== */
.input-wrapper {
    margin-bottom: 20px;
}

.input-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--silver);
}

.game-input,
.game-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--steel);
    border-radius: 12px;
    background: rgba(26, 31, 36, 0.8);
    color: var(--silver);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.game-input:focus,
.game-textarea:focus {
    outline: none;
    border-color: var(--flame-red);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.1);
}

.game-input::placeholder,
.game-textarea::placeholder {
    color: var(--steel);
}

.game-textarea {
    resize: vertical;
    min-height: 80px;
}

.input-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--electric-blue);
    font-style: italic;
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-input {
    width: 60px;
    height: 48px;
    border: 2px solid var(--steel);
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
}

.color-preview {
    flex: 1;
    height: 48px;
    border-radius: 12px;
    border: 2px solid var(--steel);
    background: var(--flame-red);
}

/* ========== SHOWS LIST - Made more compact ========== */
.list-modal-card {
    max-width: 600px;
}

.shows-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.show-item {
    padding: 12px;
    background: rgba(42, 52, 57, 0.6);
    border: 1px solid var(--steel);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.show-item:hover {
    background: rgba(42, 52, 57, 0.9);
    border-color: var(--flame-red);
    transform: translateX(4px);
}

.show-item.future-show-item {
    border-color: var(--electric-blue);
    background: rgba(0, 217, 255, 0.1);
}

.show-item.future-show-item:hover {
    border-color: var(--electric-blue);
    box-shadow: var(--glow-cyan);
}

.show-item b {
    color: var(--flame-red);
    display: block;
    margin-bottom: 4px;
}

/* ========== PROFILE VIEW ========== */
.profile-view,
.leaderboard-view,
.vest-view {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--charcoal), var(--dark-gunmetal));
    overflow-y: auto;
}

.profile-scroll-container,
.leaderboard-container {
    padding: 60px 20px 120px;
    max-width: 800px;
    margin: 0 auto;
}

.profile-hero {
    margin-bottom: 20px;
}

/* Level Card - Made more compact */
.level-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.9), rgba(26, 31, 36, 0.9));
    border: 2px solid rgba(255, 69, 0, 0.4);
    border-radius: 16px;
    box-shadow: var(--glow-red), var(--shadow-medium);
    margin-bottom: 18px;
}

.level-icon {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px var(--flame-red));
}

.level-info {
    flex: 1;
}

.level-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.xp-bar {
    width: 100%;
    height: 12px;
    background: var(--dark-gunmetal);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--flame-red), var(--hot-orange));
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px var(--flame-red);
}

.xp-text {
    font-size: 0.85rem;
    color: var(--steel);
    text-align: center;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.stat-card {
    padding: 12px 8px;
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.8), rgba(26, 31, 36, 0.8));
    border: 2px solid var(--steel);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--flame-red);
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--flame-red);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Achievements Section */
/* Profile Tabs Section - Made more compact */
.profile-tabs-section {
    margin-bottom: 20px;
}

.profile-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--steel);
    padding-bottom: 0;
}

.profile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(42, 52, 57, 0.5);
    border: 2px solid var(--steel);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    color: var(--steel);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    bottom: -2px;
}

.profile-tab:hover {
    background: rgba(42, 52, 57, 0.8);
    border-color: var(--flame-red);
    color: var(--silver);
}

.profile-tab.active {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 107, 53, 0.2));
    border-color: var(--flame-red);
    color: var(--flame-red);
    box-shadow: var(--glow-red);
}

.tab-icon {
    font-size: 1.1rem;
}

.tab-label {
    flex: 1;
}

.tab-count {
    background: var(--flame-red);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.profile-tab.active .tab-count {
    background: var(--hot-orange);
}

.profile-tab-content {
    min-height: 250px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.rw-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.section-title {
    font-size: 1.3rem;
    margin-bottom: 14px;
    color: var(--flame-red);
}

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

/* Achievement Card (Flippable) */
.achievement-card {
    position: relative;
    width: 100%;
    padding-top: 100%;
    perspective: 1000px;
    cursor: pointer;
}

.achievement-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.achievement-card.flipped .achievement-inner {
    transform: rotateY(180deg);
}

.achievement-front,
.achievement-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
}

.achievement-front {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.9), rgba(26, 31, 36, 0.9));
    border: 2px solid var(--flame-red);
    box-shadow: var(--glow-red), var(--shadow-medium);
}

.achievement-back {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 107, 53, 0.2));
    border: 2px solid var(--hot-orange);
    transform: rotateY(180deg);
}

.achievement-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 8px var(--flame-red));
}

.achievement-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--silver);
    text-align: center;
    line-height: 1.2;
}

.achievement-desc {
    font-size: 0.7rem;
    color: var(--steel);
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.3;
}

.achievement-points {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hot-orange);
}

.achievement-card.locked .achievement-front {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.5), rgba(26, 31, 36, 0.5));
    border-color: var(--steel);
    opacity: 0.5;
}

.achievement-card.locked .achievement-icon {
    filter: grayscale(100%);
}

/* ========== ROAD WARRIOR SECTION ========== */
.rw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.rw-points-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 69, 0, 0.2));
    border: 2px solid var(--hot-orange);
    border-radius: 20px;
    box-shadow: var(--glow-red);
}

.rw-points-label {
    font-size: 0.85rem;
    color: var(--silver);
    font-weight: 600;
}

.rw-points-value {
    font-size: 1.2rem;
    color: var(--hot-orange);
    font-weight: 800;
}

.rw-description {
    font-size: 0.9rem;
    color: var(--steel);
    margin-bottom: 20px;
    font-style: italic;
}

.road-warrior-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.rw-moment-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.8), rgba(26, 31, 36, 0.8));
    border: 2px solid var(--steel);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 80px;
    text-align: left;
}

.rw-moment-btn:hover {
    border-color: var(--hot-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.rw-moment-btn.unlocked {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 69, 0, 0.2));
    border-color: var(--hot-orange);
    box-shadow: var(--glow-red);
}

.rw-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.2rem;
    color: var(--success-green);
    font-weight: bold;
}

.rw-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--silver);
    line-height: 1.2;
    margin-bottom: 4px;
}

.rw-points {
    font-size: 0.75rem;
    color: var(--hot-orange);
    font-weight: 700;
}

/* Actions Section */
.actions-section {
    text-align: center;
}

.share-btn {
    min-width: 200px;
}

/* ========== LEADERBOARD ========== */
.leaderboard-header {
    text-align: center;
    margin-bottom: 32px;
}

.leaderboard-title {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.leaderboard-subtitle {
    font-size: 1rem;
    color: var(--steel);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.8), rgba(26, 31, 36, 0.8));
    border: 2px solid var(--steel);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.leaderboard-item:hover {
    border-color: var(--flame-red);
    transform: translateX(4px);
    box-shadow: var(--shadow-medium);
}

.leaderboard-item.current-user {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 107, 53, 0.2));
    border-color: var(--flame-red);
    box-shadow: var(--glow-red);
}

.lb-rank {
    font-size: 2rem;
    font-weight: 800;
    color: var(--flame-red);
    min-width: 60px;
    text-align: center;
}

.lb-info {
    flex: 1;
}

.lb-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--silver);
    margin-bottom: 4px;
}

.lb-level {
    font-size: 0.85rem;
    color: var(--steel);
}

.lb-stats {
    display: flex;
    gap: 16px;
}

.lb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.lb-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hot-orange);
    line-height: 1;
}

.lb-stat-label {
    font-size: 0.7rem;
    color: var(--steel);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ========== TOAST NOTIFICATIONS ========== */
.unlock-toast,
.level-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    border: 2px solid var(--flame-red);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--glow-red), var(--shadow-strong);
    z-index: 4000;
    min-width: 300px;
    max-width: 90vw;
    animation: toastSlideIn 0.5s ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.unlock-toast {
    display: flex;
    gap: 16px;
    align-items: center;
}

.toast-icon {
    font-size: 2.5rem;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--flame-red);
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.9rem;
    color: var(--silver);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--flame-red);
    border-radius: 0 0 14px 14px;
    animation: toastProgress 5s linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.level-toast-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.level-toast-icon {
    font-size: 3rem;
    animation: pulse 1s ease infinite;
}

.level-toast-title {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--hot-orange);
    margin-bottom: 4px;
}

.level-toast-level {
    font-size: 1rem;
    color: var(--silver);
    font-weight: 600;
}

/* ========== FUTURE SHOW EFFECTS ========== */
.future-show-marker {
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px var(--electric-blue));
    }
    50% {
        filter: drop-shadow(0 0 20px var(--electric-blue));
    }
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    .app-title {
        font-size: 2rem;
    }

    .glass-card {
        padding: 28px 20px;
    }

    .logo-icon {
        font-size: 3rem;
    }

    .price-amount {
        font-size: 2.5rem;
    }

    .app-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .header-left {
        justify-content: center;
    }

    .stats-pill {
        justify-content: center;
    }

    .action-menu {
        bottom: 0;
        left: 0;
        right: 0;
        /* OLD STYLE (uncomment to revert) */
        /* padding: 12px 12px 16px; */
        /* border-radius: 16px 16px 0 0; */

        /* NEW STYLE - Safe area spacing for mobile */
        padding: 12px 12px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-radius: 0;
    }

    .util-btns {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .icon-btn {
        padding: 8px 4px;
    }
    
    .icon-btn .btn-emoji {
        font-size: 1.1rem;
    }
    
    .icon-btn .btn-label {
        font-size: 0.6rem;
    }

    .level-card {
        flex-direction: column;
        text-align: center;
    }

    .level-icon {
        font-size: 3rem;
    }

    .level-title {
        font-size: 1.4rem;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 10px 6px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }

    .road-warrior-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .lb-stats {
        flex-wrap: wrap;
        gap: 8px;
    }

    .lb-stat {
        min-width: 50px;
    }

    .modal-card {
        max-height: 95vh;
    }

    .modal-body.scrollable {
        max-height: 70vh;
    }

    .modal-footer {
        flex-direction: column;
    }

    .unlock-toast,
    .level-toast {
        min-width: auto;
        width: 90%;
    }

    .profile-scroll-container,
    .leaderboard-container {
        padding-top: 100px;
    }
}

@media (max-width: 480px) {
    .view-toggle-btn {
        padding: 6px 12px;
    }

    .toggle-icon {
        font-size: 1.2rem;
    }

    .toggle-icon svg {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }

    .toggle-label {
        font-size: 0.65rem;
    }

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

    .road-warrior-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .stat-number {
        font-size: 2rem;
    }

    .rw-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-menu {
        /* Extra side padding for very small screens to prevent button cutoff */
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ========== LEAFLET CUSTOMIZATIONS ========== */
.leaflet-popup-content-wrapper {
    background: linear-gradient(135deg, var(--gunmetal), var(--dark-gunmetal));
    border: 2px solid var(--flame-red);
    border-radius: 12px;
    color: var(--silver);
    box-shadow: var(--glow-red);
}

.leaflet-popup-tip {
    background: var(--gunmetal);
    border: 2px solid var(--flame-red);
}

.leaflet-popup-content b {
    color: var(--flame-red);
}

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

::-webkit-scrollbar-track {
    background: var(--dark-gunmetal);
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--flame-red);
}

/* ========== UTILITY CLASSES ========== */
.text-center {
    text-align: center;
}

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

/* Future show marker glow animation */
.future-marker {
    animation: futureGlow 2s ease-in-out infinite;
}

@keyframes futureGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px #00d9ff);
    }
    50% {
        filter: drop-shadow(0 0 20px #00d9ff);
    }
}

/* ========== BACK TO MAP BUTTON ========== */
.back-to-map-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--flame-red), var(--hot-orange));
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: var(--glow-red), var(--shadow-medium);
    transition: all 0.3s ease;
}

.back-to-map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.8), var(--shadow-strong);
}

.back-to-map-btn:active {
    transform: scale(0.96);
}

/* ========== BAND NAME CARD ========== */
.band-name-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 107, 53, 0.2));
    border: 2px solid var(--flame-red);
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: var(--glow-red);
}

.band-info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.profile-pic-container {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-pic-container:hover {
    transform: scale(1.05);
}

.profile-pic-display {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--flame-red);
    overflow: hidden;
    background: rgba(255, 107, 53, 0.1);
}

.profile-pic-display svg {
    width: 100%;
    height: 100%;
}

.profile-pic-edit-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    background: var(--flame-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid var(--bg-primary);
}

.band-name-display {
    font-family: 'Rubik Mono One', monospace;
    font-size: 2rem;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
}

.hometown-display {
    font-size: 0.95rem;
    color: white;
    font-weight: 500;
    opacity: 0.9;
}

.edit-buttons {
    display: flex;
    gap: 8px;
}

.edit-band-btn,
.edit-hometown-btn {
    padding: 10px 14px;
    background: var(--gunmetal);
    border: 2px solid var(--flame-red);
    border-radius: 10px;
    color: var(--silver);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.edit-hometown-btn {
    border-color: #43a047;
}

.edit-band-btn:hover {
    background: var(--flame-red);
    color: white;
    transform: scale(1.05);
}

.edit-hometown-btn:hover {
    background: #43a047;
    color: white;
    transform: scale(1.05);
}

/* ========== ENHANCED FUTURE MARKER ANIMATION ========== */
.future-marker-pulse {
    animation: pulsateGlow 2s ease-in-out infinite;
}

@keyframes pulsateGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px #00d9ff) drop-shadow(0 0 20px rgba(0, 217, 255, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px #00d9ff) drop-shadow(0 0 40px rgba(0, 217, 255, 0.8));
        transform: scale(1.1);
    }
}

/* Alternative simple glow */
.leaflet-marker-icon.future-marker-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ========== RW MOMENT WITH LOCATION INDICATOR ========== */
.rw-moment-btn .rw-icon {
    font-size: 1.3rem;
}

/* ========== ROLE SELECTION ========== */
.role-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.role-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.8), rgba(26, 31, 36, 0.8));
    border: 2px solid var(--steel);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.role-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.1), rgba(255, 107, 53, 0.1));
    opacity: 0;
    transition: opacity 0.3s;
}

.role-btn:hover {
    border-color: var(--flame-red);
    transform: translateY(-4px);
    box-shadow: var(--glow-red), var(--shadow-medium);
}

.role-btn:hover::before {
    opacity: 1;
}

.role-btn-both {
    grid-column: 1 / -1;
}

.role-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px var(--flame-red));
}

.role-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    font-family: 'Rubik Mono One', monospace;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.role-desc {
    font-size: 0.8rem;
    color: var(--steel);
    text-align: center;
}

/* ========== MODE TOGGLE (FOR "BOTH" ROLE) ========== */
.mode-toggle {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.mode-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--flame-red), var(--hot-orange));
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--glow-red), var(--shadow-soft);
    transition: all 0.3s ease;
}

.mode-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.6), var(--shadow-medium);
}

.mode-toggle-btn:active {
    transform: scale(0.96);
}

.toggle-arrow {
    font-size: 1.2rem;
    animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.header-right {
    display: flex;
    align-items: center;
}

/* ========== FLOATING LOCATION BUTTON ========== */
.floating-location-btn {
    position: fixed;
    bottom: 170px;
    left: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 90px;
    height: 90px;
    padding: 8px;
    background-image: url('assets/MENU BUTTONS/location.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--steel);
    border-radius: 16px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-icon {
    display: none;
}

.location-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px 1px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8);
}

.floating-location-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.floating-location-btn:active {
    transform: scale(0.96);
}

/* ========== FLOATING SHARE BUTTON ========== */
.floating-share-btn {
    position: fixed;
    bottom: 170px;
    right: 16px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 90px;
    height: 90px;
    padding: 8px;
    background-image: url('assets/MENU BUTTONS/SHARE.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--steel);
    border-radius: 16px;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-icon {
    display: none;
}

.share-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8),
        1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px 1px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8);
}

.floating-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.floating-share-btn:active {
    transform: scale(0.96);
}

/* ========== AUTO-SAVE INDICATOR ========== */
.auto-save-indicator {
    text-align: center;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success-green);
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    margin-top: 8px;
    animation: fadeInOut 2s ease;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

.auto-save-indicator.hidden {
    display: none;
}

/* ========== MOBILE RESPONSIVE UPDATES ========== */
@media (max-width: 768px) {
    .back-to-map-btn {
        top: 10px;
        left: 10px;
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .band-name-card {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px;
    }

    .band-info-wrapper {
        width: 100%;
    }

    .band-name-display {
        font-size: 1.5rem;
    }

    .hometown-display {
        font-size: 0.85rem;
    }

    .edit-buttons {
        flex-direction: row;
        gap: 10px;
    }

    .edit-band-btn,
    .edit-hometown-btn {
        padding: 8px 12px;
        font-size: 1rem;
    }

    .profile-tabs {
        gap: 8px;
    }

    .profile-tab {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .tab-icon {
        font-size: 1.1rem;
    }

    .tab-label {
        display: none;
    }

    .tab-count {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .rw-header-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .role-selection-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-btn-both {
        grid-column: 1;
    }

    .role-icon {
        font-size: 2.2rem;
    }

    .role-title {
        font-size: 1.1rem;
    }

    .logo-image {
        width: 70px;
        height: 70px;
    }

    .floating-location-btn {
        bottom: 145px;
        left: 10px;
        width: 65px;
        height: 65px;
        padding: 6px;
    }

    .location-label {
        font-size: 0.55rem;
        letter-spacing: 0.3px;
    }

    .floating-share-btn {
        bottom: 145px;
        right: 10px;
        width: 65px;
        height: 65px;
        padding: 6px;
    }

    .share-label {
        font-size: 0.55rem;
        letter-spacing: 0.3px;
    }

    .mode-toggle-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .back-to-map-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .band-name-display {
        font-size: 1.3rem;
    }

    .role-btn {
        padding: 18px 14px;
    }

    .logo-image {
        width: 60px;
        height: 60px;
    }

    .glass-card {
        padding: 24px 32px;
    }

    .role-icon {
        font-size: 2.5rem;
    }

    .role-title {
        font-size: 1.1rem;
    }

    .floating-location-btn {
        bottom: 135px;
        left: 8px;
        width: 55px;
        height: 55px;
        padding: 5px;
        gap: 2px;
    }

    .location-label {
        font-size: 0.55rem;
        letter-spacing: 0.2px;
    }

    .floating-share-btn {
        bottom: 135px;
        right: 8px;
        width: 55px;
        height: 55px;
        padding: 5px;
        gap: 2px;
    }

    .share-label {
        font-size: 0.55rem;
        letter-spacing: 0.2px;
    }

    .header-right {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .mode-toggle {
        margin-right: 0;
        width: 100%;
    }

    .mode-toggle-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Future Tour Line Glow Animation */
@keyframes tourGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.8));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 217, 255, 1));
    }
}

.future-tour-line {
    animation: tourGlow 2s ease-in-out infinite;
}

/* ========================================
   PUBLIC SETTINGS VIEW
   ======================================== */

.public-settings-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.public-settings-header {
    text-align: center;
    margin-bottom: 24px;
}

.public-settings-icon {
    font-size: 48px;
    margin-bottom: 10px;
    animation: pulse 2s ease-in-out infinite;
}

.public-settings-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--silver);
    margin-bottom: 6px;
    text-shadow: var(--glow-blue);
}

.public-settings-subtitle {
    font-size: 14px;
    color: var(--steel);
    opacity: 0.8;
}

/* Setting Cards - Made more compact */
.public-setting-card {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.6), rgba(26, 31, 36, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

.public-setting-card:hover {
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: var(--glow-blue);
}

/* PRO MODE Card Styling */
.pro-mode-card {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.1), rgba(255, 69, 0, 0.1));
    border: 1px solid rgba(255, 165, 0, 0.3);
}

.pro-mode-card:hover {
    border-color: rgba(255, 165, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.3);
}

.toggle-slider.pro-slider {
    background: linear-gradient(135deg, #333, #222);
}

.toggle-switch input:checked + .toggle-slider.pro-slider {
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.5);
}

/* PRO Unlock Reminder Badge */
.pro-unlock-reminder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 69, 0, 0.15));
    border: 1px solid rgba(255, 107, 0, 0.4);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6b00;
    animation: proPulse 2s ease-in-out infinite;
    cursor: pointer;
    margin-left: auto;
}

.pro-unlock-reminder:hover {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 69, 0, 0.25));
    transform: scale(1.05);
}

.pro-unlock-reminder .reminder-icon {
    font-size: 0.9rem;
}

@keyframes proPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 107, 0, 0.3); }
    50% { box-shadow: 0 0 15px rgba(255, 107, 0, 0.5); }
}

/* PRO Unlock Box - Made more compact */
.pro-unlock-box {
    margin-top: 12px;
    padding: 18px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.12), rgba(181, 55, 242, 0.08), rgba(0, 217, 255, 0.05));
    border: 2px solid rgba(255, 107, 0, 0.4);
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pro-unlock-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 107, 0, 0.05),
        transparent,
        rgba(181, 55, 242, 0.05),
        transparent
    );
    animation: proBoxSpin 15s linear infinite;
}

@keyframes proBoxSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pro-unlock-box > * {
    position: relative;
    z-index: 1;
}

.pro-unlock-header {
    margin-bottom: 14px;
}

.pro-unlock-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.6));
}

.pro-unlock-title {
    font-family: 'Rubik Mono One', monospace;
    font-size: 1.2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
    margin: 0 0 6px 0;
}

.pro-unlock-subtitle {
    color: var(--electric-blue);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.pro-unlock-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    text-align: left;
}

.pro-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pro-feature-item .feature-icon {
    font-size: 1.1rem;
    width: 26px;
    text-align: center;
}

.pro-feature-item .feature-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
}

.pro-unlock-cta {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 107, 0, 0.2);
}

.pro-unlock-pitch {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
    margin: 0 0 14px 0;
    line-height: 1.4;
}

.pro-unlock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
}

.pro-unlock-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 107, 0, 0.6);
}

.pro-unlock-btn .btn-icon {
    font-size: 1.3rem;
}

.pro-unlock-note {
    font-size: 0.8rem;
    color: var(--silver);
    margin: 10px 0 8px 0;
}

.pro-paid-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 25px;
    background: rgba(76, 175, 80, 0.2);
    border: 2px solid #4caf50;
    border-radius: 25px;
    color: #4caf50;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-paid-confirm-btn:hover {
    background: rgba(76, 175, 80, 0.3);
    transform: scale(1.02);
}

/* PRO Unlock Cards (compact, interspersed) */
.pro-unlock-card {
    margin: 12px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(181, 55, 242, 0.05));
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.pro-unlock-card:hover {
    border-color: rgba(255, 107, 0, 0.5);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.2);
}

.pro-unlock-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.pro-unlock-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pro-unlock-card-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 0, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.pro-unlock-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pro-unlock-card-text strong {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 700;
}

.pro-unlock-card-text span {
    font-size: 0.8rem;
    color: var(--silver);
}

.pro-unlock-card-btn {
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(255, 107, 0, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.pro-unlock-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 107, 0, 0.5);
}

/* PRO Already Paid Card */
.pro-unlock-paid-card {
    margin: 15px 0;
    padding: 15px 18px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 107, 0, 0.3);
    border-radius: 12px;
    text-align: center;
}

.pro-paid-card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.pro-paid-card-text {
    color: var(--silver);
    font-size: 0.9rem;
}

.pro-paid-activate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-radius: 20px;
    color: #4caf50;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-paid-activate-btn:hover {
    background: rgba(76, 175, 80, 0.25);
    border-color: #4caf50;
}

.pro-paid-card-note {
    margin: 8px 0 0 0;
    font-size: 0.75rem;
    color: var(--silver);
    opacity: 0.7;
}

/* Mobile responsive for unlock cards */
@media (max-width: 480px) {
    .pro-unlock-card-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .pro-unlock-card-left {
        flex-direction: column;
        text-align: center;
    }

    .pro-unlock-card-btn {
        width: 100%;
    }

    .pro-paid-card-content {
        flex-direction: column;
        gap: 10px;
    }
}

/* PRO Badge */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-badge-small {
    color: #ff6b00;
    font-size: 10px;
}

/* PRO Fields Section in Modals */
.pro-fields-section {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 69, 0, 0.05));
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 12px;
}

.pro-fields-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);
}

.pro-fields-title {
    color: #ff6b00;
    font-size: 14px;
    font-weight: 600;
}

/* Inline PRO fields for tour stops */
.pro-fields-inline {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 107, 0, 0.2);
}

/* ========== PRO MODE SECTION (GIG PREP & GIG REPORT) ========== */

.pro-mode-section {
    margin-top: 24px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.05), rgba(255, 69, 0, 0.02));
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
}

/* PRO Tabs */
.pro-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 107, 0, 0.2);
    padding-bottom: 12px;
}

.pro-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(42, 52, 57, 0.6);
    border: 2px solid rgba(255, 107, 0, 0.2);
    border-radius: 12px;
    color: var(--silver);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.pro-tab:hover {
    background: rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.4);
}

.pro-tab.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 69, 0, 0.15));
    border-color: #ff6b00;
    color: #ff6b00;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.3);
}

.pro-tab .tab-icon {
    font-size: 1.2rem;
}

.pro-tab .tab-label {
    font-size: 0.9rem;
}

/* Notification Badge on Tab */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff1744;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 5;
}

.notification-badge:hover {
    transform: scale(1.1);
    background: #ff4569;
}

.notification-badge:active {
    transform: scale(0.95);
}

/* PRO Tab Content */
.pro-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.pro-tab-content.active {
    display: block;
}

.pro-section-header {
    margin-bottom: 16px;
}

.pro-section-header h3 {
    color: #ff6b00;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.pro-section-header p {
    color: var(--steel);
    font-size: 0.85rem;
}

/* PRO Gig List */
.pro-gig-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.pro-gig-list::-webkit-scrollbar {
    width: 6px;
}

.pro-gig-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.pro-gig-list::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 0, 0.4);
    border-radius: 3px;
}

/* PRO Gig Card */
.pro-gig-card {
    background: rgba(42, 52, 57, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.pro-gig-card:hover {
    border-color: rgba(255, 107, 0, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pro-gig-card.needs-report {
    border-color: rgba(255, 23, 68, 0.4);
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.05), rgba(42, 52, 57, 0.6));
}

.pro-gig-card.report-complete {
    border-color: rgba(0, 230, 118, 0.3);
}

.pro-gig-card.highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.8);
        border-color: #ff6b00;
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(255, 107, 0, 0.4);
        border-color: #ff6b00;
    }
    100% {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 107, 0, 0.2);
    }
}

.pro-gig-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pro-gig-info h4 {
    color: var(--silver);
    font-size: 1rem;
    margin-bottom: 4px;
}

.pro-gig-info .gig-venue {
    color: var(--steel);
    font-size: 0.85rem;
}

.pro-gig-info .gig-date {
    color: #ff6b00;
    font-size: 0.8rem;
    margin-top: 4px;
}

.pro-gig-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pro-gig-status.pending {
    background: rgba(255, 152, 0, 0.2);
    color: #ffa000;
}

.pro-gig-status.complete {
    background: rgba(0, 230, 118, 0.2);
    color: #00e676;
}

.pro-gig-status.needs-report {
    background: rgba(255, 23, 68, 0.2);
    color: #ff1744;
}

/* PRO Gig Fields */
.pro-gig-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pro-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pro-field label {
    color: var(--steel);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-field input,
.pro-field select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--silver);
    font-size: 0.9rem;
}

.pro-field input:focus,
.pro-field select:focus {
    border-color: #ff6b00;
    outline: none;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.2);
}

.pro-field input::placeholder {
    color: var(--steel);
    opacity: 0.6;
}

/* PRO Toggle Row Styling */
.pro-field-row.toggle-row {
    justify-content: flex-start;
}

.pro-field-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pro-field-toggle label:first-child {
    margin-bottom: 0;
}

.report-complete-toggle {
    flex: 1;
    max-width: 200px;
}

/* Profit/Loss Indicator */
.profit-loss-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
}

.profit-loss-indicator.profit {
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.3);
    color: #00e676;
}

.profit-loss-indicator.loss {
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: #ff1744;
}

.profit-loss-indicator.neutral {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--steel);
}

.profit-loss-amount {
    font-size: 1.1rem;
}

/* Save Button in Card */
.pro-gig-card .save-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-gig-card .save-btn:hover {
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
    transform: translateY(-1px);
}

.pro-gig-card .save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Empty State */
.pro-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--steel);
}

.pro-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.pro-empty-state p {
    font-size: 1rem;
    margin-bottom: 4px;
}

.pro-empty-state small {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ========== PRO NOTIFICATION DOT (on Tools menu) ========== */

.pro-notification-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ff1744, #ff5252);
    border-radius: 50%;
    border: 2px solid var(--charcoal);
    animation: notificationPulse 1.5s infinite;
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.8), 0 0 16px rgba(255, 23, 68, 0.4);
}

@keyframes notificationPulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 23, 68, 0.8), 0 0 16px rgba(255, 23, 68, 0.4), 0 0 0 0 rgba(255, 23, 68, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 12px rgba(255, 23, 68, 1), 0 0 24px rgba(255, 23, 68, 0.6), 0 0 8px rgba(255, 23, 68, 0);
        transform: scale(1.1);
    }
}

/* Make sure Tools button has relative positioning for the dot */
#tools-btn {
    position: relative;
}

/* ========== PRO NOTIFICATION BELL (LEGACY - REMOVED) ========== */

.pro-notification-btn {
    display: none; /* Bell removed - using Tools dot instead */
    position: relative;
    background: rgba(42, 52, 57, 0.8);
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-notification-btn:hover {
    background: rgba(255, 107, 0, 0.2);
    border-color: #ff6b00;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.3);
}

.pro-notification-btn .notification-icon {
    font-size: 1.2rem;
}

.pro-notification-btn .notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff1744;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========== PRO NOTIFICATIONS PANEL ========== */

.pro-notifications-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: linear-gradient(180deg, #1a1f24, #0d1117);
    border-left: 2px solid rgba(255, 107, 0, 0.3);
    z-index: 4000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pro-notifications-panel.visible {
    right: 0;
}

.pro-notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);
}

.pro-notifications-header h3 {
    color: #ff6b00;
    font-size: 1.2rem;
}

.pro-notifications-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Notification Item */
.pro-notification-item {
    background: rgba(42, 52, 57, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-notification-item:hover {
    border-color: rgba(255, 107, 0, 0.3);
    background: rgba(255, 107, 0, 0.05);
}

.pro-notification-item.unread {
    border-left: 3px solid #ff6b00;
}

.pro-notification-item .notification-content {
    display: flex;
    gap: 12px;
}

.pro-notification-item .notification-emoji {
    font-size: 1.5rem;
}

.pro-notification-item .notification-text h4 {
    color: var(--silver);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.pro-notification-item .notification-text p {
    color: var(--steel);
    font-size: 0.85rem;
}

.pro-notification-item .notification-time {
    color: var(--steel);
    font-size: 0.75rem;
    margin-top: 8px;
    opacity: 0.7;
}

/* ========== PRO NOTIFICATION POPUP ========== */

.pro-notification-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    animation: fadeIn 0.3s ease;
}

.pro-notification-popup .popup-content {
    background: linear-gradient(135deg, #1a1f24, #0d1117);
    border: 2px solid rgba(255, 107, 0, 0.4);
    border-radius: 20px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 107, 0, 0.2);
}

.pro-notification-popup .popup-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.pro-notification-popup .popup-message {
    color: var(--silver);
    font-size: 1.1rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.pro-notification-popup .popup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pro-notification-popup .popup-actions button {
    padding: 12px 24px;
    min-width: 120px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pro-tabs {
        flex-direction: column;
    }

    .pro-gig-fields {
        grid-template-columns: 1fr;
    }

    .pro-notifications-panel {
        width: 100%;
        right: -100%;
    }

    .pro-notification-popup .popup-actions {
        flex-direction: column;
    }
}

/* ========== PRO STATS CATEGORIES ========== */

.pro-stats-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 4px;
    background: rgba(42, 52, 57, 0.4);
    border-radius: 12px;
    overflow-x: auto;
}

.pro-category-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--steel);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.pro-category-btn:hover {
    background: rgba(255, 107, 0, 0.1);
    color: var(--silver);
}

.pro-category-btn.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 69, 0, 0.2));
    color: #ff6b00;
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.2);
}

.pro-category-btn .category-icon {
    font-size: 1.3rem;
}

.pro-category-btn .category-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* PRO Stats Sections */
.pro-stats-section {
    animation: fadeIn 0.3s ease;
}

.pro-stats-section-header {
    text-align: center;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), transparent);
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.pro-stats-section-header h2 {
    color: var(--silver);
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.pro-stats-section-header p {
    color: var(--steel);
    font-size: 0.9rem;
}

/* PRO Summary Cards Grid */
.pro-stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.pro-summary-card {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.8), rgba(26, 31, 36, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.pro-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.pro-summary-card.highlight {
    border-color: rgba(255, 107, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(42, 52, 57, 0.8));
}

.pro-summary-card.profit {
    border-color: rgba(0, 230, 118, 0.3);
}

.pro-summary-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.pro-summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--silver);
    margin-bottom: 4px;
}

.pro-summary-card.profit .pro-summary-value {
    color: #00e676;
}

.pro-summary-label {
    font-size: 0.75rem;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* PRO Panel Styling */
.stat-panel.pro-panel {
    border: 1px solid rgba(255, 107, 0, 0.15);
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.6), rgba(26, 31, 36, 0.8));
}

/* PRO Ranked List */
.pro-ranked-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pro-ranked-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.pro-ranked-item:hover {
    background: rgba(255, 107, 0, 0.1);
}

.pro-ranked-item .rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
}

.pro-ranked-item:nth-child(1) .rank {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
}

.pro-ranked-item:nth-child(2) .rank {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
}

.pro-ranked-item:nth-child(3) .rank {
    background: linear-gradient(135deg, #cd7f32, #b87333);
}

.pro-ranked-item .info {
    flex: 1;
}

.pro-ranked-item .name {
    color: var(--silver);
    font-weight: 600;
    font-size: 0.95rem;
}

.pro-ranked-item .subtitle {
    color: var(--steel);
    font-size: 0.8rem;
}

.pro-ranked-item .value {
    font-weight: 700;
    color: #ff6b00;
    font-size: 1rem;
}

.pro-ranked-item .value.profit {
    color: #00e676;
}

/* Fee Payment Status */
.pro-fee-status {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.fee-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.fee-status-item.paid {
    border: 1px solid rgba(0, 230, 118, 0.3);
}

.fee-status-item.unpaid {
    border: 1px solid rgba(255, 23, 68, 0.3);
}

.fee-status-item.pending {
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.fee-status-item .fee-count {
    font-size: 2rem;
    font-weight: 700;
}

.fee-status-item.paid .fee-count {
    color: #00e676;
}

.fee-status-item.unpaid .fee-count {
    color: #ff1744;
}

.fee-status-item.pending .fee-count {
    color: #ffc107;
}

.fee-status-item .fee-label {
    font-size: 0.8rem;
    color: var(--steel);
    text-transform: uppercase;
}

/* Touring Activity Stats */
.pro-touring-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.touring-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.touring-stat .touring-label {
    color: var(--steel);
    font-size: 0.9rem;
}

.touring-stat .touring-value {
    color: #ff6b00;
    font-weight: 600;
    font-size: 1rem;
}

/* Mobile Responsive for PRO Stats */
@media (max-width: 768px) {
    .pro-stats-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .pro-category-btn {
        min-width: 70px;
        padding: 10px 12px;
    }

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

    .pro-fee-status {
        flex-direction: column;
    }

    .fee-status-item {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .pro-stats-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pro-summary-card {
        padding: 16px 12px;
    }

    .pro-summary-value {
        font-size: 1.3rem;
    }
}

.setting-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.setting-icon {
    font-size: 32px;
    line-height: 1;
}

.setting-info {
    flex: 1;
}

.setting-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--silver);
    margin-bottom: 4px;
}

.setting-description {
    font-size: 14px;
    color: var(--steel);
    opacity: 0.8;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.4s;
    border-radius: 34px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: var(--silver);
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--electric-blue);
    border-color: var(--electric-blue);
    box-shadow: var(--glow-blue);
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Share Link Section */
.share-link-section {
    animation: fadeIn 0.5s ease;
}

.share-link-card {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(181, 55, 242, 0.1));
    border: 2px solid var(--electric-blue);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--glow-blue);
}

.share-link-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.share-link-icon {
    font-size: 24px;
}

.share-link-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--silver);
}

.share-link-input-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.share-link-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--electric-blue);
    font-size: 14px;
    font-family: 'Courier New', monospace;
    cursor: pointer;
}

.share-link-input:focus {
    outline: none;
    border-color: var(--electric-blue);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2);
}

.copy-link-btn {
    background: var(--electric-blue);
    color: var(--charcoal);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.copy-link-btn:hover {
    background: var(--hot-orange);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
    transform: translateY(-2px);
}

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

.regenerate-link-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--steel);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.regenerate-link-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--electric-blue);
    color: var(--electric-blue);
}

/* Privacy Controls */
.privacy-controls {
    margin-top: 32px;
}

.privacy-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--silver);
    margin-bottom: 8px;
}

.privacy-subtitle {
    font-size: 14px;
    color: var(--steel);
    opacity: 0.8;
    margin-bottom: 24px;
}

.privacy-section {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.4), rgba(26, 31, 36, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.privacy-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.privacy-icon {
    font-size: 20px;
}

.privacy-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--silver);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.privacy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.privacy-item:last-child {
    margin-bottom: 0;
}

.privacy-item:not(.disabled):hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 217, 255, 0.3);
}

.privacy-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.privacy-item-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.privacy-item-icon {
    font-size: 24px;
    line-height: 1;
}

.privacy-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--silver);
    margin-bottom: 4px;
}

.privacy-item-description {
    font-size: 13px;
    color: var(--steel);
    opacity: 0.8;
}

.privacy-lock {
    font-size: 20px;
    opacity: 0.5;
}

/* Public Actions */
.public-actions {
    margin-top: 32px;
    text-align: center;
}

.preview-public-btn {
    background: linear-gradient(135deg, var(--neon-purple), var(--electric-blue));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
}

.preview-public-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
}

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

/* Disabled State */
.public-disabled-message {
    text-align: center;
    padding: 60px 20px;
    opacity: 0.6;
}

.disabled-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.public-disabled-message h3 {
    font-size: 24px;
    color: var(--silver);
    margin-bottom: 12px;
}

.public-disabled-message p {
    font-size: 16px;
    color: var(--steel);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .public-settings-container {
        padding: 16px;
    }

    .public-settings-title {
        font-size: 24px;
    }

    .public-setting-card {
        padding: 16px;
    }

    .setting-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .toggle-switch {
        align-self: flex-end;
    }

    .share-link-input-wrapper {
        flex-direction: column;
    }

    .copy-link-btn {
        width: 100%;
    }

    .privacy-item-info {
        gap: 12px;
    }

    .privacy-item-icon {
        font-size: 20px;
    }
}

/* Future Shows Dropdown Styles */
/* Future Shows Visibility Section */
.future-shows-visibility-section {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.08) 0%, rgba(101, 31, 255, 0.08) 100%);
    border: 2px solid rgba(0, 217, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
    box-shadow: 0 8px 32px rgba(0, 217, 255, 0.15);
    backdrop-filter: blur(10px);
}

.future-shows-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.future-shows-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.6));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

.future-shows-header-content {
    flex: 1;
}

.future-shows-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--electric-blue);
    margin: 0 0 8px 0;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

.future-shows-subtitle {
    font-size: 14px;
    color: var(--silver);
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

.future-shows-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    margin-top: 16px;
}

.future-shows-scroll-container::-webkit-scrollbar {
    width: 10px;
}

.future-shows-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.future-shows-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--electric-blue) 0%, var(--neon-purple) 100%);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.future-shows-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--neon-purple) 0%, var(--electric-blue) 100%);
    box-shadow: 0 0 15px rgba(101, 31, 255, 0.8);
}

.future-shows-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.no-future-shows {
    text-align: center;
    padding: 48px 24px;
    color: var(--steel);
}

.no-shows-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.no-future-shows p {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    opacity: 0.8;
}

.no-future-shows small {
    font-size: 13px;
    opacity: 0.6;
}

/* Individual Future Show Items */
.future-show-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.future-show-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.05) 0%, rgba(101, 31, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.future-show-item:hover {
    border-color: rgba(0, 217, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 217, 255, 0.2);
    transform: translateY(-2px);
}

.future-show-item:hover::before {
    opacity: 1;
}

.future-show-item.visible {
    border-left: 4px solid var(--electric-blue);
}

.future-show-item.hidden-show {
    border-left: 4px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
}

.future-show-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.future-show-indicator.public {
    background: var(--electric-blue);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.8);
    animation: pulse 2s ease-in-out infinite;
}

.future-show-indicator.private {
    background: rgba(255, 255, 255, 0.3);
}

.future-show-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.future-show-main {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.show-band-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--silver);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.show-separator {
    font-size: 14px;
    color: var(--electric-blue);
    opacity: 0.6;
}

.show-venue-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--electric-blue);
}

.future-show-details {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.show-location,
.show-date {
    font-size: 13px;
    color: var(--steel);
    display: flex;
    align-items: center;
    gap: 4px;
}

.future-show-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.toggle-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--steel);
    opacity: 0.8;
}

/* Responsive adjustments for future shows */
@media (max-width: 768px) {
    .future-show-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .future-show-toggle {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        justify-content: space-between;
    }
}


/* ========== PAGE FLOATING DECORATIVE ICONS ========== */
.page-floating-icon {
    position: fixed;
    pointer-events: none;
    opacity: 0.08;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
}

.page-float-1 {
    width: 100px;
    height: 100px;
    top: 80px;
    left: 20px;
    transform: rotate(-15deg);
    animation: pageFloatSlow 10s ease-in-out infinite;
}

.page-float-2 {
    width: 80px;
    height: 80px;
    top: 200px;
    right: 15px;
    transform: rotate(20deg);
    animation: pageFloatSlow 8s ease-in-out infinite 1s;
}

.page-float-3 {
    width: 90px;
    height: 90px;
    top: 45%;
    left: 10px;
    transform: rotate(-10deg);
    animation: pageFloatSlow 12s ease-in-out infinite 2s;
}

.page-float-4 {
    width: 70px;
    height: 70px;
    top: 60%;
    right: 20px;
    transform: rotate(15deg);
    animation: pageFloatSlow 9s ease-in-out infinite 0.5s;
}

.page-float-5 {
    width: 60px;
    height: 60px;
    bottom: 120px;
    left: 25px;
    transform: rotate(25deg);
    animation: pageFloatSlow 11s ease-in-out infinite 1.5s;
}

@keyframes pageFloatSlow {
    0%, 100% {
        transform: translateY(0) rotate(var(--rot, 0deg));
    }
    50% {
        transform: translateY(-12px) rotate(var(--rot, 0deg));
    }
}

/* Hide floating icons on smaller screens to avoid clutter */
@media (max-width: 768px) {
    .page-floating-icon {
        opacity: 0.05;
    }
    
    .page-float-1, .page-float-2, .page-float-3, .page-float-4, .page-float-5 {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .page-floating-icon {
        display: none;
    }
}

/* ========== THE BACKLINE STYLES ========== */

.backline-container {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.backline-header {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(181, 55, 242, 0.15));
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.backline-logo {
    font-size: 3rem;
    margin-bottom: 10px;
}

.backline-title {
    font-family: 'Rubik Mono One', monospace;
    font-size: 1.8rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.backline-subtitle {
    color: var(--silver);
    font-size: 0.95rem;
    margin-top: 5px;
}

.backline-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.backline-filter-btn {
    flex: 1;
    padding: 10px 15px;
    background: rgba(42, 52, 57, 0.6);
    border: 1px solid rgba(192, 197, 206, 0.2);
    border-radius: 8px;
    color: var(--silver);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.backline-filter-btn:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--hot-orange);
}

.backline-filter-btn.active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1));
    border-color: var(--hot-orange);
    color: var(--hot-orange);
}

.backline-feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Event Card (Ticket Style) */
.backline-event-card {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.9), rgba(26, 31, 36, 0.95));
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(192, 197, 206, 0.15);
    position: relative;
}

.backline-event-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hot-orange), var(--neon-purple));
}

.backline-event-card.grabbed {
    opacity: 0.7;
    border-color: var(--success-green);
}

.backline-event-card.grabbed::before {
    background: var(--success-green);
}

.backline-event-card.soldout {
    opacity: 0.5;
}

.backline-event-card.soldout::before {
    background: var(--steel);
}

.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 15px 10px 20px;
}

.event-band-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-band-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 2px solid var(--hot-orange);
}

.event-band-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.event-band-name {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.event-timestamp {
    font-size: 0.75rem;
    color: var(--steel);
}

.event-status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.event-status-badge.available {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}

.event-status-badge.grabbed {
    background: rgba(0, 217, 255, 0.2);
    color: var(--electric-blue);
    border: 1px solid var(--electric-blue);
}

.event-status-badge.soldout {
    background: rgba(139, 148, 160, 0.2);
    color: var(--steel);
    border: 1px solid var(--steel);
}

.event-card-body {
    padding: 0 20px 15px;
}

.event-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hot-orange);
    margin-bottom: 8px;
}

.event-description {
    color: var(--silver);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.event-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--steel);
}

.event-meta-item .meta-icon {
    font-size: 0.9rem;
}

.event-spots-bar {
    height: 6px;
    background: rgba(139, 148, 160, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.event-spots-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-green), var(--electric-blue));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.event-spots-text {
    font-size: 0.75rem;
    color: var(--steel);
    text-align: right;
}

.event-card-footer {
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-requirement {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--steel);
}

.event-requirement.met {
    color: var(--success-green);
}

.event-requirement.not-met {
    color: var(--flame-red);
}

.event-grab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--hot-orange), var(--flame-red));
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.event-grab-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

.event-grab-btn:disabled {
    background: var(--steel);
    cursor: not-allowed;
    opacity: 0.6;
}

.event-grab-btn.grabbed {
    background: var(--success-green);
}

.backline-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--steel);
}

.backline-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.backline-empty-state h3 {
    color: #fff;
    margin-bottom: 10px;
}

/* ========== GOODIEBAG STYLES ========== */

.goodiebag-header {
    padding: 15px;
    background: linear-gradient(135deg, rgba(181, 55, 242, 0.1), rgba(0, 217, 255, 0.1));
    border-radius: 12px;
    margin-bottom: 15px;
    border: 1px solid rgba(181, 55, 242, 0.2);
}

.goodiebag-description {
    color: var(--silver);
    font-size: 0.9rem;
    text-align: center;
}

.goodiebag-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Goodiebag Ticket Card */
.goodie-ticket {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.95), rgba(26, 31, 36, 0.98));
    border-radius: 12px;
    padding: 15px;
    border: 2px dashed rgba(181, 55, 242, 0.4);
    position: relative;
    overflow: hidden;
}

.goodie-ticket::before {
    content: '🎫';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    opacity: 0.1;
}

.goodie-ticket-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.goodie-band-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(181, 55, 242, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 2px solid var(--neon-purple);
}

.goodie-band-name {
    font-weight: 700;
    color: var(--neon-purple);
    font-size: 0.9rem;
}

.goodie-ticket-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.goodie-ticket-meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--steel);
}

.goodie-ticket-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px;
}

.goodie-ticket-status.unclaimed {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-yellow);
    border: 1px solid var(--warning-yellow);
}

.goodie-ticket-status.claimed {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}

.goodiebag-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--steel);
}

.goodiebag-empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.goodiebag-empty-state h4 {
    color: #fff;
    margin-bottom: 10px;
}

/* ========== PRO BANNER STYLES ========== */

.pro-banner-preview {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.banner-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(244, 67, 54, 0.9);
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.banner-remove-btn:hover {
    transform: scale(1.1);
    background: var(--flame-red);
}

/* ========== PRO EVENT FORM STYLES ========== */

.event-form-group {
    margin-bottom: 15px;
}

.event-form-label {
    display: block;
    color: var(--silver);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.event-form-row {
    display: flex;
    gap: 15px;
}

#artist-events-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Artist Event Item */
.artist-event-item {
    background: rgba(42, 52, 57, 0.5);
    border-radius: 10px;
    padding: 12px;
    border-left: 3px solid var(--hot-orange);
}

.artist-event-item.pending {
    border-left-color: var(--warning-yellow);
    opacity: 0.8;
}

.artist-event-item.completed {
    border-left-color: var(--success-green);
    opacity: 0.6;
}

.artist-event-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.artist-event-stats {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--steel);
}

.artist-event-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 8px;
}

.artist-event-status.pending {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-yellow);
}

.artist-event-status.active {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-green);
}

.artist-event-status.completed {
    background: rgba(139, 148, 160, 0.2);
    color: var(--steel);
}

.artist-event-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.artist-event-action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.artist-event-action-btn.complete {
    background: var(--success-green);
    color: #fff;
}

.artist-event-action-btn.delete {
    background: rgba(244, 67, 54, 0.2);
    color: var(--flame-red);
    border: 1px solid var(--flame-red);
}

/* ========== MANAGER OFFICE STYLES ========== */

.manager-section {
    margin-bottom: 25px;
    background: rgba(42, 52, 57, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(192, 197, 206, 0.1);
}

.manager-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.manager-section-icon {
    font-size: 1.5rem;
}

.manager-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
}

.pending-events-badge,
.pending-news-badge {
    background: var(--flame-red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    animation: pulse 2s infinite;
}

.pending-news-badge {
    background: var(--neon-purple);
}

.manager-section-desc {
    color: var(--steel);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.manager-empty-state {
    text-align: center;
    padding: 25px;
    color: var(--steel);
}

.manager-empty-state .empty-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Pending Event Admin Card */
.pending-events-list, .active-events-admin-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-event-card {
    background: rgba(26, 31, 36, 0.8);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(192, 197, 206, 0.15);
}

.admin-event-card.pending {
    border-left: 3px solid var(--warning-yellow);
}

.admin-event-card.active {
    border-left: 3px solid var(--success-green);
}

.admin-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.admin-event-band {
    font-weight: 700;
    color: var(--hot-orange);
    font-size: 0.9rem;
}

.admin-event-date {
    font-size: 0.75rem;
    color: var(--steel);
}

.admin-event-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.admin-event-desc {
    font-size: 0.85rem;
    color: var(--silver);
    margin-bottom: 10px;
}

.admin-event-meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--steel);
    margin-bottom: 12px;
}

.admin-event-actions {
    display: flex;
    gap: 10px;
}

.admin-action-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.admin-action-btn.approve {
    background: linear-gradient(135deg, var(--success-green), #388e3c);
    color: #fff;
}

.admin-action-btn.approve:hover {
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

.admin-action-btn.reject {
    background: rgba(244, 67, 54, 0.2);
    color: var(--flame-red);
    border: 1px solid var(--flame-red);
}

.admin-action-btn.reject:hover {
    background: rgba(244, 67, 54, 0.4);
}

.admin-action-btn.remove {
    background: rgba(244, 67, 54, 0.2);
    color: var(--flame-red);
    border: 1px solid var(--flame-red);
}

/* Progress for claimed events in admin */
.admin-event-progress {
    margin-top: 10px;
}

.admin-progress-bar {
    height: 8px;
    background: rgba(139, 148, 160, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.admin-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--electric-blue), var(--neon-purple));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.admin-progress-text {
    font-size: 0.75rem;
    color: var(--steel);
    text-align: right;
}

/* ========== BACKLINE & GOODIEBAG BUTTON STYLES ========== */

.menu-btn-backline {
    position: relative;
}

.menu-btn-goodiebag {
    position: relative;
}

.backline-notification-dot,
.goodiebag-notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #ff1744, #ff5252);
    border-radius: 50%;
    border: 2px solid var(--charcoal);
    animation: notificationPulse 1.5s infinite;
    box-shadow: 0 0 6px rgba(255, 23, 68, 0.8);
}

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

.dropdown-divider {
    height: 1px;
    background: rgba(192, 197, 206, 0.2);
    margin: 8px 0;
}

/* ========== GOODIEBAG PAGE STYLES ========== */

.goodiebag-container {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.goodiebag-page-header {
    text-align: center;
    margin-bottom: 25px;
    padding: 25px 20px;
    background: linear-gradient(135deg, rgba(181, 55, 242, 0.15), rgba(0, 217, 255, 0.15));
    border-radius: 16px;
    border: 1px solid rgba(181, 55, 242, 0.3);
}

.goodiebag-logo {
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.goodiebag-title {
    font-family: 'Rubik Mono One', monospace;
    font-size: 1.6rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(181, 55, 242, 0.5);
}

.goodiebag-subtitle {
    color: var(--silver);
    font-size: 0.95rem;
    margin-top: 5px;
}

.goodiebag-stats {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(42, 52, 57, 0.5);
    border-radius: 12px;
}

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

.goodiebag-stat .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--neon-purple);
}

.goodiebag-stat .stat-label {
    font-size: 0.75rem;
    color: var(--steel);
    text-transform: uppercase;
}

.goodiebag-page-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Large Goodie Ticket Card */
.goodie-ticket-large {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.95), rgba(26, 31, 36, 0.98));
    border-radius: 16px;
    padding: 20px;
    border: 2px dashed rgba(181, 55, 242, 0.4);
    position: relative;
    overflow: hidden;
}

.goodie-ticket-large::before {
    content: '🎫';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4rem;
    opacity: 0.08;
}

.goodie-ticket-large .goodie-ticket-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.goodie-ticket-large .goodie-band-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(181, 55, 242, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 2px solid var(--neon-purple);
}

.goodie-ticket-large .goodie-band-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.goodie-ticket-large .goodie-band-name {
    font-weight: 700;
    color: var(--neon-purple);
    font-size: 1rem;
}

.goodie-ticket-large .goodie-ticket-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.goodie-ticket-large .goodie-ticket-desc {
    font-size: 0.9rem;
    color: var(--silver);
    margin-bottom: 12px;
    line-height: 1.4;
}

.goodie-ticket-large .goodie-ticket-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--steel);
    margin-bottom: 15px;
}

.goodie-ticket-large .goodie-ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.goodie-ticket-large .goodie-ticket-status.unclaimed {
    background: rgba(255, 193, 7, 0.2);
    color: var(--warning-yellow);
    border: 1px solid var(--warning-yellow);
}

.goodie-ticket-large .goodie-ticket-status.claimed {
    background: rgba(76, 175, 80, 0.2);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}

.goodiebag-page-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--steel);
}

.goodiebag-page-empty .empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.goodiebag-page-empty h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.goodiebag-page-empty p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Mode buttons highlight in dropdown */
#mode-artist-btn.active-mode,
#mode-fan-btn.active-mode {
    background: rgba(255, 107, 53, 0.2);
    border-left: 3px solid var(--hot-orange);
}

/* ========== PRO MODE: Social Media Followers Module ========== */

.pro-socials-module {
    background: linear-gradient(135deg, rgba(42, 52, 57, 0.9), rgba(26, 31, 36, 0.95));
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(255, 107, 0, 0.05);
}

.pro-socials-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.socials-icon {
    font-size: 1.8rem;
}

.socials-header-text {
    flex: 1;
}

.socials-header-text h4 {
    color: var(--silver);
    font-size: 1.1rem;
    margin: 0 0 4px 0;
}

.socials-header-text p {
    color: var(--steel);
    font-size: 0.85rem;
    margin: 0;
}

.socials-edit-btn {
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.3);
    color: #ff6b00;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.socials-edit-btn:hover {
    background: rgba(255, 107, 0, 0.25);
    border-color: #ff6b00;
}

.socials-edit-btn.active {
    background: #ff6b00;
    color: white;
}

/* Social Stats Grid */
.pro-socials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.social-stat {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.social-stat:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.social-stat .social-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.social-stat .social-count {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--silver);
    display: block;
    margin-bottom: 4px;
}

.social-stat .social-label {
    font-size: 0.75rem;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Platform-specific colors on hover */
.social-stat[data-platform="instagram"]:hover {
    border-color: rgba(225, 48, 108, 0.4);
    background: rgba(225, 48, 108, 0.1);
}

.social-stat[data-platform="spotify"]:hover {
    border-color: rgba(30, 215, 96, 0.4);
    background: rgba(30, 215, 96, 0.1);
}

.social-stat[data-platform="tiktok"]:hover {
    border-color: rgba(255, 0, 80, 0.4);
    background: rgba(255, 0, 80, 0.1);
}

.social-stat[data-platform="youtube"]:hover {
    border-color: rgba(255, 0, 0, 0.4);
    background: rgba(255, 0, 0, 0.1);
}

.social-stat[data-platform="twitter"]:hover {
    border-color: rgba(29, 161, 242, 0.4);
    background: rgba(29, 161, 242, 0.1);
}

.social-stat[data-platform="facebook"]:hover {
    border-color: rgba(66, 103, 178, 0.4);
    background: rgba(66, 103, 178, 0.1);
}

/* Edit Form */
.pro-socials-edit {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.social-input-row label {
    flex: 0 0 120px;
    color: var(--steel);
    font-size: 0.9rem;
}

.social-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--silver);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.social-input:focus {
    outline: none;
    border-color: rgba(255, 107, 0, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

.social-input::placeholder {
    color: var(--steel);
    opacity: 0.5;
}

.pro-socials-edit .primary-game-btn {
    width: 100%;
    margin-top: 8px;
}

.socials-hint {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 10px;
    color: var(--steel);
    font-size: 0.85rem;
    text-align: center;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .pro-socials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .social-input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .social-input-row label {
        flex: none;
    }
}

/* ========== PRO MODE: Finance App Download ========== */

.pro-finance-download {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(181, 55, 242, 0.1));
    border: 2px solid rgba(255, 107, 0, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.pro-finance-download::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b00, #b537f2, #00d9ff);
}

.finance-download-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.finance-download-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 0, 0.4));
}

.finance-download-text {
    flex: 1;
}

.finance-download-text h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.finance-download-text p {
    color: var(--steel);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

.finance-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff6b00, #ff4500);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}

.finance-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 107, 0, 0.5);
}

.finance-download-btn .download-icon {
    font-size: 1.1rem;
}

.finance-download-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-download-badges .badge {
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--silver);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .finance-download-content {
        flex-direction: column;
        text-align: center;
    }

    .finance-download-badges {
        justify-content: center;
    }
}