body{
margin:0;
font-family:Inter,system-ui,sans-serif;
background:#0b1020;
color:white;
padding:32px 18px;
background:
radial-gradient(circle at top left, rgba(124,58,237,.25), transparent 25%),
radial-gradient(circle at top right, rgba(34,197,94,.15), transparent 20%),
#0b1020;
}

*{box-sizing:border-box}

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

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}

.brand{
font-size:24px;
font-weight:800;
}

select{
background:#131b31;
color:white;
border:1px solid rgba(255,255,255,.1);
padding:10px 14px;
border-radius:12px;
}

.hero{
display:grid;
grid-template-columns:1fr 260px;
gap:20px;
margin-bottom:20px;
}

.hero-card,.panel,.results{
background:rgba(19,27,49,.9);
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
}

.hero-card{
padding:24px;
display:flex;
flex-direction:column;
justify-content:end;
}

.hero-card strong{
font-size:34px;
margin-top:8px;
}

.eyebrow{
color:#8b5cf6;
font-size:13px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
}

h1{
font-size:64px;
line-height:.95;
margin:0;
letter-spacing:-.05em;
}

.subtitle{
color:#94a3b8;
font-size:18px;
max-width:650px;
}

.panel{
padding:24px;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}

.field{
background:#18223d;
padding:16px;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
}

.highlight{
border-color:#8b5cf6;
}

.field span{
display:block;
font-size:13px;
color:#94a3b8;
margin-bottom:8px;
}

input{
width:100%;
background:none;
border:none;
outline:none;
color:white;
font-size:24px;
font-weight:700;
}

.notice{
margin-top:16px;
padding:16px;
border-radius:18px;
background:rgba(124,58,237,.12);
border:1px solid rgba(124,58,237,.3);
}

.section-header{
margin-top:26px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.section-header p{
color:#94a3b8;
}

#periodsContainer{
display:grid;
gap:12px;
margin-top:16px;
}

.period{
background:#18223d;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
}

.period summary{
padding:16px;
font-weight:700;
cursor:pointer;
}

.period-content{
padding:16px;
border-top:1px solid rgba(255,255,255,.08);
display:grid;
grid-template-columns:repeat(3,1fr) auto;
gap:12px;
align-items:end;
}

button{
border:none;
cursor:pointer;
border-radius:999px;
padding:14px 18px;
font-weight:700;
}

.primary{
width:100%;
margin-top:20px;
background:#8b5cf6;
color:white;
}

.secondary{
background:#243252;
color:white;
}

.remove{
background:#3a1f28;
color:#ff8ca0;
}

.results{
margin-top:20px;
padding:16px;
display:grid;
grid-template-columns:1.4fr 1fr 1fr;
gap:12px;
}

.result-card{
background:#18223d;
padding:18px;
border-radius:20px;
}

.result-card strong{
display:block;
margin-top:8px;
font-size:30px;
}

.hidden{
display:none;
}

@media(max-width:900px){
.hero,.grid,.results,.period-content{
grid-template-columns:1fr;
}

h1{
font-size:42px;
}

.section-header{
flex-direction:column;
align-items:flex-start;
}
}