/* Jäsenrekisteri: sovelluspalkki ylhäällä; jäsenlista ja jäsenkortti rinnakkain, kapealla allekkain. */
:root {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eef1f5; --ink: #171c24; --muted: #5a6472;
  --line: #d8dde5; --accent: #2b5c8a; --accent-ink: #ffffff; --accent-soft: #e3ecf5;
  --meta: #6a4c9c; --meta-bg: #f0eaf8; --good: #2a7a4b; --good-bg: #e2f2e8;
  --warn: #9a5c08; --warn-bg: #fbefd9; --bad: #b2271d; --bad-bg: #fbe6e3; --shadow: 0 1px 2px rgba(22,33,27,.06);
  --f-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #101318; --surface: #171b22; --surface-2: #1d222b; --ink: #e3e8ef; --muted: #9aa5b4;
  --line: #2b323d; --accent: #7fb2e5; --accent-ink: #08130f; --accent-soft: #18273a;
  --meta: #bca6e8; --meta-bg: #261f35; --good: #6fd096; --good-bg: #15301f;
  --warn: #f0b45a; --warn-bg: #33260f; --bad: #ff8a7e; --bad-bg: #3a1714; --shadow: none; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #101318; --surface: #171b22; --surface-2: #1d222b; --ink: #e3e8ef; --muted: #9aa5b4;
  --line: #2b323d; --accent: #7fb2e5; --accent-ink: #08130f; --accent-soft: #18273a;
  --meta: #bca6e8; --meta-bg: #261f35; --good: #6fd096; --good-bg: #15301f;
  --warn: #f0b45a; --warn-bg: #33260f; --bad: #ff8a7e; --bad-bg: #3a1714; --shadow: none; color-scheme: dark }

body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-sans); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 10px; }
.top-in { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.brand { font-weight: 600; font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.brand small { font: 500 11px var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); outline: 1px solid var(--line); }
.top-ctrl { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 13px; }
.top-ctrl label { display: inline-flex; align-items: center; gap: 6px; }

.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 48px; }
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 880px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-h h2, .panel-h h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.panel-b { padding: 14px; min-width: 0; }

.tlist { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.tlist button { width: 100%; text-align: left; border: 0; background: none; border-radius: 7px; padding: 9px 10px; cursor: pointer; display: grid; gap: 2px; }
.tlist button:hover { background: var(--surface-2); }
.tlist button[aria-current="true"] { background: var(--accent-soft); }
.tlist .t1 { font-weight: 600; }
.tlist .t2 { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); font-family: var(--f-mono); }

.head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
.head h1 { margin: 0; font-size: 20px; font-weight: 600; text-wrap: balance; }
.head .sub { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 7px 12px; cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.small { padding: 3px 9px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.tabs { display: flex; gap: 2px; padding: 12px 16px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; }
.field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > .lbl { font-size: 13px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.req { color: var(--bad); }
.ohje { font-size: 12px; color: var(--muted); }
.errmsg { font-size: 12px; color: var(--bad); }
.inp { width: 100%; max-width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.inp:disabled { background: var(--surface-2); color: var(--muted); }
.field.err .inp { border-color: var(--bad); }
.unit { display: flex; align-items: stretch; }
.unit .inp { border-top-right-radius: 0; border-bottom-right-radius: 0; font-variant-numeric: tabular-nums; }
.unit span { border: 1px solid var(--line); border-left: 0; border-radius: 0 6px 6px 0; padding: 6px 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; white-space: nowrap; display: flex; align-items: center; }
.arvo { display: flex; gap: 6px; }
.arvo select { flex: 0 0 auto; width: auto; }
textarea.inp { min-height: 64px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 8px; }
.meta { font: 500 10.5px var(--f-mono); color: var(--meta); background: var(--meta-bg); border-radius: 4px; padding: 1px 5px; letter-spacing: 0; }

.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
.grid td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr.sel td { background: var(--accent-soft); }
.grid tr.click { cursor: pointer; }
.grid tr.click:hover td { background: var(--surface-2); }
.grid tr.sel:hover td { background: var(--accent-soft); }
.grid td .inp { padding: 4px 6px; }
.grid td.na { color: var(--muted); }
.grid tfoot td { font-weight: 600; border-bottom: 0; }
.mono { font-family: var(--f-mono); font-size: 12px; }

.rivit { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rivit-f { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--line); }
.detail { margin-top: 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px; background: var(--surface-2); }
.detail h4 { margin: 0 0 12px; font-size: 14px; }

.chip { display: inline-block; font: 500 11px var(--f-mono); padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; letter-spacing: .02em; }
.chip.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.chip.acc { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.banner { border-radius: 8px; padding: 10px 12px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.banner.ok { background: var(--good-bg); color: var(--good); }
.banner.err { background: var(--bad-bg); color: var(--bad); }
.banner.info { background: var(--meta-bg); color: var(--meta); }
.banner button { background: none; border: 0; color: inherit; cursor: pointer; font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.tile .k { font-size: 12px; color: var(--muted); }
.tile .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.stack > *, .field > *, .panel-b > * { min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-width: 0; }
.row > * { min-width: 0; max-width: 100%; }
.muted { color: var(--muted); }
.h3 { font-size: 14px; font-weight: 600; margin: 0; }

@media (prefers-reduced-motion: no-preference) { .btn, .tlist button, .tabs button { transition: background .12s, color .12s; } }

/* Jäsenrekisterin lisäykset */
.layout2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.layout2 > .kortti { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
@media (max-width: 1080px) { .layout2 { grid-template-columns: minmax(0, 1fr); } .layout2 > .kortti { position: static; max-height: none; } }
.layout-maksut { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; }
.asetukset { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; align-items: start; }
.kartta { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.suodattimet select.inp { width: auto; }
.grid td.chips { white-space: normal; }
.grid td.chips .chip { margin: 1px 4px 1px 0; }
.grid td.toiminnot { white-space: nowrap; text-align: right; }
.grid td.toiminnot .btn + .btn { margin-left: 4px; }
.grid td .inp[type="date"] { width: auto; }
details.lisays { border-top: 1px solid var(--line); padding-top: 10px; }
details.lisays > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); list-style-position: inside; }
.btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.danger:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
@media (max-width: 600px) { .seg { overflow-x: auto; max-width: 100%; } .seg button { white-space: nowrap; padding: 5px 9px; } }
.row select.inp { width: auto; max-width: 100%; }
.layout2 > .panel:first-child .grid th:nth-child(4), .layout2 > .panel:first-child .grid td:nth-child(4) { display: none; }

/* ---------- Laskujen tulostus (A4) ---------- */
.tulostuspalkki { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
#tuloste { display: none; }
/* Sivun koko ja reunat asetetaan tulostuksen yhteydessä (app.js: asetaSivu), koska kaikki selaimet
   eivät tue nimettyjä sivutyyppejä. Reunat: vasen 20 mm, oikea 10 mm. */
@media print {
  body { background: #fff !important; }
  body::before, .top, #app { display: none !important; }
  #tuloste { display: block; }
}
/* Laskun reunat: vasen 20 mm, oikea 10 mm (sivun marginaali 0, sijainnit millimetreinä) */
.lasku { position: relative; width: 180mm; height: 270mm; overflow: hidden; background: #fff; color: #000;
  font: 10pt/1.4 var(--f-sans); page-break-after: always; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lasku:last-child { page-break-after: auto; break-after: auto; }
.lasku .mono { font-family: var(--f-mono); font-size: 9.5pt; }
.l-lahettaja { position: absolute; left: 0; top: 3mm; width: 85mm; }
.l-lahettaja strong { font-size: 12pt; }
.l-otsake { position: absolute; left: 98mm; right: 0; top: 3mm; }
.l-otsikko { font-size: 16pt; font-weight: 600; letter-spacing: .08em; margin-bottom: 3mm; }
.l-otsake table { border-collapse: collapse; width: 100%; }
.l-otsake th { text-align: left; font-weight: 400; color: #444; padding: .6mm 4mm .6mm 0; white-space: nowrap; }
.l-otsake td { font-weight: 600; padding: .6mm 0; }
/* Vasemman ikkunan kuori: ikkuna noin 20 mm vasemmalta, 45–90 mm ylhäältä */
.l-vastaanottaja { position: absolute; left: 2mm; top: 40mm; width: 85mm; font-size: 11pt; line-height: 1.35; }
.l-runko { position: absolute; left: 0; right: 0; top: 93mm; }
.l-runko h2 { font-size: 13pt; margin: 0 0 5mm; }
.l-runko p { margin: 6mm 0 0; max-width: 150mm; }
.l-rivit { width: 100%; border-collapse: collapse; }
.l-rivit th { text-align: left; font-weight: 500; color: #444; border-bottom: .3mm solid #000; padding: 1.5mm 0; }
.l-rivit td { padding: 2mm 0; border-bottom: .2mm solid #bbb; }
.l-rivit tfoot td { font-weight: 600; border-bottom: 0; }
.l-rivit .num { text-align: right; font-variant-numeric: tabular-nums; }
.l-leima { display: inline-block; border: .5mm solid #000; padding: 1.5mm 4mm; font-weight: 600; letter-spacing: .06em; margin-bottom: 6mm; }
.l-tilisiirto { position: absolute; left: 0; right: 0; bottom: 12mm; border-top: .4mm dashed #000; padding-top: 4mm; }
.l-tt-otsikko { font-size: 8pt; text-transform: uppercase; letter-spacing: .1em; color: #444; margin-bottom: 2mm; }
.l-tt { display: grid; grid-template-columns: 1fr 1fr; border: .3mm solid #000; }
.l-tt-k { padding: 1.5mm 3mm; border-bottom: .2mm solid #000; display: grid; }
.l-tt-k:nth-child(odd) { border-right: .2mm solid #000; }
.l-tt-k:nth-last-child(-n+1) { border-bottom: 0; }
.l-tt-k:nth-child(7) { grid-column: 1 / -1; border-right: 0; }
.l-tt-k span { font-size: 7.5pt; color: #444; }
.l-tt-k b { font-size: 11pt; }
.l-viiva { margin-top: 4mm; }
.l-viiva svg { display: block; }
.l-virtuaali { font-size: 7.5pt !important; margin-top: 1mm; word-break: break-all; }
.l-ala { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8pt; color: #444; border-top: .2mm solid #bbb; padding-top: 2mm; }

/* ---------- Listojen tulostus ---------- */
.listatuloste { width: 100%; max-width: 100%; background: #fff; color: #000; font: 9.5pt/1.35 var(--f-sans); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lt-vaaka { font-size: 7.8pt; }
.lt-vaaka .lt-taulu th, .lt-vaaka .lt-taulu td { padding-left: 1.5mm; padding-right: 1.5mm; }
.lt-otsake { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; border-bottom: .5mm solid #000; padding-bottom: 3mm; margin-bottom: 4mm; }
.lt-yhdistys { font-size: 9pt; color: #444; }
.lt-otsake h1 { margin: 0; font-size: 16pt; font-weight: 600; }
.lt-tiedot { text-align: right; font-size: 9pt; color: #333; }
/* Listojen reunat: vasen 20 mm, oikea 10 mm (@page). Taulukko mahtuu aina sivun levyiseksi. */
.lt-taulu { width: 100%; border-collapse: collapse; table-layout: auto; }
.lt-taulu td { overflow-wrap: break-word; }
.lt-taulu thead { display: table-header-group; }
.lt-taulu th { text-align: left; font-weight: 600; font-size: .9em; border-bottom: .3mm solid #000; padding: 1.5mm 2mm; white-space: nowrap; }
.lt-taulu td { padding: 1.3mm 2mm; border-bottom: .15mm solid #ccc; vertical-align: top; }
.lt-taulu tr { break-inside: avoid; }
.lt-taulu tbody tr:nth-child(even) td { background: #f3f3f3; }
.lt-taulu .num { text-align: right; font-variant-numeric: tabular-nums; }
.lt-nro { color: #666; width: 8mm; }
.lt-huom { margin: 4mm 0 0; font-size: 7.5pt; color: #666; }
/* Tarra-arkki 3 × 8, tarra 70 × 37 mm (esim. 70 × 37 mm / 24 kpl arkki) */
.tarrat { display: grid; grid-template-columns: repeat(3, 70mm); grid-template-rows: repeat(8, 37mm); width: 210mm; height: 296mm; overflow: hidden; break-after: page; }
.tarrat:last-child { break-after: auto; }
.tarra { padding: 7mm 6mm 4mm 8mm; overflow: hidden; font-size: 10pt; line-height: 1.3; break-inside: avoid; }
.tarra > div:first-child { font-weight: 500; }
.lt-taulu .nw { white-space: nowrap; }

/* ---------- Merkkipäivät ---------- */
.mp-ryhmat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.mp-tuloste { font-size: 10.5pt; }
.mp-ryhma { break-inside: avoid; margin-bottom: 6mm; }
.mp-ryhma h2 { font-size: 12pt; margin: 0 0 1.5mm; }
.mp-tuloste .lt-taulu th:nth-child(1), .mp-tuloste .lt-taulu td.mp-nimi { width: 48%; }
.mp-tuloste .lt-taulu tbody tr:nth-child(even) td { background: none; }
.mp-tuloste .lt-taulu td { border-bottom-color: #ddd; }
.uusi-sivu { break-before: page; }
.lt-taulu .nw, .grid .nw { white-space: nowrap; }

/* ---------- Osastoryhmittely ---------- */
.grid tr.ryhma td { background: var(--surface-2); font-weight: 600; padding-top: 8px; }
.osasto-otsikko { margin: 6px 0 0; font-size: 16px; }
.lt-osasto { break-inside: auto; margin-top: 5mm; }
.lt-osasto:first-of-type { margin-top: 0; }
.lt-osasto > h2 { font-size: 12.5pt; margin: 0 0 2mm; padding-bottom: 1mm; border-bottom: .3mm solid #000; break-after: avoid; }
.lt-osasto > h2 span { font-weight: 400; font-size: 9pt; color: #444; margin-left: 2mm; }
.mp-tuloste .lt-osasto > h2 { font-size: 13pt; }
.grid td.num, .grid th.num { white-space: nowrap; }

/* ---------- Jäsenlista: kaikki sarakkeet näkyviin ---------- */
.grid.lista-kaikki { font-size: 12.5px; }
.grid.lista-kaikki th, .grid.lista-kaikki td { padding: 5px 6px; }
.grid.lista-kaikki th { white-space: normal; }
.grid.lista-kaikki td.email { overflow-wrap: anywhere; min-width: 9em; }

/* ---------- Rekisterin muutokset ---------- */
.muutostaulu td:nth-child(4) { overflow-wrap: anywhere; }
.muutostuloste { font-size: 8.5pt; }
.muutostuloste .lt-taulu td { overflow-wrap: anywhere; }
.muutostuloste .lt-taulu th:nth-child(1) { width: 26mm; }
.muutostuloste .lt-taulu th:nth-child(2) { width: 22mm; }
.muutostuloste .lt-taulu th:nth-child(3) { width: 52mm; }

/* ---------- Kirjanpidon tosite ---------- */
.tosite { font-size: 10pt; }
.tosite-tiedot { border-collapse: collapse; font-size: 10pt; }
.tosite-tiedot th { text-align: left; font-weight: 400; color: #444; padding: .5mm 4mm .5mm 0; }
.tosite-tiedot td { font-weight: 600; padding: .5mm 0; text-align: right; }
.tosite-selite { margin: 0 0 4mm; }
.tosite-h { font-size: 11.5pt; margin: 6mm 0 2mm; break-after: avoid; }
.tosite-kirjaus { max-width: 140mm; }
.tosite .lt-taulu tfoot td { font-weight: 600; border-top: .3mm solid #000; border-bottom: 0; }
.tosite-huom { font-size: 9pt; margin: 3mm 0 0; }
.tosite-allekirjoitus { display: grid; grid-template-columns: 1fr 1fr; gap: 15mm; margin: 14mm 0 4mm; font-size: 9pt; color: #444; break-inside: avoid; }
.tosite-allekirjoitus .viiva { border-bottom: .3mm solid #000; height: 10mm; margin-bottom: 1.5mm; }

/* ---------- Kirjautuminen ja käyttäjät ---------- */
.kirjautuminen { display: flex; justify-content: center; padding: 6vh 0 40px; }
.kirj-kortti { width: 100%; max-width: 440px; }
.kirj-otsikko { font-size: 20px; margin: 0; }
.kirj-kortti .field { display: flex; flex-direction: column; gap: 4px; }
.kirj-kortti .inp { width: 100%; }
.inp.koodi { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: 22px; letter-spacing: .25em; max-width: 180px; }
.akt-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.akt-qr .qr { width: 180px; height: 180px; background: #fff; border-radius: 8px; padding: 4px; }
.akt-qr .qr svg { width: 100%; height: 100%; display: block; }
.akt-qr .avain { font-size: 15px; letter-spacing: .05em; word-break: break-all; max-width: 200px; }
.kayttaja-info { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; white-space: nowrap; }
.linkki-laatikko { border: 1px solid var(--good, #2f7d4f); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
tr.virherivi td { color: var(--bad); }
@media (max-width: 720px) { .kayttaja-info .muted { display: none; } }
@media print { .kayttaja-info { display: none; } }