:root{
  --papper:#FBF6EC;
  --brod:#8C5A2B;
  --mork:#3A2A1A;
  --rubrik:#6B3F18;
  --rost:#B03A16;
  --linje:#E0CDB2;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--papper);
  color:var(--mork);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 20px 60px;
}

main,header,footer{max-width:560px;margin:0 auto}

/* --- Topp --- */
.topp{padding:44px 0 28px;text-align:center}
.topp h1{
  font-size:clamp(34px,9vw,52px);line-height:1.04;font-weight:800;
  letter-spacing:-1px;color:var(--rubrik);
}
.ingress{margin-top:14px;color:var(--brod);font-size:17px}

/* --- Plåten med frallor kvar --- */
.plat{
  border:2px solid var(--brod);border-radius:14px;
  padding:22px;margin-bottom:26px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.plat-siffra{display:flex;align-items:baseline;gap:10px;flex:1 1 190px}
.plat-siffra strong{font-size:52px;line-height:1;font-weight:800;color:var(--rost)}
.plat-siffra span{font-size:14px;color:var(--brod);line-height:1.35}
.prickar{
  flex:1 1 180px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;
}
.prickar i{width:12px;height:9px;border-radius:6px 6px 5px 5px;display:block}
.prickar .kvar{background:var(--brod)}
.prickar .salda{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linje)}

/* --- Priser --- */
.priser{margin-bottom:26px}
.priser h2,.ruta h2,.info h2{
  font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--brod);margin-bottom:12px;
}
.priser ul{list-style:none}
.priser li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 2px;border-bottom:1px dotted var(--linje);font-size:20px;
}
.priser li:last-child{border-bottom:none}
.priser li:last-child span,.priser li:last-child b,
.priser li.bast span,.priser li.bast b{color:var(--rost)}
.priser b{font-size:22px;color:var(--rubrik)}

/* --- Rutor --- */
.ruta{
  background:#fff;border:1px solid var(--linje);border-radius:14px;
  padding:24px;margin-bottom:26px;
}
.ruta.klar{border-color:var(--brod);border-width:2px}
.ruta.klar h2{font-size:26px;letter-spacing:0;text-transform:none;color:var(--rubrik);margin-bottom:10px}
.ruta.klar p+p{margin-top:10px}

/* --- Formulär --- */
label{display:block;margin-bottom:16px;font-size:14px;font-weight:600;color:var(--rubrik)}
.valfritt{font-weight:400;color:#9C8467}
input,textarea,select{
  display:block;width:100%;margin-top:6px;padding:12px 13px;
  font:inherit;font-weight:400;color:var(--mork);
  background:var(--papper);border:1.5px solid var(--linje);border-radius:9px;
}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(176,58,22,.35);border-color:var(--brod)}
textarea{resize:vertical}


button{
  width:100%;padding:15px;font:inherit;font-size:17px;font-weight:700;
  color:var(--papper);background:var(--rost);
  border:none;border-radius:9px;cursor:pointer;
}
button:hover{background:#96300f}
button:focus-visible{outline:3px solid var(--brod);outline-offset:2px}
button:disabled,button:disabled:hover{background:var(--linje);color:#9C8467;cursor:default}
select:disabled{color:#9C8467}

/* Skelett medan saldot hämtas */
.plat-siffra strong.skelett{
  color:transparent;background:var(--linje);border-radius:8px;
  animation:puls 1.2s ease-in-out infinite;
}
@keyframes puls{0%,100%{opacity:.45}50%{opacity:.9}}

.finstilt{margin-top:12px;font-size:13px;color:var(--brod);text-align:center}
.fel{
  background:#FBE7E0;border-left:4px solid var(--rost);
  padding:11px 13px;border-radius:6px;margin-bottom:18px;font-size:15px;
}
.slutsalt{font-size:17px;color:var(--rubrik)}
.burk{position:absolute;left:-9999px}

/* --- Info och fot --- */
.info{border-top:2px solid var(--brod);padding-top:20px}
footer{margin-top:40px;text-align:center;font-size:13px;color:var(--brod)}

@media (max-width:420px){
  .prickar{justify-content:flex-start}
}