/* ===================================================== */
/* PAGE BASE                                              */
/* ===================================================== */

body{
font-family:Arial, Helvetica, sans-serif;
max-width:760px;
margin:40px auto;
padding:0 20px;
line-height:1.6;
background:#ffffff;
}

h1{
font-size:30px;
margin-bottom:10px;
text-align:center;
}

h2{
margin-top:36px;
}

.page-intro{
text-align:center;
max-width:760px;
margin:0 auto 28px auto;
font-size:17px;
}

/* ===================================================== */
/* RESULT DASHBOARD                                       */
/* ===================================================== */

.result-container{
background:#070a12;
border-radius:20px;
padding:18px 18px 22px 18px;
margin:32px 0 40px 0;
color:#fff;
}

.result-status{
min-height:22px;
text-align:center;
color:#b9bfd1;
font-size:14px;
letter-spacing:.02em;
margin-bottom:12px;
}

.result-grid{
display:flex;
flex-wrap:nowrap;
gap:12px;
align-items:stretch;
}

.result-panel{
flex:1 1 0;
min-width:0;
text-align:center;
padding:16px 12px 18px 12px;
border-radius:14px;
background:#0c1019;
transition:transform .35s ease, box-shadow .35s ease;
}

.panel-title{
color:#b7bdd0;
font-size:16px;
margin-bottom:8px;
}

.score-stack{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
}

.score-number{
font-size:56px;
font-weight:700;
line-height:1;
margin-bottom:6px;
color:#ffffff;
min-height:56px;
}

/* ===================================================== */
/* NEW: SCORE INTERPRETATION LABEL                        */
/* ===================================================== */

.score-label{
font-size:14px;
color:#9aa4b2;
margin-bottom:12px;
min-height:18px;
letter-spacing:.02em;
}

/* ===================================================== */
/* BAR AREA                                               */
/* ===================================================== */

.bar-zone{
height:180px;
display:flex;
align-items:flex-end;
justify-content:center;
width:100%;
}

.bar-wrap{
height:180px;
width:72px;
background:#2b2f3a;
border-radius:18px;
overflow:hidden;
display:flex;
align-items:flex-end;
justify-content:center;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.bar{
width:100%;
height:0%;
border-radius:18px 18px 12px 12px;
background:#e74c3c;
}

/* ===================================================== */
/* IMPROVED WINNER EFFECT                                 */
/* ===================================================== */

.result-panel.winner{
transform:translateY(-6px) scale(1.05);
box-shadow:0 0 60px rgba(46,204,113,.75);
animation:pulseGlow 1.2s ease;
}

@keyframes pulseGlow{

0%{
box-shadow:0 0 0 rgba(46,204,113,0);
}

40%{
box-shadow:0 0 90px rgba(46,204,113,1);
}

100%{
box-shadow:0 0 60px rgba(46,204,113,.75);
}

}

/* ===================================================== */
/* INPUT BLOCKS                                           */
/* ===================================================== */

.block{
padding:22px;
border:1px solid #ddd;
border-radius:12px;
margin-bottom:22px;
}

.competitor{
background:#fafafa;
}

.metric{
margin-bottom:26px;
}

.metric label{
display:block;
font-weight:600;
margin-bottom:8px;
}

.metric span{
font-weight:bold;
margin-left:6px;
}

/* ===================================================== */
/* SLIDER SYSTEM                                          */
/* ===================================================== */

input[type=range]{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
height:16px;
background:transparent;
outline:none;
margin-bottom:18px;
}

input[type=range]::-webkit-slider-runnable-track{
height:16px;
background:#d6d6d6;
border-radius:22px;
}

input[type=range]::-moz-range-track{
height:16px;
background:#d6d6d6;
border:none;
border-radius:22px;
}

input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:38px;
height:38px;
border-radius:50%;
background:#2b6fd8;
border:5px solid #ffffff;
box-shadow:0 3px 8px rgba(0,0,0,.35);
cursor:pointer;
margin-top:-11px;
}

input[type=range]::-moz-range-thumb{
width:38px;
height:38px;
border-radius:50%;
background:#2b6fd8;
border:5px solid #ffffff;
box-shadow:0 3px 8px rgba(0,0,0,.35);
cursor:pointer;
}

input[type=range]::-moz-focus-outer{
border:0;
}

/* ===================================================== */
/* COMPARE BUTTON                                         */
/* ===================================================== */

.compare-btn{
display:block;
width:100%;
max-width:420px;
margin:34px auto 10px auto;
padding:18px 28px;
background:#2b6fd8;
color:#ffffff;
font-size:20px;
font-weight:700;
line-height:1.2;
text-align:center;
border:none;
border-radius:12px;
cursor:pointer;
box-shadow:0 8px 20px rgba(43,111,216,0.28);
transition:all .18s ease;
}

.compare-btn:hover{
background:#1f5ec0;
box-shadow:0 10px 24px rgba(31,94,192,0.34);
transform:translateY(-1px);
}

.compare-btn:active{
background:#1b4ea0;
box-shadow:0 4px 12px rgba(27,78,160,0.28);
transform:translateY(1px) scale(0.99);
}

.compare-btn:focus{
outline:none;
box-shadow:0 0 0 4px rgba(43,111,216,0.18), 0 8px 20px rgba(43,111,216,0.28);
}

/* ===================================================== */
/* CTA SECTION                                            */
/* ===================================================== */

.cta-box{
margin-top:60px;
padding:36px;
border-radius:16px;
border:1px solid #e4e4e4;
background:#f8f9fb;
text-align:center;
max-width:760px;
margin-left:auto;
margin-right:auto;
}

.cta-box h2{
margin-top:0;
font-size:28px;
}

.cta-box p{
max-width:620px;
margin:14px auto;
}

.cta-button{
display:inline-block;
margin-top:18px;
padding:16px 30px;
background:#2b6fd8;
color:#fff;
font-size:18px;
font-weight:700;
text-decoration:none;
border-radius:10px;
box-shadow:0 6px 18px rgba(43,111,216,.25);
transition:all .18s ease;
}

.cta-button:hover{
background:#1f5ec0;
transform:translateY(-1px);
}

/* ===================================================== */
/* NAV CENTER                                             */
/* ===================================================== */

nav{
margin-top:60px;
text-align:center;
}

nav ul{
list-style:none;
padding:0;
margin:0;
}

nav li{
margin:6px 0;
}

/* ===================================================== */
/* MOBILE TUNING                                          */
/* ===================================================== */

@media (max-width:720px){

body{
padding:0 14px;
margin:24px auto;
}

.result-container{
padding:14px 12px 16px 12px;
margin:22px 0 28px 0;
}

.result-grid{
gap:10px;
}

.result-panel{
padding:12px 8px 14px 8px;
}

.panel-title{
font-size:14px;
}

.score-number{
font-size:42px;
min-height:42px;
margin-bottom:4px;
}

.score-label{
font-size:13px;
margin-bottom:10px;
}

.bar-zone{
height:148px;
}

.bar-wrap{
height:148px;
width:58px;
}

.block{
padding:16px;
}

.compare-btn{
max-width:none;
width:100%;
font-size:18px;
padding:16px 22px;
}

}