:root{
    --primary:#0078ff;
    --success:#27ae60;
    --warning:#f39c12;
    --danger:#e74c3c;
    --bg:#f4f6f9;
    --card:#ffffff;
    --text:#333;
}

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

body{
    background:var(--bg);
    padding:20px;
    color:var(--text);
}

.container{
    max-width:1100px;
    margin:auto;
}

header{
    text-align:center;
    margin-bottom:20px;
}

header h1{
    color:var(--primary);
}

.card{
    background:var(--card);
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.section-title{
    color:var(--primary);
    margin-bottom:10px;
}

.band-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:10px;
}

.band-item{
    background:#eef4ff;
    padding:10px;
    border-radius:8px;
    text-align:center;
}

.band-name{
    font-weight:600;
}

.band-freq{
    font-size:11px;
    color:#666;
}

.band-tag{
    margin-top:5px;
    font-size:10px;
    padding:2px 6px;
    border-radius:10px;
    display:inline-block;
    font-weight:600;
}

.band-tag.critical{ background:#e74c3c; color:white; }
.band-tag.high{ background:#f39c12; color:white; }
.band-tag.medium{ background:#3498db; color:white; }
.band-tag.low{ background:#bdc3c7; color:#2c3e50; }

.summary-box{
    font-size:18px;
    margin-bottom:10px;
}

.warning{
    background:#fff3cd;
    border-left:4px solid var(--warning);
    padding:10px;
    margin-bottom:8px;
    border-radius:6px;
}

.carrier-card{
    background:#fafafa;
    border:1px solid #ddd;
    padding:15px;
    border-radius:10px;
    margin-bottom:12px;
}

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

.carrier-name{
    font-size:18px;
    font-weight:bold;
}

.score-inline{
    display:flex;
    gap:8px;
    align-items:center;
}

.score-percent{
    font-weight:700;
}

.badge-inline{
    font-size:10px;
    padding:2px 8px;
    border-radius:12px;
    color:white;
    text-transform:uppercase;
}

.good{ background:var(--success); }
.partial{ background:var(--warning); }
.poor{ background:var(--danger); }

.score-bar{
    height:12px;
    background:#ddd;
    border-radius:10px;
    overflow:hidden;
    margin-top:8px;
}

.score-fill{
    height:100%;
    background:var(--success);
}
