.mode-switch{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.mode-btn{
    padding:14px 26px;
    border:none;
    border-radius:14px;
    background:#F2F7F6;
    cursor:pointer;
    font-weight:500;
    transition:0.3s;
}

.mode-btn.active{
    background:#007f5f;
    color:white;
}

.time-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.time-row{
    display:grid;
    grid-template-columns:repeat(4,1fr) auto;
    gap:20px;
    align-items:end;
    background:#F2F7F6;
    padding:24px;
    border-radius:22px;
}

.input-group label{
    display:block;
    margin-bottom:10px;
}

.remove-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:12px;
    background:#ff4d6d;
    color:white;
    font-size:22px;
    cursor:pointer;
}

.controls{
    margin-top:28px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn{
    padding:15px 24px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-weight:500;
    transition:0.3s;
}

.btn:hover{
    transform:translateY(-3px);
}

.primary{
    background:#007f5f;
    color:white;
}

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

.dark{
    background:#192c27;
    color:white;
}

.result-box{
    margin-top:35px;
    background:linear-gradient(135deg,#007f5f,#55a630);
    color:white;
    border-radius:26px;
    padding:35px;
    text-align:center;
}

.result-title{
    font-size:18px;
    opacity:0.9;
	color:white;
}

.main-result{
    font-size:52px;
    font-weight:700;
    margin:18px 0;
    line-height:1.5;
}

.summary{
    opacity:0.95;
}

.stats{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
}

.stat{
    background:rgba(255,255,255,0.14);
    padding:20px;
    border-radius:18px;
}

.stat-label{
    font-size:14px;
    opacity:0.85;
}

.stat-value{
    margin-top:8px;
    font-size:24px;
    font-weight:700;
}