*,
*::before,
*::after{
box-sizing:border-box;
}

:root{

--bg:#0b1220;
--panel:#111a2e;
--panel-soft:#16223a;

--blue:#4f8cff;
--blue2:#2563eb;

--text:#e6edf7;
--muted:#9fb0c7;

--green:#22c55e;
--amber:#f59e0b;
--red:#ef4444;

--border:#223352;

--shadow:0 16px 40px rgba(0,0,0,0.35);

}

/* PAGE */

body{
margin:0;
font-family:"Poppins",sans-serif;
background:radial-gradient(circle at top,#16213a 0%,#0b1220 60%);
color:var(--text);
}

main{
max-width:860px;
margin:auto;
padding:34px 18px 50px;
}

/* HERO */

.intro{
text-align:center;
background:linear-gradient(135deg,#1b2b52,#2563eb);
color:white;
border-radius:18px;
padding:36px 28px;
margin-bottom:20px;
box-shadow:var(--shadow);
position:relative;
}

.intro::before{
content:"";
position:absolute;
inset:-40px;
background:radial-gradient(circle,#4f8cff33 0%,transparent 60%);
z-index:-1;
}

/* GLOW TITLE */

.intro h1{
margin:0 0 10px;
font-size:3rem;
font-weight:700;

background:linear-gradient(90deg,#ffffff,#cfe0ff,#7aa6ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:0 6px 30px rgba(79,140,255,0.35);
}

.intro h2{
margin:6px 0;
font-size:1.05rem;
font-weight:300;
color:#e3ebff;
}

.intro p{
display:inline-block;
margin-top:14px;
padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,0.12);
font-size:.9rem;
}

/* PANELS */

.ad-input,
.ad-output{
background:var(--panel);
border-radius:16px;
padding:28px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}
.ad-input{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px 18px;
}

.ad-output{
margin-top:18px;
}

/* FORM */

.ad-input label{
font-size:.95rem;
font-weight:600;
color:var(--muted);
}

input{
width:100%;
padding:14px 16px;
border-radius:10px;
border:1px solid var(--border);
background:var(--panel-soft);
color:var(--text);
font-size:1rem;
}

input::placeholder{
color:#7f93ad;
}

input:focus{
outline:none;
border-color:var(--blue);
box-shadow:0 0 0 2px rgba(79,140,255,0.25);
}

/* BUTTON */

button{
border:none;
border-radius:12px;
padding:14px;
font-family:"Poppins",sans-serif;
font-weight:700;
font-size:1rem;
cursor:pointer;
transition:.15s;
}

.ad-input button{
grid-column:span 2;
background:linear-gradient(135deg,var(--blue),var(--blue2));
color:white;
}

button:hover{
transform:translateY(-1px);
opacity:.95;
}

#again-btn{
width:100%;
margin-top:14px;
background:#1e2b45;
color:white;
}

/* DASHBOARD HEADER */

.scenario-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
padding:12px 14px;
border-radius:10px;
background:#0f1a30;
border:1px solid var(--border);
}

/* BADGES */

.recommended,
.caution,
.not-recommended{
padding:6px 14px;
border-radius:999px;
font-size:.85rem;
font-weight:700;
color:white;
}

.recommended{background:var(--green);}
.caution{background:var(--amber);}
.not-recommended{background:var(--red);}

/* SUMMARY */

.scenario-banner{
font-size:.95rem;
font-weight:600;
color:#d7e2ff;
}

/* METRICS */

.metrics-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-bottom:16px;
}

.metric-card{
background:#0f1a30;
border:1px solid var(--border);
border-radius:12px;
padding:14px;
display:flex;
flex-direction:column;
gap:4px;
}

.metric-label{
font-size:.8rem;
color:var(--muted);
}

.metric-value{
font-size:1.15rem;
font-weight:700;
}

.metric-subvalue{
font-size:.85rem;
color:var(--blue);
}

.highlight-card{
background:linear-gradient(135deg,#13203a,#182c54);
}

/* TREND COLORS */

.positive{
color:var(--green);
}

.negative{
color:var(--red);
}

/* CHARTS */

canvas{
width:100%;
background:#0f1a30;
border-radius:12px;
border:1px solid var(--border);
padding:8px;
margin-bottom:14px;
}

/* INSIGHT */

#insight{
background:#0f1a30;
border:1px solid var(--border);
border-radius:12px;
padding:14px;
margin-bottom:14px;
}

#insight p{
margin:0 0 8px;
line-height:1.5;
}

/* RECOMMENDATIONS */

.recommendation-box{
background:#0f1a30;
border:1px solid var(--border);
border-radius:12px;
padding:14px;
}

.recommendation-box ul{
margin:0;
padding-left:18px;
}

.recommendation-box li{
margin-bottom:8px;
}

/* MOBILE */

@media(max-width:700px){

.ad-input{
grid-template-columns:1fr;
}

.metrics-grid{
grid-template-columns:1fr;
}

.intro h1{
font-size:2.2rem;
}

}