body{background:#1b4747;color:#e5e7eb;font-family:system-ui;margin:0}
.top{display:flex;justify-content:center;padding:14px}
.title{display:flex;align-items:center;gap:10px}
.title img{width:48px}
.app{max-width:560px;margin:auto;padding:12px 12px 90px}
.card{background:#2e5454;padding:16px;border-radius:12px}
.toggle-group{display:flex;gap:10px;margin-bottom:14px}
.toggle-group input{display:none}
.toggle-group label{flex:1;text-align:center;padding:10px;background:#0f2a2a;border:1px solid #2c4a4a;border-radius:8px;cursor:pointer}
.toggle-group input:checked+label{background:#668bdb}
label{display:block;margin-top:14px;margin-bottom:6px}
input{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  margin-bottom:14px;
  background:#0f2a2a;
  color:white;
  border:1px solid #2c4a4a;
  border-radius:12px;
  font-size:16px; /* verhindert iOS-Zoom */
  line-height:1.3;
}
button{width:100%;padding:12px;background:#668bdb;color:white;border:none;border-radius:10px}
.results{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}

.box{
  background:#0c2323;
  padding:14px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  overflow-wrap:anywhere;
}

.box span{
  display:block;
  font-size:0.9rem;
  line-height:1.2;
  color:#cbd5e1;
}

.box b{
  display:block;
  font-size:1.25rem;
  line-height:1.25;
  word-break:break-word;
}
.good{color:#22c55e}
.bad{color:#ef4444}
.footer{position:fixed;bottom:0;width:100%;display:flex;background:#0f2a2a}
.footer button{flex:1;background:transparent;color:#cbd5f5}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:1000}
.modal-content{background:#1f3a3a;margin:20px auto;padding:20px;width:90%;max-height:80vh;overflow:auto}
.close{background:red;color:white}
@media (max-width:420px){
  .results{
    grid-template-columns:1fr;
  }
}

/* EV/Fuel result unit refinement */
.box b.good,
.box b.bad{
  font-weight:700;
}