/* ===========================================================
   Atlas Paragon CDN
   Enterprise Edge Platform
   =========================================================== */

:root {

    --bg: #f4f7fb;

    --card: #ffffff;

    --border: #e5e7eb;

    --text: #1f2937;

    --text-light: #6b7280;

    --primary: #2563eb;

    --green: #16a34a;

    --shadow:
        0 8px 24px rgba(15,23,42,.05);

    --radius: 14px;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    line-height:1.6;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

/* ===========================================================
   Header
   =========================================================== */

header{

    background:white;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:100;

}

header .container{

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.brand img{

    width:44px;

    height:44px;

}

.brand h1{

    font-size:26px;

    font-weight:700;

}

.brand span{

    color:var(--text-light);

    font-size:14px;

}

nav{

    display:flex;

    gap:34px;

}

nav a{

    color:var(--text-light);

    text-decoration:none;

    font-size:15px;

    transition:.2s;

}

nav a:hover{

    color:var(--primary);

}

/* ===========================================================
   Hero
   =========================================================== */

.hero{

    padding:90px 0 70px;

}

.hero h2{

    font-size:56px;

    line-height:1.1;

    max-width:700px;

    margin-top:25px;

    margin-bottom:30px;

}

.hero p{

    max-width:700px;

    color:var(--text-light);

    font-size:19px;

}

.status-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    border-radius:100px;

    background:white;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    font-weight:600;

}

.status-dot{

    width:12px;

    height:12px;

    background:var(--green);

    border-radius:50%;

    box-shadow:

        0 0 12px rgba(22,163,74,.6);

}

.hero button{

    margin-top:40px;

    padding:16px 30px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}

.hero button:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(37,99,235,.25);

}

/* ===========================================================
   Sections
   =========================================================== */

section{

    padding:40px 0;

}

section h3{

    font-size:32px;

    margin-bottom:30px;

}

/* ===========================================================
   Status Cards
   =========================================================== */

.status-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.status-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.status-card:hover{

    transform:translateY(-6px);

}

.status-card h4{

    font-size:20px;

    margin-bottom:25px;

}

.healthy{

    color:var(--green);

    font-weight:700;

}

/* ===========================================================
   Metrics
   =========================================================== */

.metric-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.metric{

    background:white;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:26px;

    box-shadow:var(--shadow);

}

.metric-title{

    display:block;

    color:var(--text-light);

    font-size:14px;

}

.metric-value{

    display:block;

    margin-top:12px;

    font-size:34px;

    font-weight:700;

}

/* ===========================================================
   Regions
   =========================================================== */

.region-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.region-grid div{

    background:white;

    padding:22px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

/* ===========================================================
   Node
   =========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

td{

    padding:18px 24px;

    border-bottom:1px solid var(--border);

}

td:first-child{

    width:280px;

    color:var(--text-light);

}

tr:last-child td{

    border:none;

}

/* ===========================================================
   Login
   =========================================================== */

.login-card{

    max-width:520px;

    margin:auto;

    background:white;

    padding:45px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.login-card p{

    color:var(--text-light);

    margin:18px 0 30px;

}

.login-card input{

    width:100%;

    padding:16px;

    margin-bottom:18px;

    border:1px solid var(--border);

    border-radius:10px;

    font-size:16px;

}

.login-card input:focus{

    outline:none;

    border-color:var(--primary);

}

.login-card button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:10px;

    background:var(--primary);

    color:white;

    font-size:16px;

    cursor:pointer;

}

.login-card button:hover{

    filter:brightness(.95);

}

#loginError{

    margin-top:20px;

    color:#dc2626;

    display:none;

}

/* ===========================================================
   Footer
   =========================================================== */

footer{

    margin-top:70px;

    background:white;

    border-top:1px solid var(--border);

}

footer .container{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-light);

}

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

@media (max-width:1000px){

.status-grid{

grid-template-columns:repeat(2,1fr);

}

.metric-grid{

grid-template-columns:repeat(2,1fr);

}

.region-grid{

grid-template-columns:repeat(2,1fr);

}

.hero h2{

font-size:42px;

}

}

@media (max-width:700px){

header .container{

flex-direction:column;

height:auto;

padding:20px 0;

gap:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.status-grid,
.metric-grid,
.region-grid{

grid-template-columns:1fr;

}

.hero{

padding-top:50px;

}

.hero h2{

font-size:34px;

}

table td{

display:block;

width:100%;

}

}