.konto .card { margin-top: 20px; }
.konto .page-title + .card, .konto .page-title + form { margin-top: 24px; }
.konto .card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; font-size: 20px; line-height: 1.3; }
.konto .kv > div { font-size: 15px; }
.konto .kv dt { display: flex; align-items: center; }
.konto .kv dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.konto .kv dd form { display: contents; }
.konto .link, .konto .btn-secondary { font-size: 15px; }
.konto .btn { font-size: 17px; }
.konto .actions { margin-top: 18px; }
.konto .card-empty { margin-top: 14px; font-size: 15px; color: var(--color-ink-2); }

.konto .page-note .icon { color: var(--color-ok); }
.konto .page-note-alert .icon { color: var(--color-err); }

.konto .konto-alert { background: var(--color-surface); margin-top: 14px; }
.konto .konto-alert b { display: block; }
.konto .konto-alert .actions { margin-top: 10px; }
.konto .konto-alert + .page-title { margin-top: 14px; }

.konto .devs > div { grid-template-columns: 1fr auto; }
.konto .devs dd { justify-content: flex-end; }

.konto .rep { margin-top: 14px; border-top: 1px solid var(--color-line); }
.konto .rep > div { display: grid; grid-template-columns: 1fr 140px 120px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-row); font-size: 15px; }
.konto .rep .amt { text-align: right; white-space: nowrap; font-weight: 600; }
.konto .rep .link { justify-self: end; }

.konto .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--color-ctl); border-radius: var(--radius-inline); font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.konto .lbl { display: flex; align-items: center; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.konto .field > label { font-size: 15px; }
.konto .input { height: 46px; padding: 0 14px; font-size: 17px; }
.konto .input[readonly] { background: var(--color-chrome-2); border-color: var(--color-line); color: var(--color-ink-2); }

.konto .plan-opts { margin: 24px 0 0; display: grid; gap: 12px; border: 0; padding: 0; min-width: 0; }
.konto .plan-opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 14px; align-items: center; padding: 18px 20px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-container); cursor: pointer; }
.konto .plan-opt:has(input:checked) { border: 2px solid var(--color-ink); padding: 17px 19px; }
.konto .plan-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); grid-row: span 2; }
.konto .plan-opt .pn { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.konto .plan-opt .pp { grid-column: 2; font-size: 15px; color: var(--color-ink-2); }
.konto .plan-opt .pa { grid-area: 1 / 3 / span 2; font-size: 15px; text-align: right; white-space: nowrap; }
.konto .plan-sum { display: none; margin-top: 24px; }
.konto .plan-form:has(#plan_standard:checked) .plan-sum[data-plan="standard"],
.konto .plan-form:has(#plan_premium:checked) .plan-sum[data-plan="premium"],
.konto .plan-form:has(#plan_premium_plus:checked) .plan-sum[data-plan="premium_plus"] { display: block; }

.ws-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin-top: 12px; }
.ws-opt { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 17px; line-height: 1.55; }
.ws-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }
.ws-other-name { margin-top: 8px; max-width: 22em; }
.konto form:not(:has(#ws_other:checked)) .ws-other-name { display: none; }
.ws-status { display: grid; gap: 6px; }
.ws-status:has(.ws-line) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-line); }
.ws-line { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; font-size: 15px; }
.ws-line .icon { margin-top: 3px; width: 15px; height: 15px; }
.ws-line b { font-weight: 600; }
.ws-line .k { color: var(--color-ink-2); }

.konto-back { font-size: 15px; }
.konto .inv { margin-top: 16px; }
.konto .inv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.konto .inv-top .page-title { font-size: 26px; }
.konto .inv .kv { margin-top: 16px; }
.konto .inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; font-size: 15.5px; line-height: 1.55; }
.konto .inv-k { margin-bottom: 4px; font-size: 13.5px; color: var(--color-ink-2); }
.konto .inv-t { margin-top: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-container); overflow: hidden; background: var(--color-surface); }
.konto .inv-t table { width: 100%; border-collapse: collapse; font-size: 15px; }
.konto .inv-t th { padding: 12px 16px; border-bottom: 1px solid var(--color-line); background: var(--color-chrome-2); font-size: 15px; font-weight: 600; text-align: left; color: var(--color-ink-2); }
.konto .inv-t td { padding: 12px 16px; font-size: 15px; vertical-align: top; }
.konto .inv-t .num { text-align: right; white-space: nowrap; }

@media (max-width: 640px) {
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .ws-opt { font-size: 16px; }
  .konto .card-title { font-size: 17px; }
  .konto .rep > div { grid-template-columns: 1fr auto; gap: 0 12px; }
  .konto .rep .nm { grid-row: span 2; align-self: start; }
  .konto .rep .amt { grid-column: 2; }
  .konto .rep .link { grid-column: 2; }
  .konto .plan-opt { grid-template-columns: 22px 1fr; padding: 14px 16px; }
  .konto .plan-opt:has(input:checked) { padding: 13px 15px; }
  .konto .plan-opt input { grid-row: span 3; }
  .konto .plan-opt .pa { grid-area: auto / 2; text-align: left; }
  .konto .form-actions .btn-l { width: 100%; }
  .konto .inv-top .page-title { font-size: 26px; }
  .konto .inv-parties { grid-template-columns: 1fr; }
  .konto .inv-t table, .konto .inv-t tbody { display: block; }
  .konto .inv-t thead { display: none; }
  .konto .inv-t tr { display: block; padding: 10px 14px; }
  .konto .inv-t td { display: block; padding: 2px 0; }
  .konto .inv-t td::before { content: attr(data-label); display: block; font-size: 13px; color: var(--color-ink-2); }
  .konto .inv-t .num { text-align: left; }
  .konto .inv-t .gross { font-weight: 700; }
}

.konto .inv-kor tbody .grp td { padding-bottom: 6px; }
.konto .inv-kor tbody th, .konto .inv-kor tbody td { vertical-align: baseline; }
.konto .inv-kor tbody th { padding: 6px 16px; border: 0; background: none; font-size: 15px; font-weight: 400; text-align: left; color: var(--color-ink-2); }
.konto .inv-kor tbody tr:not(.grp) td { padding-top: 6px; padding-bottom: 6px; }
.konto .inv-kor tbody .diff th, .konto .inv-kor tbody .diff td { padding-top: 10px; padding-bottom: 12px; border-top: 1px solid var(--color-row); font-weight: 700; color: var(--color-ink); }
@media (max-width: 640px) {
  .konto .inv-kor table, .konto .inv-kor thead, .konto .inv-kor tbody { display: block; }
  .konto .inv-kor tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; padding: 0 12px; }
  .konto .inv-kor thead tr { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--color-line); background: var(--color-chrome-2); }
  .konto .inv-kor thead th { padding: 0; border: 0; background: none; font-size: 13px; text-align: right; }
  .konto .inv-kor thead th:first-child { display: none; }
  .konto .inv-kor tbody .grp { padding-top: 10px; }
  .konto .inv-kor tbody .grp td { grid-column: 1 / -1; padding: 0 0 6px; }
  .konto .inv-kor tbody th { grid-column: 1 / -1; padding: 6px 0 0; }
  .konto .inv-kor tbody td { padding: 0 0 2px; }
  .konto .inv-kor tbody tr:not(.grp) td { padding: 0 0 2px; }
  .konto .inv-kor td::before { content: none; }
  .konto .inv-kor .num { text-align: right; }
  .konto .inv-kor tbody .diff { margin-top: 8px; padding-bottom: 10px; border-top: 1px solid var(--color-row); }
  .konto .inv-kor tbody .diff th, .konto .inv-kor tbody .diff td { border-top: 0; padding-bottom: 2px; }
  .konto .inv-kor tbody .diff th { padding-top: 8px; }
}

@media print {
  .site-head, .nav2, .site-foot, .foot, .konto-back { display: none; }
  html, body { background: #FFFFFF; }
  .konto .inv { margin-top: 0; border: 0; box-shadow: none; padding: 0; }
}