:root{--green:#d4af37;--ink:#24272b;--paper:#24272b;--lime:#f2d36b;--muted:#70757a;--hair:#efece2;--deep:#8b6c0b;--danger:#b3261e}
body{background:#24272b;font-family:Arial,Helvetica,sans-serif;color:#24272b}
.brand strong{color:#fff}.brand small{color:#e2ba3b}.mark{background:#d4af37;color:#24272b}
.content h1{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-2px}.intro h1{color:#fff}.intro h1 em{color:#e2ba3b;font-style:normal;font-weight:800}.intro>p{color:#c9cbcd}.eyebrow{color:#9a7710}
form:not(.inline-form){border-left-color:#d4af37;border-radius:12px;box-shadow:0 22px 56px rgba(0,0,0,.26)}input:focus{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.16)}
button,.open{background:#d4af37;color:#24272b;border-radius:7px}
.result{background:#fff;padding:22px 18px;border-radius:12px}.result .eyebrow{color:#8b6c0b}
footer{color:#b9bbbd}

/* --- Lista: extrato de linhas clicáveis --- */
.tickets-view{text-align:left}
.tickets-view h1{font-size:26px;letter-spacing:-.9px;margin:2px 0 0}
.top-again{display:block;margin:0 0 14px;font-size:11.5px;color:#8b6c0b}
.lede{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:#7b8085}
.lede b{color:var(--danger);font-weight:800}
.group{margin-top:24px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px solid #24272b}
.group-head h2{margin:0;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#24272b}
.group-head span{font-size:12.5px;font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums}
.group.overdue .group-head{border-bottom-color:var(--danger)}
.group-note{margin:11px 0 0;font-size:10.5px;line-height:1.5;color:#9a9ea2}
.rows{display:grid}
form.row-form{background:none;padding:0;border:0;border-radius:0;box-shadow:none;margin:0}
form.row-form+form.row-form button.row{border-top:1px solid var(--hair)}
button.row{width:100%;min-height:0;margin:0;padding:15px 2px;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;column-gap:12px;background:none;color:#24272b;border:0;border-radius:0;text-align:left;font:inherit;cursor:pointer}
button.row:active{background:#fbf8ee}
.row-body{display:block;min-width:0}
.row-title{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.2px;line-height:1.3}
.row-meta{display:block;margin-top:4px;font-size:11.5px;line-height:1.4;color:#7b8085}
.row-meta b{color:#4a4f54;font-weight:700}
.row-sub{display:block;margin-top:5px;font-size:10.5px;line-height:1.45;color:#9a9ea2}
.row-cash{display:block;text-align:right;white-space:nowrap}
.row-cash b{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.row-cash i{display:block;margin-top:3px;font-style:normal;font-size:9.5px;font-weight:700;color:#9a9ea2}
.row-go{color:#cfd1d4;font-size:19px;line-height:1;text-align:right}
.row-late .row-cash b{color:var(--danger)}
.current-group .group-head{border-bottom-color:#d4af37}.current-group .group-head h2{color:#7a5e09}
button.row.row-monthly{position:relative;margin-top:9px;padding:16px 13px 16px 15px;overflow:hidden;border:1px solid #eadca9;border-radius:11px;background:linear-gradient(135deg,#fffaf0 0%,#fff 72%);box-shadow:0 8px 22px rgba(98,75,11,.08)}
button.row.row-monthly::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#d4af37}
.row-monthly .row-title{color:#332c1a}.row-monthly .row-cash b{color:#7a5e09}.row-monthly .row-go{color:#c6a537}button.row.row-monthly:active{background:#fff6dc}
.more{margin-top:0;border-top:1px solid var(--hair)}
.more>summary{cursor:pointer;list-style:none;padding:13px 2px;color:var(--deep);font-size:11.5px;font-weight:800}
.more>summary::-webkit-details-marker{display:none}

/* Etiquetas vindas da API, discretas ao lado do título */
.tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:4px;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
.tag.legal{background:#fdecea;color:var(--danger)}
.tag.new-due{background:#eceff1;color:#454b50}
.tag.agreement{background:#24272b;color:#fff}
.tag.monthly{background:#f7ecc4;color:#6f5610}
.tag.plain{background:#eceff1;color:#454b50}

/* --- Detalhe: um valor dominante e duas ações claras --- */
.detail{text-align:left;padding:24px 20px}
.detail .eyebrow{font-size:9.5px;letter-spacing:.16em}
.detail-title{margin:7px 0 0;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.3}
.detail-value{margin:15px 0 0;font-size:38px;font-weight:800;letter-spacing:-1.7px;line-height:1;font-variant-numeric:tabular-nums}
.detail-due{margin:8px 0 0;font-size:12.5px;color:#7b8085}
.detail-due b{color:#24272b;font-weight:800}
.composition{margin-top:15px;border-top:1px solid var(--hair)}
.composition>summary{cursor:pointer;list-style:none;padding:12px 0;color:var(--deep);font-size:11.5px;font-weight:800}
.composition>summary::-webkit-details-marker{display:none}
.composition-body{padding:0 0 11px}
.composition-row{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;line-height:1.95;color:#5c6166}
.composition-row b{color:#3d4247;font-variant-numeric:tabular-nums}
.composition-row.total{margin-top:5px;padding-top:5px;border-top:1px solid var(--hair);color:#24272b;font-weight:800}
.origin-box{margin-top:15px;padding:12px 0 0;border-top:1px solid var(--hair)}
.origin-title{display:block;color:#9a9ea2;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.origin-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:#3d4247}
.origin-row+.origin-row{margin-top:8px}
.origin-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.origin-row em{font-style:normal;font-size:10px;color:#9a9ea2}
.origin-row b{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.origin-row.sum{margin-top:8px;padding-top:8px;border-top:1px solid var(--hair);font-weight:800;color:#24272b}
.origin-row.sum b{font-size:13px}
.pix{margin-top:18px;background:#fffdf6;border:1px solid #efe6cd;border-radius:10px;padding:15px 12px 12px;text-align:center}
.pix>span{display:block;color:var(--deep);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.pix canvas{width:min(216px,66vw)!important;margin:12px auto 4px}
.pix>p{margin:5px 0 0;font-size:10.5px;color:#9a9ea2}
.actions{display:grid;gap:9px;margin-top:14px}
form.actions{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
button.act,a.act{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:0 16px;border:0;border-radius:9px;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer}
button.act-main{background:#d4af37;color:#24272b}
button.act-alt,a.act-alt{background:#fff;color:#24272b;border:1.5px solid #24272b}
.notice{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:#7b8085}
.boleto{margin-top:10px;border-top:1px solid var(--hair);padding-top:0}
.boleto summary{color:#9a9ea2;font-size:11px;font-weight:600;padding:11px 0;text-align:center}
.boleto[open] summary{color:#7b8085}
.boleto-body{margin-top:0;padding-bottom:4px}
.line{border:1px solid var(--hair);border-radius:9px;padding:12px;text-align:left}
.line p{font-size:10.5px;color:#5e6367}
button.copy{width:auto;min-height:0;margin:9px 0 0;padding:0;background:none;border:0;color:#7b8085;font-size:10.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hint{margin:9px 0 0;font-size:10.5px;line-height:1.5;color:#9a9ea2}
.hint.center{text-align:center}
.group-note{margin:0 0 4px;font-size:10.5px;line-height:1.55;color:#8a8f94}
.group-note.top{margin:-2px 0 8px}
.legal{border:1px solid #e8dcc0;background:#fdfaf2;border-radius:10px;padding:13px 14px;margin-top:16px}
.legal p{margin:0;font-size:11.5px;line-height:1.6;color:#6b6350}
.legal b{color:#24272b}
.legal a,.notice a{color:#24272b;font-weight:800;white-space:nowrap}
.future-note{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--hair);font-size:10.5px;line-height:1.6;color:#9a9ea2}
.again{color:var(--deep)}
form.detail-foot{background:none;padding:0;border:0;border-radius:0;box-shadow:none;margin:18px 0 0}
button.ghost{min-height:46px;margin:0;background:none;border:1px solid #e4e0d3;border-radius:9px;color:#6c7176;font-size:12.5px;font-weight:800}

/* Entrada suave e escalonada das linhas */
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rows>.row-form{animation:rise .36s cubic-bezier(.2,.7,.3,1) both}
.rows>.row-form:nth-child(2){animation-delay:.05s}
.rows>.row-form:nth-child(3){animation-delay:.1s}
.rows>.row-form:nth-child(4){animation-delay:.15s}
.rows>.row-form:nth-child(n+5){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){.rows>.row-form{animation:none}}
@media(max-width:420px){.content{padding-top:34px}.detail-value{font-size:34px}}

/* Tipografia única em toda a aplicação */
html,body,button,input,select,textarea,summary,a,h1,h2,h3,h4,h5,h6,.line p{font-family:Arial,Helvetica,sans-serif}