/* ==================== LANGUAGE TOGGLE ==================== */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #374151;
    border-radius: 999px;
    background: #111827;
    padding: 4px 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.lang-option {
    appearance: none;
    border: 0;
    background: transparent;
    color: #8a8d98;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0.55;
    transition: all 0.2s ease;
}
.lang-option:hover { opacity: 1; color: #fff; transform: translateY(-1px); }
.lang-toggle[data-lang="en"] .lang-eng,
.lang-toggle[data-lang="cn"] .lang-cn,
.lang-toggle[data-lang="id"] .lang-id,
.lang-toggle[data-lang="ph"] .lang-ph {
    opacity: 1;
    color: #f59e0b;
    background: rgba(245,158,11,0.10);
    box-shadow: 0 0 10px rgba(245,158,11,0.16);
}
.lang-separator { color: #374151; opacity: 0.7; }
@media screen and (max-width: 480px) {
    .navbar-actions { width: 100%; justify-content: space-between; }
}
/* ==================== RESET AND BASE STYLES ==================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #121316;
    color: #ffffff;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding: 20px 0;
}

/* ==================== NAVBAR & LIVE CLOCK ==================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 20px;
    background-color: #18191d;
    border-bottom: 1px solid #24262b;
}

#live-clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 15px;
    background-color: #111827;
    padding: 8px 16px;
    border-bottom: 1px solid #1f2937;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
}

@media screen and (max-width: 360px) {
    #live-clock-container {
        font-size: 0.75rem;
        gap: 6px 10px;
    }
}

.clock-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clock-label {
    color: #8a8d98;
    font-weight: bold;
}

.clock-time {
    color: #f1f5f9;
    font-weight: bold;
}

.clock-divider {
    color: #374151;
    font-weight: bold;
}

/* ==================== MAIN LAYOUT CONTAINER ==================== */
.container {
    max-width: 800px;
    margin: 20px auto; 
    padding: 0 10px;
}

.page-title {
    text-align: center;
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    margin-bottom: 5px;
}

/* ==================== BANNER & SUBTITLE ==================== */
.banner-container {
    margin-top: 5px;       
    margin-bottom: 2px;    
    padding: 0;
    line-height: 0;        
}

.position-banner {
    display: block;
    margin: 0 auto;
    width: 62%;           
    max-width: 250px;     
    height: auto;
    border-radius: 8px;   
}

/* ==================== ANIMATED ORANGE FIRE BANNER (replaces 3475 image) ==================== */
.fire-banner {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1408 / 768;
    border-radius: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 70%, #1a0d05 0%, #100804 55%, #030201 100%);
    isolation: isolate;
}

.fire-glow-back {
    position: absolute;
    left: 15%;
    top: 20%;
    width: 70%;
    height: 55%;
    background: radial-gradient(ellipse at center, rgba(255,140,0,0.4), rgba(200,60,0,0.15) 40%, transparent 70%);
    filter: blur(10px);
    animation: fireBannerPulse 3.9s ease-in-out infinite;
    z-index: 1;
}

@keyframes fireBannerPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

.fire-numbers {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.01em;
}

.fire-digit-wrap {
    position: relative;
    display: inline-block;
}

.fire-digit {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(40px, 17vw, 110px);
    font-weight: 900;
    line-height: 1;
    position: relative;
    background: linear-gradient(180deg, #fff6d5 0%, #ffd23f 22%, #ff8c00 55%, #e8390a 82%, #6b1400 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 4px rgba(255,210,120,0.9))
            drop-shadow(0 0 10px rgba(255,140,0,0.85))
            drop-shadow(0 0 22px rgba(220,60,0,0.6));
    animation: fireBannerFlicker 1.65s infinite ease-in-out;
}

.fire-digit-wrap:nth-child(1) .fire-digit { animation-delay: 0s; }
.fire-digit-wrap:nth-child(2) .fire-digit { animation-delay: 0.12s; }
.fire-digit-wrap:nth-child(3) .fire-digit { animation-delay: 0.24s; }
.fire-digit-wrap:nth-child(4) .fire-digit { animation-delay: 0.36s; }

@keyframes fireBannerFlicker {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(255,210,120,0.95)) drop-shadow(0 0 12px rgba(255,140,0,0.9)) drop-shadow(0 0 26px rgba(220,60,0,0.65)); transform: translateY(0) scale(1); }
    15%      { filter: drop-shadow(0 0 9px rgba(255,235,170,1)) drop-shadow(0 0 22px rgba(255,170,20,1)) drop-shadow(0 0 42px rgba(235,90,0,0.85)); transform: translateY(-2px) scale(1.02); }
    30%      { filter: drop-shadow(0 0 4px rgba(255,205,110,0.8)) drop-shadow(0 0 10px rgba(255,140,0,0.75)) drop-shadow(0 0 20px rgba(220,60,0,0.5)); transform: translateY(1px) scale(0.99); }
    45%      { filter: drop-shadow(0 0 10px rgba(255,240,180,1)) drop-shadow(0 0 26px rgba(255,180,30,1)) drop-shadow(0 0 46px rgba(240,100,0,0.9)); transform: translateY(-3px) scale(1.03); }
    60%      { filter: drop-shadow(0 0 5px rgba(255,215,130,0.85)) drop-shadow(0 0 13px rgba(255,150,10,0.8)) drop-shadow(0 0 24px rgba(220,60,0,0.55)); transform: translateY(1px) scale(1); }
    75%      { filter: drop-shadow(0 0 8px rgba(255,230,160,1)) drop-shadow(0 0 20px rgba(255,165,20,0.95)) drop-shadow(0 0 38px rgba(230,85,0,0.8)); transform: translateY(-1px) scale(1.01); }
    90%      { filter: drop-shadow(0 0 4px rgba(255,205,110,0.8)) drop-shadow(0 0 9px rgba(255,140,0,0.7)) drop-shadow(0 0 18px rgba(220,60,0,0.5)); transform: translateY(0) scale(1); }
}

/* Lapisan shine/shade yang menyapu dari kiri ke kanan di atas teks */
.fire-digit-shine {
    position: absolute;
    inset: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(40px, 17vw, 110px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    background-image: linear-gradient(100deg,
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0.85) 48%,
        rgba(255,255,255,0) 61%);
    background-size: 260% 100%;
    background-position: -60% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: fireBannerShineSweep 4.2s ease-in-out infinite;
}

.fire-digit-wrap:nth-child(1) .fire-digit-shine { animation-delay: 0s; }
.fire-digit-wrap:nth-child(2) .fire-digit-shine { animation-delay: 0.1s; }
.fire-digit-wrap:nth-child(3) .fire-digit-shine { animation-delay: 0.2s; }
.fire-digit-wrap:nth-child(4) .fire-digit-shine { animation-delay: 0.3s; }

@keyframes fireBannerShineSweep {
    0%   { background-position: -60% 0; }
    45%  { background-position: 160% 0; }
    100% { background-position: 160% 0; }
}

.fire-flame-tongue {
    position: absolute;
    bottom: 38%;
    left: 50%;
    width: 78%;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
    filter: blur(0.4px);
}

.fire-flame-tongue svg { width: 100%; height: 100%; overflow: visible; }

.flame-outer {
    fill: url(#fireBannerFlameGrad);
    transform-origin: bottom center;
    animation: flameOuterFlicker 1.05s infinite ease-in-out;
    mix-blend-mode: screen;
}

.flame-inner {
    fill: url(#fireBannerFlameInner);
    transform-origin: bottom center;
    animation: flameInnerFlicker 0.825s infinite ease-in-out;
    mix-blend-mode: screen;
}

.fire-digit-wrap:nth-child(1) .flame-outer { animation-delay: 0s; }
.fire-digit-wrap:nth-child(1) .flame-inner { animation-delay: 0.05s; }
.fire-digit-wrap:nth-child(2) .flame-outer { animation-delay: 0.12s; }
.fire-digit-wrap:nth-child(2) .flame-inner { animation-delay: 0.18s; }
.fire-digit-wrap:nth-child(3) .flame-outer { animation-delay: 0.22s; }
.fire-digit-wrap:nth-child(3) .flame-inner { animation-delay: 0.28s; }
.fire-digit-wrap:nth-child(4) .flame-outer { animation-delay: 0.08s; }
.fire-digit-wrap:nth-child(4) .flame-inner { animation-delay: 0.32s; }

@keyframes flameOuterFlicker {
    0%, 100% { transform: scaleY(1) scaleX(1) skewX(0deg) rotate(0deg); opacity: 0.85; }
    18%      { transform: scaleY(1.18) scaleX(0.88) skewX(-5deg) rotate(-2deg); opacity: 1; }
    36%      { transform: scaleY(0.88) scaleX(1.1) skewX(4deg) rotate(2deg); opacity: 0.75; }
    54%      { transform: scaleY(1.22) scaleX(0.85) skewX(-3deg) rotate(-3deg); opacity: 1; }
    72%      { transform: scaleY(0.92) scaleX(1.06) skewX(3deg) rotate(1deg); opacity: 0.8; }
    90%      { transform: scaleY(1.1) scaleX(0.92) skewX(-2deg) rotate(-1deg); opacity: 0.95; }
}

@keyframes flameInnerFlicker {
    0%, 100% { transform: scaleY(1) scaleX(1) skewX(0deg) translateY(0); opacity: 0.9; }
    22%      { transform: scaleY(1.28) scaleX(0.8) skewX(5deg) translateY(-3px); opacity: 1; }
    44%      { transform: scaleY(0.82) scaleX(1.12) skewX(-4deg) translateY(1px); opacity: 0.7; }
    66%      { transform: scaleY(1.32) scaleX(0.78) skewX(4deg) translateY(-4px); opacity: 1; }
    88%      { transform: scaleY(0.9) scaleX(1.05) skewX(-3deg) translateY(0); opacity: 0.85; }
}

#fire-banner-embers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fire-digit, .fire-digit-shine, .flame-outer, .flame-inner, .fire-glow-back {
        animation: none !important;
    }
}

.page-subtitle {
    text-align: center;
    margin-top: 6px;       
    margin-bottom: 12px;   
    font-size: 0.85rem;    
    color: #8a8d98;
}

/* ==================== LIST ITEM / BUTTON POSISI ==================== */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}

.list-item {
    background: linear-gradient(135deg, #1e2230 0%, #151821 100%);
    padding: 14px 18px; 
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.08); 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    font-size: 1rem;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.list-item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.list-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #252a3a 0%, #1a1e2a 100%);
    border-color: rgba(99, 102, 241, 0.4); 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.list-item:active {
    transform: translateY(1px);
}

.arrow {
    color: #626773;
}

/* ==================== LOADING & DISABLED STATES ==================== */
.loading-row td {
    text-align: center;
    color: #8a8d98;
    font-style: italic;
    padding: 20px 4px;
}

.btn-apply:disabled,
.btn-back:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

.spinner-inline {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

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

/* ==================== EXTERNAL LINK BUTTONS (SMALLER) ==================== */
.external-link-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 16px;
}

.list-item-small {
    flex: 1;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    opacity: 1;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background: linear-gradient(#171a22, #171a22) padding-box,
                linear-gradient(135deg, #64748b, #cbd5e1, #334155) border-box;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 5px 14px rgba(0,0,0,0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* Tiga link dibuat seperti tiga portal eksklusif dengan border berbeda. */
.external-link-container .list-item-small:nth-child(1) {
    border-radius: 4px 14px 4px 14px;
    background: linear-gradient(#171a22, #171a22) padding-box,
                linear-gradient(135deg, #f59e0b, #fde68a, #b45309) border-box;
    box-shadow: 0 0 14px rgba(245,158,11,0.14), inset 0 0 12px rgba(245,158,11,0.04);
}

.external-link-container .list-item-small:nth-child(2) {
    border-radius: 14px 4px 14px 4px;
    background: linear-gradient(#171a22, #171a22) padding-box,
                linear-gradient(135deg, #22d3ee, #a5f3fc, #0e7490) border-box;
    box-shadow: 0 0 16px rgba(34,211,238,0.16), inset 0 0 12px rgba(34,211,238,0.04);
}

.external-link-container .list-item-small:nth-child(3) {
    border-radius: 14px 4px 14px 4px;
    background: linear-gradient(#171a22, #171a22) padding-box,
                linear-gradient(135deg, #a78bfa, #e9d5ff, #6d28d9) border-box;
    box-shadow: 0 0 16px rgba(167,139,250,0.15), inset 0 0 12px rgba(167,139,250,0.04);
}

.external-link-container .list-item-small:hover {
    transform: translateY(-3px);
    filter: brightness(1.12);
}

.external-link-container .list-item-small:nth-child(1):hover {
    box-shadow: 0 0 24px rgba(245,158,11,0.30), 0 8px 18px rgba(0,0,0,0.35);
}

.external-link-container .list-item-small:nth-child(2):hover {
    box-shadow: 0 0 26px rgba(34,211,238,0.32), 0 8px 18px rgba(0,0,0,0.35);
}

.external-link-container .list-item-small:nth-child(3):hover {
    box-shadow: 0 0 26px rgba(167,139,250,0.30), 0 8px 18px rgba(0,0,0,0.35);
}

.list-item-small .arrow {
    display: none;
}

@media screen and (max-width: 380px) {
    .external-link-container {
        flex-direction: column;
    }
}

.list-item-small:hover {
    opacity: 1;
}

/* ==================== BUTTONS STYLE ==================== */
.btn-admin {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

.btn-admin:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.02);
}

.btn-apply {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-block;
    animation: bluePulse 2.5s infinite ease-in-out;
}

.btn-apply:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

@keyframes bluePulse {
    0% {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
    }
    50% {
        background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
        box-shadow: 0 0 12px rgba(96, 165, 250, 0.9);
        border-color: rgba(255, 255, 255, 0.6);
    }
    100% {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
    }
}

/* ANIMASI BERKEDIP MERAH UNTUK TOMBOL REMOVE & DROP */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    animation: redPulse 2.5s infinite ease-in-out !important;
}

@keyframes redPulse {
    0% {
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    }
    50% {
        background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
        box-shadow: 0 0 12px rgba(248, 113, 113, 0.9);
        border-color: rgba(255, 255, 255, 0.6);
    }
    100% {
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    }
}

.btn-back {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 15px;
}

/* ==================== GLOWING GOLD TEXT EFFECT ==================== */
.fire-text {
    font-weight: 900;
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    background: linear-gradient(
        to right, 
        #bf953f 0%, 
        #fcf6ba 25%, 
        #b38728 50%, 
        #fcf6ba 75%, 
        #bf953f 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.7));
    animation: goldShine 3s linear infinite;
}

@keyframes goldShine {
    0% { background-position: 0% center; }
    100% { background-position: -200% center; }
}

/* ==================== FOOTER COMPONENT ==================== */
.site-footer {
    margin-top: auto;
    padding-top: 35px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    text-align: center;
    border-top: 1px solid #2b2f3a;
    color: #8a8d98;
    font-size: 0.9rem;
}

.footer-section .guild-name.fire-text {
    font-size: 1.05rem; 
    font-weight: 700;   
}

/* ==================== MODAL & TABLES & TOAST ==================== */
.hidden { display: none !important; }

.table-container {
    width: 100%;
    margin-top: 15px;
    border: 1px solid #2d3039;
    background-color: #1c1d22;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
    background-image:
        linear-gradient(to right, #1c1d22 0%, rgba(28, 29, 34, 0) 100%),
        linear-gradient(to left, #1c1d22 0%, rgba(28, 29, 34, 0) 100%);
    background-position: left, right;
    background-repeat: no-repeat;
    background-size: 16px 100%, 16px 100%;
    background-attachment: local, local;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 0;
    table-layout: auto;
}

th, td {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.8rem;
    border-bottom: 1px solid #2d3039;
    word-break: break-word;
}

th {
    background-color: #24262e;
    color: #8a8d98;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* Kolom pertama (ACTION) tetap terlihat saat tabel discroll horizontal di mobile */
th:first-child,
td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #1c1d22;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.5);
}

th:first-child {
    background-color: #24262e;
    z-index: 2;
}

.modal {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #1e2026;
    color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    width: 95%;          
    max-width: 450px;    
    max-height: 85vh;    
    display: flex;       
    flex-direction: column; 
    position: relative;
    overflow-y: auto;
}

.custom-form-modal { max-width: 420px; background: #151821; padding: 24px; }
.custom-confirm-box { max-width: 320px; background: #151821; padding: 20px; text-align: center; }

/* Layar pendek (mis. HP landscape): kecilkan padding modal & jarak form
   supaya tombol submit tetap terjangkau dan tidak tertutup keyboard */
@media screen and (max-height: 500px) {
    .modal-content {
        max-height: 92vh;
        padding: 14px;
    }
    .custom-form-modal {
        padding: 16px;
    }
    .form-group {
        margin-bottom: 8px;
    }
    .form-group input,
    .form-group select {
        padding: 8px 12px;
    }
}

.close-modal {
    position: absolute;
    right: 8px;
    top: 4px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #8a8d98;
    background: none;
    border: none;
    padding: 10px;
    line-height: 1;
    font-family: inherit;
}

.close-modal:hover {
    color: #f1f5f9;
}

.form-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.form-group label { font-size: 0.85rem; color: #94a3b8; }
.form-group input { background: #1e2230; border: 1px solid rgba(255, 255, 255, 0.1); padding: 11px 14px; border-radius: 8px; color: #f1f5f9; outline: none; }
.form-group input:focus { border-color: #2563eb; }
.form-group select { background: #1e2230; border: 1px solid rgba(255, 255, 255, 0.1); padding: 11px 14px; border-radius: 8px; color: #f1f5f9; outline: none; cursor: pointer; }
.form-group select:focus { border-color: #2563eb; }

.toast-notification {
    background: #1e2230; color: #f1f5f9; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem;
    border-left: 4px solid #3b82f6; animation: slideInToast 0.3s ease forwards; min-width: 200px;
}

/* ==================== RECENTLY ACCEPTED LOG STYLE ==================== */
#recent-log-container {
    max-width: 340px;
    margin: 15px auto 0 auto;
    background: rgba(24, 25, 29, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    text-align: left;
}

.log-title {
    font-size: 0.75rem;
    font-weight: bold;
    color: #8a8d98;
    margin-bottom: 6px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
    text-align: center;
}

#recent-log-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 100px;
    overflow-y: auto;
}

.log-entry {
    font-size: 0.8rem;
    color: #cbd5e1;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
    background: rgba(30, 34, 48, 0.4);
    padding: 4px 8px;
    border-radius: 4px;
}

.log-user {
    color: #3b82f6; 
    font-weight: bold;
}

.log-entry-pos {
    color: #eab308; 
}

.log-item-empty {
    font-size: 0.75rem;
    color: #4b5563;
    text-align: center;
    padding: 10px 0;
    font-style: italic;
}

.modal-table-container {
    width: 100%;
    overflow-y: auto;    
    overflow-x: hidden;  
    max-height: 60vh;    
    border: 1px solid #334155;
    border-radius: 6px;
    margin-top: 15px;
}

#waiting-modal table {
    width: 100%;
    min-width: 0;        
    table-layout: auto;
}

.modal-table-container table th,
#waiting-modal td {
    padding: 8px 10px;
    font-size: 0.8rem;
    white-space: normal; 
    word-break: break-all; 
    text-align: left;
}

/* ==================== SNOWFLAKE EFFECT STYLE ==================== */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Aman, tidak menghalangi klik ke elemen form/tombol */
    z-index: 1; /* Di bawah modal dan elemen isi utama */
    overflow: hidden;
}

.snowflake {
    position: absolute; 
    top: -10px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    pointer-events: none; 
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 12s; 
}

@keyframes fall {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(105vh) translateX(20px);
    }
}

/* ==================== OPTIMISASI TAMPILAN TABLET ==================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    th, td {
        padding: 10px 6px;
        font-size: 0.85rem;
    }
}

/* ==================== OPTIMISASI TAMPILAN MOBILE (HP) ==================== */
@media screen and (max-width: 480px) {
    th, td {
        padding: 6px 3px;
        font-size: 0.72rem;
    }

    .btn-apply {
        padding: 4px 6px;
        font-size: 0.72rem;
    }

    .container {
        padding: 0 5px;
    }

    /* Perbesar area sentuh tombol kecil (Accept/Drop/detail) yang di-generate
       lewat JS, supaya tidak salah pencet di layar sentuh. */
    .btn-apply.btn-compact {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }

    .icon-tap-target {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        padding: 8px !important;
        margin: -8px;
    }
}

/*Credit*/

.neon-text {
    /* Mendorong teks ke paling bawah container */
    margin-top: auto; 
    
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* Ukuran disesuaikan untuk teks footer */
    font-weight: bold;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 5px #ff005e, 0 0 10px #ff005e, 0 0 20px #ff005e;
    }
    100% {
        text-shadow: 0 0 5px #00d4ff, 0 0 15px #00d4ff, 0 0 30px #00d4ff;
    }
}


/* ==================== SVS OPENING ANIMATION ====================
   Overlay-only: tidak mengubah ukuran, posisi, atau tata letak halaman.
   Durasi total ±2.5 detik dan tampil setiap kali halaman dibuka atau di-refresh.
====================================================================== */
.svs-opening {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.035) 18%, transparent 43%),
        #050505;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: svs-opening-hide 0.50s ease 2.00s forwards;
}

.svs-opening-content {
    position: relative;
    z-index: 3;
    width: min(92vw, 720px);
    text-align: center;
    transform: translateY(8px) scale(0.88);
    opacity: 0;
    animation: svs-opening-content-in 1.45s cubic-bezier(.18,.72,.22,1) 0.18s forwards,
               svs-opening-content-out 0.50s ease 2.00s forwards;
}

.svs-opening-number {
    font-family: inherit;
    font-size: clamp(5rem, 22vw, 11rem);
    line-height: 0.82;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #f59e0b;
    background: linear-gradient(180deg, #fff7c2 0%, #ffd166 22%, #f59e0b 52%, #b45309 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 145, 0, .95))
            drop-shadow(0 0 22px rgba(255, 100, 0, .75))
            drop-shadow(0 0 55px rgba(255, 75, 0, .42));
    animation: svs-number-pulse 0.95s ease-in-out 0.65s both;
}

.svs-opening-line {
    width: min(280px, 55vw);
    height: 2px;
    margin: 16px auto 13px;
    background: linear-gradient(90deg, transparent, #ffb52e, #fff0a3, #ff8c00, transparent);
    box-shadow: 0 0 10px rgba(255, 145, 0, .95), 0 0 28px rgba(255, 90, 0, .55);
    transform: scaleX(0);
    transform-origin: center;
    animation: svs-line-in 0.65s ease 0.95s forwards;
}

.svs-opening-title {
    font-family: inherit;
    font-size: clamp(1.15rem, 4.4vw, 2rem);
    font-weight: 800;
    letter-spacing: clamp(.18em, 1vw, .34em);
    color: #f8fafc;
    text-shadow: 0 0 7px rgba(255, 255, 255, .35),
                 0 0 18px rgba(245, 158, 11, .65);
    opacity: 0;
    transform: translateY(12px);
    animation: svs-title-in 0.65s ease 1.05s forwards;
}

.svs-opening-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70vw, 650px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 150, 0, .23) 0%, rgba(255, 90, 0, .10) 18%, transparent 65%);
    filter: blur(5px);
    animation: svs-glow-pulse 1.80s ease-out both;
}

.svs-opening-sparks,
.svs-opening-sparks::before,
.svs-opening-sparks::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.svs-opening-sparks {
    opacity: 0;
    background-image:
        radial-gradient(circle at 50% 50%, #fff0a3 0 1px, transparent 2px),
        radial-gradient(circle at 30% 35%, #ff9d00 0 1px, transparent 2px),
        radial-gradient(circle at 70% 65%, #ff6a00 0 1px, transparent 2px),
        radial-gradient(circle at 22% 70%, #ffb52e 0 1px, transparent 2px),
        radial-gradient(circle at 80% 25%, #ff7a00 0 1px, transparent 2px);
    background-size: 190px 190px, 230px 230px, 260px 260px, 310px 310px, 340px 340px;
    animation: svs-sparks-in 1.90s ease-out 0.05s forwards;
}

.svs-opening-sparks::before {
    content: "";
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,145,0,.75) 0deg 0.7deg, transparent 0.7deg 18deg);
    -webkit-mask-image: radial-gradient(circle, black 0%, transparent 52%);
    mask-image: radial-gradient(circle, black 0%, transparent 52%);
    animation: svs-rays 1.65s ease-out both;
}

.svs-opening-sparks::after {
    content: "";
    background: linear-gradient(90deg, transparent 0%, rgba(255,145,0,.6) 49%, rgba(255,240,163,.9) 50%, rgba(255,145,0,.6) 51%, transparent 100%);
    height: 1px;
    top: 50%;
    bottom: auto;
    transform: scaleX(0);
    box-shadow: 0 0 18px rgba(255, 100, 0, .8);
    animation: svs-horizon 0.80s ease-out 0.22s forwards;
}

@keyframes svs-opening-content-in {
    0% { opacity: 0; transform: translateY(12px) scale(.72); filter: blur(8px); }
    55% { opacity: 1; transform: translateY(0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes svs-opening-content-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.08); filter: blur(2px); }
}

@keyframes svs-opening-hide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes svs-number-pulse {
    0% { filter: drop-shadow(0 0 4px rgba(255,145,0,.65)); }
    100% { filter: drop-shadow(0 0 9px rgba(255,145,0,1)) drop-shadow(0 0 35px rgba(255,90,0,.72)); }
}

@keyframes svs-line-in { to { transform: scaleX(1); } }
@keyframes svs-title-in { to { opacity: 1; transform: translateY(0); } }
@keyframes svs-glow-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    45% { opacity: 1; }
    100% { opacity: .7; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes svs-sparks-in { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: .48; transform: scale(1.12); } }
@keyframes svs-rays { 0% { transform: scale(.2) rotate(-10deg); opacity: 0; } 50% { opacity: .8; } 100% { transform: scale(1.1) rotate(8deg); opacity: 0; } }
@keyframes svs-horizon { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .svs-opening,
    .svs-opening-content,
    .svs-opening-number,
    .svs-opening-line,
    .svs-opening-title,
    .svs-opening-glow,
    .svs-opening-sparks,
    .svs-opening-sparks::before,
    .svs-opening-sparks::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}

/* ==================== RESPONSIVE TABLE ====================
   Keep the schedule table inside the viewport on phones.
   The previous fixed 760px minimum width made the page look oversized
   and forced horizontal scrolling on mobile.
*/
.table-container > table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.table-container > table th,
.table-container > table td {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    vertical-align: middle;
}

/* Balanced proportions for the 6 actual schedule columns. */
.table-container > table th:nth-child(1),
.table-container > table td:nth-child(1) { width: 9%; }
.table-container > table th:nth-child(2),
.table-container > table td:nth-child(2) { width: 18%; }
.table-container > table th:nth-child(3),
.table-container > table td:nth-child(3) { width: 17%; }
.table-container > table th:nth-child(4),
.table-container > table td:nth-child(4) { width: 20%; }
.table-container > table th:nth-child(5),
.table-container > table td:nth-child(5) { width: 26%; }
.table-container > table th:nth-child(6),
.table-container > table td:nth-child(6) { width: 10%; }

.table-container > table th {
    line-height: 1.15;
    padding: 9px 4px;
}

@media screen and (max-width: 480px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 6px;
        margin: 14px auto;
    }

    .table-container {
        margin-top: 12px;
        width: 100%;
        overflow-x: hidden;
    }

    .table-container > table {
        width: 100%;
        min-width: 0;
    }

    .table-container > table th {
        font-size: 0.62rem;
        line-height: 1.12;
        padding: 8px 2px;
        letter-spacing: 0.15px;
    }

    .table-container > table td {
        font-size: 0.68rem;
        padding: 7px 2px;
    }

    /* Keep short labels on one line. */
    .table-container > table th:nth-child(1),
    .table-container > table th:nth-child(6) {
        white-space: nowrap;
        word-break: keep-all;
        overflow-wrap: normal;
    }
}

/* Fix mobile action column: the Indonesian "Ajukan" button must stay
   completely inside its own column and never cover the Time Slot column. */
@media screen and (max-width: 480px) {
    .table-container > table th:nth-child(1),
    .table-container > table td:nth-child(1) { width: 20%; min-width: 78px; }
    .table-container > table th:nth-child(2),
    .table-container > table td:nth-child(2) { width: 18%; }
    .table-container > table th:nth-child(3),
    .table-container > table td:nth-child(3) { width: 17%; }
    .table-container > table th:nth-child(4),
    .table-container > table td:nth-child(4) { width: 19%; }
    .table-container > table th:nth-child(5),
    .table-container > table td:nth-child(5) { width: 21%; }
    .table-container > table th:nth-child(6),
    .table-container > table td:nth-child(6) { width: 5%; }

    .table-container > table td:first-child .btn-apply {
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 0.68rem;
    }
}