/* Vanhemman sivu (vanhempi.html): lisäyksiä sovelluksen tyyleihin (styles.css). */
.vp-wrap { max-width: 720px; margin: 16px auto 0; padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
.vp-wrap > p, .vp-wrap > h3 { overflow-wrap: anywhere; }
.screen input[type="email"], .screen input[type="number"] {
  width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg); margin-bottom: 12px; font-size: 1.05rem;
}
.vp-wrap .add-form input[type="text"], .vp-wrap .add-form input[type="email"] { text-align: left; font-size: 1.05rem; }
.screen select { font: inherit; color: var(--text); }
.vp-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vp-add-row select, .vp-select {
  flex: 1 1 140px; min-height: 46px; padding: 0 12px; border-radius: 23px; border: 1px solid var(--line); background: var(--bg);
}
.vp-terms { text-align: left; max-height: 46vh; overflow-y: auto; padding: 4px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.vp-terms li { margin: 6px 0; }
.vp-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 6px; }
.vp-check input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--primary); }
.vp-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-seats:empty { display: none; }

.chip.trial { background: #1d9e75; }
.chip.paid { background: var(--primary); }
.chip.paused { background: #d85a30; }
.chip.wait { background: #e0a100; color: #17202e; }
.pupil-body > h4 { margin: 18px 0 4px; font-size: 1rem; }
.pupil-body .rename { margin-top: 8px; flex-wrap: wrap; }
.pupil-body .rename input { flex: 1 1 200px; }
.pupil-body label.filter { margin-top: 8px; }
.vp-code { font-size: 1.15rem; }
.vp-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #f5a524 18%, var(--surface)); border: 1px solid color-mix(in srgb, #f5a524 55%, var(--line)); font-size: 0.95rem; }
.vp-note .actions { margin-top: 8px; }
.vp-profile { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 8px 12px 10px; margin: 10px 0 0; }
.vp-profile legend { padding: 0 6px; font-weight: 600; }
.vp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-chip { position: relative; }
.vp-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vp-chip span { display: inline-block; min-height: 38px; line-height: 36px; padding: 0 12px; border-radius: 19px; border: 1px solid var(--line); background: var(--bg); font-size: 0.92rem; }
.vp-chip input:checked + span { background: var(--primary); color: var(--primary-text); border-color: transparent; font-weight: 600; }
.vp-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }
.vp-chip input:disabled + span { opacity: 0.45; }
.vp-prizes { margin: 6px 0 0; padding-left: 20px; font-size: 0.92rem; }
.vp-code-card { margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vp-code-card p { margin: 4px 0; }
@media (max-width: 420px) { .vp-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ylläpitoon kirjautunut näkee kirjautumisnäkymässä oman pikapolkunsa */
.vp-admin-here { padding: 4px 18px 16px; margin: 0 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow-wrap: anywhere; }
.vp-admin-here .big { margin-top: 4px; }
.vp-wrap .vp-to-admin { margin: 0; }
.vp-tabs { position: sticky; top: 0; z-index: 5; }
.vp-reminder-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em; margin-left: 4px; padding: 0 4px; border-radius: 1em; background: #d85a30; color: white; font-size: 0.78em; font-weight: 700; }
.vp-reminders { margin: 0 0 16px; padding: 12px 14px; border: 2px solid #d85a30; border-radius: 16px; background: color-mix(in srgb, #d85a30 8%, var(--surface)); }
.vp-reminders h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vp-reminder-list { list-style: none; margin: 8px 0 0; padding: 0; }
.vp-reminder-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.vp-reminder-item p { margin: 0; }
.vp-reminder-item .btn { flex: none; }
@media (max-width: 420px) { .vp-reminder-item { align-items: stretch; flex-direction: column; } }

/* Yksinkertaistettu perhenäkymä (#43): kortti, jonka yläreunassa ovat huoltajaa odottavat toimet, ja taitettu "Lisää asetuksia" -osa. Mobiili ensin. */
.vp-kids { margin-bottom: 18px; }
.vp-kids:empty { display: none; }
.vp-kid .pupil-body { overflow-wrap: anywhere; }
.vp-kid .pupil-body h4 { margin: 16px 0 4px; font-size: 1rem; }
.vp-kid .pupil-body > .vp-todo { margin-top: 4px; }

.vp-todo { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vp-todo-title { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vp-todo-item { padding: 12px 14px; border-radius: 16px; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vp-todo-item.vp-note { margin: 0; border-color: color-mix(in srgb, #f5a524 70%, var(--line)); }
.vp-todo-item p { margin: 0 0 6px; }
.vp-todo-item .vp-todo-text { font-weight: 700; }
.vp-todo-item .big { margin-top: 4px; }
.vp-todo-item .actions { margin-top: 8px; flex-direction: column; align-items: stretch; }
.vp-todo-item .actions .btn { min-height: 46px; }

.vp-stars { margin-top: 2px; }
.vp-goal-line { margin-top: 8px; color: var(--text); font-size: 1rem; font-weight: 600; }
.vp-goal-line.reached { color: var(--primary); }
.vp-bar { height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 6px 0 10px; }
.vp-bar > span { display: block; height: 100%; border-radius: 6px; background: var(--primary); }
.vp-goal .rename.goal { flex-wrap: wrap; margin-top: 8px; }
.vp-goal .rename.goal select, .vp-goal .rename.goal input[type="text"] { flex: 1 1 100%; min-width: 0; min-height: 46px; }
.vp-goal .rename.goal input[type="number"] { flex: 1 1 100px; min-width: 0; margin: 0; }
.vp-goal .rename.goal .btn { flex: 1 1 140px; min-height: 46px; }
.vp-goal .rename.goal [hidden] { display: none; }
.carry { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; margin-top: 6px; }

.vp-link .code-line { margin: 6px 0 0; }
.vp-link .actions .btn { flex: 1 1 140px; justify-content: center; text-align: center; }

.vp-inline { margin: 10px 0 0; }
.vp-inline > summary, .vp-more > summary { cursor: pointer; color: var(--primary); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.vp-inline[open] > summary { margin-bottom: 6px; }
.vp-inline > .btn { margin-top: 8px; }
.vp-more { margin: 14px 0 0; border-top: 1px solid var(--line); }
.vp-more[open] > summary { margin-bottom: 4px; }
.vp-more-body { padding-bottom: 12px; }
.vp-more-body > h4:first-child { margin-top: 4px; }
.vp-kids + .add-form + .vp-more, .add-form + .vp-more { border-top: 0; margin-top: 0; }

.vp-wrap .add-form h3 { margin: 0 0 6px; font-size: 1.1rem; }
.vp-wrap .add-form input[type="text"] { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); margin-bottom: 10px; font-size: 1.05rem; }
.vp-full { width: 100%; flex: none; margin-bottom: 10px; }
.vp-wrap select, .vp-wrap input { max-width: 100%; }
.vp-claim { margin: 12px 0; padding: 14px; border-radius: 16px; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vp-claim h3 { margin: 0; }
.vp-claim .vp-steps { margin-bottom: 8px; }
.vp-claim .actions { margin-top: 4px; }

/* Koe ja opiskelutehtävä */
.vp-tasks { margin-top: 18px; }
.vp-task { margin: 10px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vp-task.done { border-color: var(--primary); }
.vp-task-title { margin: 0; font-weight: 700; }
.vp-digest { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 0.95rem; overflow-wrap: anywhere; }
.vp-task .actions .btn { min-height: 46px; flex: 1 1 140px; }
.vp-task-new { margin-top: 10px; }
.vp-task-new > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.vp-task-new input[type="file"] { width: 100%; margin: 8px 0; }
/* Huoltajan antama PDF-aineisto (#115): sama ulkoasu kuin koetehtävissä, omat luokat */
.vp-aineisto { margin-top: 18px; }
.vp-ain-item { margin: 10px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vp-ain-title { margin: 0; font-weight: 700; }
.vp-ain-item .actions .btn { min-height: 46px; flex: 1 1 140px; }
.vp-ain-new { margin-top: 10px; }
.vp-ain-new > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.vp-ain-new input[type="file"], .vp-ain-new select, .vp-ain-new textarea { width: 100%; margin: 8px 0; }
.vp-field { display: block; margin: 8px 0; font-size: 0.95rem; }
.vp-field input { display: block; width: 100%; margin: 4px 0 0; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: 1.05rem; }
.vp-draft { margin: 10px 0; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line); }
.vp-draft-head { display: flex; align-items: center; gap: 10px; font-weight: 700; min-height: 32px; }
.vp-draft-head input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--primary); }
.vp-draft-head input[hidden] { display: none; }

.vp-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vp-pick button { flex: 1 1 140px; }

/* Ohjattu käyttöönotto: kirjautumisnäkymän vaiheet ja aloitusohje */
.vp-steps { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.vp-guide { margin: 0 0 18px; padding: 14px 16px; border-radius: 20px; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vp-guide h3 { margin: 0 0 8px; font-size: 1.1rem; }
.vp-guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-step { display: flex; gap: 12px; align-items: flex-start; }
.vp-step-mark { flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--primary); display: grid; place-items: center; font-weight: 700; color: var(--primary-text); line-height: 1; }
.vp-step.done .vp-step-mark { background: var(--primary); }
.vp-step.done b { color: var(--muted); font-weight: 600; }
.vp-step-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.vp-step-body .btn { margin-top: 4px; min-height: 44px; }
.vp-guide .use-line { margin: 0; }
.vp-guide > .use-line { margin-top: 10px; }
.vp-demo-chat { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vp-demo-label { margin: 0 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vp-demo-msg { margin: 6px 0; padding: 8px 12px; border-radius: 14px; max-width: 92%; overflow-wrap: anywhere; }
.vp-demo-msg.kid { background: var(--user-bubble); color: #fff; margin-left: auto; }
.vp-demo-msg.helper { background: var(--bg); border: 1px solid var(--line); }

/* Maksut ja tavoitteet */
/* Viisi välilehteä yhdellä rivillä (#303): kapeassa ruudussa pienempi teksti ja kapeampi reunus, jotta kaikki (myös Maksut) mahtuvat
   samalle riville. Jos rivi ei silti mahdu (iso fonttikoko tai leveämpi kirjasin), se rivittyy eikä sivu leviä (#90). */
.vp-tabs { flex-wrap: wrap; max-width: 100%; gap: 2px; }
.vp-tabs button { flex: 1 0 auto; min-width: 0; font-size: 0.82rem; padding-inline: 7px; white-space: nowrap; }
@media (max-width: 409px) { .vp-tabs button { font-size: 0.78rem; padding-inline: 5px; } }
@media (max-width: 374px) { .vp-tabs button { font-size: 0.74rem; padding-inline: 4px; } }
@media (max-width: 699px) { .vp-tabs { position: static; } }
@media (min-width: 700px) { .vp-tabs button { font-size: 0.9rem; padding-inline: 12px; } }
.vp-tabs button.alert::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #d85a30; vertical-align: middle; }
.vp-pay-list { display: grid; gap: 10px; margin: 10px 0; }
.vp-pay-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vp-pay-row input[type="checkbox"] { width: 22px; height: 22px; }
.vp-pay-row .vp-pay-name { font-weight: 600; }
.vp-pay-row .vp-pay-status, .vp-pay-row select, .vp-pay-row .use-line { grid-column: 1 / -1; }
.vp-pay-row input[hidden] + .vp-pay-name { grid-column: 1 / -1; }
.vp-subscriptions { margin: 16px 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--surface) 72%, var(--bg)); }
.vp-subscriptions > h4 { margin: 0 0 10px; font-size: 1.05rem; }
.vp-subscription { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vp-subscription-status { display: inline-block; margin: 0 0 4px; padding: 4px 9px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: .8rem; font-weight: 700; }
.vp-subscription-active { border-color: color-mix(in srgb, #1d9e75 60%, var(--line)); }
.vp-subscription-active .vp-subscription-status { background: color-mix(in srgb, #1d9e75 16%, var(--surface)); color: #146c50; }
.vp-subscription-pending .vp-subscription-status { background: color-mix(in srgb, #e0a100 20%, var(--surface)); color: #6d4b00; }
.vp-subscription-stopping .vp-subscription-status { background: color-mix(in srgb, var(--error) 12%, var(--surface)); color: var(--error); }
.vp-subscription > .btn { margin-top: 8px; }
.vp-cancel-all { margin-top: 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.vp-cancel-all > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.vp-cancel-all p { margin: 8px 0; font-size: .9rem; }
/* Maksut puhelimella (#303): yhteenveto, jäsenrivit ja alinäkymät */
.btn.link { background: none; border: 0; padding: 6px 2px; min-height: 0; color: var(--primary); text-decoration: underline; font-weight: 600; box-shadow: none; }
.btn.link.danger { color: var(--error); }
.vp-summary { margin: 8px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.vp-summary-total { margin: 0 0 8px; font-weight: 700; font-size: 1.05rem; }
.vp-member-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vp-member-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.vp-member-row:first-child { border-top: 0; }
.vp-member-row > .use-line { grid-column: 1 / -1; margin: 0; }
.vp-member-text { display: flex; flex-direction: column; min-width: 0; }
.vp-member-name { font-weight: 600; overflow-wrap: anywhere; }
.vp-member-state { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.vp-member-state.warn { color: var(--error); }
.vp-member-action { min-height: 40px; padding: 6px 14px; white-space: nowrap; }
.vp-actions { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.vp-action-card {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 10px 14px;
  border-radius: 16px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.vp-action-card:hover { border-color: var(--primary); }
.vp-action-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.vp-action-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vp-action-name { font-weight: 700; }
.vp-action-desc { font-size: .88rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.vp-action-icon, .vp-action-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-action-icon { width: 26px; height: 26px; color: var(--primary); }
.vp-action-arrow { width: 20px; height: 20px; color: var(--muted); }
.vp-subview > .vp-back { margin-bottom: 8px; }
.vp-tier-cards, .vp-kind-cards { border: 0; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; grid-column: 1 / -1; min-width: 0; }
.vp-kind-cards { margin: 12px 0; }
.vp-kind-cards > legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.vp-tier-card, .vp-kind-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; min-width: 0; }
.vp-tier-card input, .vp-kind-card input { position: absolute; opacity: 0; pointer-events: none; }
.vp-tier-card.selected, .vp-kind-card.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vp-tier-card:focus-within, .vp-kind-card:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.vp-tier-card.disabled { opacity: .55; cursor: not-allowed; }
.vp-tier-price { font-weight: 700; }
.vp-tier-limit, .vp-tier-note, .vp-kind-text { font-size: .85rem; color: var(--muted); }
.vp-tier-badge { margin-top: 4px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #1d9e75 16%, var(--surface)); color: #146c50; font-size: .75rem; font-weight: 700; }
.vp-kind-card .vp-select { flex: none; margin-top: 8px; min-height: 40px; height: auto; padding: 6px 10px; width: 100%; }
.vp-pay-row-covered { opacity: .6; }
.vp-pay-why { margin-top: 4px; }
.vp-check-row { display: flex; align-items: center; gap: 8px; }
.vp-check-row input, .vp-consent input { width: 22px; height: 22px; flex: none; }
.vp-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 12px 0; }
.vp-consent-text { min-width: 0; }
.vp-flash { outline: 3px solid var(--primary); outline-offset: 2px; transition: outline-color .3s; }
.vp-pay-total { font-weight: 700; font-size: 1.05rem; }
/* MobilePayn Pay Mark maksupainikkeen sisällä muuttamattomana (ei suodattimia, pyöristyksiä, varjoja tai himmennystä kuvaan); tyhjä tila tulee gapista */
.vp-pay-btn { gap: 12px; }
.vp-pay-btn img { display: block; flex: none; }
.vp-goal-member { margin-bottom: 18px; }

/* Ahtaat näytöt (#90) */
/* Tunnus ylälaidassa (#363): lintu vaihtaa värit tummassa tilassa itse (kuukkeli.svg) */
.vp-brand { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto 6px; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.vp-brand img { display: block; flex: none; }
.parent-head { gap: 8px; flex-wrap: wrap; }
.parent-head h2 { min-width: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.parent-head .link-btn { flex: none; white-space: nowrap; }
.admin-who .link-btn { padding-left: 0; }
@media (max-width: 699px) {
  .admin-who #vpWho { flex: 1 1 100%; overflow-wrap: anywhere; }
}
#vpLimitText, .vp-pay-row .vp-pay-name, .vp-pay-row .use-line { overflow-wrap: anywhere; min-width: 0; }
/* Jäsenrivi puhelimella: nimi koko leveydelle, tilateksti rivittyy, viimeksi paikalla ja viestit nimettyinä, painikkeet omalla rivillään */
@media (max-width: 699px) {
  .vp-kid > .pupil-head { grid-template-columns: 0.8em minmax(0, 1fr) auto; grid-template-areas: "arrow name name" ". meta meta" ". last msgs" ". btn btn"; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
  .vp-kid .pupil-name { flex-wrap: wrap; }
  .vp-kid .pupil-name b { white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 1.05rem; }
  .vp-kid .pupil-meta { white-space: normal; overflow: visible; text-overflow: clip; }
  .vp-kid .pupil-last, .vp-kid .pupil-msgs { white-space: normal; }
  .vp-kid .pupil-last { justify-self: start; text-align: left; }
  .vp-kid .pupil-last::before { content: "Viimeksi paikalla "; }
  .vp-kid .pupil-msgs::before { content: "Viestejä 30 pv: "; color: var(--muted); }
  .vp-kid .pupil-head .pupil-btns { grid-area: btn; justify-self: start; flex-wrap: wrap; margin-top: 6px; }
}
/* Jaa Oivallin (#321) */
.vp-share-qr { width: min(70vw, 260px); height: auto; aspect-ratio: 1; display: block; margin: 8px auto; background: #fff; border-radius: 10px; }
.vp-share-link { overflow-wrap: anywhere; }
.vp-share-stats { margin: 4px 0 8px; padding-left: 18px; font-size: .95rem; }
.vp-share-bonus { margin: 10px 0; }
.vp-bonus h4 { margin: 0 0 6px; }
.vp-bonus-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.vp-bonus-row .vp-bonus-at { grid-column: 1 / -1; font-size: .88rem; color: var(--muted); }
.vp-bonus-row .vp-select { flex: none; }