/* =========================================
   1. VARIÁVEIS E RESET
   ========================================= */
:root {
    --primary-color: #0277BD;
    --primary-hover: #01579B;
    --success-color: #2E7D32;
    --success-bg: #E8F5E9;
    --success-border: #C8E6C9;
    --danger-color: #D50000;
    --danger-bg: #FFEBEE;
    --neon-red: #FF1744;
    --warning-bg: #FFF3E0;
    --warning-text: #E65100;
    --text-dark: #37474F;
    --text-light: #555;
    --bg-body: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-light: #FAFAFA;
    --border-color: #E0E0E0;
    --border-radius: 8px;
    /* Standardized radius */
}

body {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--bg-body);
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.hidden {
    display: none !important;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    box-sizing: border-box;
}

/* Margin Top for fixed headers */
.container.main-content {
    margin-top: 80px;
}

h1,
h2,
h3 {
    text-align: center;
    color: var(--text-dark);
}

/* =========================================
   2. COMPONENTES GLOBAIS
   ========================================= */

/* Buttons */
button,
.btn {
    cursor: pointer;
    border: none;
    font-weight: 600;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1rem;
    transition: 0.2s;
    text-decoration: none;
    display: inline-block;
}

button:hover,
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

/* Inputs */
input,
textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #CFD8DC;
    border-radius: 6px;
    background-color: #FAFAFA;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* Login Components (Shared) */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background-color: #eceff1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
}

.login-box {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-top: 5px solid var(--primary-color);
}

.login-error {
    color: var(--danger-color);
    font-weight: bold;
    margin-top: 15px;
    min-height: 20px;
    font-size: 0.9em;
}

/* =========================================
   3. HEADER & NAV
   ========================================= */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 500px);
    backdrop-filter: blur(3px);
    padding: 5px 10px;
    z-index: 2000;
    display: flex;
    gap: 5px;
}

#admin-main-content {
    margin-top: 60px;
    /* Clear fixed navbar */
}

#main-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: var(--border-radius);
    font-size: 0.95em;
    background: rgba(255, 255, 255, 0.08);
    transition: 0.5s;
}

#main-nav a:hover {
    background: rgba(255, 255, 255, 0.2);
}

#sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    padding: 10px;
}

/* Adjustment when sticky header is present */
#sticky-header+.container {
    margin-top: 100px;
}

/* =========================================
   4. HOME PAGE (Lista de Rifas)
   ========================================= */
.banner-wrapper {
    background: linear-gradient(to right, #050516 50%, #2f2db8 50%);
    margin-bottom: 5px;
    height: 150px;
}

.hero-banner {
    background: url('images/banner.png') no-repeat center;
    background-size: 650px;
    color: white;
    text-align: center;
    height: 150px;
}

.rifas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.rifa-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}

.rifa-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.rifa-img-container {
    position: relative;
}

.rifa-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.rifa-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rifa-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #333;
    text-align: left;
}

.rifa-desc {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    flex: 1;
}

.rifa-price {
    font-size: 1.3em;
    color: var(--success-color);
    font-weight: bold;
    margin-bottom: 10px;
}

.btn-ver {
    display: block;
    text-align: center;
    background-color: #0288D1;
    color: white;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn-acompanhar-destaque {
    display: block;
    text-align: center;
    margin-top: 15px;
    /* Revert to top margin only */
    padding: 10px 20px;
    background-color: #FF9800;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background-color 0.2s;
    width: fit-content;
    /* Ensure it doesn't stretch */
}

.btn-acompanhar-destaque:hover {
    background-color: #F57C00;
    transform: translateY(-2px);
}

/* Sold Out Styles */
.rifa-card.esgotada {
    position: relative;
    opacity: 0.9;
}

.rifa-card.esgotada::before {
    content: 'ESGOTADO';
    position: absolute;
    top: 20px;
    left: -35px;
    transform: rotate(-45deg);
    background-color: #FF9800;
    color: white;
    padding: 5px 40px;
    font-weight: bold;
    font-size: 0.9em;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rifa-card.esgotada .btn-ver {
    background-color: #555;
    pointer-events: none;
    text-decoration: line-through;
}

.rifa-card.esgotada .rifa-img {
    filter: grayscale(100%);
}

.rifa-card.esgotada .rifa-price,
.rifa-card.esgotada .rifa-title {
    color: #757575;
}

/* Hide Esgotadas Logic */
.rifas-grid.ocultar-esgotadas .rifa-card.esgotada {
    display: none !important;
}

.badge-data {
    background-color: #333;
    color: #fff;
    padding: 5px;
    font-size: 0.8em;
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}

/* =========================================
   5. BUY PAGE (Detalhes e Compra)
   ========================================= */
.rifa-detail {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    background: #E3F2FD;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #BBDEFB;
    align-items: flex-start;
}

/* Image Mask Wrapper */
.detail-img-wrapper {
    width: 100%;
    max-width: 300px;
    height: 200px;
    border-radius: 8px;
    /* Standard Project Radius */
    overflow: hidden;
    /* The Mask */
    background-color: #ccc;
    flex-shrink: 0;
    /* Prevent shrinking in flex container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.detail-info {
    flex: 1;
}

.detail-info h1 {
    text-align: left;
    margin-top: 0;
    color: #0277BD;
    font-size: 1.8em;
}

.detail-desc {
    color: #555;
    margin-bottom: 15px;
    white-space: pre-line;
}

/* Form Styles */
.form-container {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #fafafa;
}

/* Fix spacing for fixed nav on buy page */
#page-comprar .container {
    margin-top: 80px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

/* Summary Box */
.summary-container {
    border: 1px solid var(--success-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #ffffff;
    /* Clean White instead of light green */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.box-numeros-selecionados {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    min-height: 40px;
    margin-bottom: 15px;
}

.box-numeros-selecionados span {
    background-color: #00B0FF;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
}

.summary-total {
    font-size: 1.6em;
    /* border-top: 2px dashed var(--success-border); */
    /* Removed border */
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    /* Stack label and value */
    align-items: flex-end;
    /* Align to right */
    justify-content: center;
    margin-bottom: 10px;
}

.botao-comprar {
    display: block;
    width: auto;
    /* Revert full width */
    min-width: 200px;
    margin: 10px 0 0 auto;
    /* Align Right */
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background-color: #00C853;
    /* Solid Green */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    /* Subtler shadow */
    transition: background 0.2s;
    text-align: center;
}

.botao-comprar:hover:not(:disabled) {
    background-color: #009624;
    /* Darker on hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.botao-comprar:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Toolbar Controls */
.toolbar-rifa {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

/* Toolbar Groups */
.atalhos-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-atalho {
    background: #546E7A;
    color: white;
    width: 72px;
    /* Fixed square width */
    height: 72px;
    /* Fixed square height */
    padding: 0;
    /* Center content */
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 600;
    transition: background 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-atalho:hover {
    background: #455A64;
}

.qtd-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    /* More gap */
}

.btn-ajuste {
    background: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    width: 72px;
    /* Doubled size */
    height: 72px;
    /* Doubled size */
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
    /* Larger icon */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-ajuste:hover {
    background: #e0e0e0;
}

#inputAleatorio {
    width: 100px;
    /* Slightly wider */
    text-align: center;
    margin: 0;
    height: 72px;
    /* Doubled height */
    font-size: 1.5rem;
    /* Larger text */
    font-weight: bold;
    -moz-appearance: textfield;
    /* Firefox */
}

/* Hide spin buttons */
#inputAleatorio::-webkit-outer-spin-button,
#inputAleatorio::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bottom Tools (Manual Input & Clear) */
.bottom-tools-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.manual-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    /* Border moves to wrapper */
    border-radius: 8px;
    /* Standard Radius */
    background: #fff;
    height: 45px;
    /* Fixed height for alignment */
    padding-right: 6px;
    /* Space for button on right */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Subtle depth */
}

#inputManual {
    width: 100%;
    height: 100%;
    padding: 0 10px 0 15px;
    /* Left padding, Right padding for text flow */
    border: none;
    /* Remove input border */
    border-radius: 0;
    font-size: 1rem;
    outline: none;
    background: transparent;
    flex: 1;
}

#btnManual {
    position: static;
    /* No longer absolute */
    transform: none;
    background: #757575;
    /* Standard Gray */
    color: white;
    border: none;
    border-radius: 6px;
    width: 40px;
    /* Sized to fit nice */
    height: 34px;
    /* Slightly shorter than container */
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

#btnManual:hover {
    background: #616161;
}

.btn-limpar {
    background: #FF5252;
    color: white;
    border: 1px solid #D32F2F;
    /* Thin border added */
    height: 45px;
    /* Exactly matching input height */
    padding: 0 20px;
    /* Comfortable padding */
    border-radius: 8px;
    /* Standard Radius */
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    white-space: nowrap;
    font-size: 0.9rem;
}

.btn-limpar:hover {
    background: #FF1744;
}

.box-numeros-selecionados span {
    background-color: #00B0FF;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
}

/* =========================================
   6. GRID LAYOUTS (ADMIN VS BUY)
   ========================================= */
/* Common List Styles */
#participantList {
    list-style: none;
    padding: 0 0 25px 0;
    /* Bottom padding added */
    margin: 0;
}

#participantList li {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00B0FF;
    /* Requested Vibrant Blue */
    color: white;
    font-weight: bold;
    border-radius: 0;
    /* Perfectly Sharp/Square */
    border: 1px solid #0091EA;
    cursor: pointer;
    font-size: 0.8em;
    user-select: none;
    aspect-ratio: 1 / 1;
    /* Force Square Shape */
    transition: transform 0.2s, background 0.2s;
}

#participantList li:hover {
    transform: scale(1.1);
    z-index: 2;
    background: #0091EA;
}

#participantList li.selecionado {
    background-color: #00E676;
    /* More Vibrant Lime Green */
    color: white;
    border-color: #00C853;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.8);
    /* Stronger Glow */
    transform: scale(1.05);
    z-index: 1;
}

#participantList li.ocupado {
    background-color: #cfd8dc;
    color: #90a4ae;
    cursor: not-allowed;
    text-decoration: none;
    border-color: #b0bec5;
    opacity: 0.8;
}

#participantList li.eliminado {
    background-color: #EEEEEE;
    color: #BDBDBD;
    border-color: #E0E0E0;
    text-decoration: line-through;
    opacity: 0.6;
    transform: scale(0.95);
}

#participantList li.vencedor {
    background-color: #00E676;
    border-color: #00C853;
    color: #003300;
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.6);
    animation: pulse 1s infinite;
}

/* GRID BUY: 20 Columns Fixed */
#participantList.grid-buy {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 3px;
}

#participantList.grid-buy li {
    /* Height automatic via aspect-ratio */
}

/* Modes for Buy Grid */
#participantList.modo-mini {
    grid-template-columns: repeat(20, 1fr);
    gap: 2px;
}

#participantList.modo-mini li {
    height: 20px;
    font-size: 0;
}

#participantList.modo-micro {
    grid-template-columns: repeat(25, 1fr);
    gap: 1px;
}

#participantList.modo-micro li {
    height: 10px;
    font-size: 0;
    border: none;
}

/* GRID ADMIN: Auto Fill */
#participantList.grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 6px;
    padding: 15px;
}

#participantList.grid-admin li {
    height: 35px;
    font-size: 0.9em;
}

/* =========================================
   7. ADMIN DASHBOARD & TABLES
   ========================================= */
.lista-rifas-admin {
    list-style: none;
    padding: 0;
}

.item-rifa-admin {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rifa-progress-wrapper {
    margin-top: 10px;
    width: 250px;
    background: #f5f5f5;
    padding: 3px;
    border-radius: 10px;
}

.rifa-list-fill {
    height: 8px;
    background: #4CAF50;
    border-radius: 5px;
}

/* Dashboard Split */
.admin-dashboard-row,
.game-split-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.admin-col-main,
.game-col-left {
    flex: 2;
    height: 550px;
    display: flex;
    flex-direction: column;
}

.admin-col-side,
.game-col-right {
    flex: 1;
    height: 550px;
    display: flex;
    flex-direction: column;
}



/* UNIFIED CARD STYLE */
.admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

/* Backward compatibility or specific override if needed */


/* Inherit height for top row components */
.painel-rifa,
.live-feed-container {
    height: 100%;
}

#liveFeedBox {
    padding-bottom: 10px;
    /* Breathing room for last item */
    scroll-behavior: smooth;
    /* Smooth scroll INSIDE the box only */
    overflow-y: auto;
    /* Essential for independent scrolling */
}

.painel-rifa-header,
.live-feed-container .painel-rifa-header {
    padding: 0 15px;
    /* Adjust padding for fixed height */
    height: 60px;
    /* Enforce same height */
    background: #FAFAFA;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.painel-rifa-header h2 {
    margin: 0;
    font-size: 1.25em;
}

/* .live-feed-container h2 removed to fix visibility */

.panel-controls {
    display: flex;
    gap: 8px;
}

/* Feed Items */
/* Feed Items */
.feed-message {
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: #fff;
    margin-bottom: 4px;
    animation: fadeIn 0.4s ease-out;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    border-left: 4px solid #ddd;
    /* Default fallback */
}


/* Tipos de Mensagem - FUNDO BRANCO AGORA */
.feed-survivor,
.feed-batch {
    background: #fff;
}

.feed-death {
    background: #FFEBEE;
    /* Red 50 - Soft Red */
    border-left-color: #F44336;
    /* Red 500 */
}

/* System Messages (Gray) */
.feed-system,
.feed-status {
    background: #eee;
    border-left-color: #999;
    font-weight: bold;
    animation: blinkStatus 0.5s ease-in-out 2;
    /* Blink 2 times */
}

/* -- RIGHT SIDEBAR (Feed) -- */
.dash-right {
    width: 320px;
    border-left: 1px solid #ddd;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    /* Ensure container doesn't spill */
}

.dash-right .live-feed-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-right #liveFeedBox {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 10px;
    scroll-behavior: smooth;
}

/* Enhanced Blink for visibility */
@keyframes blinkStatus {

    0%,
    100% {
        background-color: #eee;
    }

    50% {
        background-color: #ccc;
    }

    /* Gray flash */
}

/* 12 Random Accent Colors for Borders */
/* 12 Random Accent Colors for Borders */
.feed-accent-0 {
    border-left-color: #F44336;
    color: #D32F2F;
}

/* Red */
.feed-accent-1 {
    border-left-color: #E91E63;
    color: #C2185B;
}

/* Pink */
.feed-accent-2 {
    border-left-color: #9C27B0;
    color: #7B1FA2;
}

/* Purple */
.feed-accent-3 {
    border-left-color: #673AB7;
    color: #512DA8;
    color: #512DA8;
}

/* --- UNIFIED DASHBOARD (3-Column: Flex) --- */
.unified-dashboard {
    display: flex;
    flex-direction: row;
    height: 650px;
    /* Base height */
    max-height: 80vh;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Fullscreen Behavior */
.unified-dashboard:fullscreen {
    height: 100vh;
    max-height: none;
    width: 100vw;
    border: none;
    border-radius: 0;
    margin: 0;
}

.unified-dashboard:-webkit-full-screen {
    height: 100vh;
    max-height: none;
    width: 100vw;
    border: none;
    border-radius: 0;
    margin: 0;
}

/* Collapsed State for Unified Dashboard */
.unified-dashboard.collapsed {
    height: auto !important;
    min-height: 60px;
    overflow: hidden;
}

.unified-dashboard.collapsed .dash-left,
.unified-dashboard.collapsed .dash-right {
    display: none;
}

.unified-dashboard.collapsed .dash-center #participantList {
    display: none;
}

.unified-dashboard.collapsed .dash-center {
    flex: auto;
    height: 60px;
    background: transparent;
}

/* -- LEFT SIDEBAR (Stats/Info) -- */
/* Mimicking #game-sidebar from sorteio.html */
.dash-left {
    width: 260px;
    background: #fff;
    /* Match other panels */
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding: 0;
    /* No padding so header touches edges */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
    flex-shrink: 0;
    overflow-y: auto;
}

/* Custom h2 removed to use standard .painel-rifa-header */

/* -- CENTER (Game) -- */
.dash-center {
    flex: 1;
    /* Takes remaining space */
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dash-center .painel-rifa {
    height: 100%;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
    /* Ensure it behaves as a flex column to fill properly */
    display: flex;
    flex-direction: column;
}

.dash-center #participantList {
    flex: 1;
    overflow: hidden;
    /* Prevent list from pushing bounds */
    display: block;
    /* Canvas container needs block */
    position: relative;
    padding: 0;
    margin: 1px;
    /* "Practically at the limit" */
}

/* -- RIGHT SIDEBAR (Feed) -- */
.dash-right {
    width: 320px;
    /* Slightly wider for messages */
    border-left: 1px solid #ddd;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.dash-right .live-feed-container {
    height: 100%;
    width: 100%;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}





/* Deep Purple */
.feed-accent-4 {
    border-left-color: #3F51B5;
    color: #303F9F;
}

/* Indigo */
.feed-accent-5 {
    border-left-color: #2196F3;
    color: #1976D2;
}

/* Blue */
.feed-accent-6 {
    border-left-color: #03A9F4;
    color: #0288D1;
}

/* Light Blue */
.feed-accent-7 {
    border-left-color: #00BCD4;
    color: #0097A7;
}

/* Cyan */
.feed-accent-8 {
    border-left-color: #009688;
    color: #00796B;
}

/* Teal */
.feed-accent-9 {
    border-left-color: #FF5722;
    color: #E64A19;
}

/* Deep Orange */
.feed-accent-10 {
    border-left-color: #795548;
    color: #5D4037;
}

/* Brown */
.feed-accent-11 {
    border-left-color: #FF9800;
    color: #F57C00;
}

/* Orange */

/* Make strong tags inherit or use slightly darker shade if needed, but inheriting is fine */
.feed-message strong {
    color: inherit;
    font-weight: 700;
}

.feed-winner {
    background: #e6ffea;
    /* Light green background */
    border-left: 4px solid #00C853;
    border: 1px solid #00C853;
    font-size: 16px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 200, 68, 0.2);
}

.feed-winner .feed-user {
    color: #006400;
    /* Dark green text for winner name */
}

/* Cemitério */
.eliminados-box {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #ffffff;
    min-height: 100px;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin: 15px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Inner shadow for depth */
}

.eliminados-box span {
    width: 40px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #FFEBEE;
    color: var(--danger-color);
    font-weight: bold;
    border: 1px solid #FFCDD2;
    border-radius: 4px;
    font-family: monospace;
}

/* =========================================
   8. ANIMATIONS & SORTEIO OVERLAY
   ========================================= */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* =========================================
   9. SHARED STATUS STYLES (Admin & Sorteio)
   ========================================= */
.stat-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.stat-label {
    display: block;
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    color: #333;
}

/* Specific Value Colors */
.val-vivos {
    color: #ff9800;
}

.val-status {
    color: #0277BD;
    font-size: 1rem;
}

.val-timer {
    color: #2E7D32;
    font-size: 2rem;
    letter-spacing: 2px;
}

.vencedor-mode .val-status {
    color: #2E7D32;
    animation: pulse 1s infinite;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

/* =========================================
   10. ADMIN SIDEBAR BUTTONS
   ========================================= */
.btn-sidebar-action {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-transform: uppercase;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-sidebar-action:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-start,
.btn-reload {
    background-color: #efefef;
    /* Standard Gray to match other buttons */
    color: #333;
    border: none;
    /* Match global button style */
}

.btn-start:hover,
.btn-reload:hover {
    background-color: #e0e0e0;
}


@keyframes explosao {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3) rotate(10deg);
        background-color: var(--neon-red);
        color: white;
    }

    100% {
        transform: scale(0.95);
    }
}

#participantList li.explodindo {
    animation: explosao 0.5s ease-out;
    position: relative;
    z-index: 10;
}

#participantList li.piscando {
    background-color: #fffb96 !important;
    border-color: #e6c000 !important;
    transform: scale(1.1) !important;
}

/* Status Box Overlay */
.status-box {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    background-color: #E3F2FD;
    color: #00568c;
    border: 1px solid #90CAF9;
}

.status-box.rodando {
    background-color: #FCE4EC;
    color: #c20045;
    border-color: #F50057;
}

/* Participant List Expansion */
.btn-toggle-details {
    background: #2196F3;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    /* Standard square with rounded corners */
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
    margin: 0 auto;
    /* Center button in cell */
}

.btn-toggle-details:hover {
    background: #1976D2;
}

.participant-numbers-row {
    background: #E3F2FD;
}

#participantList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    padding-bottom: 40px;
    /* Space for fixed sticker */
    list-style: none;
    justify-content: center;
}

.participant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
}

.tag-numero {
    background: #fff;
    border: 1px solid #90CAF9;
    color: #1565C0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
}

/* Table Grid Styles */
#tabelaParticipantes {
    width: 100%;
    border-collapse: collapse;
}

#tabelaParticipantes th,
#tabelaParticipantes td {
    border: 1px solid var(--border-color);
    /* Match panel border */
    padding: 8px;
}

#tabelaParticipantes th {
    background-color: #f2f2f2;
    text-align: left;
}

#tabelaParticipantes tr:hover {
    background-color: #f5f5f5;
}

/* =========================================
   9. MEDIA QUERIES
   ========================================= */
@media (max-width: 900px) {
    .rifa-detail {
        flex-direction: column;
    }

    .detail-img-wrapper {
        max-width: 100%;
        height: auto;
        /* Allow height to adjust or keep fixed? If we want a mask, maybe fixed height is better on mobile or aspect ratio. User said "mask... rounded borders". Let's stick to standard responsive behavior but on the wrapper */
        height: 200px;
        /* Keep fixed height for consistency or auto? index cards have fixed height. Let's keep 200px or make it flexible. Previous code was height: auto. If I use height auto on a wrapper with no content size, it might collapse if img is absolute, but img is block.  */
        /* Actually, if I want a nice mask, fixed height is safer to force the crop. */
        width: 100%;
    }

    .btn-acompanhar-destaque {
        margin: 15px auto 0 auto;
        /* Center on mobile */
    }

    .admin-dashboard-row,
    .game-split-row {
        flex-direction: column;
        height: auto;
    }

    .admin-col-main,
    .admin-col-side,
    .game-col-left,
    .game-col-right {
        width: 100%;
        height: auto;
    }

    #participantList.grid-buy {
        grid-template-columns: repeat(10, 1fr);
    }

    #participantList {
        height: auto;
    }

    .live-feed-box {
        flex: 1;
        height: 100% !important;
        max-height: none !important;
        overflow-y: auto;
    }

    #sticky-header {
        top: 50px !important;
    }

    /* --- MOBILE UNIFIED DASHBOARD --- */
    .unified-dashboard {
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
    }

    .dash-left,
    .dash-center,
    .dash-right {
        width: 100% !important;
        height: auto !important;
        border: none !important;
        border-bottom: 1px solid #ddd !important;
    }

    .dash-left {
        order: 1;
        overflow-y: visible;
        /* Deixar crescer conforme status */
        background: #f0f0f0;
        /* Diferenciar levemente */
    }

    /* Ocultar cabeçalho do status no mobile para economizar espaço */
    .dash-left .painel-rifa-header {
        display: none;
    }

    /* Target the content div inside dash-left */
    /* Container do Status - Mobile */
    .dash-left>div:not(.painel-rifa-header) {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        /* Duas linhas */
        justify-content: space-between;
        align-items: center;
        overflow-x: hidden;
        /* Evitar scroll */
        padding: 5px !important;
        gap: 5px;
    }

    /* Regra Geral para Box */
    .dash-left .stat-box {
        margin: 0;
        padding: 5px;
        height: 55px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* LINHA 1: Timer, Vivos, Status */
    /* Timer e Vivos (25% cada = 50% juntos) */
    .dash-left .stat-box:nth-child(1),
    .dash-left .stat-box:nth-child(2) {
        flex: 1 1 23%;
        /* Flex 1 para ocupar 1/4 cada */
        order: 1;
    }

    /* Status (50%) - Alinha a divisória com os botões abaixo */
    .dash-left .stat-box:nth-child(3) {
        flex: 2 1 46%;
        /* Flex 2 para ocupar 2/4 (metade) */
        order: 1;
        width: auto;
        margin-top: 0;
    }

    /* LINHA 2: Progresso (100%) */
    .dash-left .stat-box:nth-child(4) {
        flex: 1 1 100%;
        order: 2;
        height: auto;
        /* Deixa crescer para caber o texto e a barra */
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px 10px;
        /* Padding interno equilibrado */
    }

    /* LINHA 3: Botões (100%) */
    .dash-left .sidebar-controls {
        flex: 1 1 100%;
        order: 3;
        margin-top: 0 !important;
        height: 50px;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: center;
        justify-content: space-between;
        /* Botões ocupam tudo */
    }

    .sidebar-controls button {
        height: 40px;
        /* Botões com altura boa de toque */
        padding: 0 10px;
        font-size: 0.8rem;
        flex: 1;
        /* Botões crescem para preencher espaço */
    }

    /* Esconder textos longos dos labels se precisar */
    .stat-label {
        font-size: 0.65rem;
        white-space: nowrap;
    }

    .stat-value {
        font-size: 0.9rem;
    }

    .val-status {
        font-size: 0.8rem !important;
    }

    .sidebar-controls button {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .dash-center {
        order: 2;
        width: 100%;
        height: auto !important;
        /* Deixe a altura automática baseada na largura */
        aspect-ratio: 1 / 1.05;
        /* Altura um pouco maior que a largura (quadrado + folga) */
        min-height: 0;
        padding: 0 !important;
        display: block !important;
    }

    /* Force canvas container to fill fixed height */
    .dash-center #participantList {
        height: 100% !important;
        width: 100% !important;
    }

    .dash-center #adminGameContainer {
        height: 100% !important;
    }

    /* Expandir Grid no Mobile */
    #participantList.grid-admin {
        padding: 2px !important;
        /* Muito pouco padding */
        gap: 2px !important;
        /* Menor gap */
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)) !important;
        /* Itens menores/mais densos */
    }

    #participantList.grid-admin li {
        height: 30px !important;
        /* Altura um pouco menor */
        font-size: 0.8rem !important;
    }

    /* Remover padding extra do card */
    .dash-center .painel-rifa {
        padding: 0 !important;
    }

    .dash-center .painel-rifa-header {
        padding: 5px 10px !important;
        /* Header compacto */
    }

    .dash-right {
        order: 3;
        height: 600px !important;
        /* Aumentado para mostrar mais itens */
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column;
    }

    /* Garantir que o container interno use flex para ajustar o feed box */
    .dash-right .live-feed-container {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }
}

/* Fullscreen Panel */
.fullscreen-panel {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: white;
    margin: 0;
}

.fullscreen-panel .painel-rifa-header {
    background: #eee;
}

#wrapperCemiterio {
    overflow-y: auto;
    max-height: 250px;
    padding: 10px;
}

.fullscreen-panel #wrapperCemiterio {
    max-height: none;
    height: auto;
    min-height: calc(100vh - 100px);
}

.fullscreen-panel .tabela-wrapper {
    height: auto;
    overflow: visible;
}

#adminGameCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================
   8. ADMIN HEADER REFACTOR (FIX OVERLAP)
   ========================================= */
.admin-header-row {
    display: grid;
    /* 3 colunas: Esquerda (85px), Centro (1fr), Direita (85px) */
    /* Isso garante que o título fique centralizado e o botão tenha seu espaço reservado */
    grid-template-columns: 85px 1fr 85px;
    align-items: center;
    margin-bottom: 20px;
    height: auto;
    min-height: 50px;
    gap: 5px;
    padding: 0;
}

.admin-header-row .btn-voltar {
    position: static;
    /* Remove position absolute */
    margin: 0;
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 4px;
    /* Botão compacto */
    justify-self: start;
    white-space: nowrap;
}

.page-title-specific {
    grid-column: 2;
    /* Garante que fique no meio */
    margin: 0;
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: bold;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* =========================================
   9. ADMIN LIST MOBILE FIX
   ========================================= */
.rifa-info {
    flex: 1;
}

.btn-gerenciar {
    background-color: var(--primary-color);
    color: white;
}

.btn-gerenciar:hover {
    background-color: var(--primary-hover);
}

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

@media (max-width: 768px) {
    .item-rifa-admin {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .admin-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
        /* Gerenciar grande, Lixeira compacta */
    }

    .admin-actions .btn-gerenciar {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .admin-actions .btn-excluir {
        width: 50px;
        /* Largura fixa para o ícone */
        display: flex;
        justify-content: center;
        align-items: center;
    }
}


/* =========================================
   10. FULL WIDTH MOBILE FIX
   ========================================= */
@media (max-width: 768px) {

    /* 1. Container Full Width */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Restore Padding for Index Grid (Images inside grid) */
    .rifas-grid.container {
        padding: 15px !important;
        width: 100% !important;
        /* Keep full width, just add padding */
        box-sizing: border-box;
        /* Ensure padding doesn't overflow width */
    }

    .container.main-content {
        margin-top: 60px !important;
    }

    /* Fix spacing for buy page on mobile */
    #page-comprar .container {
        margin-top: 60px !important;
    }

    #painel-rifa-especifica .container {
        width: 100% !important;
        padding: 0 !important;
    }

    /* 2. Remove "Card" Styling (Area Externa) - MENOS Rifa Card (Index) */
    .item-rifa-admin,
    .admin-card,
    .painel-rifa {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    /* 3. Grid Specifics */
    #participantList.grid-admin {
        padding: 0 !important;
        gap: 1px !important;
    }

    /* 4. Ensure Actions don't overflow */
    .admin-actions {
        padding: 0 10px;
        /* Pequeno respiro interno para botões não colarem na borda da tela se desejar, ou 0 se for 'grid' */
    }
}

/* =========================================
   11. MOBILE COLUMN TOGGLE (INDEX)
   ========================================= */
/* Slider Toggle Style */
/* Slider Toggle Style & Controls */
.column-controls {
    display: flex;
    /* Visible on all screens */
    justify-content: flex-end;
    /* Align to right */
    align-items: center;
    gap: 10px;
    /* Space between toggle and slider */
    margin-bottom: 5px;
    padding: 0 10px;
}

/* Hide slider on desktop, keep toggle */
@media (min-width: 769px) {
    .slider-container {
        display: none !important;
    }
}

/* Toggle Esgotadas Style (Global) */
.toggle-esgotadas {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Slightly more space */
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 0.9rem;
    /* Match buttons */
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    background: #f5f5f5;
    padding: 0 12px;
    height: 36px;
    /* Explicit height */
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: 0.2s;
}

.toggle-esgotadas:hover {
    background: #eeeeee;
}

.toggle-esgotadas input {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

@media (max-width: 768px) {
    .banner-wrapper {
        margin-bottom: 5px !important;
        /* Tight spacing to controls */
    }

    .column-controls {
        margin-bottom: 5px;
        /* Tight spacing to grid, inherits flex from global */
        justify-content: space-between;
        /* On mobile, spread them if needed, or keep flex-end? User wanted "tight" so maybe space-between is better for finger reach, but user asked for "align next to controls to the right". Let's stick to flex-end or space-between. Step 80 had space-between. Let's keep space-between for mobile for ergonomics, but desktop flex-end. */
    }

    /* Grid Layouts ... */
    .rifas-grid.cols-1 {
        grid-template-columns: 1fr;
    }

    /* Optimized Grid Layouts */
    .rifas-grid.cols-1 .rifa-img {
        height: 200px;
        /* Standard for single col */
    }

    /* 2 Columns - Balanced */
    .rifas-grid.cols-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .rifas-grid.cols-2 .rifa-img {
        height: 100px;
    }

    .rifas-grid.cols-2 .rifa-body {
        padding: 8px;
    }

    .rifas-grid.cols-2 .rifa-title {
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    .rifas-grid.cols-2 .rifa-price {
        font-size: 1.1em;
    }

    /* 3 Columns - Compact */
    .rifas-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .rifas-grid.cols-3 .rifa-img {
        height: 85px;
        /* Much shorter to maintain aspect ratio */
    }

    .rifas-grid.cols-3 .rifa-body {
        padding: 6px;
        /* Minimal padding */
    }

    .rifas-grid.cols-3 .rifa-title {
        font-size: 0.75em;
        /* Small font */
        line-height: 1.2;
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rifas-grid.cols-3 .rifa-desc {
        display: none;
        /* Too cluttered for 3 cols */
    }

    .rifas-grid.cols-3 .rifa-price {
        font-size: 0.85em;
        margin-bottom: 4px;
    }

    .rifas-grid.cols-3 .btn-ver,
    .rifas-grid.cols-3 .btn-acompanhar-destaque {
        font-size: 0.7em;
        padding: 4px;
        margin-top: 0;
    }

    .rifas-grid.cols-3 .badge-data {
        font-size: 0.6em;
        padding: 2px;
    }
}

/* Container do Slider - Bem Menor */
.slider-container {
    display: flex;
    background: #e0e0e0;
    border-radius: 8px;
    /* Standard Radius */
    padding: 2px;
    /* Padding menor */
    position: relative;
    width: 120px;
    /* Largura bem reduzida (era 200px) */
    justify-content: space-between;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 36px;
    /* Match toggle height */
    align-items: stretch;
}

.btn-col-toggle {
    flex: 1;
    border: none;
    background: transparent;
    padding: 4px 0;
    /* Padding vertical reduzido */
    border-radius: 6px;
    /* Standard Radius */
    cursor: pointer;
    font-size: 0.9rem;
    /* Ícones menores */
    color: #777;
    transition: 0.3s;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
}

.btn-col-toggle.active {
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Mobile Toolbar Adjustments - Scroll Horizontal + Larger Buttons */
@media (max-width: 768px) {
    .toolbar-rifa {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Restore scroll */
        justify-content: center;
        /* Center content */
        width: 100%;
        gap: 8px;
        padding-top: 5px;
        padding-bottom: 8px;
        /* Extra space for scrollbar */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll iOS */
    }

    .atalhos-group {
        display: flex;
        flex-wrap: nowrap;
        flex: 0 0 auto;
        /* Don't grow/shrink, respect content size */
        gap: 5px;
    }

    .btn-atalho {
        width: 50px;
        /* Larger size */
        height: 50px;
        max-width: none;
        /* remove restriction */
        aspect-ratio: auto;
        font-size: 1rem;
        padding: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qtd-control-group {
        gap: 5px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .btn-ajuste {
        width: 50px;
        /* Larger size */
        height: 50px;
        font-size: 1.2rem;
        flex-shrink: 0;
        border-radius: 8px;
        /* Ensure rounded */
    }

    #inputAleatorio {
        height: 50px;
        width: 85px;
        /* Wider for larger numbers */
        font-size: 1.2rem;
        flex-shrink: 0;
        border-radius: 8px;
    }

    .rifa-scroll-wrapper {
        padding: 0 25px;
        /* Safe zone for scrolling */
    }

    .bottom-tools-wrapper {
        padding: 0 25px;
        /* Align with grid safe zone */
    }

    #participantList {
        padding: 25px;
        /* Increased mobile padding */
        padding-bottom: 50px;
        /* Extra bottom space */
    }
}

/* Toggle Mode Buttons (Sliding Switch + Full Width Bar) */
.mode-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.15);
    /* Very Transparent Glass */
    padding: 8px 0;
    /* Minimized height */
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

    /* Animation State (Hidden by default) */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mode-toggle-container.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.switch-track {
    position: relative;
    display: flex;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 2px;
    width: 240px;
    height: 30px;
    /* Slim track */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mode-indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: calc(50% - 2px);
    background: var(--primary-color);
    border-radius: 4px;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Correct Selector: Class is on track now */
.switch-track.state-paint .mode-indicator {
    transform: translateX(100%);
}

.btn-mode {
    flex: 1;
    padding: 0;
    border: none;
    background: transparent !important;
    font-size: 0.75rem;
    /* Smaller Font */
    font-weight: 600;
    color: #555;
    cursor: pointer;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    outline: none;
    transition: color 0.2s;
}

.btn-mode.active {
    color: white;
}

.btn-clear-mode {
    flex: 0 0 auto;
    /* Don't stretch */
    border: 1px solid rgba(213, 0, 0, 0.5);
    /* Red Accent */
    color: #D50000;
    margin-left: 10px;
    padding: 0 12px;
    border-radius: 6px;
    height: 30px;
    /* Match track height */
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.4) !important;
    /* Glassy */
    transition: all 0.2s;
}

.btn-clear-mode:hover {
    background: rgba(213, 0, 0, 0.1) !important;
    border-color: #D50000;
    transform: translateY(-1px);
}

/* Scroll Navigation FAB */
.btn-scroll-nav {
    position: fixed;
    bottom: 100px;
    right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 9990;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Hidden State */
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    pointer-events: none;
}

.btn-scroll-nav.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.btn-scroll-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Top Summary Bar (Sticky Green Glass) */
.top-summary-bar {
    position: fixed;
    top: 45px;
    /* Tighter fit under nav (Approx 45px height) */
    left: 0;
    width: 100%;
    height: 50px;
    /* Standard Height */
    background: rgba(46, 125, 50, 0.15);
    /* Very Transparent Green */
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 9980;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.top-summary-bar.has-selection {
    background: rgba(46, 125, 50, 0.25);
    /* Darker Green when active */
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.1);
}

.top-summary-bar.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.summary-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1B5E20;
    /* Dark Green for contrast on light bg */
    font-weight: 600;
    font-size: 0.9rem;
}

.summary-info .sep {
    opacity: 0.4;
    font-size: 0.8em;
}

.btn-finish-top {
    background: rgba(255, 255, 255, 0.4);
    /* Slight distinct background */
    color: #2E7D32;
    border: 1px solid rgba(46, 125, 50, 0.3);
    padding: 6px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-finish-top:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.05);
    border-color: transparent;
    color: #888;
}

.btn-finish-top:not(:disabled) {
    background: #2E7D32;
    /* Strong Green */
    color: white;
    border-color: #1B5E20;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.25);
}

.btn-finish-top:not(:disabled):hover {
    background: #1B5E20;
    /* Darker Green on Hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(46, 125, 50, 0.35);
}

/* Checkout Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    /* Highest priority */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}

.modal-content.checkout-box {
    background: white;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.checkout-box h3 {
    margin-top: 0;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.checkout-box .form-group {
    text-align: left;
    margin-bottom: 15px;
}

.checkout-box input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
}

.checkout-box input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(2, 119, 189, 0.1);
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-cancel {
    background: #f5f5f5;
    color: #555;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.btn-confirm {
    background: var(--success-color);
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
    cursor: pointer;
}

.btn-cancel:hover {
    background: #e0e0e0;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(46, 125, 50, 0.4);
}