@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #19211e;
  --muted: #6f7874;
  --faint: #9ca49f;
  --paper: #fffefb;
  --workspace: #edf0ed;
  --line: #e4e7e3;
  --line-dark: #d6dad5;
  --green: #176c52;
  --green-dark: #11563f;
  --green-soft: #eaf4ef;
  --orange: #f0a24e;
  --blue: #2459c3;
  --shadow: 0 28px 80px rgba(31, 43, 37, .1), 0 2px 10px rgba(31, 43, 37, .04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--workspace); font-family: 'Onest', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; z-index: -1; background: linear-gradient(125deg, rgba(255,255,255,.8), transparent 35%), radial-gradient(circle at 88% 20%, rgba(23,108,82,.055), transparent 25rem); content: ''; }
button, input { font: inherit; }
button, label { cursor: pointer; }
a { color: inherit; }
svg { display: block; fill: currentColor; }
[hidden] { display: none !important; }

.topbar { display: flex; width: min(1160px, calc(100% - 48px)); height: 80px; margin: 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(196, 202, 198, .75); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand__mark { display: grid; width: 31px; height: 31px; place-items: center; color: white; font: 700 15px/1 'Onest', sans-serif; border-radius: 4px 11px 4px 4px; background: var(--green); }
.brand__name { font: 700 20px/1 'Onest', sans-serif; letter-spacing: -.8px; }
.topbar__right { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 11px; }
.all-designs, .secure { display: inline-flex; align-items: center; gap: 7px; }
.all-designs { text-decoration: none; }
.all-designs:hover { color: var(--green); }
.all-designs svg, .secure svg { width: 15px; height: 15px; }
.secure { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.secure svg { color: var(--green); }

.workspace { width: min(1000px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 55px; }
.workspace-toolbar { display: flex; margin-bottom: 11px; justify-content: flex-end; }
.language-switcher { display: inline-flex; padding: 3px; align-items: center; gap: 2px; border: 1px solid rgba(205,214,208,.9); border-radius: 10px; background: rgba(255,255,255,.68); box-shadow: 0 7px 20px rgba(32,48,40,.06); backdrop-filter: blur(8px); }
.language-switcher button { min-width: 38px; height: 32px; padding: 0 9px; color: var(--muted); font: 700 11px/1 'Onest',sans-serif; letter-spacing: .35px; border: 0; border-radius: 7px; background: transparent; transition: color .15s,background .15s,box-shadow .15s,transform .15s; }
.language-switcher button:hover { color: var(--ink); background: #edf3ef; }
.language-switcher button.is-active { color: white; background: var(--green); box-shadow: 0 4px 10px rgba(23,108,82,.2); }
.language-switcher button:active { transform: translateY(1px); }
.language-switcher button:focus-visible { outline: 3px solid rgba(23,108,82,.16); outline-offset: 2px; }
.workspace-head { display: flex; margin-bottom: 24px; align-items: flex-end; justify-content: space-between; }
.kicker { display: block; margin-bottom: 7px; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.workspace-head h1 { margin: 0; font: 600 29px/1.2 'Onest', sans-serif; letter-spacing: -1px; }
.download-button { display: inline-flex; height: 38px; padding: 0 14px; align-items: center; gap: 7px; color: #56605b; font-size: 10px; font-weight: 600; border: 1px solid var(--line-dark); border-radius: 8px; background: rgba(255,255,255,.55); transition: border-color .15s, background .15s; }
.download-button:hover { border-color: #aeb6b0; background: white; }
.download-button svg { width: 15px; height: 15px; }

.invoice-sheet { position: relative; overflow: hidden; border: 1px solid #e0e3df; border-radius: 3px; background: var(--paper); box-shadow: var(--shadow); }
.sheet-accent { position: absolute; top: 0; right: 0; left: 0; display: flex; height: 5px; }
.sheet-accent span:first-child { width: 72%; background: var(--green); }
.sheet-accent span:last-child { flex: 1; background: var(--orange); }
.invoice-head { display: flex; padding: 43px 56px 34px; align-items: center; justify-content: space-between; }
.brand-family { display: flex; min-width: 0; align-items: center; gap: 13px; }
.bill-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.bill-mark { display: block; width: 38px; height: 38px; overflow: visible; filter: drop-shadow(0 6px 8px rgba(23,108,82,.14)); }
.bill-mark__paper { fill: var(--green); }
.bill-mark__line { fill: white; }
.bill-mark__dot { fill: var(--orange); stroke: var(--paper); stroke-width: 2; }
.bill-name { color: var(--green); font: 700 24px/1 'Onest',sans-serif; letter-spacing: -1.2px; }
.bill-name em { color: var(--ink); font-style: normal; font-weight: 600; }
.project-badges { display: flex; padding-left: 13px; align-items: center; gap: 13px; border-left: 1px solid var(--line-dark); }
.project-brand { --project-main: var(--green); --project-accent: var(--orange); --project-shadow: rgba(23,108,82,.14); display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; transition: opacity .15s,transform .15s; }
.project-brand + .project-brand { padding-left: 13px; border-left: 1px solid var(--line-dark); }
.project-brand--hst { --project-main: #4f67d8; --project-accent: #38bfa7; --project-shadow: rgba(79,103,216,.2); }
.project-brand--run { --project-main: #7658c7; --project-accent: #f17458; --project-shadow: rgba(118,88,199,.2); }
.project-brand:hover { opacity: .82; transform: translateY(-1px); }
.project-mark { display: block; width: 38px; height: 38px; flex: 0 0 auto; overflow: visible; filter: drop-shadow(0 6px 8px var(--project-shadow)); }
.project-mark__surface { fill: var(--project-main); }
.project-mark__glyph { fill: white; }
.project-mark__dot { fill: var(--project-accent); }
.project-mark__dot--outlined { stroke: var(--paper); stroke-width: 2; }
.project-name { color: var(--project-main); font: 700 24px/1 'Onest',sans-serif; letter-spacing: -1.2px; white-space: nowrap; }
.project-name em { color: var(--ink); font-style: normal; font-weight: 600; }
.invoice-title { flex: 0 0 auto; text-align: right; }
.invoice-title span, .invoice-title strong { display: block; }
.invoice-title span { margin-bottom: 6px; color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.invoice-title strong { font: 600 23px/1 'Onest', sans-serif; letter-spacing: -.8px; }

.invoice-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 0 56px; }
.meta-card { display: flex; min-width: 0; min-height: 64px; padding: 10px 11px; align-items: center; gap: 9px; border: 1px solid #e0e5e1; border-radius: 11px; background: linear-gradient(145deg,#fff,#f8faf8); box-shadow: 0 6px 16px rgba(34,48,40,.045); }
.meta-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: var(--green); border-radius: 9px; background: var(--green-soft); }
.meta-icon svg { width: 22px; height: 22px; }
.meta-icon--currency svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.meta-icon--currency circle { fill: currentColor; stroke: none; }
.meta-content { display: block; min-width: 0; }
.meta-content > span,.meta-content > strong { display: block; }
.meta-content > span { margin-bottom: 4px; color: var(--faint); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .55px; text-transform: uppercase; }
.meta-content > strong { overflow: hidden; font-size: 12px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.meta-card--due .meta-icon { color: #c56b2e; background: #fff0e6; }
.meta-card--currency .meta-icon { color: #4f67d8; background: #edf0ff; }
.meta-card--status .meta-icon { color: #a06121; background: #fff2df; }
.status { color: #a06121; }

.parties { display: block; padding: 22px 56px 28px; }
.party--payer { position: relative; overflow: hidden; padding: 0; border: 1px solid #dce2dd; border-radius: 12px; background: white; box-shadow: 0 10px 30px rgba(34,48,40,.055); }
.payer-card-head { display: flex; min-height: 38px; padding: 6px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: linear-gradient(105deg,#f5f9f6,#fbfcfa); }
.payer-card-label { color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.payer-summary-actions { display: flex; align-items: center; gap: 10px; }
.invoice-toggle { display: flex; padding: 5px 7px 5px 9px; align-items: center; gap: 8px; border: 1px solid #dce2dd; border-radius: 8px; background: white; }
.invoice-toggle__copy { text-align: right; }
.invoice-toggle__copy b { display: block; font-size: 11px; white-space: nowrap; }
.invoice-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-ui { position: relative; display: block; width: 36px; height: 20px; flex: 0 0 auto; border-radius: 99px; background: #cfd5d1; transition: background .18s; }
.switch-ui i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(25,33,29,.2); transition: transform .18s; }
.invoice-toggle input:checked + .switch-ui { background: var(--green); }
.invoice-toggle input:checked + .switch-ui i { transform: translateX(16px); }
.invoice-toggle input:focus-visible + .switch-ui { outline: 3px solid rgba(23,108,82,.16); outline-offset: 2px; }
.edit-payer-button { display: inline-flex; height: 39px; padding: 0 14px; align-items: center; gap: 7px; color: var(--green); font-size: 12px; font-weight: 600; border: 1px solid #c8d9d1; border-radius: 8px; background: #f8fbf9; box-shadow: 0 3px 9px rgba(23,108,82,.06); transition: background .15s,border-color .15s,transform .15s; }
.edit-payer-button:hover { border-color: #8eb4a3; background: var(--green-soft); transform: translateY(-1px); }
.edit-payer-button svg { width: 15px; height: 15px; }
.edit-payer-button--compact { height: 26px; padding: 0 7px; gap: 5px; font-size: 11px; border-color: transparent; border-radius: 6px; background: transparent; box-shadow: none; }
.edit-payer-button--compact:hover { border-color: transparent; background: #e7f1ec; transform: none; }
.edit-payer-button--compact svg { width: 13px; height: 13px; }
.payer-summary-view { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; padding: 12px 16px; align-items: center; gap: 11px; }
.payer-avatar { display: grid; width: 40px; height: 40px; place-items: center; color: white; border-radius: 10px; background: linear-gradient(145deg,#31886d,#176c52); box-shadow: 0 5px 13px rgba(23,108,82,.15); transition: background .18s,box-shadow .18s; }
.payer-avatar svg { width: 21px; height: 21px; }
.payer-avatar.is-company { background: linear-gradient(145deg,#607489,#3f5266); box-shadow: 0 7px 16px rgba(63,82,102,.17); }
.payer-summary-data { min-width: 0; }
.payer-summary-data > strong { display: block; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.payer-summary-data p { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.payer-complete { display: inline-flex; padding: 5px 8px; align-items: center; gap: 5px; color: var(--green); font-size: 11px; font-weight: 600; border-radius: 99px; background: var(--green-soft); }
.payer-complete svg { width: 14px; height: 14px; }

.items-section { padding: 0 56px; }
.section-heading { display: flex; margin-bottom: 13px; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0; font: 600 14px/1 'Onest', sans-serif; }
.section-heading > span { color: var(--faint); font-size: 8px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }
.section-heading b { color: var(--ink); }
.invoice-table { border-top: 0; }
.table-head, .item-row { display: grid; grid-template-columns: 30px minmax(250px, 1.55fr) 92px 105px 96px 30px; gap: 10px; align-items: center; }
.table-head { min-height: 34px; color: var(--faint); font-size: 8px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.table-head span:nth-child(3), .table-head span:nth-child(5) { text-align: right; }
.table-head span:nth-child(4) { text-align: center; }
.item-row { min-height: 73px; border-bottom: 1px solid var(--line); transition: opacity .2s, transform .2s; }
.item-row.is-removing { opacity: 0; transform: translateX(-8px); }
.item-number { color: var(--faint); font: 500 9px 'Onest', sans-serif; }
.item-description strong, .item-description span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-description strong { font-size: 11px; font-weight: 600; }
.item-description span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.unit-price, .item-total { font-size: 10px; text-align: right; white-space: nowrap; }
.unit-price { color: var(--muted); }
.table-head span:nth-child(3),.unit-price { transform: translateX(-14px); }
.item-total { font-weight: 600; }
.quantity { display: grid; grid-template-columns: 27px 32px 27px; height: 28px; margin: auto; align-items: center; border: 1px solid var(--line-dark); border-radius: 6px; background: #fafbf9; }
.quantity button { height: 100%; padding: 0; color: var(--muted); border: 0; background: transparent; }
.quantity button:hover { color: var(--green); background: var(--green-soft); }
.quantity input { width: 100%; padding: 0; color: var(--ink); font-size: 10px; font-weight: 600; text-align: center; border: 0; outline: none; background: transparent; -moz-appearance: textfield; }
.quantity input::-webkit-inner-spin-button { display: none; }
.remove-item { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: #a6ada8; border: 0; border-radius: 7px; background: transparent; }
.remove-item:hover { color: #bd5757; background: #fdf0ee; }
.remove-item svg { width: 20px; height: 20px; }

.totals-section { display: grid; grid-template-columns: 1fr 300px; gap: 50px; padding: 25px 56px 44px; }
.totals-section > p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.totals-section > p a { color: var(--green); text-decoration: none; border-bottom: 1px solid #b9d4ca; }
.totals-section dl { margin: 0; }
.totals-section dl > div { display: flex; padding: 7px 0; justify-content: space-between; color: var(--muted); font-size: 10px; }
.totals-section dd { margin: 0; color: var(--ink); font-weight: 600; }
.totals-section .no-fee { color: var(--green); }
.totals-section .grand-total { margin-top: 7px; padding-top: 15px; align-items: flex-end; color: var(--ink); font-weight: 600; border-top: 1px solid var(--ink); }
.grand-total dd { font: 600 24px/1 'Onest', sans-serif; letter-spacing: -.8px; }

.tear-line { position: relative; height: 20px; color: #c7cbc7; font-size: 10px; letter-spacing: 6px; text-align: center; border-top: 1px dashed #cfd3cf; }
.tear-line::before, .tear-line::after { position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--workspace); content: ''; }
.tear-line::before { left: -10px; }
.tear-line::after { right: -10px; }
.tear-line span { position: relative; top: -9px; padding: 0 8px; background: var(--paper); }

.payment-section { margin: 18px 38px 38px; padding: 20px 30px 27px; border: 1px solid #e0e4df; border-radius: 12px; background: #f7f8f5; }
.payment-heading { display: flex; margin-bottom: 14px; align-items: center; justify-content: space-between; }
.payment-heading h2 { margin: 0; font: 600 17px/1.25 'Onest', sans-serif; letter-spacing: -.4px; }
.protected { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 8px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.protected svg { width: 14px; height: 14px; color: var(--green); }
.payment-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.payment-methods input { position: absolute; opacity: 0; }
.method-card { position: relative; display: flex; min-height: 66px; padding: 11px; align-items: center; gap: 9px; border: 1px solid var(--line-dark); border-radius: 8px; background: white; transition: border-color .15s, box-shadow .15s, transform .15s; }
.method-card:hover { transform: translateY(-1px); border-color: #aeb8b1; }
.payment-methods input:checked + .method-card { border-color: var(--green); box-shadow: 0 0 0 2px rgba(23,108,82,.08); }
.method-icon { display: flex; width: 36px; height: 36px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; }
.method-icon svg { width: 22px; height: 22px; }
.method-icon--bank { overflow: hidden; border: 1px solid #1a4c64; background: linear-gradient(145deg,#2f7892,#173d55); box-shadow: 0 6px 13px rgba(23,61,85,.2),inset 0 1px rgba(255,255,255,.16); }
.method-icon--bank .bank-mark { width: 27px; height: 27px; }
.bank-mark__roof { fill: white; }
.bank-mark__body { fill: #d9f0f0; }
.bank-mark__dot { fill: #63dfbf; stroke: #173d55; stroke-width: 1.5; }
.method-icon--paypal { border: 1px solid #d5e6f5; background: linear-gradient(145deg,#fff,#edf7ff); box-shadow: 0 5px 12px rgba(0,112,186,.11); }
.method-icon--paypal .paypal-mark { width: 30px; height: 30px; overflow: visible; }
.paypal-mark__dark { fill: #003087; }
.paypal-mark__light { fill: #009cde; opacity: .95; }
.method-card.method-card--card { padding: 10px 5px; gap: 4px; }
.wallet-mark { display: inline-flex; width: 54px; height: 38px; align-items: center; justify-content: center; flex: 0 0 auto; color: #1b1f23; white-space: nowrap; border: 1px solid #dfe3e8; border-radius: 8px; background: white; box-shadow: 0 4px 9px rgba(26,42,75,.1); }
.method-icon.method-icon--card { position: relative; width: 54px; height: 38px; border: 0; background: transparent; box-shadow: none; }
.payment-card-mark { position: absolute; display: flex; width: 34px; height: 23px; align-items: center; justify-content: center; border-radius: 5px; box-shadow: 0 4px 9px rgba(26,42,75,.15); }
.payment-card-mark--visa { top: 2px; left: 1px; color: white; background: linear-gradient(145deg,#2149d8,#122a88); transform: rotate(-6deg); }
.payment-card-mark--visa b { font: italic 800 9px/1 Arial,sans-serif; letter-spacing: -.7px; }
.payment-card-mark--mastercard { right: 1px; bottom: 2px; z-index: 1; border: 1px solid #e2e5ea; background: white; transform: rotate(5deg); }
.mastercard-mark { position: relative; display: block; width: 20px; height: 13px; }
.mastercard-mark i { position: absolute; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #eb001b; }
.mastercard-mark i:first-child { left: 0; }
.mastercard-mark i:last-child { right: 0; background: #f79e1b; opacity: .92; }
.card-method-copy { display: flex; min-width: 0; align-items: center; }
.wallet-marks { display: flex; align-items: center; gap: 4px; }
.wallet-mark svg { width: 22px; height: 22px; flex: 0 0 auto; }
.wallet-mark--apple svg { width: 18px; height: 23px; fill: currentColor; }
.method-card--card > i { top: 4px; right: 4px; width: 8px; height: 8px; }
.method-icon--crypto { color: white; border-radius: 50%; background: #f7931a; box-shadow: 0 5px 11px rgba(247,147,26,.22); }
.crypto-mark { font: 700 22px/1 Arial,sans-serif; transform: translateY(1px); }
.method-icon--webmoney { color: #036cb5; border: 1px solid #cee4f2; background: white; box-shadow: 0 5px 12px rgba(3,108,181,.13); }
.method-icon--webmoney svg { width: 27px; height: 27px; fill: currentColor; }
.method-icon--yoomoney { color: #8b3ffd; border: 1px solid #e2d3f8; background: white; box-shadow: 0 5px 12px rgba(139,63,253,.13); }
.method-icon--yoomoney svg { width: 31px; height: auto; fill: currentColor; }
.method-icon--sbp { border: 1px solid #dde3e6; background: white; box-shadow: 0 5px 12px rgba(36,54,62,.1); }
.method-icon--sbp svg { width: 25px; height: 29px; }
.method-card.method-card--networks { justify-content: center; padding-right: 5px; padding-left: 5px; }
.card-network-logos { display: flex; align-items: center; justify-content: center; gap: 7px; }
.card-network--mir { width: 56px; height: auto; flex: 0 0 auto; }
.card-network--visa { width: 43px; height: 18px; flex: 0 0 auto; fill: #1a1f71; }
.card-network--mastercard { position: relative; display: block; width: 36px; height: 22px; flex: 0 0 auto; }
.card-network--mastercard i { position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; }
.card-network--mastercard i:first-child { left: 0; background: #eb001b; }
.card-network--mastercard i:last-child { right: 0; background: #f79e1b; opacity: .92; }
.method-card strong { display: block; font-size: 10px; }
.method-card > i { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border: 1px solid #cbd0cc; border-radius: 50%; }
.payment-methods input:checked + .method-card > i { border: 3px solid var(--green); }
.payment-details { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.field { display: block; min-width: 0; }
.field > span:first-child { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .3px; }
.field input { width: 100%; height: 39px; padding: 0 11px; color: var(--ink); font-size: 10px; border: 1px solid var(--line-dark); border-radius: 6px; outline: none; background: #fdfdfc; transition: border-color .15s, box-shadow .15s; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,108,82,.08); }
.field input::placeholder { color: #b5bbb7; }
.info-detail { display: flex; align-items: center; gap: 12px; }
.detail-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; color: var(--green); border-radius: 7px; background: var(--green-soft); }
.detail-icon svg { width: 18px; height: 18px; }
.detail-icon--paypal { color: white; font: italic 700 17px Arial; background: #0874cf; }
.info-detail strong, .info-detail small { display: block; }
.info-detail strong { margin-bottom: 3px; font-size: 10px; }
.info-detail small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.crypto-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 8px; font-weight: 600; }
.crypto-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crypto-list input { position: absolute; opacity: 0; }
.crypto-list label span { display: flex; padding: 9px 11px; align-items: center; justify-content: space-between; border: 1px solid var(--line-dark); border-radius: 6px; background: white; }
.crypto-list input:checked + span { border-color: var(--green); background: var(--green-soft); }
.crypto-list b { font-size: 9px; }
.crypto-list small { color: var(--muted); font-size: 8px; }
.payment-action { display: flex; margin-top: 18px; align-items: center; justify-content: flex-end; gap: 20px; }
.pay-button { display: inline-flex; min-width: 180px; height: 42px; padding: 0 17px; align-items: center; justify-content: center; gap: 8px; color: white; font-size: 15px; font-weight: 600; white-space: nowrap; border: 0; border-radius: 7px; background: var(--green); box-shadow: 0 9px 22px rgba(23,108,82,.18); transition: background .15s, transform .15s, box-shadow .15s; }
.pay-button:hover { background: var(--green-dark); box-shadow: 0 12px 25px rgba(23,108,82,.23); transform: translateY(-1px); }
.pay-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; transform: none; }
.pay-button svg { width: 15px; height: 15px; }

.workspace-foot { display: flex; padding: 22px 4px 0; align-items: center; gap: 20px; color: #858e89; font-size: 8px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.workspace-foot span { display: inline-flex; align-items: center; gap: 5px; }
.workspace-foot svg { width: 13px; height: 13px; color: var(--green); }
.workspace-contact { display: flex; margin-left: auto; align-items: center; gap: 9px; }
.workspace-contact a { text-decoration: none; }
.contact-email { display: grid; width: 28px; height: 28px; place-items: center; color: white; border-radius: 50%; background: linear-gradient(145deg,#31886d,#176c52); box-shadow: 0 5px 12px rgba(23,108,82,.22),inset 0 1px rgba(255,255,255,.18); transition: background .15s,box-shadow .15s,transform .15s; }
.contact-email:hover { color: white; background: linear-gradient(145deg,#389679,#126147); box-shadow: 0 7px 15px rgba(23,108,82,.26),inset 0 1px rgba(255,255,255,.2); transform: translateY(-1px); }
.workspace-foot .contact-email svg { width: 16px; height: 16px; overflow: visible; color: white; }
.mail-icon__line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mail-icon__dot { fill: var(--orange); stroke: white; stroke-width: 1.5; }
.telegram-contact { display: grid; width: 28px; height: 28px; place-items: center; color: white; border-radius: 50%; background: #229ed9; box-shadow: 0 5px 12px rgba(34,158,217,.2); transition: background .15s,transform .15s; }
.telegram-contact:hover { color: white; background: #168ac1; transform: translateY(-1px); }
.workspace-foot .telegram-contact svg { width: 15px; height: 15px; color: white; transform: translate(-1px,1px); }

.payer-inline-form { padding: 10px 16px; border-top: 1px solid var(--line); background: #fbfcfa; animation: inline-form-in .18s ease-out; }
@keyframes inline-form-in { from { opacity: 0; transform: translateY(-5px); } }
.payer-identity-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 6px; align-items: start; }
.payer-identity-row .form-grid { margin-bottom: 0; }
.payer-kind-wrap { min-width: 0; }
.payer-kind-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.payer-kind { display: grid; max-width: none; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0; padding: 2px; border-radius: 7px; background: #edf0ed; }
.payer-kind input { position: absolute; opacity: 0; }
.payer-kind span { display: grid; height: 32px; place-items: center; color: var(--muted); font-size: 11px; font-weight: 600; border-radius: 5px; }
.payer-kind input:checked + span { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(31,43,37,.07); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field--full { grid-column: 1 / -1; }
.contacts { padding-top: 0; border-top: 0; }
.dialog-actions { display: flex; margin-top: 7px; justify-content: flex-end; gap: 6px; }
.dialog-actions button { height: 40px; padding: 0 16px; font-size: 10px; font-weight: 600; border-radius: 7px; }
.cancel-button { color: var(--muted); border: 1px solid var(--line-dark); background: white; }
.save-button { color: white; border: 0; background: var(--green); }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 10; display: flex; width: min(340px, calc(100% - 44px)); padding: 14px; align-items: center; gap: 10px; visibility: hidden; opacity: 0; border: 1px solid #d9e1dc; border-radius: 9px; background: white; box-shadow: 0 18px 45px rgba(31,43,37,.17); transform: translateY(12px); transition: .22s; }
.toast.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.toast > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; color: var(--green); border-radius: 7px; background: var(--green-soft); }
.toast svg { width: 17px; height: 17px; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 10px; }
.toast small { margin-top: 3px; color: var(--muted); font-size: 8px; }

/* Readable typography and larger controls */
body { font-size: 16px; }
.topbar__right { font-size: 14px; }
.kicker { font-size: 11px; }
.workspace-head h1 { font-size: 34px; }
.download-button { height: 44px; padding-right: 17px; padding-left: 17px; font-size: 12px; }
.issuer strong { font-size: 19px; }
.issuer span { font-size: 12px; }
.invoice-title span { font-size: 12px; }
.invoice-title strong { font-size: 27px; }
.party__label { margin-bottom: 14px; font-size: 11px; }
.party > strong { font-size: 15px; }
.party p { margin-top: 8px; font-size: 12px; }
.party__top button { font-size: 12px; }
.section-heading h2 { font-size: 18px; }
.section-heading > span { font-size: 11px; }
.table-head { min-height: 42px; font-size: 11px; }
.item-row { min-height: 90px; }
.item-number { font-size: 11px; }
.item-description strong { font-size: 14px; }
.item-description span { margin-top: 5px; font-size: 12px; }
.unit-price,.item-total { font-size: 13px; }
.quantity { grid-template-columns: 30px 38px 30px; height: 35px; }
.quantity input { font-size: 13px; }
.remove-item { width: 30px; height: 30px; }
.remove-item svg { width: 20px; height: 20px; }
.totals-section > p { font-size: 12px; }
.totals-section dl > div { padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.grand-total dd { font-size: 32px; }
.payment-heading h2 { font-size: 21px; }
.protected { font-size: 11px; }
.payment-section { padding: 20px 30px 27px; }
.payment-methods { gap: 11px; }
.method-card { min-height: 62px; padding: 10px; }
.method-icon { width: 38px; height: 38px; }
.method-icon svg { width: 21px; height: 21px; }
.method-card strong { font-size: 15px; font-weight: 600; }
.payment-details { margin-top: 19px; padding: 21px; }
.field > span:first-child { margin-bottom: 8px; font-size: 11px; }
.field input { height: 46px; padding-right: 13px; padding-left: 13px; font-size: 13px; }
.info-detail strong { font-size: 13px; }
.info-detail small { font-size: 11px; }
.crypto-label { font-size: 11px; }
.crypto-list b { font-size: 12px; }
.crypto-list small { font-size: 11px; }
.check { width: 18px; height: 18px; }
.pay-button { min-width: 190px; height: 44px; font-size: 16px; }
.workspace-foot { font-size: 10px; }
.dialog-head h2 { font-size: 25px; }
.payer-kind span { height: 32px; font-size: 11px; }
.payer-inline-form .form-grid { gap: 8px; margin-bottom: 6px; align-items: start; }
.payer-kind-wrap,.payer-inline-form .field { display: grid; grid-template-rows: 14px 36px; row-gap: 4px; align-content: start; }
.payer-kind-label,.payer-inline-form .field > span:first-child { display: block; margin: 0; color: var(--muted); font-family: 'Onest',Arial,sans-serif; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .3px; }
.payer-kind { width: 100%; height: 36px; }
.payer-inline-form .field input { height: 36px; }
.payer-inline-form .dialog-actions button { min-width: 88px; height: 34px; padding-right: 12px; padding-left: 12px; font-size: 12px; }
.toast strong { font-size: 13px; }
.toast small { margin-top: 4px; font-size: 11px; }

@media (max-width: 800px) {
  .invoice-head, .parties, .items-section { padding-right: 30px; padding-left: 30px; }
  .invoice-meta { margin-right: 30px; margin-left: 30px; }
  .totals-section { padding-right: 30px; padding-left: 30px; }
  .table-head, .item-row { grid-template-columns: 24px minmax(195px, 1fr) 75px 90px 82px 28px; gap: 7px; }
  .payment-section { margin-right: 20px; margin-left: 20px; }
  }

@media (max-width: 680px) {
  .topbar, .workspace { width: calc(100% - 28px); }
  .topbar { height: 67px; }
  .secure { display: none; }
  .workspace { padding-top: 22px; }
  .workspace-toolbar { margin-bottom: 12px; justify-content: center; }
  .language-switcher { display: grid; width: 100%; grid-template-columns: repeat(5,1fr); }
  .language-switcher button { min-width: 0; }
  .download-button { width: 38px; padding: 0; justify-content: center; }
  .download-button { font-size: 0; }
  .invoice-head { padding: 37px 22px 25px; }
  .invoice-title strong { font-size: 18px; }
  .invoice-meta { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 22px; }
  .meta-card { min-height: 60px; padding: 9px 10px; }
  .parties { grid-template-columns: 1fr; gap: 20px; padding: 20px 22px 24px; }
  .party--payer { padding: 0; }
  .payer-card-head { align-items: center; }
  .payer-summary-view { grid-template-columns: 44px minmax(0,1fr); }
  .payer-summary-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 3px; }
  .payer-complete { width: max-content; }
  .payer-inline-form { padding: 10px 14px; }
  .items-section { padding: 0 22px; }
  .table-head { display: none; }
  .invoice-table { border-top: 0; }
  .item-row { position: relative; grid-template-columns: 24px 1fr auto; gap: 7px; min-height: 0; padding: 17px 25px 17px 0; }
  .item-number { align-self: start; padding-top: 2px; }
  .item-description { align-self: start; }
  .unit-price { display: none; }
  .quantity { grid-column: 2; justify-self: start; margin: 3px 0 0; }
  .item-total { grid-column: 3; grid-row: 2; align-self: center; font-size: 14px; }
  .remove-item { position: absolute; top: 14px; right: 0; }
  .totals-section { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px 36px; }
  .totals-section > p { display: none; }
  .payment-section { margin: 15px 10px 25px; padding: 25px 15px 20px; }
  .payment-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .payment-heading .invoice-toggle { width: 100%; justify-content: space-between; }
  .invoice-toggle__copy { text-align: left; }
  .protected { display: none; }
  .payment-methods { grid-template-columns: 1fr 1fr; }
  .payment-action { flex-direction: column; align-items: stretch; }
  .pay-button { width: 100%; }
  .workspace-foot { justify-content: center; flex-wrap: wrap; }
  .workspace-contact { width: 100%; margin-left: 0; justify-content: center; }
}

@media (max-width: 650px) {
  .invoice-head { flex-wrap: wrap; gap: 15px; }
  .brand-family { width: 100%; justify-content: space-between; }
  .invoice-title { margin-left: auto; }
}

@media (max-width: 520px) {
  .brand-family { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  .project-badges { width: 100%; padding-left: 0; justify-content: space-between; gap: 9px; border-left: 0; }
  .project-brand { flex: 1; }
  .project-brand + .project-brand { padding-left: 9px; }
}

@media (max-width: 430px) {
  .workspace-head h1 { font-size: 28px; }
  .bill-mark { width: 34px; height: 34px; }
  .bill-name { font-size: 21px; }
  .brand-family { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  .project-badges { width: 100%; padding-left: 0; justify-content: space-between; gap: 9px; border-left: 0; }
  .project-brand { flex: 1; gap: 8px; }
  .project-mark { width: 34px; height: 34px; }
  .project-name { font-size: 21px; }
  .invoice-title strong { font-size: 18px; }
  .invoice-meta { grid-template-columns: 1fr; }
  .meta-card { min-height: 56px; }
  .payer-summary-actions { align-items: stretch; flex-direction: column; }
  .invoice-toggle { justify-content: space-between; }
  .invoice-toggle__copy { text-align: left; }
  .edit-payer-button--compact { width: auto; justify-content: center; }
  .payment-methods { gap: 6px; }
  .method-card { min-height: 61px; padding: 8px; }
  .method-icon { width: 32px; height: 32px; }
  .method-card.method-card--card { padding: 8px 6px; gap: 4px; }
  .method-icon.method-icon--card,.wallet-mark { width: 36px; height: 28px; border-radius: 6px; }
  .method-icon--card .payment-card-mark { width: 26px; height: 18px; }
  .wallet-marks { gap: 3px; }
  .wallet-mark svg { width: 16px; height: 16px; }
  .wallet-mark--apple svg { width: 13px; height: 17px; }
  .method-card.method-card--networks { padding-right: 4px; padding-left: 4px; }
  .card-network-logos { gap: 4px; }
  .card-network--mir { width: 40px; }
  .card-network--visa { width: 33px; height: 14px; }
  .card-network--mastercard { width: 29px; height: 18px; }
  .card-network--mastercard i { width: 18px; height: 18px; }
  .payment-details { padding: 13px; }
  .crypto-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .payer-identity-row { grid-template-columns: 1fr; }
  .payer-kind { max-width: none; }
}

@media print {
  body { background: white; }
  .topbar, .workspace-toolbar, .workspace-head, .workspace-foot, .payment-section, .toast { display: none; }
  .workspace { width: 100%; padding: 0; }
  .invoice-sheet { border: 0; box-shadow: none; }
  .tear-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}