:root {
    --px-bg: #0a0d12;
    --px-card: #10151d;
    --px-card-2: #141b24;
    --px-border: rgba(255,255,255,.08);
    --px-text: #f3f6fb;
    --px-muted: #8792a5;
    --px-blue: #65a9ff;
    --px-green: #35d07f;
    --px-red: #ff5d6c;
}
.pix-e2e-wrap{
    width:100%;
    max-width:760px;
    margin:40px auto;
    padding:0 14px;
    box-sizing:border-box;
    color:var(--px-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.pix-e2e-card{
    background:
        radial-gradient(circle at 92% 0%, rgba(101,169,255,.08), transparent 30%),
        linear-gradient(180deg, rgba(20,27,36,.98), rgba(10,13,18,.98));
    border:1px solid var(--px-border);
    border-radius:24px;
    padding:28px;
    box-shadow:0 24px 80px rgba(0,0,0,.38);
}
.pix-e2e-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}
.pix-e2e-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--px-blue);margin-bottom:8px}
.pix-e2e-top h2{margin:0;font-size:30px;line-height:1.1;letter-spacing:-.03em}
.pix-e2e-top p{margin:9px 0 0;color:var(--px-muted);font-size:14px}
.pix-e2e-top-icon{
    width:50px;height:50px;border-radius:16px;
    display:grid;place-items:center;
    background:rgba(101,169,255,.09);
    border:1px solid rgba(101,169,255,.15);
    color:var(--px-blue);
    font-weight:900;font-size:12px;letter-spacing:.04em;
}
.pix-e2e-form label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.pix-e2e-input-row{display:flex;gap:10px}
.pix-e2e-input{
    flex:1;min-width:0;height:54px;border-radius:14px;border:1px solid rgba(255,255,255,.11);
    background:#0b1016;color:var(--px-text);padding:0 16px;font:600 14px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    outline:none;transition:.2s;
    box-sizing:border-box;
}
.pix-e2e-input:focus{border-color:rgba(101,169,255,.7);box-shadow:0 0 0 4px rgba(101,169,255,.10)}
.pix-e2e-button{
    height:54px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;
    background:#eef4fb;color:#0a0d12;font-weight:900;letter-spacing:.04em;
    transition:transform .15s,filter .15s;
}
.pix-e2e-button:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pix-e2e-help{margin-top:8px;color:var(--px-muted);font-size:12px}
.pix-e2e-result{margin-top:22px}
.pix-e2e-status{
    padding:18px;border-radius:18px;border:1px solid var(--px-border);
    background:var(--px-card-2);
}
.pix-e2e-status-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pix-e2e-badge{
    min-width:38px;height:38px;border-radius:50%;
    display:grid;place-items:center;font-size:20px;font-weight:900;
}
.pix-e2e-badge.valid{background:rgba(53,208,127,.12);color:var(--px-green);border:1px solid rgba(53,208,127,.24)}
.pix-e2e-badge.invalid{background:rgba(255,93,108,.12);color:var(--px-red);border:1px solid rgba(255,93,108,.24)}
.pix-e2e-status-title{font-size:16px;font-weight:900}
.pix-e2e-status-sub{font-size:12px;color:var(--px-muted);margin-top:3px}
.pix-e2e-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pix-e2e-field{
    min-width:0;padding:14px;border-radius:14px;background:#0c1117;border:1px solid rgba(255,255,255,.06)
}
.pix-e2e-field.full{grid-column:1/-1}
.pix-e2e-field small{display:block;color:var(--px-muted);font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
.pix-e2e-field strong{display:block;font-size:14px;word-break:break-word}
.pix-e2e-type{
    margin:0;padding:14px;border-radius:14px;
    background:#0c1117;border:1px solid rgba(255,255,255,.06);
    color:var(--px-text);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    display:flex;align-items:center;min-height:48px;box-sizing:border-box;
}
.pix-e2e-type span{display:block;line-height:1.2}
@media(max-width:640px){
    .pix-e2e-card{padding:20px;border-radius:20px}
    .pix-e2-e-top h2,.pix-e2e-top h2{font-size:25px}
    .pix-e2e-input-row{flex-direction:column}
    .pix-e2e-button{width:100%}
    .pix-e2e-grid{grid-template-columns:1fr}
    .pix-e2e-field.full{grid-column:auto}
}

.pix-e2e-status.is-invalid{border-color:rgba(255,93,108,.20)}
.pix-e2e-error-info{padding:14px;border-radius:14px;background:rgba(255,93,108,.055);border:1px solid rgba(255,93,108,.12)}
.pix-e2e-error-label{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--px-red);margin-bottom:7px}
.pix-e2e-error-message{font-size:14px;font-weight:800;line-height:1.45}
.pix-e2e-error-code{margin-top:9px;color:var(--px-muted);font-size:12px}
.pix-e2e-error-code strong{color:var(--px-text)}

.pix-e2e-type.is-payment{
    color:#35d07f;
}
.pix-e2e-type.is-devolution{
    color:#65a9ff;
}