:root{
--gh-blue:#0b1d3a;
--gh-light:#1e90ff;
}
body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#0b1220;
color:#fff;
}
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 18px;
background:var(--gh-blue);
}
.logo{
height:48px;
}
.actions{display:flex;gap:10px}
.btn{
border:2px solid var(--gh-light);
background:transparent;
color:#fff;
padding:8px 14px;
border-radius:12px;
font-weight:700;
cursor:pointer;
}
.wrap{max-width:950px;margin:auto;padding:16px}
.card{
background:#111827;
border:1px solid #1e293b;
border-radius:14px;
padding:14px;
margin-bottom:14px;
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.span2{grid-column:1/-1}
label{font-size:12px;opacity:.85}
input,select{
width:100%;
padding:10px;
border-radius:10px;
border:1px solid #334155;
background:#020617;
color:#fff;
}
.card-h{display:flex;justify-content:space-between;align-items:center}
.total{font-size:22px;font-weight:900}
.crit{margin:12px 0}
input[type=range]{
width:100%;
height:10px;
border-radius:6px;
background:linear-gradient(90deg,#b91c1c,#f59e0b,#fde047,#16a34a);
}