/* Base */
.app-body {
    background: radial-gradient(circle at top, #26355f 0, #0b111c 45%, #050811 100%);
    color: #f8f9ff;
    min-height: 100vh;
}

/* Navbar */
.main-navbar {
    background: rgba(4, 9, 20, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo-icon {
    margin-right: 0.3rem;
}

/* Home Hero */
.home-hero {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
}

.text-gradient {
    background: linear-gradient(90deg, #4dd0e1, #42a5f5, #ab47bc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-stats .stat-card {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.15), rgba(171, 71, 188, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-label {
    font-size: 0.8rem;
    color: #b0bec5;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Glass card (home & admin) */
.glass-card {
    background: radial-gradient(circle at top left, rgba(77, 208, 225, 0.12), rgba(5, 8, 17, 0.92));
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.glass-card-header {
    background: linear-gradient(90deg, rgba(13, 71, 161, 0.6), rgba(123, 31, 162, 0.5));
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Tabel */
.table-dark-custom thead {
    background-color: rgba(12, 19, 34, 0.95);
}

.table-dark-custom tbody tr:hover {
    background-color: rgba(37, 47, 69, 0.9);
}

/* Badge juara */
.badge-rank {
    background: linear-gradient(135deg, #ffca28, #ff9800);
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #212121;
}

/* Admin */
.admin-wrapper {
    min-height: calc(100vh - 64px);
}

.nav-pills .nav-link {
    border-radius: 999px;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #42a5f5, #ab47bc);
}

/* Alerts */
.auto-hide {
    transition: opacity 0.3s ease;
}

/* Responsiveness */
@media (max-width: 767.98px) {
    .home-hero {
        padding-top: 2rem;
        padding-bottom: 3rem;
        align-items: flex-start;
    }
}


/* ===== MODAL SYARAT & KETENTUAN ===== */
.modal-backdrop.show {
    opacity: 0.75;
    backdrop-filter: blur(6px);
}

#syaratModal .modal-content {
    background: radial-gradient(
        circle at top left,
        rgba(77, 208, 225, 0.14),
        rgba(5, 8, 17, 0.96)
    );
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #f8f9ff;
}

#syaratModal .modal-header {
    background: linear-gradient(
        90deg,
        rgba(13, 71, 161, 0.65),
        rgba(123, 31, 162, 0.55)
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#syaratModal .modal-title {
    font-weight: 700;
    letter-spacing: 0.3px;
}

#syaratModal .modal-body h6 {
    color: #4dd0e1;
    font-weight: 600;
}

#syaratModal .list-group-item {
    background: transparent;
    border: none;
    padding-left: 0;
    color: #e3f2fd;
}

#syaratModal .modal-body ul li {
    margin-bottom: 0.45rem;
    color: #cfd8dc;
}

#syaratModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tombol Saya Setuju */
#syaratModal .btn-success {
    background: linear-gradient(135deg, #42a5f5, #ab47bc);
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#syaratModal .btn-success:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Mobile Optimization */
@media (max-width: 576px) {
    #syaratModal .modal-title {
        font-size: 1rem;
    }

    #syaratModal .modal-body {
        font-size: 0.85rem;
    }
}
/* Center button "Saya Setuju" */
#syaratModal .modal-footer {
    justify-content: center;
}