*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,sans-serif;
}

#latency{
    position:fixed;
    bottom:8px;
    left:50%;
    transform:translateX(-50%);
    font-size:8px;
    color:#aaa;
    font-family:Arial,sans-serif;
    z-index:999;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        radial-gradient(circle at top,#5a2a82 0%,#2d1348 35%,#160b29 70%,#0d0818 100%);
    color:white;
}

.container{
    text-align:center;
    padding:50px;
    width:100%;
}

h1{
    font-size:4rem;
    font-weight:700;
    letter-spacing:4px;
    margin-bottom:40px;
    text-shadow:0 0 15px rgba(255,255,255,.2);
}

#clock{
    font-size:4rem;
    font-weight:300;
    letter-spacing:3px;
}

#date{
    margin-top:15px;
    font-size:1.5rem;
    color:#cfcfcf;
}

.location{
    margin-top:-20px;
    margin-bottom:35px;
    font-size:2rem;
    color:#c8b8ff;
    letter-spacing:1px;
}

.dashboard-card{
    width:min(920px, 100%);
    margin:0 auto;
    padding:42px 48px;
    border-radius:24px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 40px rgba(0,0,0,.35),
        inset 0 0 30px rgba(255,255,255,.03);
}

.prayer-card{
    margin-top:30px;
    background:rgba(255,255,255,.05);
    border-radius:15px;
    padding:20px;
    display:inline-block;
}

.next-prayer{
    text-align:center;
    margin-bottom:25px;
}

.next-title{
    margin-top:10px;
    font-size:0.9rem;
    opacity:.7;
    text-transform:uppercase;
    letter-spacing:2px;
}

#nextPrayerName{
    margin-top:8px;
    font-size:1.8rem;
    font-weight:700;
}

#nextPrayerCountdown{
    margin-top:10px;
    font-size:2rem;
    font-weight:bold;
    color:#00ffb7;
}

.card-title{
    font-size:20px;
    font-weight:bold;
    margin-bottom:15px;
}

.card-title i{
    margin-right:8px;
}

.prayer-row{
    display:flex;
    justify-content:space-between;
    gap:30px;
    margin:10px 0;
}

.row{
    display:flex;
    justify-content:space-between;
    gap:40px;
    margin:8px 0;
    font-size:1rem;
}


/* =====================================
   Responsive Layout
===================================== */

@media (max-width: 1024px){

    .container{
        padding:30px;
    }

    .dashboard-card{
        width:100%;
        max-width:920px;
        margin:0 auto;
        padding:35px 40px;
    }

}

@media (max-width: 768px){

    body{
        align-items:flex-start;
        padding:20px 15px;
    }

    .container{
        padding:0;
    }

    .dashboard-card{
        width:100%;
        max-width:100%;
        padding:24px 20px;
        border-radius:18px;
    }

    h1{
        font-size:clamp(2.8rem,12vw,3.8rem);
        letter-spacing:1px;
        margin-bottom:18px;
    }

    .location{
        margin:0 0 24px;
        font-size:1rem;
    }

    #clock{
        font-size:clamp(3.2rem,17vw,4.8rem);
        letter-spacing:0;
        word-break:break-all;
    }

    #date{
        font-size:1.25rem;
    }

    .prayer-card{
        width:100%;
        margin-top:24px;
        padding:20px;
    }

    .card-title{
        font-size:1.4rem;
    }

    .row,
    .prayer-row{
        gap:0;
        font-size:1rem;
    }

}

@media (max-width:480px){

    body{
        padding:15px 10px;
    }

    .dashboard-card{
        padding:20px 16px;
    }

    h1{
        font-size:2.5rem;
    }

    #clock{
        font-size:3rem;
    }

    #date{
        font-size:1.1rem;
    }

    .location{
        font-size:.95rem;
    }

    .card-title{
        font-size:1.2rem;
    }

}

/* ---------------- Weather ---------------- */

.weather-card{
    margin:40px auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.weather-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

#weatherIcon{
    font-size:clamp(3rem,8vw,5rem);
}

#temperature{
    font-size:clamp(2rem,7vw,4rem);
    font-weight:700;
    line-height:1;
}

#weatherDescription{
    margin-top:10px;
    font-size:clamp(1.2rem,2.5vw,2rem);
    font-weight:500;
}

.weather-details{
    margin-top:15px;
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
    font-size:clamp(1rem,2vw,1.2rem);
}



.footer{
    margin-top:40px;
    padding:12px;
    text-align:center;
    font-size:7pt;
    color:#888;
    border-top:1px #ddd;
}

@media (max-width:768px){

.footer{
    font-size:7pt;
}

.footer-stats {

    margin-top: 10px;

    text-align: center;

    font-size: 12px;

    color: #999;

}

}


/* Current prayer visual highlight */
.prayer-row.current-prayer-highlight {
    background:
        linear-gradient(
            135deg,
            rgba(76,29,149,.94) 0%,
            rgba(109,40,217,.94) 52%,
            rgba(167,139,250,.92) 100%
        );
    border:1px solid rgba(196,181,253,.82);
    border-radius:10px;
    padding:9px 12px;
    margin:8px 0;
    box-shadow:
        0 0 0 1px rgba(167,139,250,.16),
        0 8px 20px rgba(0,0,0,.18);
    transition:none;
}

.prayer-row.current-prayer-highlight span {
    font-weight:700;
}

.next-prayer-time {
    margin-top:5px;
    font-size:1rem;
    color:#c8b8ff;
    font-weight:600;
}


.dashboard-heading {
    text-align:center;
}

.date-time-block {
    text-align:center;
}

.dashboard-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:24px;
}

.dashboard-mini-card {
    display:block;
    min-height:145px;
    padding:20px;
    border-radius:16px;
    text-align:left;
    text-decoration:none;
    color:#fff;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.035)
        );
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    transition:transform .2s ease, border-color .2s ease;
}

.dashboard-mini-card:hover {
    transform:translateY(-2px);
    border-color:rgba(167,139,250,.55);
}

.dashboard-mini-card.disabled {
    cursor:not-allowed;
    opacity:.48;
    filter:saturate(.55);
}

.dashboard-mini-card.disabled:hover {
    transform:none;
    border-color:rgba(255,255,255,.12);
}

.mini-card-title {
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:rgba(255,255,255,.68);
    margin-bottom:14px;
}

.mini-card-name {
    font-size:1.15rem;
    font-weight:700;
    line-height:1.35;
}

.mini-card-meta {
    margin-top:8px;
    font-size:.95rem;
    color:#c8b8ff;
}

.mini-card-type {
    margin-top:7px;
    font-size:.78rem;
    color:rgba(255,255,255,.55);
}

.holiday-mini-card:not(.disabled) {
    background:
        linear-gradient(
            145deg,
            rgba(124,58,237,.22),
            rgba(255,255,255,.045)
        );
}


@media (max-width:768px){
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .dashboard-mini-card{
        min-height:125px;
    }
}

@media (max-width:480px){
    .dashboard-grid{
        gap:10px;
    }

    .dashboard-mini-card{
        padding:17px;
    }

    .mini-card-name{
        font-size:1.05rem;
    }

    .next-prayer-time{
        font-size:.95rem;
    }

    .hijri-date{
        font-size:.9rem;
    }
}


/* =========================================================
   ========================================================= */

.next-prayer-timeline {
    width:min(100%, 520px);
    margin:18px auto 6px;
    padding:4px 4px 0;
}

.next-prayer-timeline-track {
    position:relative;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.next-prayer-timeline-progress {
    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #6d28d9 0%,
            #a78bfa 100%
        );
}

.next-prayer-timeline-dot {
    position:absolute;
    left:0%;
    top:50%;
    width:13px;
    height:13px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#f5f3ff;
    border:3px solid #7c3aed;
    box-shadow:
        0 0 0 4px rgba(124,58,237,.18),
        0 3px 12px rgba(0,0,0,.25);
    transition:left .8s linear;
}

.next-prayer-timeline-labels {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-top:10px;
}

.next-prayer-timeline-side {
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:.78rem;
    line-height:1.25;
}

.next-prayer-timeline-side span:first-child {
    color:rgba(255,255,255,.94);
    font-weight:600;
}

.next-prayer-timeline-side span:last-child {
    color:#c8b8ff;
    font-weight:500;
}

.next-prayer-timeline-side.next {
    text-align:right;
}

@media (max-width:600px) {

    .next-prayer-timeline {
        margin-top:16px;
        padding-left:2px;
        padding-right:2px;
    }

    .next-prayer-timeline-labels {
        gap:14px;
    }

    .next-prayer-timeline-side {
        font-size:.72rem;
    }

    .next-prayer-timeline-dot {
        width:11px;
        height:11px;
        border-width:2px;
    }

}


/* =========================================================
   ========================================================= */

.dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.dashboard-grid .holiday-mini-card {
    width: min(100%, 520px);
    box-sizing: border-box;
}

@media (max-width:768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .dashboard-grid .holiday-mini-card {
        width: 100%;
    }
}


/* Public holiday cards */
.dashboard-grid {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

@media (max-width:768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}