@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Dashboard/ScratchAcquisitionNotice.razor.rz.scp.css */
.scratch-widget[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(139.1deg, #FF7280 0.39%, #00A1F5 101.18%);
    border-radius: 30px;
    padding: 0;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.notice[b-ufop397oe5] {
    background-image: url(images/dashboard/scratch/dashboard_scratch_widget_bg.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: -25px;
    padding: 20px 0 15px;
    margin: auto 0;
}

.scratch-notice-header[b-ufop397oe5] {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20% 0 20%;
}

.scratch-notice-body[b-ufop397oe5] {
    text-align: center;
    margin: 22px 0 10px;
}

    .scratch-notice-body .title[b-ufop397oe5] {
        font-size: 20px;
        font-weight: 500;
    }

    .scratch-notice-body .subtitle[b-ufop397oe5] {
        font-size: 18px;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    .scratch-notice-body .desc[b-ufop397oe5] {
        margin-top: 6px;
        font-size: 12px;
    }

.scratch-notice-actions[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

    .scratch-notice-actions .btn-ok[b-ufop397oe5] {
        border-radius: 12px;
        border: none;
        cursor: pointer;
        background: #ffffff;
        width: 118px;
        height: 47px;
    }

    .scratch-notice-actions .btn-cancel[b-ufop397oe5] {
        color: #fff;
        background-color: transparent;
        border: none;
        font-size: 12px;
        margin-top: 3px;
    }

/* Scratch Cards Widget Styles */
.scratch-summary-card[b-ufop397oe5] {
    padding: 0 20px 20px;
    cursor: pointer;
}

.scratch-widget h1[b-ufop397oe5] {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    padding: 20px 20px 0;
    cursor: pointer;
}

.scratch-summary[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    justify-content: space-between;
    margin-top: 10px;
    border: 2px solid #FFFFFF;
}

    .scratch-summary:hover[b-ufop397oe5] {
        border: 2px solid #828DA152;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

.scratch-summary-header[b-ufop397oe5] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 13px 15px;
    border-bottom: 0.5px solid #828DA152;
}

.scratch-info[b-ufop397oe5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.scratch-icon-card[b-ufop397oe5] {
    width: 30px;
    height: 30px;
    background: #ECF8FF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 0.5px solid #00A1F5
}

    .scratch-icon-card img[b-ufop397oe5] {
        width: 18px;
        height: 18px;
    }

.scratch-details[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scratch-icon-arrow[b-ufop397oe5] {
    margin-left: auto;
}

    .scratch-icon-arrow img[b-ufop397oe5] {
        margin-bottom: 10px;
        margin-right: 5px;
    }

.scratch-title[b-ufop397oe5] {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.scratch-count[b-ufop397oe5] {
    font-size: 10px;
    color: #A0A0A0;
    margin: 0;
    font-weight: 400;
}

/* Scratch Stats Section */
.scratch-stats[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px;
    border-bottom: 0.5px solid #828DA152;
}

.stat-label[b-ufop397oe5] {
    font-size: 12px;
    color: #000000;
    margin: 0;
    font-weight: 500;
}

.stat-value[b-ufop397oe5] {
    font-size: 12px;
    color: #FF7280;
    font-weight: 700;
}

    .stat-value p[b-ufop397oe5] {
        text-align: right;
    }

/* Scratch Recent Section */
.scratch-recent[b-ufop397oe5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 15px 15px 15px;
}

.scratch-recent-title[b-ufop397oe5] {
    display: flex;
    justify-content: space-between;
}

    .scratch-recent-title a[b-ufop397oe5] {
        color: #A0A0A0;
        font-size: 10px;
        margin-bottom: 10px;
    }
        .scratch-recent-title a:hover[b-ufop397oe5] {
            color: #7b7676;
            text-decoration: underline;
        }

    .scratch-recent-title h3[b-ufop397oe5] {
        font-size: 12px;
        color: #000000;
        margin: 0 0 10px 0;
        font-weight: 500;
    }

.recent-rewards[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reward-item[b-ufop397oe5] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    border-radius: 15px;
    background: #FAFAFA;
}

.reward-icon[b-ufop397oe5] {
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reward-details[b-ufop397oe5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reward-amount[b-ufop397oe5] {
    font-size: 12px;
    color: #000000;
    font-weight: 500;
}

.reward-time[b-ufop397oe5] {
    font-size: 11px;
    color: #888;
    margin: 0;
}

/* Progress Bar for Scratch Widget */
.progress-bar-wrapper[b-ufop397oe5] {
    background: rgba(0,0,0,0.1);
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar[b-ufop397oe5] {
    height: 100%;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7300 100%);
    width: 0%;
    border-radius: 10px;
    transition: width 2s ease-out;
    position: relative;
    overflow: hidden;
}

    .progress-bar[b-ufop397oe5]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer-b-ufop397oe5 2s infinite;
    }

@keyframes shimmer-b-ufop397oe5 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.progress-text[b-ufop397oe5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 12px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


@media (max-width: 1024px) {
    .scratch-widget[b-ufop397oe5] {
        background: linear-gradient(289.44deg, #FF7280 -2.06%, #00A1F5 100%);
    }

    .notice[b-ufop397oe5] {
        background-size: 45%;
        padding-top: 15px;
        background-position-y: -15px;
    }

    .scratch-notice-header[b-ufop397oe5] {
        padding: 15px 20% 0 20%;
    }

    .scratch-notice-body[b-ufop397oe5] {
        margin: 15px 0 10px;
    }

    .scratch-summary-card[b-ufop397oe5] {
        padding: 0 20px 20px;
    }

    .scratch-widget h1[b-ufop397oe5] {
        text-align: center;
        font-size: 20px;
        padding: 20px 2px 0;
    }
}
/* /Components/Shared/ConfirmModal.razor.rz.scp.css */

h2[b-36ya8fgfzv] {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.confirm-message[b-36ya8fgfzv] {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin: 10px 0 30px;
    color: #333;
}

.confirm-actions[b-36ya8fgfzv] {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.confirm-btn-ok[b-36ya8fgfzv],
.confirm-btn-cancel[b-36ya8fgfzv] {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.confirm-btn-ok[b-36ya8fgfzv] {
    background-color: #007bff;
    color: white;
}

    .confirm-btn-ok:hover[b-36ya8fgfzv] {
        background-color: #0056b3;
    }

.confirm-btn-cancel[b-36ya8fgfzv] {
    background-color: #f0f0f0;
    color: #333;
}

    .confirm-btn-cancel:hover[b-36ya8fgfzv] {
        background-color: #e0e0e0;
    }

.close-button[b-36ya8fgfzv] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

    .close-button:hover[b-36ya8fgfzv] {
        background-color: #f0f0f0;
        color: #333;
    }

@media (max-width: 1024px) {
    .confirm-message[b-36ya8fgfzv] {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .confirm-btn-ok[b-36ya8fgfzv],
    .confirm-btn-cancel[b-36ya8fgfzv] {
        font-size: 14px;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
.pagination[b-ohkx75r80k] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.page-btn[b-ohkx75r80k] {
    border: none;
    background: #F4F4F4;
    border-radius: 10px;
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s;
    width: 43px;
    height: 40px;
}

    .page-btn:hover:not(:disabled)[b-ohkx75r80k] {
        background: #f8f9ff;
        color: #FFFFFF;
        background: linear-gradient(124.57deg, #00A1F5 -5.51%, #FE5C73 109.64%);
    }

    .page-btn.active[b-ohkx75r80k] {
        background: linear-gradient(124.57deg, #00A1F5 -5.51%, #FE5C73 109.64%);
        color: #FFFFFF;
    }

    .page-btn:disabled[b-ohkx75r80k] {
        opacity: 0.3;
        cursor: not-allowed;
    }


@media (max-width: 1024px) {
    .page-btn[b-ohkx75r80k] {
        width: 35px;
        height: 35px;
    }
}
/* /Layouts/MainLayout.razor.rz.scp.css */
.page[b-h0mkw4f4x4] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

.top-row[b-h0mkw4f4x4] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

    .top-row[b-h0mkw4f4x4]  a:hover, .top-row[b-h0mkw4f4x4]  .btn-link:hover {
        text-decoration: underline;
    }

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

@media (max-width: 640.98px) {
    .top-row[b-h0mkw4f4x4] {
        justify-content: space-between;
    }

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

@media (min-width: 641px) {
    .page[b-h0mkw4f4x4] {
        flex-direction: row;
    }

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

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

    .top-row.auth[b-h0mkw4f4x4]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-h0mkw4f4x4], article[b-h0mkw4f4x4] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/Admin/Campaigns/CampaignManagement.razor.rz.scp.css */

.page-title[b-wf63bebu2l] {
    margin-bottom: 30px;
}

    .page-title h1[b-wf63bebu2l] {
        font-size: 28px;
        font-weight: 600;
        color: #262B27;
        margin-bottom: 0;
    }

.stats-grid[b-wf63bebu2l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.stat-card[b-wf63bebu2l] {
    border-radius: 20px;
    padding: 22px 32px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 6px 3px 18.4px 8px #EFFAFF inset;
    display: flex;
    flex-direction: column;
    height: 164px;
    justify-content: space-between;
}

    .stat-card:hover[b-wf63bebu2l] {
        transform: translateY(-2px);
    }

.stat-title[b-wf63bebu2l] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.stat-gradient-bar[b-wf63bebu2l] {
    width: 62px;
    height: 4px;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    margin-top: 15px;
}

.stat-value[b-wf63bebu2l] {
    font-size: 30px;
    font-weight: bold;
    color: #00A1F5;
    padding-right: 15px;
}

.arrow-icon[b-wf63bebu2l] {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 15px;
    top: 24px;
}

.stat-icon[b-wf63bebu2l] {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 15px;
    bottom: 24px
}

.stat-card:nth-child(1) .stat-value[b-wf63bebu2l] {
    color: #00CF08;
}

.stat-card:nth-child(2) .stat-value[b-wf63bebu2l] {
    color: #FF7300;
}

.stat-card:nth-child(3) .stat-value[b-wf63bebu2l] {
    color: #00A1F5;
}

.stat-card:nth-child(4) .stat-value[b-wf63bebu2l] {
    color: #DC0016;
}

.mobile-dash[b-wf63bebu2l] {
    display: none;
}

.scratch-history-filters[b-wf63bebu2l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    margin-top: 25px;
}

.filter-row[b-wf63bebu2l] {
    display: grid;
    grid-template-columns: minmax(200px, 400px) auto auto auto;
    gap: 15px;
}

.filter-group[b-wf63bebu2l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #828DA1;
}

    .filter-group button[b-wf63bebu2l] {
        border: none;
        border-radius: 6px;
        padding: 11px 15px;
        color: #FFFFFF;
        transition: all 0.5s ease;
        height: 40px;
    }

        .filter-group button:hover[b-wf63bebu2l] {
            transform: scale(1.05);
        }

        .filter-group button.btn-create[b-wf63bebu2l] {
            background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
        }

        .filter-group button.btn-report[b-wf63bebu2l] {
            background: #FF7300;
        }

.filter-select[b-wf63bebu2l] {
    padding: 11px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
    color: #828DA1;
    height: 40px;
}

    .filter-select:hover[b-wf63bebu2l] {
        border-color: #00A1F5;
    }

    .filter-select:focus[b-wf63bebu2l] {
        border-color: #00A1F5;
        box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
    }

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

.search-input[b-wf63bebu2l] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 40px;
}

    .search-input:focus[b-wf63bebu2l] {
        border-color: #00A1F5;
        box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
    }

.search-icon[b-wf63bebu2l] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}

    .search-icon:hover[b-wf63bebu2l] {
        background: none;
        color: #535c6c;
    }

    .search-icon:hover[b-wf63bebu2l] {
        color: #00A1F5;
    }

.result-history-container[b-wf63bebu2l] {
    margin-top: 25px;
}

.history-list-header[b-wf63bebu2l] {
    display: flex;
    justify-content: space-between;
}

    .history-list-header h3[b-wf63bebu2l] {
        font-size: 20px;
        font-weight: 500;
        color: #010100;
        align-content: center;
    }

.generic-table[b-wf63bebu2l] {
    margin-top: 23px;
}

    .generic-table th[b-wf63bebu2l] {
        text-align: left;
        padding: 15px 0;
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
        font-size: 12px;
        font-weight: 500;
        color: #828DA1;
        background-color: #FFFFFF;
    }

    .generic-table td[b-wf63bebu2l] {
        color: #010100;
        padding: 15px 0;
        border-bottom: 1px dashed #B5BDCA;
        vertical-align: middle;
        font-size: 12px;
        font-weight: 500;
    }

    .generic-table tbody tr:hover[b-wf63bebu2l] {
        background: #F9F9F9;
    }

    .generic-table tbody tr:last-child td[b-wf63bebu2l] {
        border-bottom: none;
    }

    .generic-table td:first-child[b-wf63bebu2l] {
        width: 30%;
    }

.campaign-name[b-wf63bebu2l] {
    font-size: 16px;
    font-family: Alexandria;
    font-weight: bold;
    color: #FF7280;
}

.campaign-date[b-wf63bebu2l] {
    color: #828DA1;
}

    .campaign-date img[b-wf63bebu2l] {
        vertical-align: text-top;
    }

    .campaign-date.end[b-wf63bebu2l] {
        margin-top: 5px !important;
    }

.label-badge[b-wf63bebu2l] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
}

    .label-badge.in-progress[b-wf63bebu2l] {
        color: #FF7300;
        background: #FF730029;
    }

    .label-badge.schedule[b-wf63bebu2l] {
        color: #1E90FF;
        background: #E8F4FF;
    }

    .label-badge.end[b-wf63bebu2l] {
        color: #E53935;
        background: #FFE8EC;
    }

    .label-badge.draft[b-wf63bebu2l] {
        color: #6B6B80;
        background: #F2F2F5;
    }

.campaign-value[b-wf63bebu2l] {
    font-size: 14px;
    font-weight: 500;
}
    .campaign-value.prize[b-wf63bebu2l] {
        color: #00A1F5;
    }
    .campaign-value.currency[b-wf63bebu2l] {
        color: #00CF08;
    }

.empty-state[b-wf63bebu2l] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-content[b-wf63bebu2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    .empty-state-content p[b-wf63bebu2l] {
        font-size: 16px;
        color: #828DA1;
        margin: 0;
    }

.btn-action[b-wf63bebu2l] {
    border: none;
    padding: 0;
    background: none;
    color: #9a9a9a;
}

    .btn-action:hover[b-wf63bebu2l] {
        color: #1C1B1F;
    }

.btn-delete[b-wf63bebu2l] {
    margin-left: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .page-title[b-wf63bebu2l] {
        margin-bottom: 12px;
        display: flex;
    }

        .page-title h1[b-wf63bebu2l] {
            background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

    .stats-grid[b-wf63bebu2l] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .stat-card[b-wf63bebu2l] {
        padding: 15px 20px;
        height: 126px;
    }

    .stat-gradient-bar[b-wf63bebu2l] {
        margin-top: 10px;
    }

    .arrow-icon[b-wf63bebu2l] {
        display: none;
    }

    .stat-value[b-wf63bebu2l] {
        font-size: 20px;
    }

    .stat-icon[b-wf63bebu2l] {
        right: 5px;
        bottom: 10px;
    }

        .stat-icon img[b-wf63bebu2l] {
            width: 23px;
        }

    .mobile-dash[b-wf63bebu2l] {
        display: flex;
        border-top: 1px dashed #828DA1;
        margin-top: 12px
    }

    .scratch-history-filters[b-wf63bebu2l] {
        padding: 15px 0;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .filter-row[b-wf63bebu2l] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filter-group:last-child[b-wf63bebu2l] {
        grid-column: 1 / -1;
    }

    .history-list-header h3[b-wf63bebu2l] {
        font-size: 18px;
    }

    .generic-table[b-wf63bebu2l] {
        display: flex;
    }

        .generic-table thead[b-wf63bebu2l] {
            display: none;
        }

        .generic-table tbody[b-wf63bebu2l] {
            width: 100%;
        }

            .generic-table tbody tr[b-wf63bebu2l] {
                display: flex;
                flex-direction: column;
                border-top: 1px solid #E0E0E0;
                padding: 5px 0;
            }

                .generic-table tbody tr:hover[b-wf63bebu2l] {
                    background: none;
                }

        .generic-table td[b-wf63bebu2l] {
            border: none;
            text-align: right;
            justify-items: end;
            justify-content: flex-end;
            padding: 5px 0;
            position: relative;
        }

            .generic-table td[b-wf63bebu2l]::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                font-weight: 400;
                color: #828DA1;
            }

            .generic-table td:first-child[b-wf63bebu2l] {
                width: 100%;
                display: flex;
            }

    .campaign-name[b-wf63bebu2l] {
        width: calc(100% - 100px);
        font-size: 12px;
    }

    .empty-state-content[b-wf63bebu2l] {
        margin: auto;
    }
}
/* /Pages/Admin/Campaigns/CreateCampaign.razor.rz.scp.css */
/* Create Campaign Page - BEM CSS Structure */
/* Mobile-first, Flexbox/Grid layout, Semantic HTML */

/* Override common CSS for HTML input elements (time, radio) - Direct styling */
.create-campaign-page input[type="time"][b-4nna62c2jg] {
    box-sizing: border-box !important;
    padding: 15px !important;
    background: #FFFFFF !important;
    border: 0.5px solid #CCCCCC !important;
    border-radius: 12px !important;
    font-family: 'Aeonik_Variable', sans-serif !important;
    font-style: normal !important;
    font-weight: 87 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    color: #000000 !important;
    margin: 0 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
    width: 100%;
    height: 53px;
}

    .create-campaign-page input[type="time"]:focus[b-4nna62c2jg] {
        border-color: #00A1F5 !important;
        outline: none !important;
    }

    .create-campaign-page input[type="time"]:hover[b-4nna62c2jg] {
        outline: none !important;
        border-color: #CCCCCC !important;
    }

/* ============================================
   Block: create-campaign-page
   ============================================ */
.create-campaign-page[b-4nna62c2jg] {
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ============================================
   Block: campaign-header
   ============================================ */
.campaign-header[b-4nna62c2jg] {
    width: 100%;
    height: 134px;
    margin-bottom: 30px;
    padding: 40px 20px;
    background: linear-gradient(129.46deg, #FF7280 0.03%, #00A1F5 120.08%);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.campaign-header-title[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 115;
    font-size: 30px;
    line-height: 36px;
    text-align: center;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    max-width: 100%;
}

.campaign-header-subtitle[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 115;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    max-width: 100%;
}

/* ============================================
   Block: campaign-form
   ============================================ */
.campaign-form[b-4nna62c2jg] {
    width: 100%;
    max-width: 628px;
    margin: 0 auto 0 0;
    background: #FAFAFA;
    border-radius: 15px;
    padding: 23px 34px 40px;
    box-sizing: border-box;
}

    .campaign-form .campaign-section-title[b-4nna62c2jg] {
        margin-top: 0;
        padding-top: 0;
    }

/* ============================================
   Block: form-section
   ============================================ */
.campaign-section:first-child[b-4nna62c2jg] {
    padding-top: 0;
    margin-top: 0;
}

.campaign-section:not(:first-child)[b-4nna62c2jg] {
    border-top: 0.5px solid #CBC8C8;
}

.campaign-section-title[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 115;
    font-size: 20px;
    line-height: 24px;
    color: #262B27;
    margin: 0 0 24px 0;
    padding: 0;
    text-align: left;
}

/* ============================================
   Block: form-grid
   ============================================ */
.campaign-grid[b-4nna62c2jg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.campaign-field[b-4nna62c2jg] {
    display: flex;
    flex-direction: column;
}

.campaign-field-full-width[b-4nna62c2jg] {
    grid-column: 1 / -1;
}

/* ============================================
   Block: divider
   ============================================ */
.campaign-divider[b-4nna62c2jg] {
    grid-column: 1 / -1;
    height: 0.5px;
    background: #CBC8C8;
    margin: 0;
}

/* ============================================
   Block: form-field
   ============================================ */
.campaign-label[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-bottom: 6px;
    display: block;
    text-align: left;
}

.campaign-label-light[b-4nna62c2jg] {
    font-weight: 87;
}

.campaign-label.required[b-4nna62c2jg]::after {
    content: "*";
    color: #DC0016;
}

.language-control span[b-4nna62c2jg] {
    font-size: 12px;
    color: gray;
}

/* ============================================
   Block: form-input (Blazor Components)
   ============================================ */
/* Use ::deep to style elements inside Blazor components (InputText, InputSelect, InputDate, InputTextArea) */
[b-4nna62c2jg] .campaign-input,
[b-4nna62c2jg] input.campaign-input,
[b-4nna62c2jg] input[type="text"].campaign-input,
[b-4nna62c2jg] input[type="number"].campaign-input,
[b-4nna62c2jg] input[type="date"].campaign-input,
[b-4nna62c2jg] textarea.campaign-input,
[b-4nna62c2jg] select.campaign-input,
[b-4nna62c2jg] .input-text.campaign-input,
[b-4nna62c2jg] input.input-text.campaign-input,
[b-4nna62c2jg] textarea.input-text.campaign-input,
[b-4nna62c2jg] select.input-text.campaign-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 53px;
    min-height: 53px;
    padding: 15px !important;
    background: #FFFFFF !important;
    border: 0.5px solid #CCCCCC !important;
    border-radius: 12px !important;
    font-family: 'Aeonik_Variable', sans-serif !important;
    font-style: normal !important;
    font-weight: 87 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    color: #000000 !important;
    margin: 0 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

    [b-4nna62c2jg] .campaign-input:focus,
    [b-4nna62c2jg] input.campaign-input:focus,
    [b-4nna62c2jg] textarea.campaign-input:focus,
    [b-4nna62c2jg] select.campaign-input:focus,
    [b-4nna62c2jg] .input-text.campaign-input:focus,
    [b-4nna62c2jg] input.input-text.campaign-input:focus,
    [b-4nna62c2jg] textarea.input-text.campaign-input:focus,
    [b-4nna62c2jg] select.input-text.campaign-input:focus {
        border-color: #00A1F5 !important;
        outline: none !important;
    }

    [b-4nna62c2jg] .campaign-input:hover,
    [b-4nna62c2jg] input.campaign-input:hover,
    [b-4nna62c2jg] textarea.campaign-input:hover,
    [b-4nna62c2jg] select.campaign-input:hover,
    [b-4nna62c2jg] .input-text.campaign-input:hover,
    [b-4nna62c2jg] input.input-text.campaign-input:hover,
    [b-4nna62c2jg] textarea.input-text.campaign-input:hover,
    [b-4nna62c2jg] select.input-text.campaign-input:hover {
        outline: none !important;
        border-color: #CCCCCC !important;
    }

    [b-4nna62c2jg] .campaign-input::placeholder,
    [b-4nna62c2jg] .input-text.campaign-input::placeholder,
    [b-4nna62c2jg] input.input-text.campaign-input::placeholder,
    [b-4nna62c2jg] textarea.input-text.campaign-input::placeholder {
        font-family: 'Aeonik_Variable', sans-serif !important;
        font-weight: 87 !important;
        font-size: 12px !important;
        line-height: 14px !important;
        color: #CECECE !important;
        opacity: 1 !important;
    }

[b-4nna62c2jg] textarea.campaign-input {
    height: auto;
    resize: vertical;
}

.campaign-input-number[b-4nna62c2jg] {
    -moz-appearance: textfield;
    appearance: textfield;
}

    .campaign-input-number[b-4nna62c2jg]::-webkit-inner-spin-button,
    .campaign-input-number[b-4nna62c2jg]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

.campaign-input-date[b-4nna62c2jg] {
    position: relative;
    padding-right: 45px;
}

    [b-4nna62c2jg] .campaign-input-date::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        position: absolute;
        right: 15px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 1;
        pointer-events: none;
    }
    
    [b-4nna62c2jg] input[type="date"].campaign-input-date::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        pointer-events: none;
    }

.campaign-input-select[b-4nna62c2jg] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8L10.5 13L16 8' stroke='%231C1B1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 21px 21px;
    padding-right: 45px;
}

/* ============================================
   Block: input-wrapper (for suffix icons)
   ============================================ */
.campaign-input-wrapper[b-4nna62c2jg] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

[b-4nna62c2jg] .campaign-input-with-suffix,
[b-4nna62c2jg] input.campaign-input-with-suffix {
    padding-right: 35px !important;
}

.campaign-input-suffix[b-4nna62c2jg] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF7280;
    font-family: 'Aeonik_Variable', sans-serif;
    font-size: 12px;
    font-weight: 87;
    line-height: 14px;
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   Block: date-time-group
   ============================================ */
.campaign-date-time[b-4nna62c2jg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.campaign-date-wrapper[b-4nna62c2jg] {
    position: relative;
    display: flex;
    align-items: center;
}

.campaign-date-icon[b-4nna62c2jg] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 3;
    display: block;
    background: #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Make the entire date-wrapper clickable to open date picker */
.campaign-date-wrapper[b-4nna62c2jg] {
    cursor: pointer;
}

.campaign-date-wrapper input[type="date"][b-4nna62c2jg] {
    cursor: pointer;
}

/* ============================================
   Block: radio-group
   ============================================ */
.campaign-radio-group[b-4nna62c2jg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.campaign-radio-option[b-4nna62c2jg] {
    box-sizing: border-box;
    min-height: 53px;
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    position: relative;
}

    .campaign-radio-option input[type="radio"][b-4nna62c2jg] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
    }

.campaign-radio-option-selected[b-4nna62c2jg] {
    background: #C4EBFF;
    border: 0.5px solid #00A1F5;
}

.campaign-radio-option:hover[b-4nna62c2jg] {
    border-color: #00A1F5;
}

/* ============================================
   Block: radio-group-inline (default radio buttons - chỉ layout)
   ============================================ */
.campaign-field-inline[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    line-height: 35px;
}

.campaign-label-inline[b-4nna62c2jg] {
    margin-bottom: 0 !important;
    line-height: 35px;
}

.campaign-radio-group-inline[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.campaign-radio-label[b-4nna62c2jg] {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 14px;
    color: #262B27;
}

    .campaign-radio-label input[type="radio"][b-4nna62c2jg] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .campaign-radio-label span[b-4nna62c2jg] {
        position: relative;
        padding-left: 28px;
    }

        .campaign-radio-label span[b-4nna62c2jg]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 2px solid #DC0016;
            background: #FFFFFF;
            box-sizing: border-box;
        }

        .campaign-radio-label span[b-4nna62c2jg]::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #DC0016;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

    .campaign-radio-label input[type="radio"]:checked + span[b-4nna62c2jg]::after {
        opacity: 1;
    }

    .campaign-radio-label:hover span[b-4nna62c2jg]::before {
        border-color: #FF4D61;
    }

/* ============================================
   Block: toggle-switch (sử dụng CSS hệ thống, chỉ override màu sắc)
   ============================================ */
/* Override màu sắc cho switch trong create-campaign-page */
/* Use ::deep to style InputCheckbox inside switch */
[b-4nna62c2jg] .create-campaign-page .switch input[type="checkbox"]:checked + .slider {
    background-color: #00CF08 !important;
}

[b-4nna62c2jg] .create-campaign-page .switch input[type="checkbox"]:not(:checked) + .slider {
    background-color: #DC0016 !important;
}

.campaign-status-label[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 14px;
    color: #00CF08;
}

.campaign-status-label-private[b-4nna62c2jg] {
    color: #DC0016 !important;
}

.create-campaign-page .toggle-container[b-4nna62c2jg] {
    margin-top: 0;
}

/* ============================================
   Block: prize-section (outside form container)
   ============================================ */
.campaign-prize-section[b-4nna62c2jg] {
    width: 100%;
    min-width: 1023px;
    padding-top: 30px;
}

/* ============================================
   Block: reward-table
   ============================================ */
.campaign-reward-header[b-4nna62c2jg] {
    display: grid;
    grid-template-columns: 300px 1fr 182px 216px 75px;
    gap: 7px;
    background: linear-gradient(178.46deg, #FF7280 0.03%, #00A1F5 120.08%);
    border-radius: 6px;
    padding: 10px 0px;
    margin-bottom: 15px;
    align-items: center;
    height: 52px;
}

.campaign-reward-header-cell[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 100%;
    color: #FFFFFF;
    text-align: left;
}

    .campaign-reward-header-cell:first-child[b-4nna62c2jg] {
        padding-left: 15px;
    }

.campaign-reward-row[b-4nna62c2jg] {
    display: grid;
    grid-template-columns: 300px 1fr 182px 216px 75px;
    gap: 7px;
    align-items: start;
    padding: 10px 0px;
}

.campaign-reward-cell[b-4nna62c2jg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.campaign-reward-cell-center[b-4nna62c2jg] {
    justify-content: center;
    align-items: center;
    min-height: 53px;
}

.campaign-reward-cell .validation-message[b-4nna62c2jg] {
    width: 100%;
    margin-top: 2px;
    min-height: 18px;
}

.campaign-reward-cell > input[b-4nna62c2jg],
.campaign-reward-cell[b-4nna62c2jg] >  input,
.campaign-reward-cell[b-4nna62c2jg] >  select,
.campaign-reward-cell > div:first-child[b-4nna62c2jg] {
    align-self: stretch;
}

/* Reward input - High specificity to override common CSS */
/* Use ::deep to style elements inside Blazor components (InputText, InputSelect) */
[b-4nna62c2jg] .campaign-reward-input,
[b-4nna62c2jg] .input-text.campaign-reward-input,
[b-4nna62c2jg] input.campaign-reward-input,
[b-4nna62c2jg] input.input-text.campaign-reward-input,
[b-4nna62c2jg] select.campaign-reward-input,
[b-4nna62c2jg] select.input-text.campaign-reward-input {
    width: 100% !important;
    min-height: 53px !important;
    height: 53px !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 0.5px solid #CCCCCC !important;
    border-radius: 12px !important;
    font-family: 'Aeonik_Variable', sans-serif !important;
    font-style: normal !important;
    font-weight: 87 !important;
    font-size: 12px !important;
    line-height: normal !important;
    color: #828DA1 !important;
    margin: 0 !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

    /* Validation states for reward inputs */
    [b-4nna62c2jg] .campaign-reward-input.valid,
    [b-4nna62c2jg] .campaign-reward-input.valid.modified,
    [b-4nna62c2jg] .campaign-reward-input.invalid,
    [b-4nna62c2jg] .campaign-reward-input.input-text.valid,
    [b-4nna62c2jg] .campaign-reward-input.input-text.valid.modified,
    [b-4nna62c2jg] .campaign-reward-input.input-text.invalid {
        outline: none !important;
        border: 0.5px solid #CCCCCC !important;
    }

        [b-4nna62c2jg] .campaign-reward-input.valid:hover,
        [b-4nna62c2jg] .campaign-reward-input.valid:focus,
        [b-4nna62c2jg] .campaign-reward-input.invalid:hover,
        [b-4nna62c2jg] .campaign-reward-input.invalid:focus,
        [b-4nna62c2jg] .campaign-reward-input.input-text.valid:hover,
        [b-4nna62c2jg] .campaign-reward-input.input-text.valid:focus,
        [b-4nna62c2jg] .campaign-reward-input.input-text.invalid:hover,
        [b-4nna62c2jg] .campaign-reward-input.input-text.invalid:focus {
            outline: none !important;
            border-color: #00A1F5 !important;
        }

    [b-4nna62c2jg] .campaign-reward-input:hover,
    [b-4nna62c2jg] .campaign-reward-input.input-text:hover {
        outline: none !important;
        border-color: #CCCCCC !important;
    }

    [b-4nna62c2jg] .campaign-reward-input:focus,
    [b-4nna62c2jg] .campaign-reward-input.input-text:focus {
        outline: none !important;
        border-color: #00A1F5 !important;
    }

    [b-4nna62c2jg] .campaign-reward-input::placeholder {
        color: #828DA1;
        opacity: 1;
    }

/* Icon Dropdown */
.campaign-icon-dropdown[b-4nna62c2jg] {
    position: relative;
    width: 100%;
}

.campaign-icon-dropdown-button[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    height: 53px;
    padding: 10px 15px;
    padding-right: 45px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    cursor: pointer;
    transition: border-color 0.2s;
    overflow: visible;
}

    .campaign-icon-dropdown-button:hover[b-4nna62c2jg] {
        border-color: #CCCCCC;
    }

    .campaign-icon-dropdown-button:focus[b-4nna62c2jg] {
        outline: none;
        border-color: #00A1F5;
    }

.campaign-icon-selected[b-4nna62c2jg] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
    position: relative;
    z-index: 0;
    margin-right: auto;
}

.campaign-icon-dropdown-button > span[b-4nna62c2jg] {
    margin-right: auto;
}

.campaign-icon-dropdown-arrow[b-4nna62c2jg] {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: #1C1B1F !important;
    z-index: 10 !important;
    display: block !important;
    pointer-events: none;
}

.campaign-icon-dropdown-menu[b-4nna62c2jg] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #FFFFFF;
    border: 0.5px solid #CCCCCC;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

.campaign-icon-dropdown-list[b-4nna62c2jg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    align-items: center;
}

.campaign-icon-option[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 50px;
    aspect-ratio: 1;
    padding: 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
    margin: 0 auto;
}

    .campaign-icon-option:hover[b-4nna62c2jg] {
        background-color: #F5F5F5;
    }

.campaign-icon-option-image[b-4nna62c2jg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.campaign-reward-icon[b-4nna62c2jg] {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 4px;
}

.campaign-reward-icon-placeholder[b-4nna62c2jg] {
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 12px;
    line-height: 14px;
    color: #828DA1;
    padding: 4px 8px;
    background: #F5F5F5;
    border-radius: 4px;
}

.campaign-reward-remove[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

    .campaign-reward-remove:hover[b-4nna62c2jg] {
        opacity: 0.8;
    }

.campaign-reward-delete-icon[b-4nna62c2jg] {
    width: 24px;
    height: 24px;
    display: block;
}

/* ============================================
   Block: button
   ============================================ */
.campaign-button[b-4nna62c2jg] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    font-family: 'Aeonik_Variable', sans-serif;
    font-style: normal;
    font-weight: 87;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.campaign-button-add[b-4nna62c2jg] {
    width: 214px;
    height: 53px;
    padding: 0;
    background: #00CF08;
    color: #FFFFFF;
    font-weight: 115;
    font-size: 12px;
    line-height: 14px;
    gap: 8px;
    margin-top: 15px;
}

    .campaign-button-add:hover[b-4nna62c2jg] {
        opacity: 0.9;
    }

.campaign-button-icon[b-4nna62c2jg] {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.campaign-button-cancel[b-4nna62c2jg] {
    width: 123px;
    height: 47px;
    background: #EDEDED;
    color: #3B363F;
    transition: all 0.3s ease;
}

    .campaign-button-cancel:hover[b-4nna62c2jg] {
        transform: scale(1.05);
    }

.campaign-button-save[b-4nna62c2jg] {
    width: 123px;
    height: 47px;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    color: #FFFFFF;
    gap: 8px;
    transition: all 0.3s ease;
}

    .campaign-button-save:hover:not(:disabled)[b-4nna62c2jg] {
        transform: scale(1.05);
    }

    .campaign-button-save:disabled[b-4nna62c2jg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.campaign-spinner[b-4nna62c2jg] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4nna62c2jg 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin-b-4nna62c2jg {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Block: form-actions
   ============================================ */
.campaign-actions[b-4nna62c2jg] {
    width: 100%;
    max-width: 256px;
    display: flex;
    gap: 10px;
    margin: 30px auto;
    padding-top: 20px;
}

/* ============================================
   Block: Upload Area
   ============================================ */

.upload-area[b-4nna62c2jg] {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 2px dashed #CCCCCC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .upload-area:hover[b-4nna62c2jg] {
        border-color: #00A1F5;
    }

.upload-input[b-4nna62c2jg] {
    position: absolute !important;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-placeholder[b-4nna62c2jg] {
    text-align: center;
    pointer-events: none;
}

.upload-icon[b-4nna62c2jg] {
    font-size: 48px;
    color: #CCCCCC;
    margin-bottom: 10px;
}

.upload-btn[b-4nna62c2jg] {
    padding: 20px 60px;
    font-size: 20px;
    font-weight: 600;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid white;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    .upload-btn:hover[b-4nna62c2jg] {
        background: white;
        color: #667eea;
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

.preview[b-4nna62c2jg] {
    position: relative;
}
    .preview img[b-4nna62c2jg] {
        width: 100%;
    }

    .preview .remove-img[b-4nna62c2jg] {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        background: #ef44449c;
        color: white;
        border: 1px solid white;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
        padding-bottom: 5px;
    }

        .preview .remove-img:hover[b-4nna62c2jg] {
            background: #dc2626;
            transform: rotate(90deg) scale(1.1);
        }

.upload-icon-area[b-4nna62c2jg] {
    position: relative;
    width: 100%;
    height: 53px;
    border: 2px dashed #CCCCCC;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .upload-icon-area:hover[b-4nna62c2jg] {
        border-color: #00A1F5;
    }

.preview-container[b-4nna62c2jg] {
    border: 2px dashed #CCCCCC;
    border-radius: 12px;
    height: 53px;
    display: flex;
    justify-content: center;
}

.preview-icon[b-4nna62c2jg] {
    position: relative;
    width: 45px;
    margin: auto;
}

    .preview-icon img[b-4nna62c2jg] {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }

    .preview-icon .remove-img[b-4nna62c2jg] {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        background: #ef44449c;
        color: white;
        border: 1px solid white;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        padding-bottom: 5px;
    }

        .preview-icon .remove-img:hover[b-4nna62c2jg] {
            background: #dc2626;
            transform: rotate(90deg) scale(1.05);
        }
/* ============================================
   Responsive - Mobile First
   ============================================ */
/* PC - 1024px and up */
@media (min-width: 1024px) {
    .campaign-grid[b-4nna62c2jg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .campaign-field-half-width[b-4nna62c2jg] {
        grid-column: span 1;
    }

    .campaign-field-full-width[b-4nna62c2jg] {
        grid-column: 1 / -1;
    }

    .campaign-radio-group[b-4nna62c2jg] {
        flex-wrap: nowrap;
    }
}

/* Mobile - below 1024px */
@media (max-width: 1023px) {
    .create-campaign-page[b-4nna62c2jg] {
        padding: 0;
        width: 100%;
        margin: 0 auto;
    }

    .campaign-header[b-4nna62c2jg] {
        width: 100%;
/*        min-width: 359px;*/
        height: 143px;
        margin: 0 auto 30px;
        padding: 25px 20px;
        box-sizing: border-box;
    }

    .campaign-header-title[b-4nna62c2jg] {
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 8px;
    }

    .campaign-header-subtitle[b-4nna62c2jg] {
        font-size: 14px;
        line-height: 17px;
    }

    .campaign-form[b-4nna62c2jg] {
        width: 100%;
/*        min-width: 359px;*/
        margin: 0 auto;
        padding: 23px 14px 40px;
        box-sizing: border-box;
    }

    .campaign-section-title[b-4nna62c2jg] {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .campaign-label[b-4nna62c2jg] {
        font-size: 14px;
        line-height: 17px;
        margin-bottom: 6px;
    }

    .campaign-label-light[b-4nna62c2jg] {
        font-size: 14px;
        line-height: 17px;
    }

    [b-4nna62c2jg] .campaign-input,
    [b-4nna62c2jg] input.campaign-input,
    [b-4nna62c2jg] select.campaign-input {
        font-size: 12px;
        line-height: 14px;
        width: 100% !important;
/*        min-width: 332px;*/
        height: 53px !important;
    }

    [b-4nna62c2jg] textarea.campaign-input {
        font-size: 12px;
        line-height: 14px;
        width: 100% !important;
/*        min-width: 332px;*/
    }

    .campaign-radio-group[b-4nna62c2jg] {
        flex-direction: row;
        gap: 12px;
    }

    .campaign-radio-option[b-4nna62c2jg] {
/*        min-width: 167px;*/
        width: auto;
        min-height: 53px;
        flex-shrink: 0;
    }

    [b-4nna62c2jg] .campaign-input-date,
    [b-4nna62c2jg] input[type="date"].campaign-input-date {
/*        min-width: 162px !important;*/
        width: 100% !important;
        height: 53px !important;
    }

    .create-campaign-page input[type="time"][b-4nna62c2jg] {
/*        min-width: 162px !important;*/
        width: 100% !important;
        height: 53px !important;
    }

    .toggle-container[b-4nna62c2jg] {
        flex-direction: row;
    }

    .campaign-prize-section[b-4nna62c2jg] {
        width: 100%;
        min-width: auto;
        margin: 0 auto;
        padding-top: 30px;
    }

    .campaign-reward-header[b-4nna62c2jg],
    .campaign-reward-row[b-4nna62c2jg] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0;
    }

    .campaign-reward-header[b-4nna62c2jg] {
        background: transparent;
        border-radius: 0;
        height: auto;
        padding: 0;
        margin-bottom: 20px;
        border-bottom: 0.5px solid #CBC8C8;
    }

    .campaign-reward-header-cell[b-4nna62c2jg] {
        display: none;
    }

    .campaign-reward-row[b-4nna62c2jg] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0;
        margin-bottom: 20px;
        border-bottom: 0.5px solid #CBC8C8 !important;
    }

    .campaign-reward-cell[b-4nna62c2jg] {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        gap: 10px;
        flex-wrap: wrap;
    }

    .campaign-reward-row .campaign-reward-cell[b-4nna62c2jg]::before {
        content: attr(data-label);
        font-family: 'Aeonik_Variable', sans-serif;
        font-style: normal;
        font-weight: 87;
        font-size: 14px;
        line-height: 17px;
        color: #000000;
        display: block !important;
        flex: 0 0 calc(50% - 5px) !important;
        flex-shrink: 0;
        margin-bottom: 0;
        order: 1;
        box-sizing: border-box;
    }
    .campaign-reward-row .campaign-reward-cell:last-child[b-4nna62c2jg] {
        justify-content: end;
    }
    .campaign-reward-row .campaign-reward-cell:last-child[b-4nna62c2jg]::before {
        content: none;
    }

    .campaign-reward-cell[data-label]:not([data-label="Operation"]) > div:not(.validation-message)[b-4nna62c2jg],
    .campaign-reward-cell[data-label]:not([data-label="Operation"]) > input[b-4nna62c2jg],
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg] >  input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg] >  select,
    .campaign-reward-cell[data-label]:not([data-label="Operation"]) .campaign-icon-dropdown[b-4nna62c2jg],
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .input-text,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .input-text.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  input.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  select.campaign-reward-input {
        flex: 0 0 calc(50% - 5px) !important;
/*        min-width: 0 !important;*/
        flex-shrink: 0;
        order: 2;
        box-sizing: border-box;
    }
    
    .campaign-reward-cell[data-label]:not([data-label="Operation"]) .campaign-icon-dropdown-button[b-4nna62c2jg] {
        width: 100% !important;
/*        min-width: 0 !important;*/
    }
    
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .input-text > input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .input-text > select {
        width: 100% !important;
    }
    
    .campaign-reward-cell .validation-message[b-4nna62c2jg] {
        width: 100% !important;
        margin-top: 2px;
        flex-basis: 100% !important;
        order: 3;
    }

        .campaign-reward-cell[data-label="Operation"][b-4nna62c2jg] {
            justify-content: flex-end;
            align-items: center;
            min-height: 53px;
        }

    .campaign-reward-cell[data-label="Operation"][b-4nna62c2jg]::before {
        display: none !important;
    }

    .campaign-reward-cell[data-label="Operation"] > *[b-4nna62c2jg] {
        width: auto !important;
        flex: none;
    }

    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  .input-text.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  input.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  input.input-text.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  select.campaign-reward-input,
    .campaign-reward-cell[data-label]:not([data-label="Operation"])[b-4nna62c2jg]  select.input-text.campaign-reward-input {
        flex: 0 0 calc(50% - 5px) !important;
/*        min-width: 0 !important;*/
        min-height: 53px !important;
        height: 53px !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
        line-height: normal !important;
    }
    
    
    [b-4nna62c2jg] .campaign-icon-dropdown-button {
        width: 100% !important;
/*        min-width: 0 !important;*/
        min-height: 53px !important;
        height: 53px !important;
        box-sizing: border-box !important;
        padding: 10px 15px !important;
        line-height: normal !important;
    }
    [b-4nna62c2jg] textarea.campaign-input {
        height: auto !important;
    }

    .campaign-icon-dropdown[b-4nna62c2jg] {
        width: 50% !important;
/*        min-width: 0 !important;*/
    }

    .campaign-icon-dropdown-button[b-4nna62c2jg] {
        height: 53px !important;
    }

    .campaign-button-add[b-4nna62c2jg] {
        min-width: 182px;
        width: auto;
        margin: 15px 0 0;
    }

    .campaign-actions[b-4nna62c2jg] {
        width: 100%;
/*        min-width: 256px;*/
        margin: 30px auto;
        gap: 10px;
    }

    .campaign-button-cancel[b-4nna62c2jg],
    .campaign-button-save[b-4nna62c2jg] {
        min-width: 123px;
        width: auto;
        height: 47px;
    }
}
/* /Pages/Admin/Campaigns/Dashboard.razor.rz.scp.css */
.d-mobile[b-cz3sdmqfhb] {
    display: none;
}

.d-pc[b-cz3sdmqfhb] {
    display: flex;
}

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

    .header h1[b-cz3sdmqfhb] {
        font-size: 28px;
        font-weight: 600;
        color: #262B27;
        margin: 0 0 8px 0;
    }

    .header p[b-cz3sdmqfhb] {
        font-size: 14px;
        color: #666;
        margin: 0;
    }

.stats-grid[b-cz3sdmqfhb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.stat-card[b-cz3sdmqfhb] {
    border-radius: 20px;
    padding: 22px 32px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 6px 3px 18.4px 8px #EFFAFF inset;
    display: flex;
    flex-direction: column;
    height: 164px;
    justify-content: space-between;
}

    .stat-card:hover[b-cz3sdmqfhb] {
        transform: translateY(-2px);
    }

.stat-title[b-cz3sdmqfhb] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.stat-gradient-bar[b-cz3sdmqfhb] {
    width: 62px;
    height: 4px;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    margin-top: 15px;
}

.stat-value[b-cz3sdmqfhb] {
    font-size: 30px;
    font-weight: bold;
    color: #00A1F5;
    padding-right: 15px;
}

.stat-rate[b-cz3sdmqfhb] {
    font-size: 14px;
    color: #828DA1;
    margin-top: 8px;
}

.stat-icon[b-cz3sdmqfhb] {
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 25px;
    right: 12px;
}

.charts-section[b-cz3sdmqfhb] {
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-grid[b-cz3sdmqfhb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.chart-header-label[b-cz3sdmqfhb] {
    font-size: 20px;
    font-weight: 500;
    color: #010100;
}

.chart-header-select[b-cz3sdmqfhb] {
    display: flex;
    gap: 10px;
    color: #828DA1;
    font-size: 12px;
    height: 40px;
    align-items: center;
    margin-top: 10px;
}

.chart-filter[b-cz3sdmqfhb] {
    padding: 10px;
    border: 1px solid #828DA1;
    border-radius: 6px;
    color: #828DA1;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
    height: 40px;
}

    .chart-filter:hover[b-cz3sdmqfhb] {
        border-color: #00A1F5;
    }

    .chart-filter:focus[b-cz3sdmqfhb] {
        border-color: #00A1F5;
        box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
    }

.chart-wrapper[b-cz3sdmqfhb] {
    position: relative;
    height: 350px;
    width: 100%;
    background: #FAFAFA;
    padding: 30px 20px 10px 20px;
    border-radius: 30px;
    align-content: center;
}

canvas[b-cz3sdmqfhb] {
    width: 100% !important;
}

.loading-spinner[b-cz3sdmqfhb] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00A1F5;
    border-radius: 50%;
    animation: spin-b-cz3sdmqfhb 1s linear infinite;
    margin: auto;
}

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

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

.chart-header[b-cz3sdmqfhb] {
    justify-content: space-between;
    align-items: center;
}

.analytics-section[b-cz3sdmqfhb] {
    margin-top: 40px;
}

.section-title[b-cz3sdmqfhb] {
    font-size: 20px;
    font-weight: 600;
    color: #262B27;
    margin-bottom: 24px;
}

.analytics-grid[b-cz3sdmqfhb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.analytics-card[b-cz3sdmqfhb] {
    background: #F7FCFF;
    border-radius: 30px;
    padding: 10px;
    transition: transform 0.2s ease;
}

    .analytics-card:hover[b-cz3sdmqfhb] {
        transform: translateY(-2px);
    }

.analytics-card-header[b-cz3sdmqfhb] {
    position: relative;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 6px 3px 18.4px 8px #FF728000 inset;
    padding: 30px 25px 25px 25px;
}

.analytics-label[b-cz3sdmqfhb] {
    font-size: 12px;
    font-weight: 500;
    color: #828DA1;
}

    .analytics-label.positive[b-cz3sdmqfhb] {
        color: #009006;
    }

    .analytics-label.negative[b-cz3sdmqfhb] {
        color: #DC0016;
    }

    .analytics-label.user-id[b-cz3sdmqfhb] {
        margin-top: -7px;
    }

.analytics-value-important[b-cz3sdmqfhb] {
    font-size: 20px;
    font-weight: bold;
    margin-top: 3px !important;
}

    .analytics-value-important.visa[b-cz3sdmqfhb] {
        color: #009006;
    }

    .analytics-value-important.scratch[b-cz3sdmqfhb] {
        color: #1B59F8;
    }

    .analytics-value-important.distribution[b-cz3sdmqfhb],
    .analytics-value.peak-hours[b-cz3sdmqfhb] {
        color: #FF7300;
    }

.analytics-icon[b-cz3sdmqfhb] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
}

.analytics-item[b-cz3sdmqfhb] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 15px 25px;
    border-top: 1px solid #e0e0e0;
}

.analytics-value[b-cz3sdmqfhb] {
    font-size: 16px;
    font-weight: bold;
}

    .analytics-value.color-blue[b-cz3sdmqfhb] {
        color: #1B59F8;
    }

.analytics-card .analytics-item:nth-child(2)[b-cz3sdmqfhb] {
    border-top: none;
}

.prize-distribution-section[b-cz3sdmqfhb] {
    margin-top: 40px;
}

.prize-table[b-cz3sdmqfhb] {
    width: 100%;
    border-collapse: collapse;
}

    .prize-table th[b-cz3sdmqfhb] {
        padding: 25px 0;
        text-align: left;
        font-size: 12px;
        font-weight: 500;
        color: #828DA1;
        border-bottom: 1px solid #E0E0E0;
        border-top: 1px solid #E0E0E0;
    }

    .prize-table td[b-cz3sdmqfhb] {
        padding: 20px 0px;
        font-size: 14px;
        color: #010100;
        border-bottom: 1px solid #F3F3F3;
    }

    .prize-table tbody tr:hover[b-cz3sdmqfhb] {
        background: #F9F9F9;
    }

    .prize-table tbody tr:last-child td[b-cz3sdmqfhb] {
        border-bottom: none;
    }

.prize-type[b-cz3sdmqfhb] {
    color: #00A1F5;
    background: #E4F6FF;
    border-radius: 50px;
    width: 115px;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}

.bold-value[b-cz3sdmqfhb] {
    color: #010100;
    font-size: 14px;
    font-weight: bold;
}

.progress-bar-wrapper[b-cz3sdmqfhb] {
    background: #FAFAFA;
    border-radius: 92px;
    width: 210px;
    height: 9px;
    position: relative;
}

.progress-bar[b-cz3sdmqfhb] {
    position: absolute;
    height: 9px;
    border-radius: 92px;
    box-shadow: 0px 0px 9.24px 0px #0000001A;
}

tr:nth-child(1) .progress-bar[b-cz3sdmqfhb],
.prize-item:nth-child(1) .progress-bar[b-cz3sdmqfhb]
{
    background: linear-gradient(356.64deg, rgba(255, 114, 128, 0.8) 48.49%, rgba(220, 0, 22, 0.8) 282.14%);
}

tr:nth-child(2) .progress-bar[b-cz3sdmqfhb],
.prize-item:nth-child(2) .progress-bar[b-cz3sdmqfhb] {
    background: #00CF08;
}

tr:nth-child(3) .progress-bar[b-cz3sdmqfhb],
.prize-item:nth-child(3) .progress-bar[b-cz3sdmqfhb] {
    background: #FF7300;
}
.daily-chart .chart-header[b-cz3sdmqfhb] {
    margin-bottom: 20px;
}
.daily-chart .chart-wrapper[b-cz3sdmqfhb] {
    padding: 30px 20px;
}
/* Responsive design */
@media (max-width: 1439px) {
    .stats-grid[b-cz3sdmqfhb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .stats-grid[b-cz3sdmqfhb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-grid[b-cz3sdmqfhb] {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 1024px) {
    .stats-grid[b-cz3sdmqfhb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 20px;
    }

    .stat-card[b-cz3sdmqfhb] {
        padding: 15px 20px;
        height: 126px;
    }

    .stat-title[b-cz3sdmqfhb] {
        font-size: 14px;
    }

    .stat-gradient-bar[b-cz3sdmqfhb] {
        margin-top: 10px;
        height: 3px;
    }

    .stat-value[b-cz3sdmqfhb] {
        font-size: 20px;
        word-break: break-word;
    }

    .stat-icon[b-cz3sdmqfhb] {
        bottom: 12px;
        right: 0px;
    }

        .stat-icon img[b-cz3sdmqfhb] {
            width: 20px;
        }

    .header h1[b-cz3sdmqfhb] {
        font-size: 24px;
    }

    .charts-section[b-cz3sdmqfhb] {
        margin-top: 17px;
        padding: 0 20px;
    }

    .chart-grid[b-cz3sdmqfhb] {
        gap: 15px;
    }

    .chart-container[b-cz3sdmqfhb] {
        background: #FAFAFA;
        border-radius: 15px;
    }

    .chart-header[b-cz3sdmqfhb] {
        padding: 15px 25px;
        flex-direction: column;
        align-items: start;
    }

    .daily-chart[b-cz3sdmqfhb] {
        margin-top: 0;
    }

        .daily-chart .chart-container[b-cz3sdmqfhb],
        .daily-chart .chart-wrapper[b-cz3sdmqfhb] {
            background: none;
        }

        .daily-chart .chart-header[b-cz3sdmqfhb] {
            padding: 15px 0;
            margin-bottom: 10px;
        }

    .chart-header-label[b-cz3sdmqfhb] {
        font-size: 18px;
    }

    .chart-header-select[b-cz3sdmqfhb] {
        width: 100%;
    }

    .chart-filter[b-cz3sdmqfhb] {
        flex: 1;
    }

    .chart-wrapper[b-cz3sdmqfhb] {
        padding: 0;
        height: 300px;
    }

    .d-mobile[b-cz3sdmqfhb] {
        display: flex;
    }

    .d-pc[b-cz3sdmqfhb] {
        display: none;
    }

    .analytics-section[b-cz3sdmqfhb] {
        margin-top: 25px;
    }

    .analytics-grid[b-cz3sdmqfhb] {
        grid-template-columns: repeat(3, 1fr);
        overflow: auto;
        gap: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 20px;
    }

        .analytics-grid[b-cz3sdmqfhb]::-webkit-scrollbar {
            display: none;
        }

    .analytics-card[b-cz3sdmqfhb] {
        min-width: 280px;
        background-color: #EFF7FB;
    }

    .analytics-icon[b-cz3sdmqfhb] {
        right: 10px;
    }

    .prize-distribution-section[b-cz3sdmqfhb] {
        padding: 0 20px;
        margin-top: 20px;
    }

    .section-title[b-cz3sdmqfhb] {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .prize-table[b-cz3sdmqfhb] {
        display: none;
    }

    .prize-wrapper[b-cz3sdmqfhb] {
        flex-direction: column;
    }

    .prize-item[b-cz3sdmqfhb] {
        flex: 1;
        border-top: 0.5px solid #CACACA;
        gap: 10px;
        display: flex;
        flex-direction: column;
        padding: 12px 0;
    }

        .prize-item:last-child[b-cz3sdmqfhb] {
            border-bottom: 0.5px solid #CACACA;
        }

    .item-row[b-cz3sdmqfhb] {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-content: center;
        align-items: center;
    }

    .item-label[b-cz3sdmqfhb] {
        font-size: 12px;
    }

    .item-value[b-cz3sdmqfhb] {
        font-size: 14px;
    }

    .prize-type[b-cz3sdmqfhb] {
        width: 65px;
        font-size: 12px;
        padding: 5px 0;
    }

    .progress-bar-wrapper[b-cz3sdmqfhb] {
        width: 210px;
    }
}
/* /Pages/Admin/Campaigns/ImageCropModal.razor.rz.scp.css */
.close-button[b-uancisywtd] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    z-index: 2;
}

    .close-button:hover[b-uancisywtd] {
        color: #333;
    }

.modal-header[b-uancisywtd] {
    text-align: center;
    position: relative;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: none;
    padding: 0;
}

    .modal-header h2[b-uancisywtd] {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

.modal-title[b-uancisywtd] {
    font-size: 28px;
    font-weight: bold;
    color: white;
    position: relative;
    z-index: 1;
}

.modal-body[b-uancisywtd] {
    padding-top: 15px;
    font-size: 14px;
}

.image-container[b-uancisywtd] {
    max-height: 500px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

    .image-container img[b-uancisywtd] {
        max-width: 100%;
        display: block;
    }

.btn[b-uancisywtd] {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.crop-action[b-uancisywtd] {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.btn-cancel[b-uancisywtd] {
    background: #EDEDED;
    color: #3B363F;
}

    .btn-cancel:hover[b-uancisywtd] {
        transform: scale(1.05);
    }

.btn-crop[b-uancisywtd] {
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-crop:hover[b-uancisywtd] {
        transform: scale(1.05);
    }

.crop-spinner[b-uancisywtd] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin-b-uancisywtd 0.8s linear infinite;
    display: inline-block;
}

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

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

.result-image[b-uancisywtd] {
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.result-buttons[b-uancisywtd] {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-download[b-uancisywtd] {
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    color: white;
    padding: 12px 30px;
}

    .btn-download:hover[b-uancisywtd] {
        transform: scale(1.05);
    }

.preview img[b-uancisywtd] {
    max-width: 100%;
}

@media (max-width: 1024px) {
    .close-button[b-uancisywtd] {
        top: 5px;
    }
}
/* /Pages/Admin/Campaigns/ReportOutputModal.razor.rz.scp.css */
.close-button[b-f5hzleujcd] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    z-index: 2;
}

    .close-button:hover[b-f5hzleujcd] {
        color: #333;
    }

.modal-header[b-f5hzleujcd] {
    text-align: center;
    position: relative;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: none;
    padding: 0;
}

    .modal-header h2[b-f5hzleujcd] {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

@keyframes pulse-b-f5hzleujcd {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

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

.header-icon[b-f5hzleujcd] {
    font-size: 48px;
    margin-bottom: 15px;
    animation: bounce-b-f5hzleujcd 2s ease-in-out infinite;
}

@keyframes bounce-b-f5hzleujcd {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.modal-title[b-f5hzleujcd] {
    font-size: 28px;
    font-weight: bold;
    color: white;
    position: relative;
    z-index: 1;
}

.modal-body[b-f5hzleujcd] {
    padding: 20px 20px 15px 20px;
    font-size: 14px;
    overflow-x: visible;
}
.filter-section[b-f5hzleujcd] {
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.filter-group[b-f5hzleujcd]{
    display: grid;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

    .filter-group:first-child[b-f5hzleujcd] {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 10px;
    }


    .filter-group:last-child[b-f5hzleujcd] {
        grid-template-columns: 1fr 1fr auto;
        min-width: 0;
    }

    .filter-group:last-child > *[b-f5hzleujcd] {
        min-width: 0;
    }

    .filter-group:last-child .btn-reset[b-f5hzleujcd] {
        min-width: 100px;
    }

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

.search-input[b-f5hzleujcd] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-input:focus[b-f5hzleujcd] {
        border-color: #00A1F5;
        box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
    }

.search-icon[b-f5hzleujcd] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}

    .search-icon:hover[b-f5hzleujcd] {
        background: none;
        color: #535c6c;
    }

    .search-icon:hover[b-f5hzleujcd] {
        color: #00A1F5;
    }

.filter-select[b-f5hzleujcd] {
    padding: 11px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
    color: #828DA1;
}

    .filter-select:hover[b-f5hzleujcd] {
        border-color: #00A1F5;
    }

    .filter-select:focus[b-f5hzleujcd] {
        border-color: #00A1F5;
        box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
    }

.btn-reset[b-f5hzleujcd] {
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 100px;
    flex-shrink: 0;
}

    .btn-reset:hover[b-f5hzleujcd] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 161, 245, 0.3);
    }

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

.campaigns-section[b-f5hzleujcd] {
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

    .campaigns-section[b-f5hzleujcd]::-webkit-scrollbar {
        width: 6px;
    }

    .campaigns-section[b-f5hzleujcd]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .campaigns-section[b-f5hzleujcd]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }

        .campaigns-section[b-f5hzleujcd]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.campaign-item[b-f5hzleujcd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

    .campaign-item:hover[b-f5hzleujcd] {
        border-color: #00A1F5;
        box-shadow: 0 2px 8px rgba(0, 161, 245, 0.1);
    }

    .campaign-item.selected[b-f5hzleujcd] {
        border: 2px solid transparent;
        background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #FF7280 0%, #00A1F5 100%) border-box;
        box-shadow: 0 4px 12px rgba(0, 161, 245, 0.2);
    }

.campaign-checkbox[b-f5hzleujcd] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #00A1F5;
    flex-shrink: 0;
}

.campaign-content[b-f5hzleujcd] {
    flex: 1;
    min-width: 0;
}

.campaign-name[b-f5hzleujcd] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.campaign-details[b-f5hzleujcd] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px;
    font-size: 14px;
    color: #666;
}

.campaign-detail-item[b-f5hzleujcd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .campaign-detail-item i[b-f5hzleujcd] {
        color: #828DA1;
        font-size: 14px;
    }

.campaign-status[b-f5hzleujcd] {
    flex-shrink: 0;
}

.status-badge[b-f5hzleujcd] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-transform: none;
}

.status-in-progress[b-f5hzleujcd] {
    color: #FF7300;
    background: #FF730029;
}

.status-scheduled[b-f5hzleujcd] {
    color: #1E90FF;
    background: #E8F4FF;
}

.status-finished[b-f5hzleujcd] {
    color: #E53935;
    background: #FFE8EC;
}

.status-draft[b-f5hzleujcd] {
    color: #6B6B80;
    background: #F2F2F5;
}

.no-campaigns[b-f5hzleujcd] {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
}

.load-more-sentinel[b-f5hzleujcd] {
    height: 1px;
    width: 100%;
    margin: 10px 0;
}

.load-more-container[b-f5hzleujcd] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin-top: 10px;
}

.loading-indicator[b-f5hzleujcd] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

    .loading-indicator i[b-f5hzleujcd] {
        font-size: 20px;
        color: #00A1F5;
    }

.action-section[b-f5hzleujcd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E0E0E0;
}

.selection-info[b-f5hzleujcd] {
    display: flex;
    gap: 5px;
    flex-direction: column;
}
.select-all-wrapper[b-f5hzleujcd] {
    align-items: center;
    display: flex;
    gap: 5px;
}

.select-all-checkbox[b-f5hzleujcd] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #00A1F5;
}

.select-all-label[b-f5hzleujcd] {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.selected-count[b-f5hzleujcd] {
    font-size: 14px;
    color: #666;
    margin-left: 5px;
}

.btn-report-output[b-f5hzleujcd] {
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-report-output:hover:not(:disabled)[b-f5hzleujcd] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 161, 245, 0.4);
    }

    .btn-report-output:active:not(:disabled)[b-f5hzleujcd] {
        transform: translateY(0);
    }

    .btn-report-output:disabled[b-f5hzleujcd] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-report-output i[b-f5hzleujcd] {
        font-size: 16px;
    }

@media (max-width: 1024px) {
    .modal-title[b-f5hzleujcd] {
        margin-bottom: 0;
    }

    .modal-header[b-f5hzleujcd] {
        padding: 30px 30px 0px;
    }

    .modal-body[b-f5hzleujcd] {
        padding: 20px 20px 15px 20px;
    }

    .filter-section[b-f5hzleujcd] {
        width: 100%;
        overflow-x: visible;
    }

    .filter-group:last-child[b-f5hzleujcd] {
        grid-template-columns: 1fr 1fr auto;
        gap: 10px;
        min-width: 0;
    }

    .filter-group:last-child .date-input[b-f5hzleujcd] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        padding: 10px 12px;
        -webkit-appearance: none;
    }

    .filter-group:last-child .btn-reset[b-f5hzleujcd] {
        min-width: 70px;
        flex-shrink: 0;
        font-size: 12px;
        padding: 10px 12px;
    }
}
/* /Pages/Admin/Campaigns/ScratchDetailModal.razor.rz.scp.css */
.close-button[b-5x5m3ze883] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    z-index: 2;
}

    .close-button:hover[b-5x5m3ze883] {
        color: #333;
    }

.modal-header[b-5x5m3ze883] {
    text-align: center;
    position: relative;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: none;
    padding: 0;
}

    .modal-header h2[b-5x5m3ze883] {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

@keyframes pulse-b-5x5m3ze883 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

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

.header-icon[b-5x5m3ze883] {
    font-size: 48px;
    margin-bottom: 15px;
    animation: bounce-b-5x5m3ze883 2s ease-in-out infinite;
}

@keyframes bounce-b-5x5m3ze883 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.modal-title[b-5x5m3ze883] {
    font-size: 28px;
    font-weight: bold;
    color: white;
    position: relative;
    z-index: 1;
}

.modal-body[b-5x5m3ze883] {
    padding: 0 0 0 15px;
    font-size: 14px;
}

.scratch-info[b-5x5m3ze883] {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.item-row[b-5x5m3ze883] {
    display: grid;
    grid-template-columns: minmax(100px, 200px) minmax(220px, 1fr);
    padding: 18px 10px;
    border-bottom: 1px solid #DCDCDC;
}

.item-label[b-5x5m3ze883] {
    align-content: center;
}

.item-data p[b-5x5m3ze883]{
    word-break: break-word;
}

.item-data input:disabled[b-5x5m3ze883] {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #CCCCCC;
    width: 100%;
}

.user-avatar[b-5x5m3ze883] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #D9D9D9;
}

.user-name[b-5x5m3ze883] {
    margin-left: 10px;
}

.reward[b-5x5m3ze883] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reward-icon[b-5x5m3ze883] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

.reward-info[b-5x5m3ze883] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reward-name[b-5x5m3ze883] {
    color: #010100;
}

.reward-value[b-5x5m3ze883] {
    color: #00CF08;
    font-weight: bold;
}

.no-reward[b-5x5m3ze883] {
    color: #828DA1;
}

.label-badge[b-5x5m3ze883] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: #F3F3F3;
    font-size: 12px;
    font-weight: 500;
}
    .label-badge.physical[b-5x5m3ze883] {
        color: #00A1F5;
        background: #E4F6FF;
    }

    .label-badge.crypto[b-5x5m3ze883] {
        color: #FF9F1C;
        background: #FFF6E5;
    }

    .label-badge.email[b-5x5m3ze883] {
        color: #A46BFF;
        background: #F4E9FF;
    }

    .label-badge.result-win[b-5x5m3ze883] {
        color: #00CF08;
        background: #DDFFDE;
    }

    .label-badge.delivered[b-5x5m3ze883] {
        background: #FF730029;
        color: #FF7300;
    }

    .label-badge.processing[b-5x5m3ze883] {
        background: #c4f7ff;
        color: #17A2B8;
    }

    .label-badge.pending[b-5x5m3ze883] {
        background: #fbf1cf;
        color: #d3a300;
    }

.qr-code-container[b-5x5m3ze883] {
    margin-top: 5px;
    background: linear-gradient(90deg, #00a1f5 0%, #ff7280 100%);
    border-radius: 12px;
    padding: 1px;
    width: fit-content;
}

.qr-code[b-5x5m3ze883] {
    padding: 10px;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 10px;
}

.action-row[b-5x5m3ze883] {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 15px;
}
    .action-row button:hover[b-5x5m3ze883] {
        transform: scale(1.05) !important;
    }

.btn-action-close[b-5x5m3ze883] {
    background: #EDEDED;
    padding: 8px 16px;
    border: none;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    transition: all 0.5s ease;
    color: #3B363F;
}

@media (max-width: 1024px) {
    .modal-title[b-5x5m3ze883] {
        margin-bottom: 0;
    }

    .modal-header[b-5x5m3ze883] {
        padding: 30px 20px 0px;
    }

    .scratch-info[b-5x5m3ze883] {
        margin-top: 15px;
    }

    .item-row[b-5x5m3ze883] {
        padding: 15px 5px;
    }

    .action-row[b-5x5m3ze883] {
        padding-bottom: 20px;
    }
}
/* /Pages/Admin/Campaigns/ScratchHistory.razor.rz.scp.css */

.page-title[b-mhv4pigi8l] {
    margin-bottom: 30px;
}

.page-title h1[b-mhv4pigi8l]{
    font-size: 28px;
    font-weight: 600;
    color: #262B27;
    margin-bottom: 0;
}

.stats-grid[b-mhv4pigi8l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.stat-card[b-mhv4pigi8l] {
    border-radius: 20px;
    padding: 22px 32px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 6px 3px 18.4px 8px #EFFAFF inset;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 164px;
    justify-content: space-between;
}

    .stat-card:hover[b-mhv4pigi8l] {
        transform: translateY(-2px);
    }

.stat-title[b-mhv4pigi8l] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

.stat-gradient-bar[b-mhv4pigi8l] {
    width: 62px;
    height: 4px;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    margin-top: 15px;
}

.stat-value[b-mhv4pigi8l] {
    font-size: 30px;
    font-weight: bold;
    color: #00A1F5;
    padding-right: 15px;
}

.arrow-icon[b-mhv4pigi8l] {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 15px;
    top: 24px;
}

.stat-icon[b-mhv4pigi8l] {
    position: absolute;
    width: 32px;
    height: 32px;
    right: 15px;
    bottom: 24px
}

.stat-card:nth-child(1) .stat-value[b-mhv4pigi8l] {
    color: #00CF08;
}
.stat-card:nth-child(2) .stat-value[b-mhv4pigi8l] {
    color: #FF7300;
}
.stat-card:nth-child(3) .stat-value[b-mhv4pigi8l] {
    color: #00A1F5;
}
.stat-card:nth-child(4) .stat-value[b-mhv4pigi8l] {
    color: #DC0016;
}

.mobile-dash[b-mhv4pigi8l] {
    display: none;
}

.scratch-history-filters[b-mhv4pigi8l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 20px;
    margin-top: 25px;
}

.filter-row[b-mhv4pigi8l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.filter-group[b-mhv4pigi8l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #828DA1;
}

.filter-select[b-mhv4pigi8l] {
    padding: 11px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 12px;
    color: #828DA1;
    height: 40px;
}

.filter-select:hover[b-mhv4pigi8l] {
    border-color: #00A1F5;
}

.filter-select:focus[b-mhv4pigi8l] {
    border-color: #00A1F5;
    box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
}

.search-wrapper[b-mhv4pigi8l] {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
}

.search-input[b-mhv4pigi8l] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 40px;
}

.search-input:focus[b-mhv4pigi8l] {
    border-color: #00A1F5;
    box-shadow: 0 0 0 3px rgba(0, 161, 245, 0.1);
}

.search-icon[b-mhv4pigi8l] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}

    .search-icon:hover[b-mhv4pigi8l] {
        background: none;
        color: #535c6c;
    }

.search-icon:hover[b-mhv4pigi8l] {
    color: #00A1F5;
}

.result-history-container[b-mhv4pigi8l] {
    margin-top: 25px;
}

.history-list-header[b-mhv4pigi8l] {
    display: flex;
    justify-content: space-between;
}
    .history-list-header h3[b-mhv4pigi8l] {
        font-size: 20px;
        font-weight: 500;
        color: #010100;
        align-content: center;
    }

.generic-table[b-mhv4pigi8l] {
    margin-top: 23px;
}

    .generic-table th[b-mhv4pigi8l] {
        text-align: left;
        padding: 15px 0;
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
        font-size: 12px;
        font-weight: 500;
        color: #828DA1;
        background-color: #FFFFFF;
    }

    .generic-table td[b-mhv4pigi8l] {
        color: #010100;
        padding: 15px 0;
        border-bottom: 1px dashed #B5BDCA;
        vertical-align: middle;
        font-size: 12px;
        font-weight: 500;
    }

    .generic-table tbody tr:hover[b-mhv4pigi8l] {
        background: #F9F9F9;
    }

    .generic-table tbody tr:last-child td[b-mhv4pigi8l] {
        border-bottom: none;
    }

.scratch-date[b-mhv4pigi8l] {
    font-size: 14px;
    color: #000000;
}

.scratch-time[b-mhv4pigi8l] {
    font-size: 12px;
    color: #828DA1;
    font-weight: 400;
}

.user-cell[b-mhv4pigi8l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-mhv4pigi8l] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #D9D9D9;
}

.user-name[b-mhv4pigi8l] {
    color: #010100;
}

.reward-cell[b-mhv4pigi8l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reward-icon[b-mhv4pigi8l] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

.reward-info[b-mhv4pigi8l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reward-name[b-mhv4pigi8l] {
    color: #010100;
}

.reward-value[b-mhv4pigi8l] {
    font-size: 10px;
    color: #00CF08;
    font-weight: bold;
}

.no-reward[b-mhv4pigi8l] {
    color: #828DA1;
}

.result-badge[b-mhv4pigi8l] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
}

.result-win[b-mhv4pigi8l] {
    background: #E4F6FF;
    color: #00A1F5;
}

.result-lose[b-mhv4pigi8l] {
    background: #F3F3F3;
    color: #828DA1;
}

.delivery-status-badge[b-mhv4pigi8l] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
}

.delivery-delivered[b-mhv4pigi8l] {
    background: #FF730029;
    color: #FF7300;
}

.delivery-processing[b-mhv4pigi8l] {
    background: #c4f7ff;
    color: #17A2B8;
}

.delivery-pending[b-mhv4pigi8l] {
    background: #fbf1cf;
    color: #d3a300;
}

.delivery-na[b-mhv4pigi8l] {
    background: #F3F3F3;
    color: #828DA1;
}

.empty-state[b-mhv4pigi8l] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-content[b-mhv4pigi8l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.empty-state-content p[b-mhv4pigi8l] {
    font-size: 16px;
    color: #828DA1;
    margin: 0;
}

.loading-logo-centered[b-mhv4pigi8l] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-logo[b-mhv4pigi8l] {
    width: 100px;
    height: 100px;
    animation: pulse-b-mhv4pigi8l 2s ease-in-out infinite;
}

@keyframes pulse-b-mhv4pigi8l {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.btn-detail[b-mhv4pigi8l] {
    border: none;
    padding: 0;
    background: none;
    color: #9a9a9a;
}

    .btn-detail:hover[b-mhv4pigi8l] {
        color: #1C1B1F;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .page-title[b-mhv4pigi8l] {
        margin-bottom: 12px;
        display: flex;
    }
        .page-title h1[b-mhv4pigi8l] {
            background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
        }

    .stats-grid[b-mhv4pigi8l] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .stat-card[b-mhv4pigi8l] {
        padding: 15px 20px;
        height: 126px;
    }

    .stat-gradient-bar[b-mhv4pigi8l] {
        margin-top: 10px;
    }

    .arrow-icon[b-mhv4pigi8l] {
        display: none;
    }

    .stat-value[b-mhv4pigi8l] {
        font-size: 20px;
    }

    .stat-icon[b-mhv4pigi8l] {
        right: 5px;
        bottom: 10px;
    }
    .stat-icon img[b-mhv4pigi8l] {
        width: 23px;
    }

    .mobile-dash[b-mhv4pigi8l] {
        display: flex;
        border-top: 1px dashed #828DA1;
        margin-top: 12px
    }

    .scratch-history-filters[b-mhv4pigi8l] {
        padding: 15px 0;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .filter-row[b-mhv4pigi8l] {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 10px;
    }

    .filter-group:last-child[b-mhv4pigi8l] {
        grid-column: 1 / -1;
    }

    .history-list-header h3[b-mhv4pigi8l] {
        font-size: 18px;
    }

    .generic-table[b-mhv4pigi8l] {
        display: flex;
    }
        .generic-table thead[b-mhv4pigi8l] {
            display: none;
        }
        .generic-table tbody[b-mhv4pigi8l] {
            width: 100%;
        }
            .generic-table tbody tr[b-mhv4pigi8l] {
                display: flex;
                flex-direction: column;
                border-top: 1px solid #E0E0E0;
                padding: 5px 0;
            }
            .generic-table tbody tr:hover[b-mhv4pigi8l] {
                background: none;
            }

        .generic-table td[b-mhv4pigi8l] {
            border: none;
            text-align: right;
            justify-items: end;
            padding: 5px 0;
            position: relative;
        }

            .generic-table td[b-mhv4pigi8l]::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                font-weight: 400;
                color: #828DA1;
            }

        .generic-table td .user-cell[b-mhv4pigi8l] {
            justify-content: flex-end;
            margin-left: auto;
        }

        .generic-table td .reward-cell[b-mhv4pigi8l] {
            justify-content: flex-end;
            margin-left: auto;
        }

    .empty-state-content[b-mhv4pigi8l] {
        margin: auto;
    }
}
/* /Pages/Dashboard/Campaign/AddressInputModal.razor.rz.scp.css */
.close-button[b-975hq2v4mr] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    z-index: 2;
}

    .close-button:hover[b-975hq2v4mr] {
        color: #333;
    }

.modal-header[b-975hq2v4mr] {
    text-align: center;
    position: relative;
    justify-content: center;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: none;
    padding: 0;
}

    .modal-header h2[b-975hq2v4mr] {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

@keyframes pulse-b-975hq2v4mr {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

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

.header-icon[b-975hq2v4mr] {
    font-size: 48px;
    margin-bottom: 15px;
    animation: bounce-b-975hq2v4mr 2s ease-in-out infinite;
}

@keyframes bounce-b-975hq2v4mr {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.modal-title[b-975hq2v4mr] {
    font-size: 28px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.modal-subtitle[b-975hq2v4mr] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}

.form-grid[b-975hq2v4mr] {
    padding: 10px 20px 20px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.form-field[b-975hq2v4mr] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-975hq2v4mr] {
        grid-column: 1 / -1;
    }

.field-label[b-975hq2v4mr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.label-text[b-975hq2v4mr] {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.input-text[b-975hq2v4mr] {
    padding: 10px;
}

.required-tag[b-975hq2v4mr] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.optional-tag[b-975hq2v4mr] {
    background: #e0e0e0;
    color: #666;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.field-input[b-975hq2v4mr],
.field-textarea[b-975hq2v4mr] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

    .field-input:hover[b-975hq2v4mr] {
        border-color: #d1d5db;
    }

    .field-input:focus[b-975hq2v4mr],
    .field-textarea:focus[b-975hq2v4mr] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        transform: translateY(-1px);
    }

.field-textarea[b-975hq2v4mr] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.field-error[b-975hq2v4mr] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .field-error[b-975hq2v4mr]::before {
        content: '⚠';
        font-size: 14px;
    }

.info-box[b-975hq2v4mr] {
    margin: 0 40px 24px;
    padding: 16px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    color: #92400e;
    font-size: 13px;
    line-height: 1.6;
}

    .info-box svg[b-975hq2v4mr] {
        flex-shrink: 0;
        margin-top: 2px;
    }

.form-actions[b-975hq2v4mr] {
    padding: 0 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.submit-btn[b-975hq2v4mr] {
    width: 142px;
    height: 47px;
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .submit-btn:hover[b-975hq2v4mr] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
    }

    .submit-btn:active[b-975hq2v4mr] {
        transform: translateY(0);
    }

.select:disabled[b-975hq2v4mr] {
    opacity: 0.5 !important;
}

.checkbox-container[b-975hq2v4mr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-label[b-975hq2v4mr] {
    margin: 0;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
}

input[type="checkbox"][b-975hq2v4mr] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007bff;
}

.note[b-975hq2v4mr] {
    font-size: 13px;
    margin-top: 10px;
    color: red;
}

    .note[b-975hq2v4mr]  a {
        color: #00C300 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, rgba(0, 195, 0, 0.1) 0%, rgba(0, 195, 0, 0.15) 100%);
        padding: 4px 12px;
        border-radius: 6px;
        border: 2px solid #00C300;
        display: inline-block;
        position: relative;
        transition: all 0.3s ease;
        animation: pulse-urgent-b-975hq2v4mr 2s ease-in-out infinite;
        box-shadow: 0 2px 8px rgba(0, 195, 0, 0.3);
        margin-left: 4px;
    }

        .note[b-975hq2v4mr]  a:hover {
            background: linear-gradient(135deg, rgba(0, 195, 0, 0.2) 0%, rgba(0, 195, 0, 0.25) 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 195, 0, 0.5);
            border-color: #00E600;
        }

        .note[b-975hq2v4mr]  a:active {
            transform: scale(0.98);
        }

@keyframes pulse-urgent-b-975hq2v4mr {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 195, 0, 0.3);
    }

    50% {
        box-shadow: 0 2px 16px rgba(0, 195, 0, 0.6), 0 0 0 4px rgba(0, 195, 0, 0.1);
    }
}

@media (max-width: 1024px) {
    .modal-title[b-975hq2v4mr] {
        margin-bottom: 0;
    }

    .header-icon[b-975hq2v4mr] {
        font-size: 40px;
    }

    .info-box[b-975hq2v4mr] {
        margin: 0 20px 20px;
    }

    .modal-header[b-975hq2v4mr] {
        padding: 30px 20px 0px;
    }

    .form-grid[b-975hq2v4mr] {
        padding: 20px;
        gap: 2px;
    }

    .form-actions[b-975hq2v4mr] {
        padding: 0 20px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .form-grid[b-975hq2v4mr] {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
}
/* /Pages/Dashboard/Campaign/Confetti.razor.rz.scp.css */
.confetti[b-0exltvicsg] {
    position: absolute;
    top: -160px;
    left: 0;
    right: 0;
    height: 360px;
    pointer-events: none;
    z-index: 1;
}

    .confetti img[b-0exltvicsg] {
        position: absolute;
        top: 0;
    }

.fall[b-0exltvicsg] {
    animation: bannerConfettiFall-b-0exltvicsg 2.5s linear infinite;
}

.rotate[b-0exltvicsg] {
    animation: bannerConfettiRotate-b-0exltvicsg 4s linear infinite;
}

.scratch[b-0exltvicsg] {
    top: -180px;
}

    .scratch .fall[b-0exltvicsg] {
        width: 10px;
        animation: bannerConfettiFall-b-0exltvicsg 2.5s linear infinite;
    }

    .scratch .rotate[b-0exltvicsg] {
        width: 15px;
        animation: bannerConfettiRotate-b-0exltvicsg 5s linear infinite;
    }

@keyframes bannerConfettiFall-b-0exltvicsg {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    70% {
        opacity: .95;
    }

    100% {
        transform: translateY(360px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes bannerConfettiRotate-b-0exltvicsg {
    0% {
        transform: translateY(0) rotateY(0deg);
        opacity: 1;
    }

    70% {
        opacity: .95;
    }

    100% {
        transform: translateY(360px) rotateY(360deg);
        opacity: 0;
    }
}

@media (max-width: 1024px) {
    .scratch.confetti[b-0exltvicsg] {
        top: -250px;
    }

    .confetti:not(.scratch) .fall[b-0exltvicsg] {
        width: 10px;
        animation: confettiFallMobile-b-0exltvicsg 3.5s linear infinite;
    }

    .confetti:not(.scratch) .rotate[b-0exltvicsg] {
        width: 15px;
        animation: confettiRotateMobile-b-0exltvicsg 5s linear infinite;
    }

    @keyframes confettiFallMobile-b-0exltvicsg {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }

        70% {
            opacity: .95;
        }

        100% {
            transform: translateY(360px) rotate(360deg);
            opacity: 0;
        }
    }

    @keyframes confettiRotateMobile-b-0exltvicsg {
        0% {
            transform: translateY(0) rotateY(0deg);
            opacity: 1;
        }

        70% {
            opacity: .95;
        }

        100% {
            transform: translateY(500px) rotateY(360deg);
            opacity: 0;
        }
    }

    .scratch .fall[b-0exltvicsg] {
        animation: confettiFallMobileScratch-b-0exltvicsg 3.5s linear infinite;
    }

    .scratch .rotate[b-0exltvicsg] {
        animation: confettiRotateMobileScratch-b-0exltvicsg 5s linear infinite;
    }

    @keyframes confettiFallMobileScratch-b-0exltvicsg {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }

        70% {
            opacity: .95;
        }

        100% {
            transform: translateY(700px) rotate(360deg);
            opacity: 0;
        }
    }

    @keyframes confettiRotateMobileScratch-b-0exltvicsg {
        0% {
            transform: translateY(0) rotateY(0deg);
            opacity: 1;
        }

        70% {
            opacity: .95;
        }

        100% {
            transform: translateY(700px) rotateY(360deg);
            opacity: 0;
        }
    }
}
/* /Pages/Dashboard/Campaign/MyPage.razor.rz.scp.css */
.mypage[b-kllnuv73jx] {
    margin: 0 auto;
    padding-top: 15px;
}

.campaign-summary[b-kllnuv73jx] {
    background: #FAFAFA;
    border-radius: 20px;
}

.campaign-banner[b-kllnuv73jx] {
    background-size: cover;
    background: linear-gradient(129.46deg, #FF7280 0.03%, #00A1F5 120.08%);
    background-position: center;
    border-radius: 20px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-end-start-radius: 0px;
    border-end-end-radius: 0px;
}

.banner-content-mobile[b-kllnuv73jx] {
    display: none;
}

.banner-content[b-kllnuv73jx] {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    width: 100%;
}

.banner-title[b-kllnuv73jx] {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    -webkit-text-stroke: 8px #0099ff;
    margin: 0;
    letter-spacing: 2px;
    line-height: 1.5;
    position: relative;
    filter: drop-shadow(3px 6px 0px #FF7280);
    padding: 2px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

    .banner-title[b-kllnuv73jx]::after {
        content: attr(data-campaign);
        position: absolute;
        -webkit-text-stroke: snow;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        filter: none;
        text-align: center;
        width: 100%;
        padding: 2px;
    }

.banner-subtitle[b-kllnuv73jx] {
    font-size: 14px;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.banner-progress-section[b-kllnuv73jx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.banner-main[b-kllnuv73jx] {
    border-end-start-radius: 20px;
    width: 100%;
}

.progress-section[b-kllnuv73jx] {
    /*    padding: 37px 38px;*/
    /*    padding: 0 38px;*/
    /*    margin-bottom: 30px;*/
    align-content: space-around;
}

.progress-header[b-kllnuv73jx] {
    display: flex;
    /*    justify-content: space-between;*/
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}

.progress-title[b-kllnuv73jx] {
    font-size: 24px;
    font-weight: 500;
    color: #262B27;
}

.progress-amount[b-kllnuv73jx] {
    font-size: 18px;
    font-weight: bold;
    color: #FF7280;
    margin-bottom: .5rem;
}

.progress-bar-wrapper[b-kllnuv73jx] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.circular-progress[b-kllnuv73jx] {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.progress-ring[b-kllnuv73jx] {
    width: 50%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.progress-ring-background[b-kllnuv73jx] {
    fill: none;
    stroke: #E0E0E0;
    stroke-width: 20;
}

.progress-ring-fill[b-kllnuv73jx] {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    transition: stroke-dashoffset 2s ease-out;
    transform-origin: 50% 50%;
}

.progress-ring defs[b-kllnuv73jx] {
    position: absolute;
}

.progress-text[b-kllnuv73jx] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 32px;
    color: #262B27;
    text-align: center;
    pointer-events: none;
}

    .progress-text.text-gray[b-kllnuv73jx] {
        color: #828da1;
    }

.milestone-rewards[b-kllnuv73jx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
    position: relative;
}

.milestone[b-kllnuv73jx] {
    position: relative;
    text-align: center;
    transition: all 0.3s;
}

.milestone-icon[b-kllnuv73jx] {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #FF7280;
    font-size: 28px;
    position: relative;
    z-index: 1;
}

    .milestone-icon img[b-kllnuv73jx] {
        width: 24px;
        height: 24px;
    }

.milestone.achieved .milestone-icon[b-kllnuv73jx] {
    background: #FF7280;
    color: #FFFFFF;
    border-color: #FF7280;
    box-shadow: 0 6px 18px rgba(255,114,128,0.35);
}

.milestone .milestone-amount[b-kllnuv73jx] {
    margin-top: 8px;
    font-size: 12px;
    color: #262B27;
}

.sub-progress[b-kllnuv73jx] {
    position: absolute;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    top: 35%;
}

.sub-progress-bar[b-kllnuv73jx] {
    height: 1px;
    border: 1px solid #FF7280;
}

    .sub-progress-bar[b-kllnuv73jx]::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
        transform: translateY(-50%);
        width: 100%;
    }

.scratch-section[b-kllnuv73jx] {
    margin-top: 10px;
}

.mobile-dash[b-kllnuv73jx] {
    display: none;
}

.stats-dashboard[b-kllnuv73jx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 45px;
}

.stat-card[b-kllnuv73jx] {
    border-radius: 20px;
    padding: 30px 40px;
    transition: transform 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: start;
    position: relative;
    border: 1px solid #F3F3F3;
    box-shadow: 6px 3px 18.4px 8px #EFFAFF inset;
    background: #FFFFFF;
}

    .stat-card:hover[b-kllnuv73jx] {
        transform: translateY(-5px);
    }

    .stat-card .stat-content[b-kllnuv73jx] {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

.stat-divider[b-kllnuv73jx] {
    width: 28px;
    height: 4px;
    background: linear-gradient(90deg, #FF7280 0%, rgba(255, 114, 128, 0) 100%);
    margin-top: 20px;
}

.stat-icon[b-kllnuv73jx] {
    font-size: 40px;
    color: #00A1F5;
    position: absolute;
    right: 24px;
    top: 28px;
    display: flex;
}

.stat-value[b-kllnuv73jx] {
    font-size: 30px;
    font-weight: bold;
    color: #FF7280;
    margin-top: 22px;
    word-break: break-word;
}

.stat-label[b-kllnuv73jx] {
    font-size: 14px;
    color: #828DA1;
    font-weight: 500;
}

.history-header[b-kllnuv73jx] {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.history-title[b-kllnuv73jx] {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
}

.history-item[b-kllnuv73jx] {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .history-item:last-child[b-kllnuv73jx] {
        border-bottom: none;
    }

.history-item-content[b-kllnuv73jx] {
    display: flex;
    align-items: center;
}

.history-icon[b-kllnuv73jx] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 15px;
}

.history-icon-win[b-kllnuv73jx] {
    background: #FFD700;
}

.history-icon-lose[b-kllnuv73jx] {
    background: #e0e0e0;
}

.history-icon img[b-kllnuv73jx] {
    width: 50px;
    height: 50px;
}

.link-show-all[b-kllnuv73jx] {
    color: #FF7280;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    border: none;
    background: none;
    cursor: pointer;
    margin-bottom: 15px;
}

.history-info[b-kllnuv73jx] {
    flex: 1;
    padding-right: 10px;
}

.history-reward[b-kllnuv73jx] {
    font-size: 14px;
    font-weight: 500;
    color: #262B27;
}

.history-date[b-kllnuv73jx] {
    color: #828DA1;
    font-size: 12px;
}

.history-result[b-kllnuv73jx] {
    font-size: 14px;
    text-align: right;
}

    .history-result.win[b-kllnuv73jx] {
        color: #00CF08;
    }

    .history-result.lose[b-kllnuv73jx] {
        color: #828DA1;
    }

    .history-result.pending[b-kllnuv73jx] {
        color: #FFC107;
    }

    .history-result.processing[b-kllnuv73jx] {
        color: #17A2B8;
    }

/* Carousel Section */
.notice-no-scratch[b-kllnuv73jx] {
    text-align: center;
    padding: 30px 0;
    background: #FAFAFA;
    border-radius: 20px;
    margin: 25px 0;
}

    .notice-no-scratch span[b-kllnuv73jx] {
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
    }

.scratch-header[b-kllnuv73jx] {
    background: linear-gradient(90deg, #FE5C73 0%, #FF7300 100%);
    display: flex;
    justify-content: space-between;
    padding: 25px 30px;
    border-radius: 30px;
}

.scratch-title[b-kllnuv73jx] {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    gap: 15px;
}

    .scratch-title h2[b-kllnuv73jx] {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 0;
    }

.scratch-header .action-button[b-kllnuv73jx] {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 8px 30px;
}

.carousel-section[b-kllnuv73jx] {
    position: relative;
    height: 395px;
}

.carousel-container[b-kllnuv73jx] {
    overflow: hidden;
    padding: 20px 0;
    width: 100%;
    position: absolute;
}

.carousel-track[b-kllnuv73jx] {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 4px 0;
}

    .carousel-track.display-center[b-kllnuv73jx] {
        justify-content: center;
    }

.scratch-card-wrapper[b-kllnuv73jx] {
    min-width: calc(33.333% - 16px);
    /*    min-width: calc(25% - 18px);*/
    flex-shrink: 0;
}

.scratch-card-modern[b-kllnuv73jx] {
    background: url('images/dashboard/scratch/scratch_card_bg.png'), linear-gradient(139.1deg, #FF7280 0.39%, #00A1F5 101.18%);
    border-radius: 30px;
    padding: 20px 30px;
    transition: all 0.3s;
    height: 100%;
    background-size: cover;
}

    .scratch-card-modern:hover[b-kllnuv73jx] {
        transform: translateY(-8px);
    }

.card-header-modern[b-kllnuv73jx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.card-title-modern[b-kllnuv73jx] {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}

.card-status-badge[b-kllnuv73jx] {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
    border: 0.5px solid #FFFFFF;
    background: #FFFFFF45;
    color: #FFFFFF;
    font-weight: 400;
}

.card-icon-modern[b-kllnuv73jx] {
    font-size: 80px;
    text-align: center;
    margin: 47px 0;
    display: flex;
    justify-content: center;
}

.box-circle[b-kllnuv73jx] {
    width: 115px;
    height: 115px;
    background: #FF7280;
    border-radius: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    animation: zoomout-b-kllnuv73jx 1s infinite;
}

@keyframes zoomout-b-kllnuv73jx {
    0% {
        box-shadow: 0px 0px 0px 0px #FF728066;
    }

    100% {
        box-shadow: 0px 0px 0px 30px #FF728066;
    }
}

.box-circle img[b-kllnuv73jx] {
    width: 65px;
}

.card-action-btn[b-kllnuv73jx] {
    width: 70%;
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0px auto 20px auto;
    display: block;
    height: 47px;
    line-height: 1;
}

    .card-action-btn span[b-kllnuv73jx] {
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .card-action-btn:hover:not(:disabled)[b-kllnuv73jx] {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .card-action-btn:disabled[b-kllnuv73jx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Carousel Navigation */
.carousel-nav[b-kllnuv73jx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    z-index: 10;
}

    .carousel-nav:hover[b-kllnuv73jx] {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    }

    .carousel-nav.prev[b-kllnuv73jx] {
        left: 0;
    }

    .carousel-nav.next[b-kllnuv73jx] {
        right: 0;
    }

.action-button.scratching[b-kllnuv73jx] {
    opacity: 0.7;
    cursor: not-allowed;
}

.scratching-content[b-kllnuv73jx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.spinner[b-kllnuv73jx] {
    width: 16px;
    height: 16px;
    border: 2px solid #828da1;
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin-b-kllnuv73jx 0.8s linear infinite;
}

@keyframes spin-b-kllnuv73jx {
    to {
        transform: rotate(360deg);
    }
}

/* Campaign Information Widgets */
.campaign-widgets[b-kllnuv73jx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 15px;
    margin-top: 50px;
    padding-bottom: 50px;
}

.info-widget[b-kllnuv73jx] {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .info-widget:nth-child(1)[b-kllnuv73jx] {
        border-top: 7px solid #FFA500;
    }

    .info-widget:nth-child(2)[b-kllnuv73jx] {
        border-top: 7px solid #00A1F5;
    }

    .info-widget:nth-child(3)[b-kllnuv73jx] {
        border-top: 7px solid #FF7280;
    }

    .info-widget:hover[b-kllnuv73jx] {
        transform: translateY(-4px);
    }

.widget-title[b-kllnuv73jx] {
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%) 1;
    position: relative;
}

    .widget-title[b-kllnuv73jx]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    }

.widget-content[b-kllnuv73jx] {
    color: #262B27;
    line-height: 1.9;
}

    .widget-content p[b-kllnuv73jx] {
        margin: 12px 0;
        font-size: 15px;
        color: #555;
        position: relative;
        padding-left: 20px;
    }

        .widget-content p[b-kllnuv73jx]::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #FF7280;
            font-weight: bold;
            font-size: 20px;
            line-height: 1;
            top: 3px;
        }

    .widget-content[b-kllnuv73jx]  a {
        color: #00C300 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, rgba(0, 195, 0, 0.1) 0%, rgba(0, 195, 0, 0.15) 100%);
        padding: 0 12px;
        border-radius: 6px;
        border: 2px solid #00C300;
        display: inline-block;
        position: relative;
        transition: all 0.3s ease;
        animation: pulse-urgent-b-kllnuv73jx 2s ease-in-out infinite;
        box-shadow: 0 2px 8px rgba(0, 195, 0, 0.3);
    }

        .widget-content[b-kllnuv73jx]  a:hover {
            background: linear-gradient(135deg, rgba(0, 195, 0, 0.2) 0%, rgba(0, 195, 0, 0.25) 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 195, 0, 0.5);
            border-color: #00E600;
        }

        .widget-content[b-kllnuv73jx]  a:active {
            transform: scale(0.98);
        }

@keyframes pulse-urgent-b-kllnuv73jx {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 195, 0, 0.3);
    }

    50% {
        box-shadow: 0 2px 16px rgba(0, 195, 0, 0.6), 0 0 0 4px rgba(0, 195, 0, 0.1);
    }
}

.prize-item[b-kllnuv73jx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

    .prize-item:hover[b-kllnuv73jx] {
        background: rgba(255, 114, 128, 0.03);
        margin: 0 -12px;
        padding: 10px 12px;
        border-radius: 8px;
    }

    .prize-item:last-child[b-kllnuv73jx] {
        border-bottom: none;
    }

.prize-label[b-kllnuv73jx] {
    font-weight: 600;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    min-width: 90px;
    font-size: 15px;
    position: relative;
}

.prize-name[b-kllnuv73jx] {
    color: #262B27;
    text-align: right;
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    padding-left: 12px;
}

@media (max-width: 1250px) {
    .banner-progress-section[b-kllnuv73jx] {
        grid-template-columns: 1fr;
    }

    .banner-main[b-kllnuv73jx] {
        border-radius: 0;
    }

    .progress-section[b-kllnuv73jx] {
        padding: 20px 15px;
    }
}

@media (max-width: 1024px) {
    .mypage[b-kllnuv73jx] {
        padding-top: 0;
    }

    /* banner */
    .campaign-banner[b-kllnuv73jx] {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        height: 280px;
        padding: 15px;
    }

    .banner-content-mobile[b-kllnuv73jx] {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

        .banner-content-mobile h1[b-kllnuv73jx] {
            font-size: 30px;
            color: #FFFFFF;
            font-weight: 500;
            margin-bottom: 0;
        }

        .banner-content-mobile .dash-dot[b-kllnuv73jx] {
            border-top: 1px dashed #FFFFFF;
            margin: 15px 0;
        }

    .banner-title[b-kllnuv73jx] {
        font-size: 20px;
    }

    .banner-subtitle[b-kllnuv73jx] {
        font-size: 14px;
    }

    /* Progress */
    .progress-section[b-kllnuv73jx] {
        padding: 20px 15px;
        margin-bottom: 0;
    }

    .progress-title[b-kllnuv73jx] {
        font-size: 18px;
    }

    .progress-amount[b-kllnuv73jx] {
        font-size: 12px;
    }

    .progress-text[b-kllnuv73jx] {
        font-size: 20px;
    }

    .milestone-rewards[b-kllnuv73jx] {
        margin-top: 32px;
    }

    .milestone-icon[b-kllnuv73jx] {
        width: 37px;
        height: 37px;
    }

        .milestone-icon img[b-kllnuv73jx] {
            width: 15px;
        }

    .sub-progress[b-kllnuv73jx] {
        width: 85%;
        top: 30%;
    }

    /*scratch*/
    .carousel-track.display-center[b-kllnuv73jx] {
        padding-left: 0;
    }

    .scratch-header-wrap[b-kllnuv73jx] {
        padding: 0 15px;
    }

    .scratch-header[b-kllnuv73jx] {
        flex-direction: column;
        padding: 20px 15px 15px 15px;
        border-radius: 20px;
    }

    .scratch-title[b-kllnuv73jx] {
        justify-content: center;
        gap: 3px;
    }

        .scratch-title img[b-kllnuv73jx] {
            width: 35px;
        }

        .scratch-title h2[b-kllnuv73jx] {
            font-size: 15px;
        }

    .scratch-header .action-button[b-kllnuv73jx] {
        width: 100%;
        font-size: 12px;
        margin-top: 17px;
        padding: 15px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .scratch-header .action-button:hover[b-kllnuv73jx] {
            transform: none;
        }

    .carousel-container[b-kllnuv73jx] {
        padding: 5px 0;
    }

    .carousel-nav[b-kllnuv73jx] {
        display: none;
    }

    .carousel-section[b-kllnuv73jx] {
        height: 210px;
    }

    .carousel-track[b-kllnuv73jx] {
        gap: 8px;
        padding-left: 15px;
    }

    .scratch-card-wrapper[b-kllnuv73jx] {
        min-width: 175px;
    }

    .scratch-card-modern[b-kllnuv73jx] {
        padding: 10px;
        border-radius: 15px;
    }

        .scratch-card-modern:hover[b-kllnuv73jx] {
            transform: none;
        }

    .card-header-modern[b-kllnuv73jx] {
        padding: 5px;
    }

    .box-circle[b-kllnuv73jx] {
        width: 57px;
        height: 57px;
    }

        .box-circle img[b-kllnuv73jx] {
            width: 32px;
        }

    .card-icon-modern[b-kllnuv73jx] {
        margin: 15px 0 !important;
    }

        .card-icon-modern .box-circle[b-kllnuv73jx] {
            animation: zoomout-b-kllnuv73jx 1s infinite;
        }

    @keyframes zoomout-b-kllnuv73jx {
        0% {
            box-shadow: 0px 0px 0px 0px #FF728066;
        }

        100% {
            box-shadow: 0px 0px 0px 10px #FF728066;
        }
    }

    .card-title-modern[b-kllnuv73jx] {
        font-size: 12px;
    }

    .card-status-badge[b-kllnuv73jx] {
        font-size: 10px;
        padding: 3px 8px;
        margin-left: 10px;
    }

    .card-action-btn[b-kllnuv73jx] {
        width: 100%;
        text-align: center;
        height: 37px;
        margin-bottom: 0;
    }

        .card-action-btn span[b-kllnuv73jx] {
            font-size: 12px;
        }

    .notice-no-scratch[b-kllnuv73jx] {
        margin: 15px;
    }

        .notice-no-scratch span[b-kllnuv73jx] {
            font-size: 16px;
        }


    /*stats*/
    .mobile-dash[b-kllnuv73jx] {
        display: flex;
        border-top: 1px dashed #828DA1;
        width: calc(100% - 30px);
        margin: 0 auto;
    }

    .stats-dashboard[b-kllnuv73jx] {
        padding: 15px;
        margin-bottom: 0;
        grid-template-columns: repeat(2, 1fr);
    }

        .stats-dashboard .stat-card:last-child[b-kllnuv73jx] {
            grid-column: 1 / -1;
        }

    .stat-card[b-kllnuv73jx] {
        padding: 15px 22px;
    }

    .stat-icon img[b-kllnuv73jx] {
        width: 31px;
    }

    .stat-value[b-kllnuv73jx] {
        font-size: 20px;
        margin-top: 25px;
    }

    .stat-label[b-kllnuv73jx] {
        font-size: 12px;
    }

    /*    history*/
    .history-section[b-kllnuv73jx] {
        padding: 7px 15px;
    }

    .history-title[b-kllnuv73jx] {
        font-size: 20px;
        margin-bottom: 0;
    }

    .link-show-all[b-kllnuv73jx] {
        font-size: 12px;
        margin-bottom: 0;
    }

    .history-item-content[b-kllnuv73jx] {
        display: flex;
        align-items: center;
    }

    .history-icon[b-kllnuv73jx], .history-icon img[b-kllnuv73jx] {
        width: 35px;
        height: 35px;
    }

    .history-reward[b-kllnuv73jx] {
        font-size: 12px;
    }

    .history-date[b-kllnuv73jx] {
        font-size: 10px;
    }

    .history-result[b-kllnuv73jx] {
        font-size: 12px;
    }

    .no-history[b-kllnuv73jx] {
        font-size: 12px;
    }

    .campaign-widgets[b-kllnuv73jx] {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 32px;
        padding: 0 15px 40px;
    }

    .info-widget[b-kllnuv73jx] {
        padding: 22px;
        border-radius: 16px;
    }

        .info-widget:hover[b-kllnuv73jx] {
            transform: translateY(-2px);
        }

    .widget-title[b-kllnuv73jx] {
        font-size: 18px;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .widget-content p[b-kllnuv73jx] {
        font-size: 14px;
        margin: 10px 0;
        padding-left: 18px;
    }

    .prize-item[b-kllnuv73jx] {
        padding: 12px 0;
    }

        .prize-item:hover[b-kllnuv73jx] {
            margin: 0 -8px;
            padding: 12px 8px;
        }

    .prize-label[b-kllnuv73jx] {
        font-size: 14px;
        min-width: 75px;
    }

    .prize-name[b-kllnuv73jx] {
        font-size: 14px;
        padding-left: 8px;
    }
}
/* /Pages/Dashboard/Campaign/NoticeRegistAddressModal.razor.rz.scp.css */

.close-button[b-858icy5rrv] {
    position: absolute;
    top: -10px;
    right: 0;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

    .close-button:hover[b-858icy5rrv] {
        color: #333;
    }

h2[b-858icy5rrv] {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-top: 20px;
}

.notice-container[b-858icy5rrv] {
    padding: 30px 0;
    text-align: center;
}

h1[b-858icy5rrv] {
    font-size: 28px;
    font-weight: bold;
    color: #FF7280;
}

button[b-858icy5rrv] {
    padding: 8px 50px;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    h2[b-858icy5rrv] {
        font-size: 20px;
    }

    h1[b-858icy5rrv] {
        font-size: 24px;
    }
}
/* /Pages/Dashboard/Campaign/ScratchHistory.razor.rz.scp.css */
.history-page-container[b-m9z300xm2a] {
    min-height: 100vh;
    padding-top: 10px;
}

.title-mobile[b-m9z300xm2a] {
    display: none;
}

.history-title[b-m9z300xm2a] {
    margin-bottom: 10px;
}

    .history-title h2[b-m9z300xm2a] {
        font-size: 24px;
        font-weight: 500;
        background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

/* Summary Cards */
.summary-cards[b-m9z300xm2a] {
    display: grid;
/*    grid-template-columns: repeat(3, 1fr);*/
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 45px 40px;
    border-radius: 20px;
    background: #FAFAFA;
    box-shadow: 6px 3px 18.4px 8px #EFFAFF inset;
    margin-bottom: 20px;
}

.summary-card[b-m9z300xm2a] {
    background: white;
    border-radius: 20px;
    padding: 28px 28px 20px 32px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 170px;
    border-left: 8px solid;
}

    .summary-card:hover[b-m9z300xm2a] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

.summary-card-green[b-m9z300xm2a] {
    border-color: #00CF08;
}

.summary-card-red[b-m9z300xm2a] {
    border-color: #DC0016;
}

.summary-card-blue[b-m9z300xm2a] {
    border-color: #00A1F5;
}

.summary-label[b-m9z300xm2a] {
    font-size: 14px;
    color: #828DA1;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: left;
}

.summary-progress-bar[b-m9z300xm2a] {
    height: 4px;
    width: 87px;
    background: linear-gradient(90deg, #FF7280 0%, rgba(255, 114, 128, 0) 100%);
    margin-bottom: 16px;
    border-radius: 2px;
}

.summary-value[b-m9z300xm2a] {
    font-size: 30px;
    font-weight: bold;
    margin-top: auto;
    text-align: left;
}

.summary-card-green .summary-value[b-m9z300xm2a] {
    color: #00CF08;
}

.summary-card-red .summary-value[b-m9z300xm2a] {
    color: #DC0016;
}

.summary-card-blue .summary-value[b-m9z300xm2a] {
    color: #00A1F5;
}

.summary-icon[b-m9z300xm2a] {
    font-size: 48px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    line-height: 1;
}

.summary-card-green .summary-icon[b-m9z300xm2a] {
    filter: drop-shadow(0 0 2px rgba(76, 175, 80, 0.3));
}

.summary-card-red .summary-icon[b-m9z300xm2a] {
    filter: drop-shadow(0 0 2px rgba(244, 67, 54, 0.3));
}

.summary-card-blue .summary-icon[b-m9z300xm2a] {
    filter: drop-shadow(0 0 2px rgba(33, 150, 243, 0.3));
}

/* Filter Card */
.filter-card[b-m9z300xm2a] {
    margin-bottom: 7px;
}

.filter-title[b-m9z300xm2a] {
    font-size: 24px;
    font-weight: 500;
    color: #262B27;
    margin-bottom: 20px;
}

.filter-controls[b-m9z300xm2a] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    padding: 30px 0;
    border-top: 1px solid #CACACA;
}

.filter-group[b-m9z300xm2a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label[b-m9z300xm2a] {
    font-size: 14px;
    color: #828DA1;
}

.filter-select[b-m9z300xm2a] {
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    color: #828DA1;
    height: 40px;
    max-width: 250px;
    min-width: 100px;
    box-sizing: border-box;
}

    .filter-select:hover[b-m9z300xm2a] {
        border-color: #667eea;
    }

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

.search-group[b-m9z300xm2a] {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-input[b-m9z300xm2a] {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.3s;
    color: #828DA1;
    padding: 0 10px;
    height: 40px;
}

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

.search-icon[b-m9z300xm2a] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
}
    .search-icon:hover[b-m9z300xm2a] {
        background: none;
        color: #535c6c;
    }

/* History List Card */
.list-title[b-m9z300xm2a] {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
}

.history-table[b-m9z300xm2a] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.history-row[b-m9z300xm2a] {
    border-top: 1px solid #CACACA;
    border-bottom: 1px solid #CACACA;
    transition: all 0.3s;
    cursor: pointer;
}

    .history-row:hover[b-m9z300xm2a] {
        background: #f1f1f2;
    }

    .history-row td[b-m9z300xm2a] {
        padding: 20px 10px;
        overflow: hidden;
    }

        .history-row td:nth-child(1)[b-m9z300xm2a] {
            width: 135px;
        }

        .history-row td:nth-child(2)[b-m9z300xm2a] {
            width: 30%;
        }

        .history-row td:nth-child(3)[b-m9z300xm2a] {
            width: 35%;
        }

        .history-row td:nth-child(4)[b-m9z300xm2a] {
            width: 120px;
        }

        .history-row td:nth-child(5)[b-m9z300xm2a] {
            width: 145px;
        }

.history-date-cell[b-m9z300xm2a] {
    font-size: 12px;
    color: #828DA1;
}

.campaign-cell[b-m9z300xm2a] {
    font-size: 11px;
    font-weight: bold;
    color: #FF7280;
    font-family: Alexandria;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.history-reward[b-m9z300xm2a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #262B27;
}

    .history-reward .reward-name[b-m9z300xm2a] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    .history-reward .reward-value[b-m9z300xm2a] {
        color: #00CF08;
        font-weight: bold;
    }

.type-icon[b-m9z300xm2a] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #e0e0e0;
}

    .type-icon.icon-win[b-m9z300xm2a] {
        background: #FFD700;
    }

    .type-icon img[b-m9z300xm2a] {
        width: 38px;
        height: 38px;
    }

    .type-icon span[b-m9z300xm2a] {
        width: 38px;
        height: 38px;
        text-align: center;
        align-content: center;
    }

.history-result[b-m9z300xm2a] {
    font-size: 12px;
}
    .history-result.win[b-m9z300xm2a] {
        color: #00CF08;
    }
    .history-result.lose[b-m9z300xm2a] {
        color: #828DA1;
    }
    .history-result.pending[b-m9z300xm2a] {
        color: #FFC107;
    }
    .history-result.processing[b-m9z300xm2a] {
        color: #17A2B8;
    }

.delivery-cell[b-m9z300xm2a] {
    font-size: 12px;
}

    .delivery-cell span[b-m9z300xm2a] {
        color: #828DA1;
    }

.history-row td:nth-last-child(-n + 2)[b-m9z300xm2a] {
    display: none;
}

/* Responsive */
@media (max-width: 1439px) {
    .summary-cards[b-m9z300xm2a] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .history-page-container[b-m9z300xm2a] {
        padding-top: 15px 0;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .history-page-content[b-m9z300xm2a] {
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .title-pc[b-m9z300xm2a] {
        display: none;
    }

    .title-mobile[b-m9z300xm2a] {
        display: flex;
        grid-column: 1 / -1;
    }

        .title-mobile h2[b-m9z300xm2a] {
            margin-bottom: 0;
        }

    .history-title[b-m9z300xm2a] {
        margin-bottom: 0;
        padding: 8px 0;
    }

    .summary-cards[b-m9z300xm2a] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 15px 30px 15px;
        margin-bottom: 0;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }

    .summary-card[b-m9z300xm2a] {
        padding: 15px 15px 15px 20px;
        height: 135px;
        border-width: 5px;
    }

        .summary-card:nth-child(4)[b-m9z300xm2a] {
            grid-column: 1 / -1;
        }

    .summary-icon[b-m9z300xm2a] {
        right: 5px;
        bottom: 10px;
    }

        .summary-icon img[b-m9z300xm2a] {
            width: 35px;
        }

    .summary-label[b-m9z300xm2a] {
        font-size: 14px;
    }

    .summary-value[b-m9z300xm2a] {
        font-size: 20px;
    }

    .filter-card[b-m9z300xm2a] {
        padding: 15px;
        margin-bottom: 0;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .filter-title[b-m9z300xm2a] {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .filter-controls[b-m9z300xm2a] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 5px 0;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .filter-group:nth-child(1)[b-m9z300xm2a],
    .filter-group:nth-child(2)[b-m9z300xm2a] {
        grid-column: auto;
    }

    .filter-group:nth-child(3)[b-m9z300xm2a] {
        grid-column: 1 / -1;
    }

    .search-group[b-m9z300xm2a] {
        grid-column: 1 / -1;
        min-width: 100%;
    }

    .filter-group[b-m9z300xm2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .filter-label[b-m9z300xm2a] {
        font-size: 12px;
    }

    .filter-select[b-m9z300xm2a] {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 30px;
    }

    .history-list-card[b-m9z300xm2a] {
        padding: 5px 15px;
    }

    .list-title[b-m9z300xm2a] {
        font-size: 20px;
    }

    .history-list-header[b-m9z300xm2a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .history-row[b-m9z300xm2a] {
        padding: 16px;
    }

        .history-row td[b-m9z300xm2a] {
            display: none;
            padding: 20px 0;
        }

            .history-row td:nth-last-child(-n + 2)[b-m9z300xm2a] {
                display: table-cell;
                width: 80%;
            }

    .scratch-info[b-m9z300xm2a] {
        gap: 3px;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
    }

    .history-row td:last-child[b-m9z300xm2a] {
        text-align: right;
        width: 20%;
    }

    td .action-button[b-m9z300xm2a] {
        font-size: 10px;
        margin-top: 2px;
        padding: 5px;
    }

    .delivery-cell[b-m9z300xm2a] {
        margin-top: 2px;
        font-size: 10px;
    }

    .history-date-cell[b-m9z300xm2a] {
        font-size: 10px;
    }
}
/* /Pages/Dashboard/Campaign/ScratchModal.razor.rz.scp.css */

.close-button[b-q3jycs7lix] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

    .close-button:hover[b-q3jycs7lix] {
        color: #333;
    }

h2[b-q3jycs7lix] {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-top: 20px;
}

.scratch-modal-footer[b-q3jycs7lix] {
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(90deg, #FF7280 0%, #00A1F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: center;
}

.scratch-container[b-q3jycs7lix] {
    position: relative;
    width: 100%;
    height: 320px;
    margin: 20px auto;
    border-radius: 30px;
    overflow: hidden;
    max-width: 460px;
    border: 1px solid #D9D9D9;
}

#scratchCanvas[b-q3jycs7lix] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #FFF;
    cursor: crosshair;
}

.scratch-result[b-q3jycs7lix] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    z-index: 2;
}

.result-content[b-q3jycs7lix] {
    text-align: center;
    padding: 20px;
    position: relative;
    width: 100%;
}

.result-icon[b-q3jycs7lix] {
    width: 70px;
    text-align: center;
    margin: 10px auto;
    animation: bounce-b-q3jycs7lix 1s ease-out;
    position: relative;
    z-index: 1;
}

    .result-icon img[b-q3jycs7lix] {
        width: 70px;
        max-height: 70px;
    }

.scratch-all img[b-q3jycs7lix] {
    height: auto;
}

@keyframes bounce-b-q3jycs7lix {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

.result-text[b-q3jycs7lix] {
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

    .result-text p[b-q3jycs7lix] {
        font-size: 20px;
        font-weight: bold;
        color: #FF7280;
    }

.reward-name[b-q3jycs7lix] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.claim-button[b-q3jycs7lix] {
    background: linear-gradient(90deg, #00A1F5 0%, #FF7280 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s;
    width: 178px;
    height: 47px;
    position: relative;
    z-index: 1;
}

    .claim-button:hover[b-q3jycs7lix] {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

@media (max-width: 1024px) {
    h2[b-q3jycs7lix] {
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        font-size: 20px;
    }

    .scratch-modal-footer[b-q3jycs7lix] {
        color: #FFFFFF;
        -webkit-text-fill-color: #FFFFFF;
        font-size: 20px;
    }

    .scratch-container[b-q3jycs7lix] {
        border: none;
        height: 450px;
    }

    .close-button[b-q3jycs7lix] {
        position: fixed;
        color: #FFFFFF;
    }

    .result-text[b-q3jycs7lix] {
        line-height: 1.7;
    }

    .result-icon[b-q3jycs7lix] {
        width: 100px;
    }

        .result-icon img[b-q3jycs7lix] {
            width: 100px;
            max-height: 100px;
        }
}