@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:rgb(17,24,39);
    --surface:rgba(31,41,55,.85);
    --surface-solid:rgb(31,41,55);
    --surface-hover:rgba(55,65,81,.6);
    --header-bg:rgba(17,24,39,.95);
    --border:rgba(252,165,165,.1);
    --border-accent:rgba(252,165,165,.15);
    --border-subtle:rgba(75,85,99,.3);
    --text:rgb(229,231,235);
    --text-white:#fff;
    --text-muted:rgb(156,163,175);
    --text-dim:rgb(107,114,128);
    --accent:rgb(252,165,165);
    --accent-dark:rgb(239,68,68);
    --accent-glow:rgba(252,165,165,.15);
    --green:rgb(16,185,129);
    --green-dark:rgb(5,150,105);
    --green-glow:rgba(16,185,129,.2);
    --red:rgb(239,68,68);
    --red-dark:rgb(220,38,38);
    --yellow:rgb(245,158,11);
    --blue:rgb(59,130,246);
    --radius:16px;
    --radius-sm:12px;
}

html{font-size:16px}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container{
    max-width:860px;
    margin:0 auto;
    padding:2.5rem 1.25rem 4rem;
}

.header{
    text-align:center;
    margin-bottom:2.5rem;
}

.header-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.85rem;
    margin-bottom:1.5rem;
}

.tower-icon{
    font-size:1.6rem;
    color:var(--accent);
    animation:towerBlink 2s ease-in-out infinite;
}

@keyframes towerBlink{
    0%,100%{opacity:1;text-shadow:0 0 6px rgba(252,165,165,.4)}
    50%{opacity:.6;text-shadow:0 0 12px rgba(252,165,165,.7)}
}

.header h1{
    font-size:1.85rem;
    font-weight:800;
    color:var(--text-white);
    letter-spacing:-.02em;
}

.header h1 span{color:var(--accent)}

.status-banner{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1.75rem;
    border-radius:9999px;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.02em;
    margin-bottom:1.25rem;
    transition:transform .2s;
}

.status-banner:hover{transform:scale(1.03)}

.status-banner.operational{
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:var(--text-white);
    box-shadow:0 4px 20px rgba(16,185,129,.25);
}

.status-banner.incident{
    background:linear-gradient(135deg,var(--red),var(--red-dark));
    color:var(--text-white);
    box-shadow:0 4px 20px rgba(239,68,68,.25);
}

.header-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    margin-top:1.25rem;
}

.btn-back{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.55rem 1.1rem;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:var(--text-white);
    border:none;
    border-radius:10px;
    font-size:.8rem;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 3px 12px rgba(252,165,165,.25);
    transition:all .25s ease;
}

.btn-back:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(252,165,165,.35);
}

.live-badge{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:.85rem;
    color:var(--green);
    font-weight:500;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.glass-card{
    background:var(--surface);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 4px 24px rgba(0,0,0,.2);
    overflow:hidden;
}

.glass-header{
    background:var(--header-bg);
    border-bottom:1px solid var(--border-accent);
    padding:.9rem 1.5rem;
}

.glass-header h2{
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-white);
}

.mini-stats{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem 1.25rem;
    padding:.75rem 1rem;
    background:rgba(31,41,55,.6);
    border-radius:10px;
    margin:1rem 1.25rem;
    border:1px solid var(--border);
}

.mini-stats span{
    font-size:.8rem;
    color:var(--text-muted);
    font-weight:500;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.stat-icon{font-size:.75rem}
.stat-icon.accent{color:var(--accent)}
.stat-icon.green{color:var(--green)}
.stat-icon.blue{color:var(--blue)}

.category{
    padding:1.1rem 1.25rem;
}

.category+.category{border-top:1px solid var(--border-subtle)}

.category-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.category-left{
    display:flex;
    align-items:center;
    gap:.9rem;
    flex:1;
    min-width:0;
}

.category-icon{
    width:44px;
    height:44px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
}

.category-icon.ok{
    background:rgba(16,185,129,.1);
    color:var(--green);
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.2);
}

.category-icon.down{
    background:rgba(239,68,68,.1);
    color:var(--red);
    box-shadow:inset 0 0 0 1px rgba(239,68,68,.2);
}

.category-info{flex:1;min-width:0}

.category-name{
    font-weight:600;
    font-size:.95rem;
    color:var(--text-white);
    margin-bottom:.1rem;
}

.category-count{
    display:flex;
    align-items:center;
    gap:.35rem;
    font-size:.8rem;
    font-weight:500;
}

.category-count .dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
}

.category-count .dot.ok{background:var(--green)}
.category-count .dot.down{background:var(--red)}
.category-count.ok{color:var(--green)}
.category-count.down{color:var(--red)}

.category-right{
    display:flex;
    align-items:center;
    gap:.65rem;
    flex-shrink:0;
    margin-left:.75rem;
}

.category-status{
    font-size:.7rem;
    font-weight:600;
    padding:.35rem .75rem;
    border-radius:8px;
    letter-spacing:.02em;
}

.category-status.ok{
    background:linear-gradient(135deg,rgba(16,185,129,.9),rgba(5,150,105,.9));
    color:var(--text-white);
    box-shadow:0 2px 10px var(--green-glow);
}

.category-status.down{
    background:linear-gradient(135deg,rgba(239,68,68,.9),rgba(220,38,38,.9));
    color:var(--text-white);
    box-shadow:0 2px 10px rgba(239,68,68,.2);
}

.chevron{
    color:var(--text-dim);
    transition:transform .25s ease;
    font-size:.65rem;
}

.category.open .chevron{transform:rotate(180deg)}

.service-list{
    display:none;
    margin-top:.85rem;
    padding-top:.65rem;
    border-top:1px solid var(--border-subtle);
}

.category.open .service-list{display:block}

.service-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.4rem 0 .4rem 3.25rem;
}

.service-name{
    font-size:.85rem;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:.45rem;
}

.svc-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    flex-shrink:0;
}

.svc-dot.online{background:var(--green)}
.svc-dot.offline{background:var(--red)}
.svc-dot.unknown{background:var(--text-dim)}

.service-latency{
    font-size:.75rem;
    color:var(--text-dim);
    font-variant-numeric:tabular-nums;
}

.last-check{
    text-align:center;
    margin-top:1.25rem;
    font-size:.8rem;
    color:var(--text-muted);
    padding:.6rem 1rem;
    background:rgba(31,41,55,.5);
    border:1px solid var(--border);
    border-radius:10px;
}

.footer{
    text-align:center;
    margin-top:2.5rem;
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:.4rem .85rem;
    font-size:.8rem;
    color:var(--text-dim);
}

.footer-live{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
}

.footer-live .dot{
    width:6px;
    height:6px;
    background:var(--green);
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
}

.footer-sep{color:var(--text-dim)}
.footer-time{color:var(--text-white);font-weight:500}
.footer-brand a{color:var(--text-dim);text-decoration:none}
.footer-brand a:hover{color:var(--text)}

.loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    padding:3.5rem;
    color:var(--text-muted);
    font-size:.9rem;
}

.spinner{
    width:16px;
    height:16px;
    border:2px solid rgba(252,165,165,.15);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin .6s linear infinite;
}

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

@media(max-width:640px){
    .container{padding:1.5rem .85rem 3rem}
    .header h1{font-size:1.35rem}
    .header-title{gap:.5rem}
    .tower-icon{font-size:1.2rem}
    .mini-stats{flex-direction:column;gap:.3rem}
    .category{padding:.9rem 1rem}
    .category-icon{width:38px;height:38px;font-size:.9rem}
    .category-name{font-size:.85rem}
    .service-item{padding-left:2.8rem}
    .footer-inner{flex-direction:column;gap:.3rem}
    .footer-sep{display:none}
    .category-right{gap:.5rem}
}