:root{--accent:oklch(.955 .02 30);--accent-foreground:oklch(.42 .18 27)}
[hidden]{display:none!important}
.brand-white-logo{display:block;width:auto;height:36px;padding:0 12px;object-fit:contain}
.invoice-page .brand-white-logo{padding:4px 12px}
.lucide{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px;flex:0 0 16px}
.icon-md{width:20px;height:20px;flex:0 0 20px}
.icon-xl{width:48px;height:48px}
.feature-icon,.step-icon{display:grid;place-items:center;font-size:initial;line-height:normal}
.feature-icon{color:var(--primary)}
.step-icon{color:#fff}
.check-grid li{align-items:center}
.check-grid .lucide{color:var(--primary)}
.secure-note .lucide,.privacy-note .lucide{color:currentColor}
.pix-title{display:flex;align-items:center;justify-content:center;gap:.45rem}
.state-box .lucide{flex:0 0 auto}
.notice-icon .lucide{margin-inline:auto}

/* React/shadcn auth geometry and theme from the original app. */
.auth-page{background:linear-gradient(180deg,oklch(.99 .004 255),oklch(.96 .008 255))}
.auth-form[hidden]{display:none!important}
.auth-card{border-radius:1rem}
.auth-icon{background:var(--accent);color:var(--accent-foreground)}
.auth-card .button{height:2.5rem;border-radius:.375rem;font-size:.875rem;font-weight:500;padding-inline:2rem}
.auth-form input{height:2.25rem;border-radius:.375rem}
.auth-tabs{height:2.25rem;border-radius:.5rem;padding:.25rem;align-items:center}
.auth-tab{height:1.75rem;border-radius:.375rem;padding:.25rem .75rem;font-size:.875rem}
.auth-success-icon{display:flex!important;justify-content:center;color:var(--success)}
.auth-back-link{display:inline-flex;align-items:center;gap:.25rem}
.password-field{position:relative}
.password-field input{width:100%;padding-right:2.5rem}
.password-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:grid;place-items:center;border:0;background:transparent;padding:0;color:var(--muted-fg);cursor:pointer}
.password-toggle:hover{color:var(--fg)}
.notice.card,.empty.card{border-radius:1rem}

/* The invoice card now contains the real white logo directly. */
.card-brand{background-color:var(--primary);background-image:none}
.card-brand .brand-white-logo{height:36px;padding:4px 12px}

@media(min-width:640px){.auth-card{padding:2rem}}