/* _content/BeatBallot.Web/Admin/Admin.razor.rz.scp.css */
/* ===== KEYFRAMES ANIMATIONS ===== */
@keyframes spin-b-sray8l3450 {
    from {
        transform: rotate(0deg);
    }

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

/* ===== ADMIN LOGIN STYLES ===== */
.admin-login-page[b-sray8l3450] {
    min-height: 100vh;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container[b-sray8l3450] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(10px);
}

.login-header[b-sray8l3450] {
    margin-bottom: 30px;
}

.login-title[b-sray8l3450] {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 10px 0;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle[b-sray8l3450] {
    color: rgba(255,255,255,0.8);
    margin: 0;
    font-size: 1.1em;
}

.form-group[b-sray8l3450] {
    margin-bottom: 20px;
}

.password-input[b-sray8l3450] {
    width: 100%;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    color: white;
    font-size: 1.1em;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

    .password-input:focus[b-sray8l3450] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 15px rgba(52,152,219,0.3);
        background: rgba(255,255,255,0.15);
    }

    .password-input[b-sray8l3450]::placeholder {
        color: rgba(255,255,255,0.6);
    }

.error-message[b-sray8l3450] {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.4);
    color: #e74c3c;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-btn[b-sray8l3450] {
    width: 100%;
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 12px;
    padding: 15px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-btn:hover:not(:disabled)[b-sray8l3450] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

    .login-btn:disabled[b-sray8l3450] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

/* ===== ADMIN DASHBOARD STYLES ===== */
.admin-dashboard[b-sray8l3450] {
    min-height: 100vh;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    padding: 20px;
}

.admin-header[b-sray8l3450] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.header-content[b-sray8l3450] {
    flex: 1;
}

.page-title[b-sray8l3450] {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 10px 0;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle[b-sray8l3450] {
    color: rgba(255,255,255,0.8);
    margin: 0;
    font-size: 1.1em;
}

.header-actions[b-sray8l3450] {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.control-btn[b-sray8l3450] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .control-btn:hover:not(:disabled)[b-sray8l3450] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    .control-btn:disabled[b-sray8l3450] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.refresh-btn[b-sray8l3450] {
    background: rgba(52,152,219,0.2);
    border-color: #3498db;
    color: #3498db;
}

.clear-btn[b-sray8l3450] {
    background: rgba(241,196,15,0.2);
    border-color: #f1c40f;
    color: #f1c40f;
}

.logout-btn[b-sray8l3450] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .logout-btn:hover[b-sray8l3450] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

/* ===== STATS SECTION ===== */
.stats-section[b-sray8l3450] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card[b-sray8l3450] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

    .stat-card:hover[b-sray8l3450] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.2);
    }

.stat-icon[b-sray8l3450] {
    font-size: 2.5em;
    opacity: 0.8;
}

.stat-content[b-sray8l3450] {
    flex: 1;
}

.stat-number[b-sray8l3450] {
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label[b-sray8l3450] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== LOGS SECTION ===== */
.logs-section[b-sray8l3450] {
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.section-header[b-sray8l3450] {
    padding: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.section-title[b-sray8l3450] {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}

.filter-controls[b-sray8l3450] {
    display: flex;
    gap: 15px;
    align-items: center;
}

.filter-dropdown[b-sray8l3450], .search-input[b-sray8l3450] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    font-size: 0.9em;
    min-width: 150px;
}

    .filter-dropdown:focus[b-sray8l3450], .search-input:focus[b-sray8l3450] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 10px rgba(52,152,219,0.3);
    }

    .search-input[b-sray8l3450]::placeholder {
        color: rgba(255,255,255,0.5);
    }

/* ===== LOGS TABLE ===== */
.logs-table-container[b-sray8l3450] {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}

.logs-table[b-sray8l3450] {
    width: 100%;
    border-collapse: collapse;
    color: white;
}

    .logs-table th[b-sray8l3450] {
        background: rgba(0,0,0,0.4);
        padding: 15px 12px;
        text-align: left;
        font-weight: bold;
        border-bottom: 2px solid rgba(255,255,255,0.1);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .logs-table td[b-sray8l3450] {
        padding: 12px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        vertical-align: top;
    }

.log-row[b-sray8l3450] {
    transition: all 0.3s ease;
}

    .log-row:hover[b-sray8l3450] {
        background: rgba(255,255,255,0.05);
    }

    .log-row.error-row[b-sray8l3450] {
        background: rgba(231,76,60,0.1);
        border-left: 3px solid #e74c3c;
    }

    .log-row.warning-row[b-sray8l3450] {
        background: rgba(241,196,15,0.1);
        border-left: 3px solid #f1c40f;
    }

.timestamp-cell[b-sray8l3450] {
    min-width: 120px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: rgba(255,255,255,0.7);
}

.session-cell[b-sray8l3450] {
    min-width: 100px;
}

.session-id[b-sray8l3450] {
    background: rgba(52,152,219,0.2);
    color: #3498db;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
}

.activity-cell[b-sray8l3450] {
    min-width: 140px;
}

.activity-badge[b-sray8l3450] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.session-badge[b-sray8l3450] {
    background: rgba(142,68,173,0.2);
    color: #9b59b6;
    border: 1px solid rgba(142,68,173,0.3);
}

.song-badge[b-sray8l3450] {
    background: rgba(46,204,113,0.2);
    color: #2ecc71;
    border: 1px solid rgba(46,204,113,0.3);
}

.user-badge[b-sray8l3450] {
    background: rgba(52,152,219,0.2);
    color: #3498db;
    border: 1px solid rgba(52,152,219,0.3);
}

.error-badge[b-sray8l3450] {
    background: rgba(231,76,60,0.2);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.3);
}

.default-badge[b-sray8l3450] {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.2);
}

.user-cell[b-sray8l3450] {
    min-width: 120px;
}

.user-name[b-sray8l3450] {
    color: #3498db;
    font-weight: 600;
}

.no-user[b-sray8l3450] {
    color: rgba(255,255,255,0.4);
    font-style: italic;
}

.message-cell[b-sray8l3450] {
    max-width: 300px;
    word-wrap: break-word;
}

.message-text[b-sray8l3450] {
    color: white;
    line-height: 1.4;
}

.song-info[b-sray8l3450] {
    margin-top: 5px;
    padding: 8px;
    background: rgba(46,204,113,0.1);
    border-radius: 6px;
    border-left: 3px solid #2ecc71;
    font-size: 0.9em;
}

.level-cell[b-sray8l3450] {
    min-width: 100px;
}

.level-indicator[b-sray8l3450] {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}

.level-error[b-sray8l3450] {
    background: rgba(231,76,60,0.2);
    color: #e74c3c;
}

.level-warning[b-sray8l3450] {
    background: rgba(241,196,15,0.2);
    color: #f1c40f;
}

.level-info[b-sray8l3450] {
    background: rgba(52,152,219,0.2);
    color: #3498db;
}

.level-default[b-sray8l3450] {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

.no-logs[b-sray8l3450] {
    text-align: center;
    padding: 40px;
}

.empty-state[b-sray8l3450] {
    color: rgba(255,255,255,0.6);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.empty-icon[b-sray8l3450] {
    font-size: 1.5em;
}

/* ===== MODAL STYLES ===== */
.modal-overlay[b-sray8l3450] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.confirmation-modal[b-sray8l3450] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.modal-header[b-sray8l3450] {
    background: rgba(231,76,60,0.1);
    border-bottom: 1px solid rgba(231,76,60,0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-sray8l3450] {
    color: #e74c3c;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.close-modal-btn[b-sray8l3450] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

    .close-modal-btn:hover[b-sray8l3450] {
        color: white;
    }

.modal-content[b-sray8l3450] {
    padding: 30px;
    text-align: center;
}

.warning-icon[b-sray8l3450] {
    font-size: 3em;
    margin-bottom: 20px;
    color: #f1c40f;
}

.warning-message[b-sray8l3450] {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-actions[b-sray8l3450] {
    display: flex;
    gap: 15px;
    padding: 0 30px 30px 30px;
}

.cancel-btn[b-sray8l3450], .confirm-btn[b-sray8l3450] {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

.cancel-btn[b-sray8l3450] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

    .cancel-btn:hover[b-sray8l3450] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.confirm-btn.clear[b-sray8l3450] {
    background: linear-gradient(45deg, #f1c40f, #e67e22);
    color: white;
    box-shadow: 0 4px 15px rgba(241,196,15,0.3);
}

    .confirm-btn.clear:hover[b-sray8l3450] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(241,196,15,0.4);
    }

/* ===== LOADING SPINNER ===== */
.loading-spinner[b-sray8l3450] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-sray8l3450 1s linear infinite;
}
/* _content/BeatBallot.Web/Admin/AdminHeaderComponent.razor.rz.scp.css */
/* ===== DJ HEADER STYLES ===== */

/* Main Header Container */
.dj-header[b-5yyf8xykuv] {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ===== HEADER LEFT SECTION ===== */

.header-left[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
}

.logo-section[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo[b-5yyf8xykuv] {
    font-size: 1.8em;
    font-weight: bold;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-subtitle[b-5yyf8xykuv] {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    font-weight: 500;
}

/* ===== HEADER RIGHT SECTION ===== */

.header-right[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
}

.user-account[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.user-info[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ===== USER AVATAR ===== */

.user-avatar[b-5yyf8xykuv] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f39c12;
}

.avatar-image[b-5yyf8xykuv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-5yyf8xykuv] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
}

/* ===== USER DETAILS ===== */

.user-details[b-5yyf8xykuv] {
    text-align: left;
}

.user-name[b-5yyf8xykuv] {
    color: white;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 2px;
}

.user-status[b-5yyf8xykuv] {
    color: #2ecc71;
    font-size: 0.8em;
    font-weight: 500;
}

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

.account-dropdown[b-5yyf8xykuv] {
    position: relative;
}

.dropdown-toggle[b-5yyf8xykuv] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

    .dropdown-toggle:hover[b-5yyf8xykuv] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.dropdown-icon[b-5yyf8xykuv] {
    font-size: 1.2em;
    font-weight: bold;
}

.dropdown-menu[b-5yyf8xykuv] {
    position: absolute;
    top: 110%;
    right: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1001;
}

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

.dropdown-item[b-5yyf8xykuv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.9);
    font-size: 0.9em;
}

    .dropdown-item:hover[b-5yyf8xykuv] {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .dropdown-item.logout[b-5yyf8xykuv] {
        color: #e74c3c;
    }

        .dropdown-item.logout:hover[b-5yyf8xykuv] {
            background: rgba(231,76,60,0.1);
            color: #c0392b;
        }

.item-icon[b-5yyf8xykuv] {
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}

.dropdown-divider[b-5yyf8xykuv] {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 0;
}
/* _content/BeatBallot.Web/Admin/AdminLayoutComponent.razor.rz.scp.css */
/* ===== CSS CUSTOM PROPERTIES ===== */
:root[b-sme9tyxhyk] {
    --baby-powder: #fbfef9ff;
    --raisin-black: #191923ff;
    --honolulu-blue: #0e79b2ff;
    --rose-red: #bf1363ff;
    --carrot-orange: #f39237ff;
}

/* ===== BASE LAYOUT ===== */

.page[b-sme9tyxhyk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-sme9tyxhyk] {
    flex: 1;
}

/* ===== SIDEBAR STYLES ===== */

.sidebar[b-sme9tyxhyk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

/* ===== TOP ROW/HEADER ===== */

.top-row[b-sme9tyxhyk] {
    background-color: var(--raisin-black);
    color: var(--rose-red);
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-start;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-sme9tyxhyk]  a,
    .top-row .btn-link[b-sme9tyxhyk] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-sme9tyxhyk] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

/* Mobile screens */
@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-sme9tyxhyk] {
        display: none;
    }

    .top-row.auth[b-sme9tyxhyk] {
        justify-content: space-between;
    }

    .top-row a[b-sme9tyxhyk],
    .top-row .btn-link[b-sme9tyxhyk] {
        margin-left: 0;
    }
}

/* Desktop screens */
@media (min-width: 641px) {
    .page[b-sme9tyxhyk] {
        flex-direction: row;
    }

    .sidebar[b-sme9tyxhyk] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-sme9tyxhyk] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-sme9tyxhyk],
    article[b-sme9tyxhyk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/BeatBallot.Web/Auth/AuthCallbackComponent.razor.rz.scp.css */
.callback-container[b-fzf5gd33ux] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A2042;
    padding: 20px;
}

.processing-auth[b-fzf5gd33ux], .auth-error[b-fzf5gd33ux] {
    background: #1A2042;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    text-align: center;
    color: white;
    max-width: 400px;
    width: 100%;
}

.loading-spinner[b-fzf5gd33ux] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top: 4px solid #f39c12;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
}

.error-icon[b-fzf5gd33ux] {
    font-size: 3em;
    margin-bottom: 20px;
}

.retry-btn[b-fzf5gd33ux] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

    .retry-btn:hover[b-fzf5gd33ux] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }
/* _content/BeatBallot.Web/Auth/AuthRequiredComponent.razor.rz.scp.css */
.auth-loading[b-db4m87bwnv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: white;
    text-align: center;
}

.loading-spinner[b-db4m87bwnv] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top: 3px solid #f39c12;
    border-radius: 50%;
    animation: spin-b-db4m87bwnv 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin-b-db4m87bwnv {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.auth-required[b-db4m87bwnv] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: white;
    text-align: center;
}
/* _content/BeatBallot.Web/Auth/LoginComponent.razor.rz.scp.css */
.auth-container[b-02f7z2gzer] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #1A2042;
}

.auth-card[b-02f7z2gzer] {
    background: #1A252F;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}

.auth-header[b-02f7z2gzer] {
    background: #1A2042;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.auth-logo[b-02f7z2gzer] {
    font-size: 2.2em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 5px;
}

.auth-subtitle[b-02f7z2gzer] {
    color: rgba(255,255,255,0.9);
    font-size: 1em;
}

.auth-content[b-02f7z2gzer] {
    padding: 30px;
    background: #1A2042;
}

.spotify-section[b-02f7z2gzer] {
    text-align: center;
}

.spotify-intro[b-02f7z2gzer] {
    margin-bottom: 30px;
}

.spotify-icon[b-02f7z2gzer] {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
}

.spotify-intro h3[b-02f7z2gzer] {
    color: white;
    font-size: 1.4em;
    margin-bottom: 10px;
    font-weight: bold;
}

.spotify-intro p[b-02f7z2gzer] {
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    font-size: 0.95em;
}

.spotify-login-btn[b-02f7z2gzer] {
    width: 100%;
    padding: 16px 20px;
    background: #1db954;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: bold;
    font-size: 1.1em;
    color: white;
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}

    .spotify-login-btn:hover:not(:disabled)[b-02f7z2gzer] {
        background: #1ed760;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(29, 185, 84, 0.4);
    }

    .spotify-login-btn:disabled[b-02f7z2gzer] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.spotify-btn-content[b-02f7z2gzer] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spotify-logo[b-02f7z2gzer] {
    font-size: 1.3em;
}

.loading-spinner[b-02f7z2gzer] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spotify-features[b-02f7z2gzer] {
    text-align: left;
    margin-bottom: 25px;
}

.feature-item[b-02f7z2gzer] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.9);
    font-size: 0.9em;
}

.feature-icon[b-02f7z2gzer] {
    font-size: 1.2em;
    width: 24px;
    text-align: center;
}

.auth-footer[b-02f7z2gzer] {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

    .auth-footer p[b-02f7z2gzer] {
        color: rgba(255,255,255,0.7);
        margin: 0 0 10px 0;
        font-size: 0.9em;
    }

.spotify-signup-link[b-02f7z2gzer] {
    color: #1db954;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .spotify-signup-link:hover[b-02f7z2gzer] {
        color: #1ed760;
        text-decoration: underline;
    }

.privacy-note[b-02f7z2gzer] {
    font-size: 0.8em !important;
    color: rgba(255,255,255,0.6) !important;
    font-style: italic;
}
/* _content/BeatBallot.Web/Auth/LogoutButtonComponent.razor.rz.scp.css */
.dj-logout-container[b-qbwdf032ys] {
    position: relative;
}

.dj-logout-button[b-qbwdf032ys] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    transition: all 0.2s ease;
    z-index: 1000;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

    .dj-logout-button:hover[b-qbwdf032ys] {
        background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
    }

    .dj-logout-button:active[b-qbwdf032ys] {
        transform: translateY(0);
    }

.logout-icon[b-qbwdf032ys] {
    font-size: 1.1rem;
}

.logout-confirmation-overlay[b-qbwdf032ys] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.logout-confirmation-modal[b-qbwdf032ys] {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    margin: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

    .logout-confirmation-modal h3[b-qbwdf032ys] {
        color: #333;
        margin-bottom: 1rem;
        font-size: 1.4rem;
    }

    .logout-confirmation-modal p[b-qbwdf032ys] {
        color: #666;
        margin-bottom: 2rem;
        line-height: 1.5;
    }

.confirmation-buttons[b-qbwdf032ys] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-cancel[b-qbwdf032ys] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

    .btn-cancel:hover[b-qbwdf032ys] {
        background: #5a6268;
    }

.btn-confirm[b-qbwdf032ys] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
}

    .btn-confirm:hover[b-qbwdf032ys] {
        background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
        transform: translateY(-1px);
    }
/* _content/BeatBallot.Web/Home/DeeJay/DJHeaderComponent.razor.rz.scp.css */
@keyframes fadeIn-b-0sg1tammgr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-0sg1tammgr {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

.dj-header[b-0sg1tammgr] {
    background: #1A2042;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.header-left[b-0sg1tammgr] {
    display: flex;
    align-items: center;
}

.logo-section[b-0sg1tammgr] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo[b-0sg1tammgr] {
    font-size: 1.8em;
    font-weight: bold;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-subtitle[b-0sg1tammgr] {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    font-weight: 500;
}

.header-right[b-0sg1tammgr] {
    display: flex;
    align-items: center;
}

.user-account[b-0sg1tammgr] {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.user-info[b-0sg1tammgr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-0sg1tammgr] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f39c12;
}

.avatar-image[b-0sg1tammgr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-0sg1tammgr] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
}

.user-details[b-0sg1tammgr] {
    text-align: left;
}

.user-name[b-0sg1tammgr] {
    color: white;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 2px;
}

.user-status[b-0sg1tammgr] {
    color: #2ecc71;
    font-size: 0.8em;
    font-weight: 500;
}

.account-dropdown[b-0sg1tammgr] {
    position: relative;
}

.dropdown-toggle[b-0sg1tammgr] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

    .dropdown-toggle:hover[b-0sg1tammgr] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.dropdown-icon[b-0sg1tammgr] {
    font-size: 1.2em;
    font-weight: bold;
}

.dropdown-menu[b-0sg1tammgr] {
    position: absolute;
    top: 110%;
    right: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1001;
}

.dropdown-item[b-0sg1tammgr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255,255,255,0.9);
    font-size: 0.9em;
}

    .dropdown-item:hover[b-0sg1tammgr] {
        background: rgba(255,255,255,0.1);
        color: white;
    }

    .dropdown-item.logout[b-0sg1tammgr] {
        color: #e74c3c;
    }

        .dropdown-item.logout:hover[b-0sg1tammgr] {
            background: rgba(231,76,60,0.1);
            color: #c0392b;
        }

.item-icon[b-0sg1tammgr] {
    font-size: 1.1em;
    width: 20px;
    text-align: center;
}

.dropdown-divider[b-0sg1tammgr] {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 0;
}

/* Modal Styles */
.modal-overlay[b-0sg1tammgr] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-0sg1tammgr 0.3s ease;
}

.modal-content[b-0sg1tammgr] {
    background: #1A2042;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    animation: slideIn-b-0sg1tammgr 0.3s ease;
}

.modal-header[b-0sg1tammgr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-title[b-0sg1tammgr] {
    color: white;
    font-size: 1.4em;
    font-weight: 600;
    margin: 0;
}

.modal-close[b-0sg1tammgr] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.8em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .modal-close:hover[b-0sg1tammgr] {
        background: rgba(255,255,255,0.1);
        color: white;
    }

.modal-body[b-0sg1tammgr] {
    padding: 24px;
    text-align: center;
}

.warning-icon[b-0sg1tammgr] {
    font-size: 3em;
    margin-bottom: 16px;
}

.modal-message[b-0sg1tammgr] {
    color: white;
    font-size: 1.2em;
    font-weight: 500;
    margin: 0 0 20px 0;
}

.warning-details[b-0sg1tammgr] {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    text-align: left;
}

    .warning-details ul[b-0sg1tammgr] {
        margin: 0;
        padding-left: 20px;
        color: rgba(255,255,255,0.9);
    }

    .warning-details li[b-0sg1tammgr] {
        margin-bottom: 8px;
        font-size: 0.95em;
    }

        .warning-details li:last-child[b-0sg1tammgr] {
            margin-bottom: 0;
        }

.modal-footer[b-0sg1tammgr] {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    justify-content: flex-end;
}

.btn[b-0sg1tammgr] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.btn-cancel[b-0sg1tammgr] {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}

    .btn-cancel:hover[b-0sg1tammgr] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.btn-confirm[b-0sg1tammgr] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
    border: 1px solid #c0392b;
}

    .btn-confirm:hover[b-0sg1tammgr] {
        background: linear-gradient(45deg, #c0392b, #a93226);
        transform: translateY(-1px);
    }
/* _content/BeatBallot.Web/Home/DeeJay/DJLayoutComponent.razor.rz.scp.css */
/* CSS Custom Properties (optional - not used in current styles) */
/*:root {
    --baby-powder: #fbfef9ff;
    --raisin-black: #191923ff;
    --honolulu-blue: #0e79b2ff;
    --rose-red: #bf1363ff;
    --carrot-orange: #f39237ff;
}*/

/* Main Dashboard Layout (First Block Priority) */
.dj-dashboard[b-okx7wfpjsw] {
    min-height: 100vh;
    background: #1A252F;
    display: flex;
    flex-direction: column;
    background: 
}

.dashboard-content[b-okx7wfpjsw] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.main-content[b-okx7wfpjsw] {
    flex: 1;
    margin-left: 280px; /* Full sidebar width */
    transition: margin-left 0.3s ease;
    overflow-y: auto;
    min-height: calc(100vh - 70px);
}

    .main-content.sidebar-collapsed[b-okx7wfpjsw] {
        margin-left: 70px; /* Collapsed sidebar width */
    }

.content-wrapper[b-okx7wfpjsw] {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.mobile-overlay[b-okx7wfpjsw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
}

/* Custom scrollbar for main content */
.main-content[b-okx7wfpjsw]::-webkit-scrollbar {
    width: 8px;
}

.main-content[b-okx7wfpjsw]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.main-content[b-okx7wfpjsw]::-webkit-scrollbar-thumb {
    background: #1A2042;
    border-radius: 4px;
}

    .main-content[b-okx7wfpjsw]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(45deg, #c0392b, #d68910);
    }
/* _content/BeatBallot.Web/Home/DeeJay/DJSidebarComponent.razor.rz.scp.css */
/* Bootstrap/Responsive Navbar Styles */
.navbar-toggler[b-3cp9oxq30u] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-3cp9oxq30u] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-3cp9oxq30u] {
    font-size: 1.1rem;
}

.oi[b-3cp9oxq30u] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

/* Top Navigation Items (Bootstrap-style) */
.nav-item[b-3cp9oxq30u] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-3cp9oxq30u] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-3cp9oxq30u] {
        padding-bottom: 1rem;
    }

    .nav-item[b-3cp9oxq30u]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        .nav-item[b-3cp9oxq30u]  a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .nav-item[b-3cp9oxq30u]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

/* Responsive Navbar Media Query */
@media (min-width: 641px) {
    .navbar-toggler[b-3cp9oxq30u] {
        display: none;
    }

    .collapse[b-3cp9oxq30u] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-3cp9oxq30u] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Custom Sidebar Styles */
.dj-sidebar[b-3cp9oxq30u] {
    background: #1A2042;
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255,255,255,0.1);
    height: 100vh;
    width: 280px;
    position: fixed;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .dj-sidebar.collapsed[b-3cp9oxq30u] {
        width: 70px;
    }

.sidebar-header[b-3cp9oxq30u] {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: flex-end;
}

.collapse-btn[b-3cp9oxq30u] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .collapse-btn:hover[b-3cp9oxq30u] {
        background: rgba(255,255,255,0.2);
        transform: scale(1.05);
    }

.collapse-icon[b-3cp9oxq30u] {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.sidebar-nav[b-3cp9oxq30u] {
    flex: 1;
    padding: 20px 0;
    overflow-y: auto;
}

.nav-section[b-3cp9oxq30u] {
    margin-bottom: 30px;
    padding: 0 20px;
}

.section-title[b-3cp9oxq30u] {
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-left: 10px;
}

/* Sidebar Navigation Items (renamed to avoid conflict) */
.sidebar-nav-item[b-3cp9oxq30u] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    color: rgba(255,255,255,0.8);
    position: relative;
}

    .sidebar-nav-item:hover[b-3cp9oxq30u] {
        background: rgba(255,255,255,0.1);
        color: white;
        transform: translateX(5px);
    }

    .sidebar-nav-item.active[b-3cp9oxq30u] {
        background: linear-gradient(45deg, rgba(231,76,60,0.2), rgba(243,156,18,0.2));
        border: 1px solid rgba(243,156,18,0.3);
        color: #f39c12;
        transform: translateX(5px);
    }

        .sidebar-nav-item.active .nav-icon[b-3cp9oxq30u] {
            transform: scale(1.1);
        }

    .sidebar-nav-item.action-item[b-3cp9oxq30u] {
        border: 1px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.05);
    }

        .sidebar-nav-item.action-item:hover[b-3cp9oxq30u] {
            background: linear-gradient(45deg, rgba(46,204,113,0.2), rgba(52,152,219,0.2));
            border-color: rgba(46,204,113,0.3);
            color: #2ecc71;
        }

.nav-icon[b-3cp9oxq30u] {
    font-size: 1.3em;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nav-text[b-3cp9oxq30u] {
    font-weight: 500;
    font-size: 0.95em;
    flex: 1;
}

.nav-badge[b-3cp9oxq30u] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

.sidebar-footer[b-3cp9oxq30u] {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

.stats-summary[b-3cp9oxq30u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-item[b-3cp9oxq30u] {
    text-align: center;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-number[b-3cp9oxq30u] {
    color: #f39c12;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-label[b-3cp9oxq30u] {
    color: rgba(255,255,255,0.7);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Collapsed state adjustments */
.dj-sidebar.collapsed .nav-section[b-3cp9oxq30u] {
    padding: 0 10px;
}

.dj-sidebar.collapsed .sidebar-nav-item[b-3cp9oxq30u] {
    justify-content: center;
    gap: 0;
    padding: 12px;
}

    .dj-sidebar.collapsed .sidebar-nav-item:hover[b-3cp9oxq30u] {
        transform: scale(1.1);
    }

    .dj-sidebar.collapsed .sidebar-nav-item.active[b-3cp9oxq30u] {
        transform: scale(1.1);
    }

/* Custom scrollbar */
.sidebar-nav[b-3cp9oxq30u]::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav[b-3cp9oxq30u]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}

.sidebar-nav[b-3cp9oxq30u]::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border-radius: 2px;
}
/* _content/BeatBallot.Web/Home/DeeJay/Home.razor.rz.scp.css */
.dj-home[b-77rpmlvjcy] {
    max-width: 1200px;
    margin: 0 auto;
}

.welcome-section[b-77rpmlvjcy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.welcome-title[b-77rpmlvjcy] {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 10px 0;
    background: #5DADE2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle[b-77rpmlvjcy] {
    color: rgba(255,255,255,0.8);
    font-size: 1.1em;
    margin: 0;
}

.quick-actions[b-77rpmlvjcy] {
    display: flex;
    gap: 15px;
}

.quick-action-btn[b-77rpmlvjcy] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

    .quick-action-btn.primary[b-77rpmlvjcy] {
        background: linear-gradient(45deg, #e74c3c, #f39c12);
        color: white;
        box-shadow: 0 4px 15px rgba(231,76,60,0.3);
    }

    .quick-action-btn.secondary[b-77rpmlvjcy] {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
    }

    .quick-action-btn:hover[b-77rpmlvjcy] {
        transform: translateY(-3px);
    }

    .quick-action-btn.primary:hover[b-77rpmlvjcy] {
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

    .quick-action-btn.secondary:hover[b-77rpmlvjcy] {
        background: rgba(255,255,255,0.2);
    }

.action-icon[b-77rpmlvjcy] {
    font-size: 2em;
}

.action-title[b-77rpmlvjcy] {
    font-weight: bold;
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}

.action-desc[b-77rpmlvjcy] {
    font-size: 0.9em;
    opacity: 0.8;
}

.dashboard-overview[b-77rpmlvjcy] {
    margin-bottom: 40px;
}

.overview-cards[b-77rpmlvjcy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.overview-card[b-77rpmlvjcy] {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

    .overview-card:hover[b-77rpmlvjcy] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.2);
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

.card-icon[b-77rpmlvjcy] {
    font-size: 2.5em;
    opacity: 0.8;
}

.card-content[b-77rpmlvjcy] {
    flex: 1;
}

.card-number[b-77rpmlvjcy] {
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-label[b-77rpmlvjcy] {
    color: white;
    font-weight: 600;
    margin-bottom: 5px;
}

.card-change[b-77rpmlvjcy] {
    font-size: 0.85em;
}

    .card-change.positive[b-77rpmlvjcy] {
        color: #2ecc71;
    }

    .card-change.neutral[b-77rpmlvjcy] {
        color: rgba(255,255,255,0.6);
    }

.recent-activity[b-77rpmlvjcy], .popular-playlists[b-77rpmlvjcy] {
    margin-bottom: 40px;
}

.activity-header[b-77rpmlvjcy], .section-header[b-77rpmlvjcy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title[b-77rpmlvjcy] {
    color: white;
    font-size: 1.8em;
    font-weight: bold;
    margin: 0;
}

.view-all-link[b-77rpmlvjcy] {
    color: #f39c12;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .view-all-link:hover[b-77rpmlvjcy] {
        color: #e67e22;
    }

.activity-list[b-77rpmlvjcy] {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.activity-item[b-77rpmlvjcy] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

    .activity-item:last-child[b-77rpmlvjcy] {
        border-bottom: none;
    }

    .activity-item:hover[b-77rpmlvjcy] {
        background: rgba(255,255,255,0.05);
    }

.activity-icon[b-77rpmlvjcy] {
    font-size: 1.5em;
    width: 40px;
    text-align: center;
}

.activity-content[b-77rpmlvjcy] {
    flex: 1;
}

.activity-title[b-77rpmlvjcy] {
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
}

.activity-description[b-77rpmlvjcy] {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    margin-bottom: 3px;
}

.activity-time[b-77rpmlvjcy] {
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
}

.activity-action[b-77rpmlvjcy] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

    .activity-action:hover[b-77rpmlvjcy] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(231,76,60,0.3);
    }

.playlists-preview[b-77rpmlvjcy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.playlist-preview-card[b-77rpmlvjcy] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .playlist-preview-card:hover[b-77rpmlvjcy] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.2);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

.live-badge[b-77rpmlvjcy] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-dot[b-77rpmlvjcy] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.playlist-cover[b-77rpmlvjcy] {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.cover-placeholder[b-77rpmlvjcy] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-icon[b-77rpmlvjcy] {
    color: white;
    font-size: 1.5em;
}

.playlist-title[b-77rpmlvjcy] {
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.playlist-stats[b-77rpmlvjcy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85em;
}
/* _content/BeatBallot.Web/Home/RegisterComponent.razor.rz.scp.css */
@keyframes spin-b-dnykldf0uq {
    from {
        transform: rotate(0deg);
    }

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

.auth-container[b-dnykldf0uq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
}

.auth-card[b-dnykldf0uq] {
    background: #1A252F;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

.auth-header[b-dnykldf0uq] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    padding: 25px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.auth-logo[b-dnykldf0uq] {
    font-size: 2.2em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 5px;
}

.auth-subtitle[b-dnykldf0uq] {
    color: rgba(255,255,255,0.9);
    font-size: 1em;
}

.auth-content[b-dnykldf0uq] {
    padding: 30px;
}

.spotify-section[b-dnykldf0uq] {
    text-align: center;
}

.spotify-intro[b-dnykldf0uq] {
    margin-bottom: 30px;
}

.spotify-icon[b-dnykldf0uq] {
    font-size: 3.5em;
    margin-bottom: 15px;
    display: block;
}

.spotify-intro h3[b-dnykldf0uq] {
    color: white;
    font-size: 1.5em;
    margin-bottom: 12px;
    font-weight: bold;
}

.spotify-intro p[b-dnykldf0uq] {
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    font-size: 0.95em;
    margin-bottom: 0;
}

.spotify-register-btn[b-dnykldf0uq] {
    width: 100%;
    padding: 18px 20px;
    background: #1db954;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: bold;
    font-size: 1.1em;
    color: white;
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}

    .spotify-register-btn:hover:not(:disabled)[b-dnykldf0uq] {
        background: #1ed760;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(29, 185, 84, 0.4);
    }

    .spotify-register-btn:disabled[b-dnykldf0uq] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.spotify-btn-content[b-dnykldf0uq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spotify-logo[b-dnykldf0uq] {
    font-size: 1.3em;
}

.loading-spinner[b-dnykldf0uq] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-dnykldf0uq 1s linear infinite;
}

.spotify-benefits[b-dnykldf0uq] {
    text-align: left;
    margin-bottom: 25px;
}

    .spotify-benefits h4[b-dnykldf0uq] {
        color: white;
        font-size: 1.1em;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
    }

.benefit-item[b-dnykldf0uq] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.benefit-icon[b-dnykldf0uq] {
    font-size: 1.5em;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-text[b-dnykldf0uq] {
    flex: 1;
}

    .benefit-text strong[b-dnykldf0uq] {
        color: white;
        font-size: 0.95em;
        display: block;
        margin-bottom: 4px;
    }

    .benefit-text p[b-dnykldf0uq] {
        color: rgba(255,255,255,0.7);
        font-size: 0.85em;
        margin: 0;
        line-height: 1.4;
    }

.auth-footer[b-dnykldf0uq] {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

    .auth-footer p[b-dnykldf0uq] {
        color: rgba(255,255,255,0.7);
        margin: 0 0 10px 0;
        font-size: 0.9em;
        line-height: 1.4;
    }

.login-link[b-dnykldf0uq] {
    color: #1db954;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

    .login-link:hover[b-dnykldf0uq] {
        color: #1ed760;
        text-decoration: underline;
    }

.privacy-note[b-dnykldf0uq] {
    font-size: 0.8em !important;
    color: rgba(255,255,255,0.6) !important;
    font-style: italic;
    margin-bottom: 15px !important;
}

.terms-note[b-dnykldf0uq] {
    font-size: 0.8em !important;
    color: rgba(255,255,255,0.6) !important;
}

.terms-link[b-dnykldf0uq] {
    color: #f39c12;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .terms-link:hover[b-dnykldf0uq] {
        color: #e67e22;
        text-decoration: underline;
    }

/* Custom scrollbar for the auth card */
.auth-card[b-dnykldf0uq]::-webkit-scrollbar {
    width: 6px;
}

.auth-card[b-dnykldf0uq]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.auth-card[b-dnykldf0uq]::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border-radius: 3px;
}
/* _content/BeatBallot.Web/LiveSession/StartSessionComponent.razor.rz.scp.css */
/* ===== KEYFRAMES ANIMATIONS ===== */

/* Pulse animation for status dots and live indicators */
@keyframes pulse-b-zgyw3mmrwr {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Spin animation for loading spinners */
@keyframes spin-b-zgyw3mmrwr {
    from {
        transform: rotate(0deg);
    }

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

/* ===== MAIN STYLES ===== */

.playlists-page[b-zgyw3mmrwr] {
    padding: 0;
}

/* Section Styling */
.page-section[b-zgyw3mmrwr] {
    margin-bottom: 60px;
}

.section-header[b-zgyw3mmrwr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-content h1.section-title[b-zgyw3mmrwr] {
    color: white;
    font-size: 2.5em;
    font-weight: bold;
    margin: 0 0 10px 0;
    background: #5DADE2; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-content p.section-subtitle[b-zgyw3mmrwr] {
    color: rgba(255,255,255,0.7);
    font-size: 1.1em;
    margin: 0;
}

/* Take Requests Section */
.requests-content[b-zgyw3mmrwr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

.request-status-card[b-zgyw3mmrwr] {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-indicator[b-zgyw3mmrwr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-dot[b-zgyw3mmrwr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2ecc71;
    animation: pulse-b-zgyw3mmrwr 2s infinite;
}

    .status-dot.active[b-zgyw3mmrwr] {
        background: #2ecc71;
        box-shadow: 0 0 10px rgba(46,204,113,0.5);
    }

.status-text[b-zgyw3mmrwr] {
    color: white;
    font-size: 1.2em;
    font-weight: 600;
}

.request-stats[b-zgyw3mmrwr] {
    display: flex;
    gap: 30px;
}

.stat-item[b-zgyw3mmrwr] {
    text-align: center;
}

.stat-number[b-zgyw3mmrwr] {
    display: block;
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
    line-height: 1;
}

.stat-label[b-zgyw3mmrwr] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-actions[b-zgyw3mmrwr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-action-btn[b-zgyw3mmrwr] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 15px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    white-space: nowrap;
}

    .quick-action-btn:hover[b-zgyw3mmrwr] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

.primary-btn[b-zgyw3mmrwr] {
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    box-shadow: 0 4px 15px rgba(142,68,173,0.3);
}

    .primary-btn:hover[b-zgyw3mmrwr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(142,68,173,0.4);
    }

.refresh-btn[b-zgyw3mmrwr] {
    background: linear-gradient(45deg, #1db954, #1ed760);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    box-shadow: 0 4px 15px rgba(29,185,84,0.3);
}

    .refresh-btn:hover:not(:disabled)[b-zgyw3mmrwr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(29,185,84,0.4);
    }

    .refresh-btn:disabled[b-zgyw3mmrwr] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .refresh-btn.loading[b-zgyw3mmrwr] {
        animation: pulse-b-zgyw3mmrwr 2s infinite;
    }

.loading-spinner[b-zgyw3mmrwr] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-zgyw3mmrwr 1s linear infinite;
}

.btn-icon[b-zgyw3mmrwr] {
    font-size: 1.1em;
}

.playlists-grid[b-zgyw3mmrwr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.playlist-card[b-zgyw3mmrwr] {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .playlist-card:hover[b-zgyw3mmrwr] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        border-color: rgba(255,255,255,0.2);
    }

    .playlist-card.live[b-zgyw3mmrwr] {
        border-color: #e74c3c;
        box-shadow: 0 0 20px rgba(231,76,60,0.2);
    }

.live-indicator[b-zgyw3mmrwr] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot[b-zgyw3mmrwr] {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse-b-zgyw3mmrwr 2s infinite;
}

.playlist-cover[b-zgyw3mmrwr] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 2px solid rgba(255,255,255,0.2);
}

.cover-image[b-zgyw3mmrwr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-zgyw3mmrwr] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-icon[b-zgyw3mmrwr] {
    font-size: 2em;
    color: white;
}

.playlist-name[b-zgyw3mmrwr] {
    color: white;
    font-size: 1.4em;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.playlist-description[b-zgyw3mmrwr] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.playlist-actions[b-zgyw3mmrwr] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    margin-top: 15px;
}

.action-btn[b-zgyw3mmrwr] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    flex: 1;
}

    .action-btn:hover[b-zgyw3mmrwr] {
        background: rgba(255,255,255,0.2);
        color: white;
        transform: translateY(-1px);
    }

.go-live-btn:hover[b-zgyw3mmrwr] {
    background: rgba(46,204,113,0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

.manage-btn[b-zgyw3mmrwr] {
    background: rgba(231,76,60,0.2);
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Modal Styles */
.modal-overlay[b-zgyw3mmrwr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.confirmation-modal[b-zgyw3mmrwr] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.modal-header[b-zgyw3mmrwr] {
    background: rgba(231,76,60,0.1);
    border-bottom: 1px solid rgba(231,76,60,0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-zgyw3mmrwr] {
    color: #e74c3c;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.close-modal-btn[b-zgyw3mmrwr] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

    .close-modal-btn:hover[b-zgyw3mmrwr] {
        color: white;
    }

.modal-content[b-zgyw3mmrwr] {
    padding: 30px;
    text-align: center;
}

.warning-icon[b-zgyw3mmrwr] {
    font-size: 3em;
    margin-bottom: 20px;
    color: #f39c12;
}

.warning-message[b-zgyw3mmrwr] {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
}

.current-live[b-zgyw3mmrwr], .switching-to[b-zgyw3mmrwr] {
    color: rgba(255,255,255,0.8);
    margin-bottom: 15px;
    font-size: 0.95em;
}

    .current-live strong[b-zgyw3mmrwr], .switching-to strong[b-zgyw3mmrwr] {
        color: white;
        font-weight: bold;
    }

.modal-actions[b-zgyw3mmrwr] {
    display: flex;
    gap: 15px;
    padding: 0 30px 30px 30px;
}

.cancel-btn[b-zgyw3mmrwr], .confirm-btn[b-zgyw3mmrwr] {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

.cancel-btn[b-zgyw3mmrwr] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

    .cancel-btn:hover[b-zgyw3mmrwr] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.confirm-btn[b-zgyw3mmrwr] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: white;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .confirm-btn:hover[b-zgyw3mmrwr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

.empty-state[b-zgyw3mmrwr] {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255,255,255,0.8);
}

.empty-icon[b-zgyw3mmrwr] {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-state h2[b-zgyw3mmrwr] {
    color: white;
    font-size: 2em;
    margin-bottom: 15px;
}

.empty-state p[b-zgyw3mmrwr] {
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
/* _content/BeatBallot.Web/LiveSession/TakeRequests/DeeJay/ManageTakeRequestsComponent.razor.rz.scp.css */
/* ManageTakeRequestsComponent.css - Clean and organized styles */

/*animation: dragPulse 2s ease-in-out infinite;
animation: pulse 2s infinite;
animation: glow 2s ease-in-out infinite alternate;
animation: bounce 1s infinite;
animation: dragIndicator 1s ease-in-out infinite alternate;
animation: soundWave 1s ease-in-out infinite;
animation: slideInRight 0.3s ease-out;
animation: spin 1s linear infinite;*/

/* ===== BASE LAYOUT ===== */
.manage-live-page[b-hy0qtfam7t] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== PAGE HEADER ===== */
.page-header[b-hy0qtfam7t] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.back-nav[b-hy0qtfam7t] {
    margin-bottom: 15px;
}

.back-btn[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 10px 15px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

    .back-btn:hover[b-hy0qtfam7t] {
        background: rgba(255,255,255,0.2);
        color: white;
        transform: translateX(-3px);
    }

.back-icon[b-hy0qtfam7t] {
    font-size: 1.2em;
}

.page-title[b-hy0qtfam7t] {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 15px 0;
    background: #5DADE2; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.session-details[b-hy0qtfam7t] {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

    .session-details > div[b-hy0qtfam7t] {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

.label[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.7);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-hy0qtfam7t] {
    color: white;
    font-weight: 600;
    font-size: 0.95em;
}

.header-actions[b-hy0qtfam7t] {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== CONTROLS AND BUTTONS ===== */
.control-btn[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .control-btn:hover:not(:disabled)[b-hy0qtfam7t] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    .control-btn:disabled[b-hy0qtfam7t] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.refresh-btn[b-hy0qtfam7t] {
    background: rgba(52,152,219,0.2);
    border-color: #3498db;
    color: #3498db;
}

.clear-all-btn[b-hy0qtfam7t] {
    background: rgba(231,76,60,0.2);
    border-color: #e74c3c;
    color: #e74c3c;
}

.stop-btn[b-hy0qtfam7t] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .stop-btn:hover[b-hy0qtfam7t] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

/* ===== SORT CONTROLS ===== */
.sort-controls[b-hy0qtfam7t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-label[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    white-space: nowrap;
}

.sort-dropdown[b-hy0qtfam7t] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .sort-dropdown:focus[b-hy0qtfam7t] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 10px rgba(52,152,219,0.3);
    }

/* ===== QR CODE SECTION ===== */
.qr-code-section[b-hy0qtfam7t] {
    display: flex;
    gap: 30px;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 25px;
    margin-bottom: 30px;
}

.qr-info[b-hy0qtfam7t] {
    flex: 1;
}

.qr-title[b-hy0qtfam7t] {
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.qr-description[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.8);
    margin: 0 0 20px 0;
    font-size: 0.95em;
}

.voting-url[b-hy0qtfam7t] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 10px;
}

.url-label[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    white-space: nowrap;
}

.voting-link[b-hy0qtfam7t] {
    background: rgba(0,0,0,0.3);
    color: #3498db;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .voting-link:hover[b-hy0qtfam7t] {
        background: rgba(52,152,219,0.2);
        color: #2980b9;
    }

.copy-btn[b-hy0qtfam7t] {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    border-radius: 8px;
    padding: 8px;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .copy-btn:hover[b-hy0qtfam7t] {
        background: rgba(52,152,219,0.3);
        transform: scale(1.1);
    }

.copy-icon[b-hy0qtfam7t] {
    font-size: 1.1em;
}

.qr-placeholder[b-hy0qtfam7t] {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.qr-mock[b-hy0qtfam7t] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid #333;
    position: relative;
}

.qr-text[b-hy0qtfam7t] {
    font-weight: bold;
    color: #333;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.session-id[b-hy0qtfam7t] {
    font-size: 0.7em;
    color: #666;
    font-family: 'Courier New', monospace;
}

/* ===== LIVE STATS ===== */
.live-stats[b-hy0qtfam7t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card[b-hy0qtfam7t] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

    .stat-card:hover[b-hy0qtfam7t] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.2);
    }

.stat-icon[b-hy0qtfam7t] {
    font-size: 2.5em;
    opacity: 0.8;
}

.stat-content[b-hy0qtfam7t] {
    flex: 1;
}

.stat-number[b-hy0qtfam7t] {
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SONGS SECTION ===== */
.songs-section[b-hy0qtfam7t] {
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.songs-header[b-hy0qtfam7t] {
    padding: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-hy0qtfam7t] {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}

.header-controls[b-hy0qtfam7t] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.drag-hint[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    font-style: italic;
    background: linear-gradient(45deg, rgba(52,152,219,0.2), rgba(52,152,219,0.1));
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid rgba(52,152,219,0.3);
    animation: dragPulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== SONGS GRID AND CARDS ===== */
.songs-grid[b-hy0qtfam7t] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .songs-grid.drag-enabled[b-hy0qtfam7t] {
        gap: 20px;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

        .songs-grid.drag-enabled .song-card.draggable[b-hy0qtfam7t] {
            cursor: grab;
            transition: all 0.3s ease;
            border: 2px dashed transparent;
        }

            .songs-grid.drag-enabled .song-card.draggable:hover[b-hy0qtfam7t] {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.3);
                border-color: rgba(255,255,255,0.3);
            }

.song-card[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 90px;
}

    .song-card:hover[b-hy0qtfam7t] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        border-color: rgba(255,255,255,0.2);
    }

    .song-card.currently-playing[b-hy0qtfam7t] {
        border-color: #2ecc71;
        box-shadow: 0 0 20px rgba(46,204,113,0.2);
        background: rgba(46,204,113,0.05);
    }

    .song-card.draggable[draggable="true"]:active[b-hy0qtfam7t] {
        cursor: grabbing !important;
        transform: rotate(5deg) scale(1.05);
        z-index: 1000;
        opacity: 0.8;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }

    .song-card.drag-target[b-hy0qtfam7t] {
        border-color: #3498db !important;
        background: rgba(52,152,219,0.1) !important;
        transform: translateY(-3px);
        box-shadow: 0 0 20px rgba(52,152,219,0.3);
    }

        .song-card.drag-target[b-hy0qtfam7t]::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #3498db, #2980b9);
            border-radius: 2px;
            animation: dragIndicator 1s ease-in-out infinite alternate;
        }

    .song-card:hover .remove-corner-btn[b-hy0qtfam7t] {
        opacity: 1;
    }

/* ===== SONG COMPONENTS ===== */
.song-header[b-hy0qtfam7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    flex-shrink: 0;
}

.song-position[b-hy0qtfam7t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 50px;
}

.position-number[b-hy0qtfam7t] {
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 3px;
}

.position-text[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.6);
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.playing-indicator[b-hy0qtfam7t] {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    margin-bottom: 3px;
    animation: pulse 2s infinite;
}

.request-count-badge[b-hy0qtfam7t] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: white;
    padding: 6px 10px;
    border-radius: 15px;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

    .request-count-badge.popular[b-hy0qtfam7t] {
        background: linear-gradient(45deg, #e74c3c, #f39c12, #e67e22);
        animation: glow 2s ease-in-out infinite alternate;
        box-shadow: 0 0 15px rgba(231,76,60,0.4);
    }

.count-number[b-hy0qtfam7t] {
    font-size: 1.2em;
    line-height: 1;
    font-weight: bold;
}

.count-label[b-hy0qtfam7t] {
    font-size: 0.8em;
    opacity: 0.9;
    margin-top: 1px;
}

.hot-indicator[b-hy0qtfam7t] {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1.2em;
    animation: bounce 1s infinite;
}

/* ===== DRAG HANDLE ===== */
.drag-handle[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.5);
    cursor: grab;
    font-size: 1.2em;
    padding: 8px;
    transition: all 0.3s ease;
    border-radius: 8px;
    user-select: none;
}

    .drag-handle:hover[b-hy0qtfam7t] {
        color: white;
        background: rgba(255,255,255,0.1);
        transform: scale(1.1);
    }

.song-card.draggable[draggable="true"] .drag-handle[b-hy0qtfam7t] {
    cursor: grabbing;
    color: #3498db;
}

.drag-dots[b-hy0qtfam7t] {
    display: block;
    line-height: 1.2;
    font-weight: bold;
}

/* ===== SONG CONTENT ===== */
.song-content[b-hy0qtfam7t] {
    display: flex;
    gap: 15px;
    flex: 1;
    align-items: center;
}

.song-cover[b-hy0qtfam7t] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.cover-image[b-hy0qtfam7t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-hy0qtfam7t] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #8e44ad, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
}

.playing-overlay[b-hy0qtfam7t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(46,204,113,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.playing-animation[b-hy0qtfam7t] {
    display: flex;
    gap: 3px;
    align-items: end;
}

    .playing-animation span[b-hy0qtfam7t] {
        width: 3px;
        background: white;
        border-radius: 2px;
        animation: soundWave 1s ease-in-out infinite;
    }

        .playing-animation span:nth-child(1)[b-hy0qtfam7t] {
            height: 10px;
            animation-delay: 0s;
        }

        .playing-animation span:nth-child(2)[b-hy0qtfam7t] {
            height: 15px;
            animation-delay: 0.2s;
        }

        .playing-animation span:nth-child(3)[b-hy0qtfam7t] {
            height: 8px;
            animation-delay: 0.4s;
        }

.song-info[b-hy0qtfam7t] {
    flex: 1;
    min-width: 0;
}

.song-title[b-hy0qtfam7t] {
    color: white;
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 3px 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-artist[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.8);
    font-size: 0.85em;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-album[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.6);
    font-size: 0.75em;
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.song-meta[b-hy0qtfam7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.7em;
    color: rgba(255,255,255,0.5);
}

    .song-meta span[b-hy0qtfam7t] {
        white-space: nowrap;
    }

/* ===== SONG ACTIONS ===== */
.song-actions[b-hy0qtfam7t] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.play-btn[b-hy0qtfam7t] {
    background: rgba(46,204,113,0.2);
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 6px;
    padding: 6px 12px;
    color: #2ecc71;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    white-space: nowrap;
}

    .play-btn:hover:not(:disabled)[b-hy0qtfam7t] {
        background: rgba(46,204,113,0.3);
        transform: translateY(-1px);
    }

    .play-btn.active[b-hy0qtfam7t] {
        background: rgba(46,204,113,0.3);
        cursor: default;
        box-shadow: 0 0 10px rgba(46,204,113,0.3);
    }

    .play-btn:disabled[b-hy0qtfam7t] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .play-btn.pause-state[b-hy0qtfam7t] {
        background: rgba(241,196,15,0.2);
        border-color: rgba(241,196,15,0.3);
        color: #f1c40f;
    }

        .play-btn.pause-state:hover[b-hy0qtfam7t] {
            background: rgba(241,196,15,0.3);
            transform: translateY(-1px);
        }

    .play-btn.resume-state[b-hy0qtfam7t] {
        background: rgba(52,152,219,0.2);
        border-color: rgba(52,152,219,0.3);
        color: #3498db;
    }

        .play-btn.resume-state:hover[b-hy0qtfam7t] {
            background: rgba(52,152,219,0.3);
            transform: translateY(-1px);
        }

/* ===== REMOVE BUTTON ===== */
.remove-corner-btn[b-hy0qtfam7t] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(231,76,60,0.9);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

    .remove-corner-btn:hover[b-hy0qtfam7t] {
        opacity: 1;
        background: rgba(231,76,60,1);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(231,76,60,0.4);
    }

    .remove-corner-btn:active[b-hy0qtfam7t] {
        transform: scale(0.95);
    }

.remove-icon[b-hy0qtfam7t] {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.song-actions .remove-btn[b-hy0qtfam7t] {
    display: none;
}

/* ===== REQUESTERS SECTION ===== */
.requesters[b-hy0qtfam7t] {
    border-left: 2px solid rgba(255,255,255,0.1);
    padding-left: 12px;
    min-width: 150px;
    max-width: 200px;
    flex-shrink: 0;
}

.requesters-label[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.6);
    font-size: 0.7em;
    margin-bottom: 6px;
    display: block;
}

.requesters-list[b-hy0qtfam7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.requester-badge[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.65em;
    border: 1px solid rgba(255,255,255,0.2);
}

.more-requesters[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.6);
    font-size: 0.65em;
    font-style: italic;
    padding: 2px 6px;
}

/* ===== EMPTY STATE ===== */
.empty-requests[b-hy0qtfam7t] {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255,255,255,0.7);
}

.empty-icon[b-hy0qtfam7t] {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-requests h3[b-hy0qtfam7t] {
    color: white;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.empty-requests p[b-hy0qtfam7t] {
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* ===== MODALS ===== */
.modal-overlay[b-hy0qtfam7t] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.confirmation-modal[b-hy0qtfam7t], .device-selector-modal[b-hy0qtfam7t] {
    background: #1A2042;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.device-selector-modal[b-hy0qtfam7t] {
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-hy0qtfam7t] {
    background: rgba(231,76,60,0.1);
    border-bottom: 1px solid rgba(231,76,60,0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-hy0qtfam7t] {
    color: #e74c3c;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.close-modal-btn[b-hy0qtfam7t] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

    .close-modal-btn:hover[b-hy0qtfam7t] {
        color: white;
    }

.modal-content[b-hy0qtfam7t] {
    padding: 30px;
    text-align: center;
}

.warning-icon[b-hy0qtfam7t] {
    font-size: 3em;
    margin-bottom: 20px;
    color: #e74c3c;
}

.warning-message[b-hy0qtfam7t] {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
}

.session-summary[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
    font-size: 0.95em;
}

    .session-summary strong[b-hy0qtfam7t] {
        color: white;
        font-weight: bold;
    }

.modal-actions[b-hy0qtfam7t] {
    display: flex;
    gap: 15px;
    padding: 0 30px 30px 30px;
}

.cancel-btn[b-hy0qtfam7t], .confirm-btn[b-hy0qtfam7t] {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

.cancel-btn[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

    .cancel-btn:hover[b-hy0qtfam7t] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.confirm-btn.stop[b-hy0qtfam7t], .confirm-btn.clear[b-hy0qtfam7t] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .confirm-btn.stop:hover[b-hy0qtfam7t], .confirm-btn.clear:hover[b-hy0qtfam7t] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

/* ===== DEVICE SELECTOR MODAL ===== */
.device-icon[b-hy0qtfam7t] {
    font-size: 3em;
    margin-bottom: 20px;
    color: #3498db;
    text-align: center;
}

.device-message[b-hy0qtfam7t] {
    color: white;
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
}

.devices-list[b-hy0qtfam7t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.device-option[b-hy0qtfam7t] {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 100%;
}

    .device-option:hover[b-hy0qtfam7t] {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.3);
        transform: translateY(-2px);
    }

    .device-option.active[b-hy0qtfam7t] {
        background: rgba(46,204,113,0.1);
        border-color: #2ecc71;
        box-shadow: 0 0 15px rgba(46,204,113,0.2);
    }

.device-info[b-hy0qtfam7t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.device-name[b-hy0qtfam7t] {
    color: white;
    font-weight: bold;
    font-size: 1em;
}

.device-type[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.7);
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.active-indicator[b-hy0qtfam7t] {
    color: #2ecc71;
    font-size: 0.8em;
    font-weight: bold;
    background: rgba(46,204,113,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(46,204,113,0.3);
}

.device-volume[b-hy0qtfam7t] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.volume-text[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
}

.device-help[b-hy0qtfam7t] {
    background: rgba(52,152,219,0.1);
    border: 1px solid rgba(52,152,219,0.2);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
}

.help-text[b-hy0qtfam7t] {
    color: rgba(255,255,255,0.8);
    font-size: 0.9em;
    margin: 0;
    text-align: center;
}

/* ===== STATUS MESSAGE ===== */
.status-message[b-hy0qtfam7t] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
}

.status-content[b-hy0qtfam7t] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(52,152,219,0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 400px;
    border: 1px solid rgba(255,255,255,0.2);
}

.status-icon[b-hy0qtfam7t] {
    font-size: 1.2em;
    flex-shrink: 0;
}

.status-text[b-hy0qtfam7t] {
    flex: 1;
    font-size: 0.9em;
    line-height: 1.4;
}

.status-close[b-hy0qtfam7t] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .status-close:hover[b-hy0qtfam7t] {
        background: rgba(255,255,255,0.2);
        color: white;
    }

/* ===== UTILITY CLASSES ===== */
.loading-spinner[b-hy0qtfam7t] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.btn-icon[b-hy0qtfam7t] {
    font-size: 1.1em;
}

/* Session Policy Section - Dark Theme to Match BeatBallot */
.session-policy-section[b-hy0qtfam7t] {
    background: #2D3748;
    border: 1px solid #4A5568;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

    .session-policy-section[b-hy0qtfam7t]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3182CE, #805AD5, #E53E3E);
        border-radius: 12px 12px 0 0;
    }

/* Policy Header */
.policy-header[b-hy0qtfam7t] {
    margin-bottom: 32px;
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #4A5568;
}

.policy-title[b-hy0qtfam7t] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #F7FAFC;
    margin: 0 0 8px 0;
    letter-spacing: -0.025em;
}

.policy-description[b-hy0qtfam7t] {
    font-size: 0.875rem;
    color: #A0AEC0;
    margin: 0;
    line-height: 1.5;
}

/* Policy Controls Container */
.policy-controls[b-hy0qtfam7t] {
    display: grid;
    gap: 24px;
}

/* Policy Groups */
.policy-group[b-hy0qtfam7t] {
    background: #1A202C;
    border: 1px solid #4A5568;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s ease;
}

    .policy-group:hover[b-hy0qtfam7t] {
        border-color: #63B3ED;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    }

.policy-group-title[b-hy0qtfam7t] {
    font-size: 1rem;
    font-weight: 600;
    color: #E2E8F0;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #4A5568;
    display: block;
}

/* Policy Control Items */
.policy-control-item[b-hy0qtfam7t] {
    margin-bottom: 20px;
}

    .policy-control-item:last-child[b-hy0qtfam7t] {
        margin-bottom: 0;
    }

/* Input Labels */
.input-label[b-hy0qtfam7t] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #E2E8F0;
    margin-bottom: 6px;
    letter-spacing: 0.025em;
}

/* Input Groups */
.input-group[b-hy0qtfam7t] {
    display: flex;
    align-items: center;
    position: relative;
}

.policy-input[b-hy0qtfam7t] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #4A5568;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #F7FAFC;
    background: #2D3748;
    transition: all 0.2s ease;
    outline: none;
}

    .policy-input:focus[b-hy0qtfam7t] {
        border-color: #63B3ED;
        box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2);
    }

    .policy-input:hover[b-hy0qtfam7t] {
        border-color: #63B3ED;
    }

    .policy-input[b-hy0qtfam7t]::placeholder {
        color: #718096;
        font-style: italic;
    }

.input-suffix[b-hy0qtfam7t] {
    padding: 8px 12px;
    background: #4A5568;
    border: 1px solid #4A5568;
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 0.875rem;
    color: #A0AEC0;
    font-weight: 500;
    white-space: nowrap;
}

/* Textarea */
.policy-textarea[b-hy0qtfam7t] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #4A5568;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #F7FAFC;
    background: #2D3748;
    transition: all 0.2s ease;
    outline: none;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    line-height: 1.4;
}

    .policy-textarea:focus[b-hy0qtfam7t] {
        border-color: #63B3ED;
        box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2);
    }

    .policy-textarea[b-hy0qtfam7t]::placeholder {
        color: #718096;
        font-style: italic;
    }

.character-count[b-hy0qtfam7t] {
    font-size: 0.75rem;
    color: #718096;
    text-align: right;
    margin-top: 4px;
    font-weight: 400;
}

/* Toggle Switches */
.policy-toggle[b-hy0qtfam7t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 12px;
    background: #2D3748;
    border: 1px solid #4A5568;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .policy-toggle:hover[b-hy0qtfam7t] {
        background: #4A5568;
        border-color: #63B3ED;
    }

.toggle-input[b-hy0qtfam7t] {
    display: none;
}

.toggle-slider[b-hy0qtfam7t] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #4A5568;
    border-radius: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

    .toggle-slider[b-hy0qtfam7t]::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: #F7FAFC;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.toggle-input:checked + .toggle-slider[b-hy0qtfam7t] {
    background: #3182CE;
}

    .toggle-input:checked + .toggle-slider[b-hy0qtfam7t]::before {
        transform: translateX(20px);
    }

.toggle-label[b-hy0qtfam7t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toggle-text[b-hy0qtfam7t] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #F7FAFC;
    line-height: 1.4;
}

.toggle-description[b-hy0qtfam7t] {
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Policy Status Indicators */
.policy-status[b-hy0qtfam7t] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

    .policy-status.active[b-hy0qtfam7t] {
        background: rgba(72, 187, 120, 0.2);
        color: #68D391;
        border: 1px solid rgba(72, 187, 120, 0.3);
    }

    .policy-status.inactive[b-hy0qtfam7t] {
        background: rgba(237, 137, 54, 0.2);
        color: #F6AD55;
        border: 1px solid rgba(237, 137, 54, 0.3);
    }

/* Blocked Items */
.blocked-items-container[b-hy0qtfam7t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blocked-items-list[b-hy0qtfam7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blocked-item[b-hy0qtfam7t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(229, 62, 62, 0.2);
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: #FC8181;
}

.blocked-item-text[b-hy0qtfam7t] {
    font-weight: 500;
}

.remove-blocked-item[b-hy0qtfam7t] {
    background: none;
    border: none;
    color: #FC8181;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .remove-blocked-item:hover[b-hy0qtfam7t] {
        background: #E53E3E;
        color: white;
    }

/* Save Bar */
.policy-save-bar[b-hy0qtfam7t] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1A202C;
    border: 1px solid #4A5568;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-hy0qtfam7t 0.3s ease-out;
}

@keyframes slideUp-b-hy0qtfam7t {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.save-bar-content[b-hy0qtfam7t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.save-icon[b-hy0qtfam7t] {
    font-size: 1.125rem;
    color: #63B3ED;
}

.save-text[b-hy0qtfam7t] {
    flex: 1;
    color: #E2E8F0;
    font-weight: 500;
    font-size: 0.875rem;
}

.save-btn[b-hy0qtfam7t] {
    background: #3182CE;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

    .save-btn:hover[b-hy0qtfam7t] {
        background: #2C5282;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .save-btn:active[b-hy0qtfam7t] {
        transform: translateY(0);
    }

.cancel-btn[b-hy0qtfam7t] {
    background: transparent;
    color: #A0AEC0;
    border: 1px solid #4A5568;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cancel-btn:hover[b-hy0qtfam7t] {
        background: #4A5568;
        color: #F7FAFC;
        border-color: #63B3ED;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .session-policy-section[b-hy0qtfam7t] {
        padding: 16px;
        margin: 16px 0;
    }

    .policy-header[b-hy0qtfam7t] {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .policy-title[b-hy0qtfam7t] {
        font-size: 1.25rem;
    }

    .policy-controls[b-hy0qtfam7t] {
        gap: 16px;
    }

    .policy-group[b-hy0qtfam7t] {
        padding: 16px;
    }

    .policy-toggle[b-hy0qtfam7t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .toggle-slider[b-hy0qtfam7t] {
        margin-top: 0;
    }

    .save-bar-content[b-hy0qtfam7t] {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .save-btn[b-hy0qtfam7t], .cancel-btn[b-hy0qtfam7t] {
        width: 100%;
        justify-content: center;
    }
}

/* Focus Styles for Accessibility */
.policy-toggle:focus-within[b-hy0qtfam7t] {
    outline: 2px solid #63B3ED;
    outline-offset: 2px;
}

.save-btn:focus[b-hy0qtfam7t], .cancel-btn:focus[b-hy0qtfam7t] {
    outline: 2px solid #63B3ED;
    outline-offset: 2px;
}

/* Loading States */
.policy-input:disabled[b-hy0qtfam7t], .policy-textarea:disabled[b-hy0qtfam7t] {
    background: #4A5568;
    color: #718096;
    cursor: not-allowed;
}

.policy-toggle.disabled[b-hy0qtfam7t] {
    opacity: 0.6;
    cursor: not-allowed;
}

    .policy-toggle.disabled:hover[b-hy0qtfam7t] {
        background: #2D3748;
    }

/* Enhanced Visual Feedback */
.policy-group:focus-within[b-hy0qtfam7t] {
    border-color: #63B3ED;
    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2);
}

.blocked-item[b-hy0qtfam7t] {
    animation: fadeIn-b-hy0qtfam7t 0.3s ease-out;
}

@keyframes fadeIn-b-hy0qtfam7t {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/BeatBallot.Web/LiveSession/TakeRequests/Listener/RequestSongComponent.razor.rz.scp.css */
/* RequestSongComponent.css - Clean and organized styles */
@keyframes spin-b-3cr6v6j615 {
    from {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}
/* ===== BASE LAYOUT ===== */
.vote-container[b-3cr6v6j615] {
    min-height: 100vh;
    background: #1A2042;
    color: white;
}

.request-page[b-3cr6v6j615] {
    background: #1A2042;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* ===== SECTION TITLE ===== */
.section-title[b-3cr6v6j615] {
    background: #1A2042;
    flex-direction: column;
    color: white;
    font-size: 1.8em;
    margin-bottom: 30px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

/* ===== CONNECTION STATUS ===== */
.connection-status[b-3cr6v6j615] {
    background: rgba(0,0,0,0.3);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.7em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;

}

    .connection-status.offline[b-3cr6v6j615] {
        border: 1px solid rgba(255,193,7,0.5);
        color: #ffc107;
        
    }

    .connection-status.online[b-3cr6v6j615] {
        border: 1px solid rgba(40,167,69,0.5);
        color: #28a745;
    }

/* ===== NAME SECTION ===== */
.name-section[b-3cr6v6j615] {
    margin-bottom: 30px;
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.name-input-wrapper[b-3cr6v6j615] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.name-icon[b-3cr6v6j615] {
    position: absolute;
    left: 15px;
    color: rgba(255,255,255,0.5);
    font-size: 1.1em;
    z-index: 1;
}

.name-input[b-3cr6v6j615] {
    width: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px 50px;
    color: white;
    font-size: 1em;
    transition: all 0.3s ease;
}

    .name-input:focus[b-3cr6v6j615] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 15px rgba(52,152,219,0.2);
    }

    .name-input[b-3cr6v6j615]::placeholder {
        color: rgba(255,255,255,0.4);
    }

.clear-name-btn[b-3cr6v6j615] {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.3em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
    z-index: 1;
}

    .clear-name-btn:hover[b-3cr6v6j615] {
        color: white;
    }

.name-preview[b-3cr6v6j615] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-align: center;
    padding: 5px 0;
}

    .name-preview strong[b-3cr6v6j615] {
        color: #3498db;
        font-weight: 600;
    }

/* ===== SEARCH SECTION ===== */
.search-section[b-3cr6v6j615] {
    margin-bottom: 40px;
}

.search-container[b-3cr6v6j615] {
    position: relative;
    margin-bottom: 20px;
}

.search-input-wrapper[b-3cr6v6j615] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-3cr6v6j615] {
    position: absolute;
    left: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 1.2em;
    z-index: 1;
}

.search-input[b-3cr6v6j615] {
    width: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 20px 60px;
    color: white;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

    .search-input:focus[b-3cr6v6j615] {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 20px rgba(52,152,219,0.3);
    }

    .search-input:disabled[b-3cr6v6j615] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .search-input[b-3cr6v6j615]::placeholder {
        color: rgba(255,255,255,0.5);
    }

.clear-search-btn[b-3cr6v6j615] {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
    z-index: 1;
}

    .clear-search-btn:hover[b-3cr6v6j615] {
        color: white;
    }

.search-loading[b-3cr6v6j615] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.7);
    margin-top: 15px;
    padding-left: 20px;
}

/* ===== AUTOCOMPLETE RESULTS ===== */
.autocomplete-results[b-3cr6v6j615] {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    margin-top: 10px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.search-result-item[b-3cr6v6j615] {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .search-result-item:hover:not(.already-requested)[b-3cr6v6j615] {
        background: rgba(52,152,219,0.2);
    }

    .search-result-item:last-child[b-3cr6v6j615] {
        border-bottom: none;
    }

    .search-result-item.already-requested[b-3cr6v6j615] {
        opacity: 0.6;
        cursor: not-allowed;
        background: rgba(0,0,0,0.2);
    }

/* ===== TRACK DISPLAY COMPONENTS ===== */
.track-cover[b-3cr6v6j615], .song-cover[b-3cr6v6j615] {
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.track-cover[b-3cr6v6j615] {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.song-cover[b-3cr6v6j615] {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    border-radius: 10px;
}

.cover-image[b-3cr6v6j615] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-3cr6v6j615] {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3498db, #2980b9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2em;
}

.track-info[b-3cr6v6j615], .song-info[b-3cr6v6j615] {
    flex: 1;
    min-width: 0;
}

.track-name[b-3cr6v6j615], .song-name[b-3cr6v6j615] {
    color: white;
    font-weight: 500;
    margin: 0 0 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-name[b-3cr6v6j615] {
    font-size: 1em;
}

.song-name[b-3cr6v6j615] {
    font-size: 1.1em;
    font-weight: 600;
}

.track-artist[b-3cr6v6j615], .song-artist[b-3cr6v6j615] {
    color: rgba(255,255,255,0.8);
    margin: 0 0 3px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-artist[b-3cr6v6j615] {
    font-size: 0.9em;
}

.song-artist[b-3cr6v6j615] {
    font-size: 0.95em;
}

.track-album[b-3cr6v6j615], .song-album[b-3cr6v6j615] {
    color: rgba(255,255,255,0.6);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-album[b-3cr6v6j615] {
    font-size: 0.8em;
}

.song-album[b-3cr6v6j615] {
    font-size: 0.85em;
    margin-bottom: 5px;
}

.request-time[b-3cr6v6j615] {
    color: rgba(255,255,255,0.5);
    font-size: 0.8em;
}

/* ===== BUTTONS AND ACTIONS ===== */
.track-actions[b-3cr6v6j615], .song-actions[b-3cr6v6j615] {
    margin-left: 15px;
    flex-shrink: 0;
}

.request-btn[b-3cr6v6j615] {
    background: #FF6B9D;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
    font-weight: 600;
}

    .request-btn:hover[b-3cr6v6j615] {
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(52,152,219,0.4);
    }

.requested-badge[b-3cr6v6j615] {
    background: rgba(46,204,113,0.2);
    color: #2ecc71;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: 600;
    border: 1px solid rgba(46,204,113,0.3);
}

.remove-btn[b-3cr6v6j615] {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    color: #e74c3c;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
}

    .remove-btn:hover[b-3cr6v6j615] {
        background: rgba(231,76,60,0.3);
        transform: scale(1.1);
    }

.clear-all-btn[b-3cr6v6j615] {
    background: rgba(231,76,60,0.2);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 8px;
    padding: 8px 15px;
    color: #e74c3c;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
}

    .clear-all-btn:hover[b-3cr6v6j615] {
        background: rgba(231,76,60,0.3);
        transform: translateY(-1px);
    }

.submit-requests-btn[b-3cr6v6j615] {
    background: #FF6B9D;
    border: none;
    border-radius: 15px;
    padding: 18px 40px;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(52,152,219,0.3);
}

    .submit-requests-btn:hover:not(:disabled)[b-3cr6v6j615] {
        transform: translateY(-3px);
        box-shadow: 0 12px 35px rgba(52,152,219,0.4);
    }

    .submit-requests-btn:disabled[b-3cr6v6j615] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.close-success-btn[b-3cr6v6j615] {
    background: #FF6B9D;
    border: none;
    border-radius: 12px;
    padding: 15px 30px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

    .close-success-btn:hover[b-3cr6v6j615] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(52,152,219,0.4);
    }

/* ===== REQUESTED SONGS SECTION ===== */
.requested-section[b-3cr6v6j615] {
    margin-top: 40px;
}

.section-header[b-3cr6v6j615] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}

.requested-songs-list[b-3cr6v6j615] {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
}

.requested-song-item[b-3cr6v6j615] {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.3s ease;
}

    .requested-song-item:hover[b-3cr6v6j615] {
        background: rgba(255,255,255,0.02);
    }

    .requested-song-item:last-child[b-3cr6v6j615] {
        border-bottom: none;
    }

.song-position[b-3cr6v6j615] {
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    margin-right: 15px;
    flex-shrink: 0;
}

.request-actions[b-3cr6v6j615] {
    
    text-align: center;
    padding: 20px 0;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-3cr6v6j615] {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255,255,255,0.7);
}

.empty-icon[b-3cr6v6j615] {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.7;
}

.empty-state h2[b-3cr6v6j615] {
    color: white;
    font-size: 2em;
    margin-bottom: 15px;
    font-weight: bold;
}

.empty-state p[b-3cr6v6j615] {
    font-size: 1.1em;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ===== MODALS ===== */
.success-overlay[b-3cr6v6j615] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.success-modal[b-3cr6v6j615] {
    background: #1A252F
    ;border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

    .success-modal h3[b-3cr6v6j615] {
        color: white;
        font-size: 1.5em;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .success-modal p[b-3cr6v6j615] {
        color: rgba(255,255,255,0.8);
        margin-bottom: 30px;
        line-height: 1.5;
    }

.success-icon[b-3cr6v6j615] {
    font-size: 4em;
    margin-bottom: 20px;
    color: #28a745;
}

.error-modal[b-3cr6v6j615] {
    border: 1px solid rgba(220,53,69,0.3);
}

.error-icon[b-3cr6v6j615] {
    font-size: 4em;
    margin-bottom: 20px;
    color: #dc3545;
}

.duplicate-info[b-3cr6v6j615] {
    color: rgba(255,255,255,0.6);
    font-size: 0.9em;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* ===== UTILITY CLASSES ===== */
.loading-spinner[b-3cr6v6j615] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-3cr6v6j615 1s linear infinite;
    display: inline-block;
}

.btn-icon[b-3cr6v6j615] {
    font-size: 1.1em;
}
/* _content/BeatBallot.Web/LiveSession/TakeRequests/Listener/TipJarComponent.razor.rz.scp.css */
.tip-jar-container[b-k720dso5bh] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tip-jar-header[b-k720dso5bh] {
    text-align: center;
    margin-bottom: 20px;
}

.tip-jar-title[b-k720dso5bh] {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.tip-jar-message[b-k720dso5bh] {
    font-style: italic;
    opacity: 0.9;
}

.tip-preset-amounts[b-k720dso5bh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.tip-preset-btn[b-k720dso5bh], .tip-custom-btn[b-k720dso5bh] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .tip-preset-btn:hover[b-k720dso5bh], .tip-custom-btn:hover[b-k720dso5bh] {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
    }

.tip-form[b-k720dso5bh] {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.form-group[b-k720dso5bh] {
    margin-bottom: 15px;
}

    .form-group label[b-k720dso5bh] {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
    }

.amount-input[b-k720dso5bh] {
    position: relative;
}

.currency-symbol[b-k720dso5bh] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: #333;
}

.amount-field[b-k720dso5bh] {
    padding-left: 28px;
}

.form-control[b-k720dso5bh] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

    .form-control:focus[b-k720dso5bh] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.tip-form-actions[b-k720dso5bh] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn[b-k720dso5bh] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary[b-k720dso5bh] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-primary[b-k720dso5bh] {
    background: #28a745;
    color: white;
}

.btn:hover[b-k720dso5bh] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn:disabled[b-k720dso5bh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.spinner[b-k720dso5bh] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-k720dso5bh 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin-b-k720dso5bh {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.recent-tips[b-k720dso5bh] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

    .recent-tips h4[b-k720dso5bh] {
        margin-bottom: 15px;
        text-align: center;
    }

.tips-list[b-k720dso5bh] {
    space-y: 10px;
}

.tip-item[b-k720dso5bh] {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.tip-info[b-k720dso5bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.tipper-name[b-k720dso5bh] {
    font-weight: 600;
}

.tip-amount[b-k720dso5bh] {
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.tip-message[b-k720dso5bh] {
    font-style: italic;
    opacity: 0.9;
    font-size: 0.9rem;
}
/* _content/BeatBallot.Web/LiveSession/TakeRequests/Shared/QRTakingRequestsDisplayComponent.razor.rz.scp.css */
/* ===== KEYFRAMES ANIMATIONS ===== */
@keyframes pulse-b-5gy8kclyku {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* ===== BASE STYLES ===== */
.qr-display-page[b-5gy8kclyku] {
    min-height: 100vh;
    background: #1A2042;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qr-container[b-5gy8kclyku] {
    background: #1A2042;
    backdrop-filter: blur(20px);
    border-radius: 30px;
    
    padding: 60px;
    text-align: center;
    max-width: 600px;
    width: 100%;
    
}

.header-section[b-5gy8kclyku] {
    margin-bottom: 50px;
}

.logo[b-5gy8kclyku] {
    font-size: 3.5em;
    font-weight: bold;
    background: #FF6B9D;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.subtitle[b-5gy8kclyku] {
    color: rgba(255,255,255,0.9);
    font-size: 1.4em;
    font-weight: 500;
}

.qr-section[b-5gy8kclyku] {
    margin-bottom: 50px;
}

.qr-code-display[b-5gy8kclyku] {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.qr-placeholder[b-5gy8kclyku] {
    width: 300px;
    height: 300px;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 8px solid white;
}

.qr-grid[b-5gy8kclyku] {
    width: 260px;
    height: 260px;
    position: relative;
    background: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(black 50%, transparent 50%);
    background-size: 20px 20px;
    opacity: 0.8;
}

.qr-pattern[b-5gy8kclyku] {
    position: relative;
    width: 100%;
    height: 100%;
}

.qr-corner[b-5gy8kclyku] {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 8px solid black;
    background: white;
}

    .qr-corner[b-5gy8kclyku]::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 12px;
        width: 24px;
        height: 24px;
        background: black;
    }

    .qr-corner.top-left[b-5gy8kclyku] {
        top: 0;
        left: 0;
    }

    .qr-corner.top-right[b-5gy8kclyku] {
        top: 0;
        right: 0;
    }

    .qr-corner.bottom-left[b-5gy8kclyku] {
        bottom: 0;
        left: 0;
    }

.qr-data[b-5gy8kclyku] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, black 25%, transparent 25%), linear-gradient(-45deg, black 25%, transparent 25%), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%);
    background-size: 10px 10px;
}

.voting-url-display[b-5gy8kclyku] {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.url-text[b-5gy8kclyku] {
    color: #3498db;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: bold;
    word-break: break-all;
}

.instructions-section[b-5gy8kclyku] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    gap: 20px;
}

.instruction-step[b-5gy8kclyku] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.step-number[b-5gy8kclyku] {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

.step-text[b-5gy8kclyku] {
    color: rgba(255,255,255,0.9);
    font-size: 1em;
    text-align: center;
    line-height: 1.3;
}

.live-indicator[b-5gy8kclyku] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    background: rgba(231,76,60,0.2);
    border: 2px solid #e74c3c;
    border-radius: 25px;
    padding: 15px 30px;
}

.live-dot[b-5gy8kclyku] {
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border-radius: 50%;
    animation: pulse-b-5gy8kclyku 2s infinite;
}

.live-text[b-5gy8kclyku] {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.session-info[b-5gy8kclyku] {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.session-label[b-5gy8kclyku] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.session-code[b-5gy8kclyku] {
    color: white;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    font-weight: bold;
}

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

/* Tablet and smaller desktop screens */
@media (max-width: 768px) {
    .logo[b-5gy8kclyku] {
        font-size: 2.5em;
    }

    .subtitle[b-5gy8kclyku] {
        font-size: 1.2em;
    }

    .qr-placeholder[b-5gy8kclyku] {
        width: 250px;
        height: 250px;
    }

    .qr-grid[b-5gy8kclyku] {
        width: 210px;
        height: 210px;
    }

    .instructions-section[b-5gy8kclyku] {
        flex-direction: column;
        gap: 25px;
    }

    .instruction-step[b-5gy8kclyku] {
        flex-direction: row;
        text-align: left;
    }

    .step-number[b-5gy8kclyku] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .step-text[b-5gy8kclyku] {
        text-align: left;
    }

    .url-text[b-5gy8kclyku] {
        font-size: 0.9em;
    }
}

/* Mobile screens */
@media (max-width: 480px) {
    .qr-container[b-5gy8kclyku] {
        padding: 40px 30px;
    }

    .qr-placeholder[b-5gy8kclyku] {
        width: 200px;
        height: 200px;
    }

    .qr-grid[b-5gy8kclyku] {
        width: 160px;
        height: 160px;
    }

    .logo[b-5gy8kclyku] {
        font-size: 2em;
    }

    .subtitle[b-5gy8kclyku] {
        font-size: 1em;
    }

    .url-text[b-5gy8kclyku] {
        font-size: 0.8em;
    }

    .instruction-step[b-5gy8kclyku] {
        flex-direction: column;
        text-align: center;
    }

    .step-text[b-5gy8kclyku] {
        text-align: center;
    }
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/DeeJay/ManageLiveComponent.razor.rz.scp.css */
/* ===== KEYFRAMES ANIMATIONS ===== */

/* Pulse animation for playing indicators and status elements */
@keyframes pulse-b-hz706ndm65 {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ===== BASE LAYOUT ===== */

.manage-live-page[b-hz706ndm65] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* ===== PAGE HEADER ===== */

.page-header[b-hz706ndm65] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 25px;
    background: rgba(0,0,0,0.4);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}

.back-nav[b-hz706ndm65] {
    margin-bottom: 15px;
}

.back-btn[b-hz706ndm65] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 10px 15px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

    .back-btn:hover[b-hz706ndm65] {
        background: rgba(255,255,255,0.2);
        color: white;
        transform: translateX(-3px);
    }

.back-icon[b-hz706ndm65] {
    font-size: 1.2em;
}

.page-title[b-hz706ndm65] {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 15px 0;
    background: #5DADE2; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.session-details[b-hz706ndm65] {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

    .session-details > div[b-hz706ndm65] {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

.label[b-hz706ndm65] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.value[b-hz706ndm65] {
    color: white;
    font-weight: bold;
    font-size: 1.1em;
}

.header-actions[b-hz706ndm65] {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== CONTROL BUTTONS ===== */

.control-btn[b-hz706ndm65] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .control-btn:hover[b-hz706ndm65] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    .control-btn.play[b-hz706ndm65] {
        border-color: #2ecc71;
        color: #2ecc71;
    }

    .control-btn.pause[b-hz706ndm65] {
        border-color: #f39c12;
        color: #f39c12;
    }

    .control-btn.sort.active[b-hz706ndm65] {
        background: rgba(52,152,219,0.2);
        border-color: #3498db;
        color: #3498db;
    }

.stop-btn[b-hz706ndm65] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .stop-btn:hover[b-hz706ndm65] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }

/* ===== QR CODE SECTION ===== */

.qr-code-section[b-hz706ndm65] {
    display: flex;
    gap: 30px;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 25px;
    margin-bottom: 30px;
}

.qr-info[b-hz706ndm65] {
    flex: 1;
}

.qr-title[b-hz706ndm65] {
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.qr-description[b-hz706ndm65] {
    color: rgba(255,255,255,0.8);
    margin: 0 0 20px 0;
    font-size: 0.95em;
}

.voting-url[b-hz706ndm65] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}

.url-label[b-hz706ndm65] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    white-space: nowrap;
}

.voting-link[b-hz706ndm65] {
    background: rgba(0,0,0,0.3);
    color: #3498db;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .voting-link:hover[b-hz706ndm65] {
        background: rgba(52,152,219,0.2);
        color: #2980b9;
    }

.copy-btn[b-hz706ndm65] {
    background: rgba(52,152,219,0.2);
    border: 1px solid rgba(52,152,219,0.3);
    border-radius: 8px;
    padding: 8px;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .copy-btn:hover[b-hz706ndm65] {
        background: rgba(52,152,219,0.3);
        transform: scale(1.1);
    }

.copy-icon[b-hz706ndm65] {
    font-size: 1.1em;
}

.qr-placeholder[b-hz706ndm65] {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
}

.qr-mock[b-hz706ndm65] {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid #333;
    position: relative;
}

.qr-text[b-hz706ndm65] {
    font-weight: bold;
    color: #333;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.session-id[b-hz706ndm65] {
    font-size: 0.7em;
    color: #666;
    font-family: 'Courier New', monospace;
}

/* ===== LIVE STATS ===== */

.live-stats[b-hz706ndm65] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card[b-hz706ndm65] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

    .stat-card:hover[b-hz706ndm65] {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,0.2);
    }

.stat-icon[b-hz706ndm65] {
    font-size: 2.5em;
    opacity: 0.8;
}

.stat-content[b-hz706ndm65] {
    flex: 1;
}

.stat-number[b-hz706ndm65] {
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label[b-hz706ndm65] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== SONGS SECTION ===== */

.songs-section[b-hz706ndm65] {
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.songs-header[b-hz706ndm65] {
    padding: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-hz706ndm65] {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}

.sort-info[b-hz706ndm65] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
}

.sort-indicator[b-hz706ndm65] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.songs-list[b-hz706ndm65] {
    max-height: 60vh;
    overflow-y: auto;
}

/* ===== SONG ITEMS ===== */

.song-item[b-hz706ndm65] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

    .song-item:hover[b-hz706ndm65] {
        background: rgba(255,255,255,0.05);
    }

    .song-item:last-child[b-hz706ndm65] {
        border-bottom: none;
    }

    .song-item.currently-playing[b-hz706ndm65] {
        background: rgba(46,204,113,0.1);
        border-color: rgba(46,204,113,0.3);
    }

.song-position[b-hz706ndm65] {
    width: 40px;
    text-align: center;
    font-weight: bold;
}

.position-number[b-hz706ndm65] {
    color: rgba(255,255,255,0.6);
    font-size: 1.1em;
}

.playing-indicator[b-hz706ndm65] {
    color: #2ecc71;
    font-size: 1.3em;
    animation: pulse-b-hz706ndm65 2s infinite;
}

.song-info[b-hz706ndm65] {
    flex: 1;
    min-width: 0;
}

.song-title[b-hz706ndm65] {
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-artist[b-hz706ndm65] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-stats[b-hz706ndm65] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 80px;
}

.vote-count[b-hz706ndm65] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vote-number[b-hz706ndm65] {
    color: #f39c12;
    font-size: 1.5em;
    font-weight: bold;
}

.vote-label[b-hz706ndm65] {
    color: rgba(255,255,255,0.6);
    font-size: 0.8em;
}

.vote-percentage[b-hz706ndm65] {
    color: rgba(255,255,255,0.5);
    font-size: 0.8em;
}

/* ===== PLAY BUTTON STATES ===== */

.song-actions[b-hz706ndm65] {
    min-width: 120px;
}

.play-btn[b-hz706ndm65] {
    background: rgba(46,204,113,0.2);
    border: 1px solid rgba(46,204,113,0.3);
    border-radius: 8px;
    padding: 8px 15px;
    color: #2ecc71;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    width: 100%;
    justify-content: center;
}

    .play-btn:hover:not(:disabled)[b-hz706ndm65] {
        background: rgba(46,204,113,0.3);
        transform: translateY(-1px);
    }

    .play-btn.active[b-hz706ndm65] {
        background: rgba(46,204,113,0.3);
        cursor: default;
    }

    .play-btn:disabled[b-hz706ndm65] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Pause state styling (when song is playing and button shows "Pause") */
    .play-btn.pause-state[b-hz706ndm65] {
        background: rgba(241,196,15,0.2);
        border-color: rgba(241,196,15,0.3);
        color: #f1c40f;
    }

        .play-btn.pause-state:hover[b-hz706ndm65] {
            background: rgba(241,196,15,0.3);
            transform: translateY(-1px);
        }

    /* Resume state styling (when song is paused and button shows "Resume") */
    .play-btn.resume-state[b-hz706ndm65] {
        background: rgba(52,152,219,0.2);
        border-color: rgba(52,152,219,0.3);
        color: #3498db;
    }

        .play-btn.resume-state:hover[b-hz706ndm65] {
            background: rgba(52,152,219,0.3);
            transform: translateY(-1px);
        }

/* ===== MODAL STYLES ===== */

.modal-overlay[b-hz706ndm65] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.confirmation-modal[b-hz706ndm65] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.modal-header[b-hz706ndm65] {
    background: rgba(231,76,60,0.1);
    border-bottom: 1px solid rgba(231,76,60,0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-hz706ndm65] {
    color: #e74c3c;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0;
}

.close-modal-btn[b-hz706ndm65] {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

    .close-modal-btn:hover[b-hz706ndm65] {
        color: white;
    }

.modal-content[b-hz706ndm65] {
    padding: 30px;
    text-align: center;
}

.warning-icon[b-hz706ndm65] {
    font-size: 3em;
    margin-bottom: 20px;
    color: #e74c3c;
}

.warning-message[b-hz706ndm65] {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.5;
}

.session-summary[b-hz706ndm65] {
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
    font-size: 0.95em;
}

    .session-summary strong[b-hz706ndm65] {
        color: white;
        font-weight: bold;
    }

.modal-actions[b-hz706ndm65] {
    display: flex;
    gap: 15px;
    padding: 0 30px 30px 30px;
}

.cancel-btn[b-hz706ndm65], .confirm-btn[b-hz706ndm65] {
    flex: 1;
    padding: 15px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1em;
}

.cancel-btn[b-hz706ndm65] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

    .cancel-btn:hover[b-hz706ndm65] {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
    }

.confirm-btn.stop[b-hz706ndm65] {
    background: linear-gradient(45deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

    .confirm-btn.stop:hover[b-hz706ndm65] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(231,76,60,0.4);
    }
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/HeaderComponent.razor.rz.scp.css */
.header[b-ncsllwgtz9] {
    background: #1A2042;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .header[b-ncsllwgtz9]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: #1A2042;
        animation: pulse 4s ease-in-out infinite;
    }

.logo[b-ncsllwgtz9] {
    font-size: 2.5em;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.subtitle[b-ncsllwgtz9] {
    color: rgba(255,255,255,0.9);
    margin-top: 10px;
    font-size: 1.1em;
    position: relative;
    z-index: 2;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/LiveStatsComponent.razor.rz.scp.css */
.stats[b-r4vznqsns8] {
    background: rgba(0,0,0,0.6);
    padding: 15px 20px;
    color: white;
    text-align: center;
    margin-top: 20px;
}

.stats-title[b-r4vznqsns8] {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.stats-grid[b-r4vznqsns8] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.stat-item[b-r4vznqsns8] {
    text-align: center;
}

.stat-number[b-r4vznqsns8] {
    font-size: 1.5em;
    font-weight: bold;
    color: #f39c12;
}

.stat-label[b-r4vznqsns8] {
    font-size: 0.8em;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/NowPlayingComponent.razor.rz.scp.css */
.now-playing[b-i4whz0uxnl] {
    padding: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

    .now-playing h3[b-i4whz0uxnl] {
        margin-bottom: 10px;
        color: #f39c12;
        font-size: 1.2em;
    }

.current-song[b-i4whz0uxnl] {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.artist-name[b-i4whz0uxnl] {
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}

.time-info[b-i4whz0uxnl] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin-bottom: 15px;
}

.progress-bar[b-i4whz0uxnl] {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.progress[b-i4whz0uxnl] {
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f39c12);
    transition: width 0.3s ease;
    animation: progress-flow 3s ease-in-out infinite;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/OptionsMenuComponent.razor.rz.scp.css */
.options-menu[b-ykgwmj1hrf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

    .options-menu.active[b-ykgwmj1hrf] {
        display: flex;
    }

.options-content[b-ykgwmj1hrf] {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 20px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    position: relative;
}

.options-header[b-ykgwmj1hrf] {
    text-align: center;
    margin-bottom: 25px;
}

.options-title[b-ykgwmj1hrf] {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.close-btn[b-ykgwmj1hrf] {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

    .close-btn:hover[b-ykgwmj1hrf] {
        opacity: 1;
    }

.current-votes[b-ykgwmj1hrf] {
    background: rgba(243,156,18,0.2);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.current-votes-number[b-ykgwmj1hrf] {
    color: #f39c12;
    font-size: 2em;
    font-weight: bold;
}

.current-votes-label[b-ykgwmj1hrf] {
    color: white;
    margin-top: 5px;
}

.vote-package[b-ykgwmj1hrf] {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .vote-package:hover[b-ykgwmj1hrf] {
        border-color: #f39c12;
        background: rgba(255,255,255,0.1);
    }

.package-header[b-ykgwmj1hrf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.package-votes[b-ykgwmj1hrf] {
    color: #f39c12;
    font-size: 1.2em;
    font-weight: bold;
}

.package-price[b-ykgwmj1hrf] {
    color: white;
    font-size: 1.1em;
    font-weight: bold;
}

.package-description[b-ykgwmj1hrf] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/SongComponent.razor.rz.scp.css */
.song-option[b-qlyhg1h8v9] {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    .song-option:hover[b-qlyhg1h8v9] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        background: rgba(255,255,255,0.1);
    }

    .song-option.voted[b-qlyhg1h8v9] {
        border-color: #f39c12;
        background: linear-gradient(45deg, rgba(231,76,60,0.3), rgba(243,156,18,0.3));
        animation: vote-flash 2s ease-out;
    }

.song-info[b-qlyhg1h8v9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.song-details h4[b-qlyhg1h8v9] {
    font-size: 1.1em;
    margin-bottom: 5px;
    margin: 0;
}

.song-details p[b-qlyhg1h8v9] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin: 0;
    margin-top: 5px;
}

.vote-count[b-qlyhg1h8v9] {
    background: rgba(243,156,18,0.9);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 40px;
    text-align: center;
}

.vote-btn[b-qlyhg1h8v9] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border: none;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 15px;
    font-size: 0.9em;
}

    .vote-btn:hover:not(:disabled)[b-qlyhg1h8v9] {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(231,76,60,0.4);
    }

    .vote-btn:disabled[b-qlyhg1h8v9] {
        background: rgba(255,255,255,0.3);
        cursor: not-allowed;
        transform: none;
    }

    .vote-btn.multi-vote[b-qlyhg1h8v9] {
        background: linear-gradient(45deg, #27ae60, #2ecc71);
        animation: pulse-green 2s ease-in-out infinite;
    }
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/SongListComponent.razor.rz.scp.css */
.voting-section[b-408pgswwpb] {
    padding: 20px;
    overflow-y: auto;
}

    .voting-section[b-408pgswwpb]::-webkit-scrollbar {
        width: 6px;
    }

    .voting-section[b-408pgswwpb]::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }

    .voting-section[b-408pgswwpb]::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, #e74c3c, #f39c12);
        border-radius: 3px;
    }

        .voting-section[b-408pgswwpb]::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(45deg, #c0392b, #d68910);
        }

.section-title[b-408pgswwpb] {
    color: white;
    font-size: 1.3em;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.votes-remaining[b-408pgswwpb] {
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

.options-btn[b-408pgswwpb] {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.3s ease;
    margin-left: 10px;
}

    .options-btn:hover[b-408pgswwpb] {
        background: rgba(255,255,255,0.2);
        transform: scale(1.05);
    }

.song-container[b-408pgswwpb] {
    /* Container for all song components */
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/VoteComponent.razor.rz.scp.css */
/* Component-specific styles only */
.voting-wrapper[b-uxt9pmq8k3] {
    position: relative;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/VotingSectionComponent.razor.rz.scp.css */
.voting-wrapper[b-rbydag5ehe] {
    position: relative;
}
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Listener/Vote/VotingStoppedNotificationComponent.razor.rz.scp.css */
.voting-stopped-overlay[b-z4eamqq561] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1A2042;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    flex-direction: column;
}

.voting-stopped-modal[b-z4eamqq561] {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    margin: 1rem;
    margin-top: -25%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

.voting-stopped-icon[b-z4eamqq561] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.voting-stopped-modal h2[b-z4eamqq561] {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.voting-stopped-modal p[b-z4eamqq561] {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.btn-primary[b-z4eamqq561] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
    transition: background-color 0.2s;
}

    .btn-primary:hover[b-z4eamqq561] {
        background-color: #0056b3;
    }
/* _content/BeatBallot.Web/LiveSession/VotingExperience/Shared/QRDisplayComponent.razor.rz.scp.css */
/* ===== KEYFRAMES ANIMATIONS ===== */
@keyframes pulse-b-28txgyfi4e {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* ===== BASE STYLES ===== */
.qr-display-page[b-28txgyfi4e] {
    min-height: 100vh;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.qr-container[b-28txgyfi4e] {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    border: 2px solid rgba(255,255,255,0.1);
    padding: 60px;
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

.header-section[b-28txgyfi4e] {
    margin-bottom: 50px;
}

.logo[b-28txgyfi4e] {
    font-size: 3.5em;
    font-weight: bold;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.subtitle[b-28txgyfi4e] {
    color: rgba(255,255,255,0.9);
    font-size: 1.4em;
    font-weight: 500;
}

.qr-section[b-28txgyfi4e] {
    margin-bottom: 50px;
}

.qr-code-display[b-28txgyfi4e] {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.qr-placeholder[b-28txgyfi4e] {
    width: 300px;
    height: 300px;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 8px solid white;
}

.qr-grid[b-28txgyfi4e] {
    width: 260px;
    height: 260px;
    position: relative;
    background: linear-gradient(90deg, black 50%, transparent 50%), linear-gradient(black 50%, transparent 50%);
    background-size: 20px 20px;
    opacity: 0.8;
}

.qr-pattern[b-28txgyfi4e] {
    position: relative;
    width: 100%;
    height: 100%;
}

.qr-corner[b-28txgyfi4e] {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 8px solid black;
    background: white;
}

    .qr-corner[b-28txgyfi4e]::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 12px;
        width: 24px;
        height: 24px;
        background: black;
    }

    .qr-corner.top-left[b-28txgyfi4e] {
        top: 0;
        left: 0;
    }

    .qr-corner.top-right[b-28txgyfi4e] {
        top: 0;
        right: 0;
    }

    .qr-corner.bottom-left[b-28txgyfi4e] {
        bottom: 0;
        left: 0;
    }

.qr-data[b-28txgyfi4e] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, black 25%, transparent 25%), linear-gradient(-45deg, black 25%, transparent 25%), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%);
    background-size: 10px 10px;
}

.voting-url-display[b-28txgyfi4e] {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.url-text[b-28txgyfi4e] {
    color: #3498db;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: bold;
    word-break: break-all;
}

.instructions-section[b-28txgyfi4e] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    gap: 20px;
}

.instruction-step[b-28txgyfi4e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.step-number[b-28txgyfi4e] {
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #e74c3c, #f39c12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}

.step-text[b-28txgyfi4e] {
    color: rgba(255,255,255,0.9);
    font-size: 1em;
    text-align: center;
    line-height: 1.3;
}

.live-indicator[b-28txgyfi4e] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    background: rgba(231,76,60,0.2);
    border: 2px solid #e74c3c;
    border-radius: 25px;
    padding: 15px 30px;
}

.live-dot[b-28txgyfi4e] {
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border-radius: 50%;
    animation: pulse-b-28txgyfi4e 2s infinite;
}

.live-text[b-28txgyfi4e] {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.session-info[b-28txgyfi4e] {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
}

.session-label[b-28txgyfi4e] {
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.session-code[b-28txgyfi4e] {
    color: white;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    font-weight: bold;
}

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

/* Tablet and smaller desktop screens */
@media (max-width: 768px) {
    .logo[b-28txgyfi4e] {
        font-size: 2.5em;
    }

    .subtitle[b-28txgyfi4e] {
        font-size: 1.2em;
    }

    .qr-placeholder[b-28txgyfi4e] {
        width: 250px;
        height: 250px;
    }

    .qr-grid[b-28txgyfi4e] {
        width: 210px;
        height: 210px;
    }

    .instructions-section[b-28txgyfi4e] {
        flex-direction: column;
        gap: 25px;
    }

    .instruction-step[b-28txgyfi4e] {
        flex-direction: row;
        text-align: left;
    }

    .step-number[b-28txgyfi4e] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .step-text[b-28txgyfi4e] {
        text-align: left;
    }

    .url-text[b-28txgyfi4e] {
        font-size: 0.9em;
    }
}

/* Mobile screens */
@media (max-width: 480px) {
    .qr-container[b-28txgyfi4e] {
        padding: 40px 30px;
    }

    .qr-placeholder[b-28txgyfi4e] {
        width: 200px;
        height: 200px;
    }

    .qr-grid[b-28txgyfi4e] {
        width: 160px;
        height: 160px;
    }

    .logo[b-28txgyfi4e] {
        font-size: 2em;
    }

    .subtitle[b-28txgyfi4e] {
        font-size: 1em;
    }

    .url-text[b-28txgyfi4e] {
        font-size: 0.8em;
    }

    .instruction-step[b-28txgyfi4e] {
        flex-direction: column;
        text-align: center;
    }

    .step-text[b-28txgyfi4e] {
        text-align: center;
    }
}
/* _content/BeatBallot.Web/Shared/ErrorModal.razor.rz.scp.css */
.modal[b-4uv38msb7w] {
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modal-content[b-4uv38msb7w] {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

.modal-header[b-4uv38msb7w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body[b-4uv38msb7w] {
    margin-top: 20px;
}