:root{--v:#1f4e79;--t:#222;--h:#666;--r:#b00020;--p:#e8eef5}
*{box-sizing:border-box}
body{margin:0;font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--t);background:#fafafa}
main{max-width:680px;margin:0 auto;padding:24px 16px 48px}
footer{text-align:center;color:var(--h);font-size:14px;padding:16px}
footer a{color:var(--h)}
h1{font-size:1.6rem;margin:.2em 0 .6em}
h2{font-size:1.25rem;margin:1em 0 .5em}
h2.tilanne{font-weight:500;line-height:1.4}
h2 small{color:var(--h);font-weight:400;margin-left:.4em}
p.meta,p.edistys{color:var(--h);font-size:.95rem}
p.virhe{color:var(--r);min-height:1.2em;margin:.4em 0}
label{display:block;margin:.8em 0 .3em;font-weight:600}
input,textarea{width:100%;font:inherit;padding:.6em .7em;border:1px solid #bbb;border-radius:8px;background:#fff}
input#koodi{font-size:1.4rem;letter-spacing:.12em;text-transform:uppercase;text-align:center}
button{font:inherit;font-weight:600;padding:.7em 1.4em;border:0;border-radius:8px;background:var(--v);color:#fff;cursor:pointer;margin-top:.8em}
button[disabled]{background:#bbb;cursor:default}
.napit{display:flex;justify-content:space-between;gap:12px}
.vaihtoehto{display:flex;gap:.7em;align-items:flex-start;font-weight:400;padding:.7em .8em;margin:.4em 0;border:1px solid #ccc;border-radius:10px;background:#fff;cursor:pointer}
.vaihtoehto.valittu{border-color:var(--v);background:var(--p)}
.vaihtoehto input{width:auto;margin-top:.35em}
.asteikot{display:flex;gap:8px;justify-content:space-between}
.asteikko{flex:1;text-align:center;padding:.6em 0;border:1px solid #ccc;border-radius:10px;background:#fff;cursor:pointer;font-weight:500}
.asteikko input{display:none}
.asteikko:has(input:checked){border-color:var(--v);background:var(--p)}
.palkki-ohut{height:6px;background:#e3e3e3;border-radius:3px;margin:0 0 1.2em;overflow:hidden}
.palkki-ohut span{display:block;height:100%;background:var(--v)}
.pylvaat{margin:1em 0 1.5em}
.pylvas{display:grid;grid-template-columns:11em 1fr 4.5em;align-items:center;gap:10px;margin:.45em 0}
.pylvas .palkki{height:22px;background:#e3e3e3;border-radius:6px;overflow:hidden}
.pylvas .palkki span{display:block;height:100%;background:var(--v)}
.pylvas .luku{text-align:right;font-variant-numeric:tabular-nums}
p.ohje{background:var(--p);padding:.8em 1em;border-radius:10px}
section.lokero p{margin:.3em 0 1em}
.toiminnot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:2em;color:var(--h);font-size:.95rem}
@media (max-width:480px){.pylvas{grid-template-columns:1fr;gap:4px}.pylvas .luku{text-align:left}}
@media print{body{background:#fff;font-size:12pt}main{max-width:none;padding:0}footer,.toiminnot,button{display:none}.pylvas .palkki span{background:#333!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* hallinta */
body.admin main{max-width:960px}
h1 .ulos{font-size:.9rem;font-weight:400;margin-left:1em}
p.ilmo{background:#e6f4ea;padding:.6em 1em;border-radius:8px}
pre.koodit{background:#fff;border:1px solid #ccc;border-radius:8px;padding:1em;font-size:1.1rem;letter-spacing:.06em;column-width:9em}
table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
th,td{text-align:left;padding:.45em .6em;border-bottom:1px solid #e3e3e3;vertical-align:top}
select{width:100%;font:inherit;padding:.6em;border:1px solid #bbb;border-radius:8px;background:#fff}
/* hallinta: mallilista ja editori */
p.murut{color:var(--h);font-size:.9rem;margin:0 0 .2em}
p.meta{color:var(--h);font-size:.92rem;margin:.2em 0 1.2em}
p.tyhja{color:var(--h);font-style:italic}
h2 .lkm{font-weight:400;color:var(--h);font-size:.8em;margin-left:.3em}
table.mallit td:first-child{width:46%}
table.mallit code{color:var(--h);font-size:.85rem}
.roolit{display:block;color:var(--h);font-size:.85rem}
tr.tiedosto{background:#fffdf3}
.nappi{display:inline-block;background:var(--v);color:#fff;text-decoration:none;padding:.55em 1.1em;border-radius:8px;font-weight:500}
form.rivissa{display:inline}
section.lukko{background:#fff8e6;border:1px solid #e8d9a8;border-radius:10px;padding:.2em 1.2em 1.2em}
form.kopio{max-width:26em}
/* mallieditori */
.tallennuspalkki{position:sticky;top:0;z-index:5;display:flex;gap:14px;align-items:center;background:#fafafa;padding:.8em 0;border-bottom:1px solid #e3e3e3;margin-bottom:1em}
.tallennuspalkki .tila{color:var(--h);font-size:.92rem}
button.ensisijainen{width:auto;background:var(--v);color:#fff;border:0;padding:.6em 1.3em;border-radius:8px;font:inherit;font-weight:500;cursor:pointer}
.virheet{background:#fdecea;border:1px solid #f5c2bd;border-radius:10px;padding:.6em 1.2em;margin-bottom:1em}
.virheet ul{margin:.4em 0 .2em;padding-left:1.4em}
label.kentta{display:block;margin:.7em 0}
label.kentta>span{display:block;font-weight:500;font-size:.9rem;margin-bottom:.2em}
label.kentta small{display:block;color:var(--h);font-size:.82rem;margin-top:.2em}
.kentta>span{display:block;font-weight:500;font-size:.9rem;margin-bottom:.2em}
.ruudukko{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:0 14px}
.rastit{display:flex;gap:20px;flex-wrap:wrap;margin:.8em 0}
label.rasti{display:flex;gap:.5em;align-items:center;font-weight:400}
label.rasti input{width:auto}
input,textarea{width:100%;font:inherit;padding:.5em;border:1px solid #bbb;border-radius:8px;background:#fff}
input:disabled,textarea:disabled,select:disabled{background:#f2f2f2;color:#666}
textarea{resize:vertical}
article.kortti{background:#fff;border:1px solid #ddd;border-radius:10px;padding:.2em 1em 1em;margin:.8em 0}
article.kortti.tyyppi-ohje{background:#f6f8fb;border-style:dashed}
article.kortti.tyyppi-sivunvaihto{background:#f2f2f2;border-style:dashed}
.kortti-ylä{display:flex;gap:10px;align-items:center;padding:.7em 0;flex-wrap:wrap}
.kortti-ylä .sija{font-weight:600}
.kortti-ylä .nro{color:var(--h);font-size:.88rem;font-variant-numeric:tabular-nums}
.kortti-ylä select{width:auto;flex:1;min-width:11em}
.napit-oikea{display:flex;gap:6px;margin-left:auto}
button.pieni{width:auto;background:#fff;border:1px solid #bbb;border-radius:7px;padding:.35em .7em;font:inherit;cursor:pointer}
button.pieni:disabled{color:#bbb;cursor:default}
button.pieni.poista{color:var(--r);border-color:#e0b4b0}
.vaihtoehdot-muokkaus{display:flex;flex-direction:column;gap:6px}
.vaihtoehto-rivi{display:flex;gap:8px;align-items:center}
.vaihtoehto-rivi .vnro{color:var(--h);min-width:1.8em;font-variant-numeric:tabular-nums}
.vaihtoehto-rivi select{width:auto;min-width:9em}
.lisaa{display:flex;gap:10px;margin:1.2em 0}
.lisaa button{width:auto;background:#fff;border:1px dashed #999;border-radius:8px;padding:.6em 1.1em;font:inherit;cursor:pointer}
details.lokerotekstit{margin:1em 0;background:#fff;border:1px solid #ddd;border-radius:10px;padding:.2em 1em}
details.lokerotekstit summary{cursor:pointer;font-weight:500;padding:.6em 0}
@media (max-width:560px){.vaihtoehto-rivi{flex-wrap:wrap}.vaihtoehto-rivi select{width:100%}}