body{
    background:#050816;
    overflow-x:hidden;
}

.jarvis-main{
    min-height:100vh;
    position:relative;
    background:
    radial-gradient(circle at left,
    rgba(255,23,68,.15),
    transparent 35%),

    radial-gradient(circle at right,
    rgba(0,176,255,.15),
    transparent 35%),

    #050816;
}

.jarvis-overlay{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(0,176,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,176,255,.04) 1px, transparent 1px);

    background-size:40px 40px;
}

.jarvis-header{
    position:absolute;
    top:20px;
    right:30px;
    z-index:10;
}

.jarvis-header a{
    color:#fff;
}

.jarvis-login-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.jarvis-login-card{
    width:500px;
    max-width:90%;
    padding:40px;

    border-radius:20px;

    background:rgba(10,15,35,.85);

    border:1px solid rgba(0,176,255,.3);

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 30px rgba(0,176,255,.3),
    0 0 50px rgba(255,23,68,.2);

    position:relative;
    z-index:5;
}

.jarvis-logo{
    text-align:center;
    margin-bottom:20px;
}

.jarvis-login-card h2{
    text-align:center;
    color:#00b0ff;
    margin-bottom:5px;
}

.subtitle{
    text-align:center;
    color:#ff1744;
    margin-bottom:25px;
}

.jarvis-input{
    width:100%;
    height:55px;
    margin-bottom:15px;

    border-radius:10px;

    border:1px solid rgba(0,176,255,.3);

    background:rgba(255,255,255,.05);

    color:#fff;

    padding:0 15px;
}

.jarvis-input:focus{
    outline:none;

    box-shadow:
    0 0 10px #00b0ff;
}

.forgot{
    text-align:right;
    margin-bottom:20px;
}

.forgot a{
    color:#ddd;
}

.btn-jarvis-login{
    width:100%;
    height:55px;

    border:none;

    border-radius:10px;

    color:white;

    font-weight:bold;

    background:
    linear-gradient(
    90deg,
    #00b0ff,
    #ff1744
    );
}

.btn-jarvis-google{
    display:block;

    margin-top:10px;

    text-align:center;

    padding:15px;

    border-radius:10px;

    border:1px solid #ff1744;

    color:white;
}

.hud-left,
.hud-right{
    position:absolute;

    top:100px;

    width:260px;

    z-index:5;
}

.hud-left{
    left:30px;
}

.hud-right{
    right:30px;
}

.hud-box{
    padding:20px;

    border:1px solid rgba(0,176,255,.3);

    background:rgba(255,255,255,.03);

    color:#8fdcff;
}

#clock{
    font-size:32px;
    color:#00b0ff;
    font-weight:bold;
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px){

    .hud-left,
    .hud-right{
        display:none !important;
    }

    .jarvis-login-wrapper{
        padding:20px;
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .jarvis-login-card{
        width:100%;
        max-width:420px;
        padding:25px;
        margin-top:30px;
    }

    .jarvis-logo img{
        height:50px !important;
    }

    .jarvis-login-card h2{
        font-size:32px;
    }

    .jarvis-input{
        height:50px;
        font-size:16px;
    }

    .btn-jarvis-login,
    .btn-jarvis-google{
        height:50px;
        font-size:14px;
    }

    .jarvis-header{
        top:15px;
        right:15px;
    }
	.mobile-clock{
    display:none;
}

@media (max-width:768px){

    .mobile-clock{
        display:block;
        text-align:center;
        color:#00b0ff;
        font-size:28px;
        font-weight:bold;
        margin-bottom:15px;
    }

}
}

/* =========================================================
   JARVIS DASHBOARD (halaman utama setelah login)
========================================================= */

.jarvis-dash{
    background:
    radial-gradient(circle at left, rgba(255,23,68,.12), transparent 35%),
    radial-gradient(circle at right, rgba(0,176,255,.12), transparent 35%),
    #050816;
    min-height:100vh;
    padding-bottom:10px;
    color:#dff4ff;
}

.jarvis-dash .jarvis-greet{
    padding-top:14px;
}

.jarvis-dash .jarvis-greet h4{
    color:#fff;
    text-shadow:0 0 10px rgba(0,176,255,.6);
    letter-spacing:1px;
}

.jarvis-dash .jarvis-greet p{
    color:#8fdcff;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:2px;
}

.jarvis-panel{
    background:rgba(10,15,35,.85) !important;
    border:1px solid rgba(0,176,255,.3) !important;
    border-radius:16px !important;
    box-shadow:0 0 20px rgba(0,176,255,.15), inset 0 0 25px rgba(0,176,255,.04);
    color:#dff4ff !important;
    backdrop-filter:blur(8px);
}

.jarvis-panel hr{
    border-color:rgba(0,176,255,.2);
}

.jarvis-panel .text-secondary,
.jarvis-panel .small.text-secondary{
    color:#7fb8d9 !important;
}

.jarvis-btn-absent{
    border-radius:14px !important;
    background:rgba(255,255,255,.03) !important;
    transition:.2s;
}

.jarvis-btn-absent:hover{
    box-shadow:0 0 18px rgba(0,176,255,.35);
}

.jarvis-btn-absent .material-icons{
    text-shadow:0 0 12px currentColor;
}

.jarvis-menu-icon{
    background:rgba(0,176,255,.08) !important;
    border:1px solid rgba(0,176,255,.35);
    box-shadow:0 0 12px rgba(0,176,255,.18);
    color:#00d9ff !important;
    transition:.2s;
}

.jarvis-menu-icon .material-icons{
    color:#00d9ff !important;
}

a:hover > .jarvis-menu-icon{
    box-shadow:0 0 20px rgba(0,176,255,.55);
    border-color:#00d9ff;
}

.jarvis-menu-label{
    color:#9fd8f5 !important;
}

.jarvis-rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    height:22px;
    padding:0 8px;
    border-radius:20px;
    font-size:11px;
    font-weight:bold;
    letter-spacing:.5px;
    border:1px solid rgba(0,176,255,.4);
    color:#00d9ff;
    background:rgba(0,176,255,.08);
    box-shadow:0 0 8px rgba(0,176,255,.25);
}

.jarvis-rank-badge.warn{
    color:#ffb300;
    border-color:rgba(255,179,0,.5);
    background:rgba(255,179,0,.08);
    box-shadow:0 0 8px rgba(255,179,0,.25);
}

.jarvis-rank-badge.bad{
    color:#ff1744;
    border-color:rgba(255,23,68,.5);
    background:rgba(255,23,68,.08);
    box-shadow:0 0 8px rgba(255,23,68,.25);
}

/* =========================================================
   JARVIS TACTICAL MAP (peta realtime)
========================================================= */

.jarvis-map-wrap{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(0,176,255,.35);
    box-shadow:0 0 25px rgba(0,176,255,.2), inset 0 0 30px rgba(0,176,255,.05);
    background:#050816;
}

.jarvis-map-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:rgba(0,10,25,.9);
    border-bottom:1px solid rgba(0,176,255,.25);
}

.jarvis-map-title span{
    color:#00d9ff;
    font-weight:bold;
    letter-spacing:1.5px;
    font-size:13px;
    text-shadow:0 0 10px rgba(0,176,255,.7);
}

.jarvis-map-title .blip{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#00e676;
    box-shadow:0 0 8px #00e676;
    display:inline-block;
    margin-right:6px;
    animation:jarvisPulse 1.4s infinite;
}

@keyframes jarvisPulse{
    0%{opacity:1;}
    50%{opacity:.3;}
    100%{opacity:1;}
}

#jarvis-tactical-map{
    height:230px;
    width:100%;
    filter:saturate(1.15) brightness(.95) hue-rotate(-4deg);
}

.jarvis-map-hud{
    padding:12px 16px 16px;
    font-size:12.5px;
    line-height:1.9;
}

.jarvis-map-hud .hud-row{
    display:flex;
    justify-content:space-between;
    color:#8fdcff;
}

.jarvis-map-hud .hud-row b{
    color:#dff4ff;
    font-weight:600;
}

.jarvis-status-ok{
    color:#00e676 !important;
    text-shadow:0 0 8px rgba(0,230,118,.6);
    font-weight:bold;
}

.jarvis-status-bad{
    color:#ff1744 !important;
    text-shadow:0 0 8px rgba(255,23,68,.6);
    font-weight:bold;
}

.jarvis-status-wait{
    color:#ffb300 !important;
    font-weight:bold;
}

.leaflet-control-attribution{
    background:rgba(0,10,25,.7) !important;
    color:#7fb8d9 !important;
}

.leaflet-control-zoom a{
    background:rgba(0,10,25,.85) !important;
    color:#00d9ff !important;
    border-color:rgba(0,176,255,.3) !important;
}