:root{--color-brand:#7b3ef6;--color-brand-blue:#2a80f2;--gradient-brand:linear-gradient(120deg, #2a80f2 0%, #7b3ef6 100%);--color-bg:#f3f3f6;--color-surface:#fff;--color-surface-muted:#f8f8fa;--color-surface-hover:#efeff4;--color-surface-sunken:#f5f5f8;--color-surface-track:#e8e8ee;--color-text:#0b0b0b;--color-text-secondary:#4a4a4f;--color-text-tertiary:#5c5c63;--color-text-nav:#3d3d43;--color-text-muted:#75757d;--color-border:#e4e4ea;--color-border-strong:#d6d6de;--color-border-input:#cdcdd6;--color-accent:#7b3ef6;--color-accent-soft:#f1eaff;--color-accent-hover:#6127d6;--color-on-accent:#fff;--color-dark-hover:#2a2a30;--focus-ring:0 0 0 3px #7b3ef633;--shadow-rgb:11 11 11;--status-overdue-bg:#fbe3d8;--status-overdue-fg:#8f2f0e;--status-overdue-border:#e9b9a3;--status-overdue-surface:#fbf4f0;--status-due-soon-bg:#fcefcf;--status-due-soon-fg:#6e4300;--status-upcoming-bg:#e4eefc;--status-upcoming-fg:#164a96;--status-paid-bg:#ddeee5;--status-paid-fg:#0a5139;--status-neutral-bg:#efeff3;--status-neutral-fg:#3d3d43;--field-fill-border:#d89a2b;--field-fill-bg:#fffbf0;--color-danger:#8f2f0e;--color-danger-bg:#fbe3d8;--color-danger-hover:#6f230a;--color-danger-surface:#fff7f4;--font-sans:"Instrument Sans", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--radius-sm:10px;--radius-md:14px;--radius-lg:16px;--radius-xl:20px;--radius-pill:999px;--touch-target:44px}*,:before,:after{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0}a{color:var(--color-accent)}a:hover{color:var(--color-accent-hover)}button{cursor:pointer;font-family:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.ui-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.ui-button{min-height:var(--touch-target);font:inherit;white-space:nowrap;cursor:pointer;border:0;border-radius:11px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.ui-button:disabled,.ui-button[aria-disabled=true]{opacity:.6;cursor:not-allowed}.ui-button--primary{background:var(--color-accent);color:var(--color-on-accent);padding:0 18px}.ui-button--primary:hover:not(:disabled){background:var(--color-accent-hover);color:var(--color-on-accent)}.ui-button--secondary{background:var(--color-surface);color:var(--color-text);border:1.5px solid var(--color-border-input)}.ui-button--secondary:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text)}.ui-button--dark{background:var(--color-text);color:var(--color-on-accent)}.ui-button--dark:hover:not(:disabled){color:var(--color-on-accent);background:var(--color-dark-hover)}.ui-button--ghost{color:var(--color-text-nav);background:0 0}.ui-button--ghost:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text)}.ui-pill{border-radius:var(--radius-pill);white-space:nowrap;font-weight:600;display:inline-block}.ui-pill--md{padding:4px 9px;font-size:12px}.ui-pill--sm{padding:3px 8px;font-size:11px}.ui-field{flex-direction:column;gap:6px;min-width:0;display:flex}.ui-field__head{flex:1 0 auto;justify-content:space-between;align-items:flex-end;gap:8px;display:flex}.ui-field__label{color:var(--color-text-nav);font-size:13px;font-weight:600}.ui-field__hint{color:var(--color-text-tertiary);font-size:12px}.ui-field__error{color:var(--color-danger);font-size:12px;font-weight:600}.ui-badge{border-radius:var(--radius-pill);white-space:nowrap;padding:2px 7px;font-size:11px;font-weight:600}.ui-badge--pdf{background:var(--color-accent-soft);color:var(--color-accent)}.ui-badge--fill{background:var(--status-due-soon-bg);color:var(--status-due-soon-fg)}.ui-control{min-height:var(--touch-target);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);width:100%;font:inherit;color:var(--color-text);background:var(--color-surface);padding:0 12px;font-size:14px}.ui-control:focus{border-color:var(--color-accent);box-shadow:var(--focus-ring);outline:none}.ui-control--textarea{resize:vertical;padding:10px 12px;line-height:1.45}.ui-control--mono{font-family:var(--font-mono);font-size:13px}.ui-control--fill{border-color:var(--field-fill-border);background:var(--field-fill-bg)}.ui-control--invalid{border-color:var(--color-danger);background:var(--color-danger-surface)}.ui-control:read-only{background:var(--color-surface-muted);color:var(--color-text-secondary)}.mono{font-family:var(--font-mono)}.payer{flex-direction:column;min-height:100vh;display:flex}.payer-header{background:var(--color-surface);border-bottom:1px solid var(--color-border)}.payer-header__inner{justify-content:space-between;align-items:center;gap:12px;max-width:1180px;margin:0 auto;padding:16px 20px;display:flex}.payer-brand{align-items:center;gap:10px;min-width:0;display:flex}.payer-brand__logo{color:var(--color-brand);flex-shrink:0}.payer-brand__name{letter-spacing:-.01em;white-space:nowrap;font-size:16px;font-weight:700}.payer-id{color:var(--color-text-secondary);background:var(--color-bg);border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:6px;padding:6px 10px;font-size:12px;display:flex}.payer-id__type{display:none}.payer-footer{flex-direction:column;align-items:center;gap:16px;margin-top:auto;padding:28px 24px 32px;display:flex}.brand-signature{color:var(--color-text-muted);align-items:baseline;gap:5px;margin:0;font-size:12px;display:flex}.brand-signature svg{color:var(--color-brand)}.privacy-note{color:var(--color-text-secondary);text-align:center;justify-content:center;align-items:flex-start;gap:6px;margin:0;font-size:12px;line-height:1.5;display:flex}.privacy-note svg{flex-shrink:0;margin-top:2px}.state{text-align:center;max-width:480px;color:var(--color-text-secondary);flex-direction:column;align-items:center;gap:12px;margin:0 auto;padding:48px 20px;display:flex}.state h1{color:var(--color-text);margin:0;font-size:22px}.state p{margin:0;line-height:1.5}.state__icon{border-radius:var(--radius-pill);background:var(--status-overdue-bg);width:56px;height:56px;color:var(--status-overdue-fg);justify-content:center;align-items:center;display:flex}.greeting{flex-direction:column;gap:4px;padding:24px 20px 16px;display:flex}.greeting h1{letter-spacing:-.02em;margin:0;font-size:24px;font-weight:700}.greeting p{color:var(--color-text-secondary);margin:0;font-size:15px}.mobile{flex-direction:column;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:0 16px 8px;display:flex}.mobile--detail{gap:4px}.back-button{min-height:var(--touch-target);border-radius:var(--radius-sm);color:var(--color-text);align-self:flex-start;align-items:center;gap:4px;margin:12px 0 4px;padding:0 12px 0 0;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.back-button:hover{color:var(--color-text)}.overdue-banner{border-radius:var(--radius-md);background:var(--status-overdue-bg);color:var(--status-overdue-fg);align-items:center;gap:12px;padding:14px 16px;text-decoration:none;display:flex}.overdue-banner:hover{color:var(--status-overdue-fg)}.overdue-banner__text{flex-direction:column;flex-grow:1;gap:2px;font-size:13px;display:flex}.overdue-banner__text strong{font-size:14px}.invoice-list{flex-direction:column;gap:12px;display:flex}.segmented{background:var(--color-surface-track);border-radius:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;display:grid}.segmented--light{background:var(--color-surface-hover)}.segmented__option{min-height:var(--touch-target);font:inherit;color:var(--color-text-tertiary);background:0 0;border:0;border-radius:9px;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.segmented__option[aria-selected=true],.segmented__option[aria-pressed=true]{background:var(--color-surface);color:var(--color-text);box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .14)}.invoice-list__items{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.invoice-list__empty{text-align:center;color:var(--color-text-secondary);margin:0;padding:24px 8px;font-size:14px}.invoice-item{border-radius:var(--radius-md);color:var(--color-text);border:1.5px solid var(--color-border);background:var(--color-surface);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;display:flex}.invoice-item:hover{color:var(--color-text);border-color:var(--color-border-input)}.invoice-item--overdue{border-color:var(--status-overdue-border)}.invoice-item--dim{background:var(--color-surface-muted)}.invoice-item--selected,.invoice-item--selected:hover{border-color:var(--color-accent);background:var(--color-surface)}.invoice-item__main{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.invoice-item__creditor{color:var(--color-text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.invoice-item__title{font-size:14px;font-weight:600}.invoice-item__due{color:var(--color-text-secondary);font-variant-numeric:tabular-nums;font-size:12px}.invoice-item__side{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex}.invoice-item__amount{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}.invoice-item__chevron{color:var(--color-text-muted);flex-shrink:0}.detail{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .06), 0 8px 24px rgb(var(--shadow-rgb) / .06);flex-direction:column;gap:18px;padding:20px;display:flex}.detail__top{flex-direction:column;gap:18px;display:flex}.detail__heading{flex-direction:column;gap:4px;display:flex}.detail__status{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.detail__status .ui-pill{padding:5px 10px}.detail__note{color:var(--color-text-secondary);font-size:13px}.detail__creditor{color:var(--color-text-tertiary);font-size:13px}.detail__title{margin:0;font-size:17px;font-weight:600}.detail__figures{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.figure{flex-direction:column;gap:2px;display:flex}.figure--end{text-align:right}.figure__label{color:var(--color-text-tertiary);font-size:12px}.figure__value{font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}.figure__value--big{letter-spacing:-.02em;white-space:nowrap;font-size:clamp(26px,8.5vw,34px);font-weight:700}.late-box{background:var(--status-overdue-surface);color:var(--color-text-secondary);border-radius:12px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:13px;line-height:1.5;display:flex}.late-box svg{color:var(--status-overdue-fg);flex-shrink:0;margin-top:1px}.late-box strong{color:var(--status-overdue-fg)}.terms{color:var(--color-text-tertiary);margin:-6px 0 0;font-size:12px}.pay-mobile,.pix,.boleto{flex-direction:column;gap:14px;display:flex}.boleto{gap:12px}.qr-frame{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);align-self:center;padding:14px;line-height:0}.qr-frame--sm{border-radius:12px;flex-shrink:0;align-self:auto;padding:10px}.pix__hint{color:var(--color-text-secondary);text-align:center;margin:0;font-size:13px;line-height:1.5}.pix__hint--left{text-align:left}.pix__row{align-items:center;gap:16px;display:flex}.boleto__label{color:var(--color-text-secondary);font-size:13px;font-weight:600}.code-box{font-family:var(--font-mono);color:var(--color-text-nav);background:var(--color-surface-sunken);border-radius:var(--radius-sm);word-break:break-all;padding:10px 12px;font-size:12px;line-height:1.5}.clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.code-box--line{color:var(--color-text);word-spacing:4px;word-break:normal;overflow-wrap:anywhere;padding:12px;font-size:14px;line-height:1.6}.code-box--big{letter-spacing:.02em;padding:14px;font-size:15px}.copy-button{background:var(--color-accent);color:var(--color-on-accent);font:inherit;border:0;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;font-weight:600;display:flex}.copy-button:hover{background:var(--color-accent-hover)}.copy-button--lg{min-height:52px;font-size:16px}.copy-button--md{min-height:48px;font-size:15px}.download-button{border:1.5px solid var(--color-border-input);background:var(--color-surface);min-height:48px;color:var(--color-text);border-radius:12px;justify-content:center;align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;display:flex}.download-button:hover{color:var(--color-text);background:var(--color-surface-hover)}.download-button--compact{min-height:var(--touch-target);gap:8px;padding:0 18px;font-size:14px}.desktop{flex-direction:column;gap:24px;width:100%;max-width:1180px;margin:0 auto;padding:32px;display:flex}.desktop__intro{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.desktop__title{letter-spacing:-.02em;margin:0;font-size:30px;font-weight:700}.desktop__subtitle{color:var(--color-text-secondary);margin:4px 0 0;font-size:16px}.standing{border-radius:var(--radius-pill);align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:700;display:inline-flex}.standing--ok{background:var(--status-paid-bg);color:var(--status-paid-fg)}.standing--overdue{background:var(--status-overdue-bg);color:var(--status-overdue-fg)}.desktop__grid{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}.desktop__aside{flex-direction:column;flex:340px;gap:12px;min-width:0;display:flex;position:sticky;top:24px}.aside-title{letter-spacing:-.01em;margin:0;font-size:18px;font-weight:700}.desktop__aside .privacy-note{text-align:left;justify-content:flex-start;padding:8px 4px}.detail--desktop{flex:2 600px;gap:22px;min-width:0;padding:28px}.detail--desktop .detail__top{flex-flow:wrap;justify-content:space-between;align-items:flex-start;gap:16px}.detail--desktop .detail__heading{gap:10px}.detail--desktop .detail__status{justify-content:flex-start;gap:10px;margin-bottom:0}.detail--desktop .detail__creditor{font-size:14px}.detail--desktop .detail__title{font-size:20px}.detail--desktop .detail__figures{flex-direction:row-reverse;align-items:flex-start;gap:32px}.detail--desktop .figure--end{text-align:left}.detail--desktop .figure:first-child{text-align:right}.detail--desktop .figure__value{font-size:17px}.detail--desktop .figure__value--big{font-size:36px}.detail--desktop .late-box{padding:14px 18px}.detail--empty{color:var(--color-text-tertiary);justify-content:center;align-items:center;min-height:240px}.pay-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;display:grid}.pay-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;gap:14px;padding:20px;display:flex}.pay-card__head{flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;font-weight:700;display:flex}.pay-card__title{white-space:nowrap}.pay-card__tag{white-space:nowrap;color:var(--color-text-secondary);margin-left:auto;font-size:12px;font-weight:500}.pay-card .boleto__label{font-size:12px}@media (width>=900px){.payer-header__inner{padding:16px 32px}.payer-brand__logo{width:36px;height:36px}.payer-brand__name{font-size:18px}.payer-id{gap:8px;padding:8px 14px;font-size:13px}.payer-id__type{display:inline}}@media (width<=380px){.payer-brand__name{font-size:15px}}
