:root{

    --primary:#0078d7;
    --primary-dark:#005fa3;

    --success:#28a745;
    --warning:#ff9800;
    --danger:#dc3545;

    --text:#333333;

    --bg:#f4f7fb;

    --card:#ffffff;

    --border:#dde5ef;
}

*{
    box-sizing:border-box;
}

html,
body{

    margin:0;
    padding:0;

    min-height:100vh;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:var(--bg);

    color:var(--text);
}

body{

    display:flex;
    flex-direction:column;
}

.header{

    background:var(--primary);

    color:white;

    padding:60px 90px;

    box-shadow:
    0 3px 15px rgba(0,0,0,.2);
}

.header h1{

    margin:0;

    padding-left:20px;

    font-size:48px;

    letter-spacing:1px;
}

.header p{

    padding-left:20px;

    margin-top:12px;

    opacity:.95;

    font-size:18px;
}

.top-nav{

    background:white;

    padding:15px 70px;

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

.button{

    display:inline-block;

    padding:10px 18px;

    margin-right:10px;

    border-radius:8px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.25s;
}

.button:hover{

    background:var(--primary-dark);
}

.container{

    max-width:1500px;

    width:100%;

    margin:40px auto;

    padding:0 40px;

    flex:1;
}

.card{

    background:white;

    padding:35px;

    margin-bottom:25px;

    border-radius:12px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);

    transition:.25s;
}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);
}

.card h2{

    color:var(--primary);

    margin-top:0;
}

.badge{

    display:inline-block;

    background:var(--primary);

    color:white;

    border-radius:20px;

    padding:5px 12px;

    font-size:13px;

    font-weight:600;
}

.score{

    display:inline-block;

    margin-top:18px;

    padding:10px 18px;

    border-radius:30px;

    color:white;

    font-weight:700;

    font-size:16px;
}

.score-green{

    background:#28a745;
}

.score-orange{

    background:#ff9800;
}

.score-red{

    background:#dc3545;
}

.stats{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:30px;
}

.stat-box{

    flex:1;

    min-width:180px;

    background:white;

    padding:25px;

    border-radius:12px;

    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}

.stat-value{

    font-size:36px;

    font-weight:700;

    color:var(--primary);
}
.footer{

    margin-top:auto;

    text-align:center;

    background:white;

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

    padding:15px 20px;

    color:#666;
}
.footer-links{

    margin-bottom:8px;
}

.footer-links a{

    color:var(--primary);

    text-decoration:none;

    margin:0 5px;
}
.back-top{

    position:fixed;

    right:20px;

    bottom:20px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    padding:12px 15px;

    border-radius:50%;

    box-shadow:
    0 5px 15px rgba(0,0,0,.2);

    font-weight:bold;
}