:root {
  --vihrea: #2f6b3a;
  --vihrea-vaalea: #e6f2e8;
  --tausta: #f6f5f1;
  --kortti: #ffffff;
  --teksti: #1f2a22;
  --harmaa: #6b7570;
  --viiva: #e1e4df;
  --punainen: #b23a3a;
  --keltainen: #e0a800;
  --pyoristys: 12px;
  --alapalkki: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--tausta); color: var(--teksti);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--vihrea); }

.ylapalkki { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: var(--vihrea); color: #fff; }
.ylapalkki h1 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.pilleri { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-size: .9rem; }

.sisalto { padding: 12px 16px calc(var(--alapalkki) + 24px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }

.alapalkki { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--alapalkki) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--kortti); border-top: 1px solid var(--viiva); z-index: 5; }
.alapalkki button { flex: 1; border: 0; background: none; color: var(--harmaa); font-size: .72rem; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; }
.alapalkki button .ikoni { font-size: 1.35rem; line-height: 1; }
.alapalkki button.aktiivinen { color: var(--vihrea); font-weight: 600; }

.kortti { background: var(--kortti); border-radius: var(--pyoristys); padding: 12px 14px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.kortti h2 { margin: 0 0 8px; font-size: 1rem; color: var(--harmaa); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kortti h3 { margin: 0; font-size: 1.05rem; }

.rivi { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--viiva); }
.rivi:last-child { border-bottom: 0; }
.rivi .kasvaa { flex: 1; min-width: 0; }
.rivi .pieni { font-size: .8rem; color: var(--harmaa); }
.rivi.ostettu { opacity: .5; }
.rivi.ostettu .nimi { text-decoration: line-through; }
.rivi .nimi { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rivi .maara { color: var(--harmaa); white-space: nowrap; }
.ruksi { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--vihrea); background: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--vihrea); font-size: 1rem; }
.ostettu .ruksi { background: var(--vihrea); color: #fff; }
.napautettava { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.merkki { display: inline-block; font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: var(--vihrea-vaalea); color: var(--vihrea); margin-left: 6px; vertical-align: middle; }
.merkki.harmaa { background: #eee; color: var(--harmaa); }
.merkki.keltainen { background: #fff4d1; color: #8a6400; }
.merkki.punainen { background: #fde2e2; color: var(--punainen); }

.kentta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kentta label { font-size: .85rem; color: var(--harmaa); }
input[type=text], input[type=url], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--viiva); border-radius: 10px; background: #fff; color: var(--teksti); }
textarea { min-height: 90px; resize: vertical; }
.vaaka { display: flex; gap: 8px; align-items: center; }
.vaaka > * { flex: 1; }
.vaaka > .kapea { flex: 0 0 auto; }

.nappi { border: 0; border-radius: 10px; padding: 11px 16px; background: var(--vihrea); color: #fff; font-weight: 600; }
.nappi.toissijainen { background: var(--vihrea-vaalea); color: var(--vihrea); }
.nappi.vaara { background: #fde2e2; color: var(--punainen); }
.nappi.pieni { padding: 6px 10px; font-size: .85rem; }
.nappi:disabled { opacity: .5; cursor: default; }
.nappirivi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nappirivi .nappi { flex: 1; }
.pikalisays { display: flex; gap: 8px; }
.pikalisays input { flex: 1; }
.tyhja { color: var(--harmaa); text-align: center; padding: 24px 8px; }

.tahdet { display: inline-flex; gap: 2px; }
.tahdet button { border: 0; background: none; font-size: 1.25rem; padding: 0 2px; color: #cfd4d0; line-height: 1; }
.tahdet button.paalla { color: var(--keltainen); }
.arvosanarivi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.arvosanarivi span { font-size: .9rem; }
.arvosanarivi .aikuinen { color: var(--harmaa); }

.paivat { display: grid; gap: 8px; }
.paiva { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.paiva .nimi { font-weight: 700; color: var(--harmaa); text-transform: uppercase; font-size: .85rem; }
.paiva label.tahde { font-size: .8rem; color: var(--harmaa); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.yhteenveto { white-space: pre-wrap; font-size: .95rem; color: var(--teksti); background: var(--vihrea-vaalea); border-radius: 10px; padding: 10px 12px; }

.dialogi { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.dialogi-laatikko { background: var(--kortti); width: 100%; max-width: 720px; max-height: 90vh; overflow: auto;
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.dialogi h2 { margin: 0 0 12px; font-size: 1.15rem; }
@media (min-width: 720px) { .dialogi { align-items: center; } .dialogi-laatikko { border-radius: 16px; } }
.piilossa { display: none !important; }

.ilmoitus { position: fixed; left: 50%; bottom: calc(var(--alapalkki) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #222; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; z-index: 30; max-width: 90vw; }
.ilmoitus.virhe { background: var(--punainen); }

.valintalista { display: flex; flex-wrap: wrap; gap: 6px; }
.valintalista button { border: 1px solid var(--viiva); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: .9rem; }
.valintalista button.paalla { background: var(--vihrea); color: #fff; border-color: var(--vihrea); }

.ehdotukset { position: relative; }
.ehdotukset ul { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 0; list-style: none; background: #fff;
  border: 1px solid var(--viiva); border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.12); z-index: 10; max-height: 220px; overflow: auto; }
.ehdotukset li { padding: 10px 12px; border-bottom: 1px solid var(--viiva); }
.ehdotukset li:last-child { border-bottom: 0; }
.ehdotukset li .pieni { color: var(--harmaa); font-size: .8rem; margin-left: 6px; }

.kuittikuva { max-width: 100%; border-radius: 10px; border: 1px solid var(--viiva); }
.tiedostonappi { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tiedostonappi input { display: none; }
details summary { cursor: pointer; color: var(--vihrea); font-size: .9rem; }
.linkkirivi { font-size: .85rem; word-break: break-all; }