:root {
    color-scheme: dark;
    --page-top: #080D13;
    --page-bottom: #080D13;
    --card: #111820;
    --card-border: #151E28;
    --text: #FFFFFF;
    --muted: rgba(255,255,255,.66);
    --button-border: #151E28;
    --button-shadow: rgba(0,0,0,.26);
    --field: #121A23;
    --field-border: #151E28;
    --danger: #ffb9b9;
    --success: #b8f4d0;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--page-top);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding:
        max(24px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(41, 139, 255, .20), transparent 38%),
        linear-gradient(155deg, var(--page-top), var(--page-bottom));
}

.shell {
    width: 100%;
    max-width: 480px;
}

.panel {
    position: relative;
    overflow: hidden;
    padding: 30px 22px 22px;
    border: 1px solid var(--card-border);
    border-radius: 28px;
    background: var(--card);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.panel::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -150px;
    right: -110px;
    border-radius: 50%;
    background: rgba(37, 142, 255, .17);
    pointer-events: none;
}

.brand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 26px;
    text-align: center;
}

.brand-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid rgba(149, 210, 255, .34);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(145deg, #171F29, #111820);
    box-shadow:
        0 12px 28px rgba(20, 116, 224, .38),
        inset 0 1px 0 rgba(255, 255, 255, .26);
}

.brand-icon svg {
    width: 38px;
    height: 38px;
}

h1 {
    margin: 0;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 800;
    letter-spacing: -.04em;
}

.subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.section-title {
    position: relative;
    margin: 0 0 18px;
    color: #dcecff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.form {
    position: relative;
    display: grid;
    gap: 14px;
}

.field {
    display: grid;
    gap: 7px;
}

.field label {
    color: rgba(220, 237, 252, .84);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
}

.field input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--field-border);
    border-radius: 15px;
    outline: none;
    background: var(--field);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 7px 18px rgba(0,0,0,.10);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.field input::placeholder {
    color: rgba(178, 204, 228, .45);
}

.field input:focus {
    border-color: rgba(129, 199, 255, .66);
    background: rgba(3, 28, 57, .86);
    box-shadow:
        0 0 0 3px rgba(48, 149, 255, .13),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.primary-button,
.secondary-button,
.btn {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 16px;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 18px;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 160ms ease,
        filter 160ms ease,
        border-color 160ms ease;
}

.primary-button,
.btn.primary {
    border: 1px solid var(--button-border);
    background: linear-gradient(145deg, rgba(35, 127, 226, .98), rgba(17, 91, 181, .98));
    box-shadow:
        0 12px 26px var(--button-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.secondary-button,
.btn.secondary {
    border: 1px solid rgba(132, 199, 255, .25);
    background: rgba(16, 78, 145, .53);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.primary-button:hover,
.secondary-button:hover,
.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    border-color: rgba(190, 226, 255, .62);
}

.primary-button:active,
.secondary-button:active,
.btn:active {
    transform: translateY(0) scale(.99);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.btn:focus-visible,
.text-link:focus-visible {
    outline: 3px solid rgba(139, 206, 255, .82);
    outline-offset: 3px;
}

.primary-button:disabled,
.secondary-button:disabled {
    cursor: not-allowed;
    opacity: .48;
    transform: none;
    filter: none;
}

.button-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.links {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
}

.links.one {
    grid-template-columns: 1fr;
}

.text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    color: rgba(220, 238, 255, .82);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(132, 199, 255, .17);
    border-radius: 14px;
    background: rgba(8, 52, 100, .34);
    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease;
}

.text-link:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 217, 255, .42);
    background: rgba(15, 75, 139, .46);
}

.message {
    position: relative;
    margin: 0 0 15px;
    padding: 12px 14px;
    border-radius: 15px;
    color: #e9f5ff;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(7, 48, 91, .58);
    border: 1px solid rgba(132, 199, 255, .18);
}

.message.error {
    color: var(--danger);
    border-color: rgba(255, 116, 116, .28);
    background: rgba(104, 27, 41, .26);
}

.message.success {
    color: var(--success);
    border-color: rgba(91, 220, 145, .26);
    background: rgba(20, 92, 60, .24);
}

.turnstile-wrap {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding-top: 2px;
}

.password-strength {
    margin-top: 2px;
}

.strength-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(113, 161, 206, .18);
}

.strength-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #6b8aac;
    transition: width .2s ease, background .2s ease;
}

.strength-bar[data-level="weak"] { background:#d05a5a; }
.strength-bar[data-level="fair"] { background:#d39a45; }
.strength-bar[data-level="good"] { background:#b8b34d; }
.strength-bar[data-level="strong"] { background:#4da477; }
.strength-bar[data-level="very-strong"] { background:#46b98a; }

.strength-label {
    display: block;
    margin-top: 7px;
    color: rgba(200, 222, 242, .72);
    font-size: 11px;
}

.password-rules {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
}

.password-rules li { color: rgba(188, 213, 237, .62); }
.password-rules .rule-ok { color: #88dcb0; }
.password-rules [data-rule-mark] {
    display: inline-block;
    width: 16px;
    font-weight: 800;
}

.divider {
    position: relative;
    margin: 18px 0;
    border-top: 1px solid rgba(144, 196, 241, .15);
}

.user-name {
    position: relative;
    margin: 0 0 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.user-copy {
    position: relative;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

footer {
    position: relative;
    margin-top: 20px;
    color: rgba(188, 213, 237, .64);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 380px) {
    .panel {
        padding-inline: 16px;
        border-radius: 24px;
    }

    .brand-icon {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    .links {
        grid-template-columns: 1fr;
    }

    .turnstile-wrap {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-button,
    .secondary-button,
    .btn,
    .text-link,
    .field input {
        transition: none;
    }
}


/* VLPag Fase 3 */
.nav-row {
    position: relative;
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.nav-row .text-link {
    flex: 1 1 0;
}

.dashboard-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.action-card {
    display: flex;
    min-height: 142px;
    flex-direction: column;
    justify-content: space-between;
    padding: 17px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid rgba(132, 199, 255, .18);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(11, 62, 116, .72), rgba(7, 43, 83, .62));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 12px 28px rgba(0,0,0,.14);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(158, 213, 255, .42);
    background: linear-gradient(145deg, rgba(15, 77, 143, .82), rgba(8, 50, 97, .74));
}

.action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #2d94ef, #145fb9);
    box-shadow: 0 8px 20px rgba(16, 101, 194, .28);
}

.action-icon svg {
    width: 24px;
    height: 24px;
}

.action-title {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 800;
}

.action-copy {
    margin-top: 5px;
    color: rgba(191, 216, 239, .70);
    font-size: 11px;
    line-height: 1.45;
}

.status-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

.status-item {
    padding: 12px 10px;
    border: 1px solid rgba(132, 199, 255, .14);
    border-radius: 15px;
    background: rgba(4, 36, 70, .46);
    text-align: center;
}

.status-label {
    color: rgba(190, 215, 239, .62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-value {
    margin-top: 5px;
    color: #edf7ff;
    font-size: 12px;
    font-weight: 800;
    word-break: break-word;
}

.section-card {
    position: relative;
    margin-top: 14px;
    padding: 17px;
    border: 1px solid rgba(132, 199, 255, .15);
    border-radius: 20px;
    background: rgba(4, 35, 69, .44);
}

.section-card:first-of-type {
    margin-top: 0;
}

.section-card h2 {
    margin: 0 0 5px;
    color: #f2f8ff;
    font-size: 16px;
    font-weight: 800;
}

.section-card .section-copy {
    margin: 0 0 15px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.choice-card {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid rgba(132, 199, 255, .16);
    border-radius: 16px;
    background: rgba(5, 39, 75, .44);
    cursor: pointer;
}

.choice-card:has(input:checked) {
    border-color: rgba(113, 190, 255, .54);
    background: rgba(15, 78, 143, .58);
    box-shadow: inset 0 0 0 1px rgba(113,190,255,.08);
}

.choice-card strong {
    display: block;
    font-size: 12px;
}

.choice-card small {
    display: block;
    margin-top: 4px;
    color: rgba(191, 216, 239, .66);
    font-size: 10px;
    line-height: 1.4;
}

input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
    flex: 0 0 18px;
    accent-color: #2789ec;
    box-shadow: none;
}

.check-list {
    display: grid;
    gap: 9px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(132, 199, 255, .13);
    border-radius: 14px;
    background: rgba(5, 39, 75, .35);
    color: rgba(227, 241, 255, .88);
    font-size: 12px;
}

.help {
    margin-top: 7px;
    color: rgba(185, 210, 234, .62);
    font-size: 10px;
    line-height: 1.45;
}

.credential-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    color: rgba(220,238,255,.86);
    background: rgba(17, 74, 132, .50);
    border: 1px solid rgba(132,199,255,.18);
    font-size: 10px;
    font-weight: 800;
}

.credential-status.ok {
    color: #bff4d2;
    background: rgba(26, 104, 70, .34);
    border-color: rgba(91,220,145,.22);
}

.danger-button {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 118, 118, .24);
    border-radius: 15px;
    color: #ffd7d7;
    background: rgba(112, 34, 46, .30);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.danger-button:hover {
    background: rgba(130, 39, 54, .40);
}

.money-summary {
    display: grid;
    gap: 9px;
    padding: 16px;
    border: 1px solid rgba(132, 199, 255, .18);
    border-radius: 18px;
    background: rgba(3, 31, 61, .58);
}

.money-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: rgba(213, 233, 250, .76);
    font-size: 12px;
}

.money-line.total {
    padding-top: 10px;
    border-top: 1px solid rgba(132,199,255,.14);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.simulation-note {
    margin-top: 12px;
    padding: 11px 12px;
    color: rgba(193, 219, 242, .72);
    font-size: 10px;
    line-height: 1.5;
    border: 1px dashed rgba(132,199,255,.20);
    border-radius: 13px;
}

.public-domain {
    color: #baddff;
    font-weight: 800;
    word-break: break-word;
}

.hidden {
    display: none !important;
}

@media (max-width: 440px) {
    .dashboard-grid,
    .status-grid,
    .field-row,
    .choice-grid {
        grid-template-columns: 1fr;
    }
}


/* VLPag v0.3.1 */
.paired-fields {
    align-items: start;
}

.paired-fields .field {
    grid-template-rows: minmax(18px, auto) 48px auto;
    align-content: start;
}

.paired-fields .field > label {
    min-height: 18px;
    display: flex;
    align-items: flex-end;
}

.paired-fields .field > input {
    height: 48px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.current-email {
    padding: 11px 12px;
    border: 1px solid rgba(132,199,255,.14);
    border-radius: 14px;
    color: #eaf6ff;
    background: rgba(5,39,75,.36);
    font-size: 12px;
    word-break: break-word;
}

.pending-email {
    margin-top: 10px;
    color: #baddff;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 440px) {
    .paired-fields .field {
        grid-template-rows: auto 48px auto;
    }
}


/* VLPag Admin v0.3.2 */
.admin-shell {
    width: min(1080px, 100%);
}

.admin-panel {
    padding: 26px;
}

.admin-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-brand .brand-icon {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 16px;
}

.admin-brand .brand-icon svg {
    width: 26px;
    height: 26px;
}

.admin-title {
    margin: 0;
    font-size: 21px;
    font-weight: 850;
}

.admin-subtitle {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-nav .text-link {
    min-height: 38px;
    padding: 8px 11px;
}

.admin-card {
    position: relative;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(132,199,255,.15);
    border-radius: 18px;
    background: rgba(4,35,69,.42);
}

.admin-card h2 {
    margin: 0 0 12px;
    font-size: 15px;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(132,199,255,.13);
    border-radius: 16px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 740px;
}

.admin-table th,
.admin-table td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(132,199,255,.10);
    font-size: 11px;
    vertical-align: middle;
}

.admin-table th {
    color: rgba(206,229,250,.72);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(5,42,80,.46);
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table a {
    color: #cbe7ff;
    font-weight: 800;
    text-decoration: none;
}

.admin-table a:hover {
    text-decoration: underline;
}

.admin-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-search .primary-button {
    width: auto;
    min-width: 120px;
    min-height: 48px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.admin-stat {
    padding: 13px;
    border: 1px solid rgba(132,199,255,.13);
    border-radius: 15px;
    background: rgba(4,36,70,.44);
}

.admin-stat-label {
    color: rgba(190,215,239,.60);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-stat-value {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 850;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 850;
    border: 1px solid rgba(132,199,255,.18);
    background: rgba(17,74,132,.44);
}

.status-pill.active {
    color: #bff4d2;
    background: rgba(26,104,70,.30);
    border-color: rgba(91,220,145,.20);
}

.status-pill.blocked {
    color: #ffd1d1;
    background: rgba(116,34,47,.30);
    border-color: rgba(255,118,118,.20);
}

.status-pill.pending {
    color: #ffe9ae;
    background: rgba(115,88,25,.30);
    border-color: rgba(230,188,81,.20);
}

.admin-detail {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 7px 14px;
    font-size: 11px;
}

.admin-detail dt {
    color: rgba(190,215,239,.62);
}

.admin-detail dd {
    margin: 0;
    color: #eef8ff;
    word-break: break-word;
}

.admin-actions {
    display: grid;
    gap: 12px;
}

.admin-inline {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.admin-inline > * {
    flex: 1 1 160px;
}

.small-button {
    -webkit-appearance:none;
    appearance:none;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 13px;
    border: 1px solid rgba(132,199,255,.22);
    color: #e9f5ff;
    background: rgba(15,75,139,.46);
    font: inherit;
    font-size: 10px;
    font-weight: 850;
    cursor: pointer;
}

.small-button:hover {
    filter: brightness(1.08);
}

.small-button.danger {
    color:#ffd5d5;
    border-color:rgba(255,118,118,.22);
    background:rgba(112,34,46,.32);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.pagination a,
.pagination span {
    min-width: 34px;
    min-height: 34px;
    display:grid;
    place-items:center;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(132,199,255,.15);
    color:#dcedff;
    text-decoration:none;
    background:rgba(8,52,100,.34);
    font-size:10px;
    font-weight:800;
}

.pagination span.current {
    border-color:rgba(132,199,255,.42);
    background:rgba(24,103,185,.58);
}

@media (max-width: 720px) {
    .admin-panel {
        padding: 18px;
    }

    .admin-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-grid,
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-search {
        grid-template-columns: 1fr;
    }

    .admin-search .primary-button {
        width:100%;
    }
}


/* VLPag Admin QR v0.3.4 */
.admin-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 12px;
}

.admin-qr-box {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(132,199,255,.16);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.admin-qr-image {
    display: block;
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
    border-radius: 10px;
}


/* VLPag Pix real v0.3.6 */
.payment-panel {
    max-width: 480px;
}

.payment-status {
    position: relative;
    margin: 0 auto 14px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    border: 1px solid rgba(132,199,255,.18);
}

.payment-status.pending {
    color: #cde9ff;
    background: rgba(22,95,167,.38);
}

.payment-status.paid {
    color: #c7f6d7;
    background: rgba(26,104,70,.34);
    border-color: rgba(91,220,145,.24);
}

.payment-status.expired {
    color: #ffd0d0;
    background: rgba(116,34,47,.28);
    border-color: rgba(255,118,118,.20);
}

.payment-center {
    text-align: center;
}

.payment-qr-box {
    width: fit-content;
    margin: 14px auto 16px;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.payment-qr-image {
    display: block;
    width: min(260px, 70vw);
    height: auto;
    border-radius: 9px;
}

.pix-copy-field {
    width: 100%;
    min-height: 92px;
    resize: none;
    padding: 12px 13px;
    color: #eaf6ff;
    border: 1px solid rgba(126,183,239,.23);
    border-radius: 14px;
    outline: none;
    background: rgba(2,22,45,.72);
    font: 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
    word-break: break-all;
}

.payment-countdown {
    margin-top: 13px;
    color: #b9d9f5;
    font-size: 12px;
    font-weight: 800;
}

.receipt-grid {
    display: grid;
    gap: 10px;
    text-align: left;
}

.receipt-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 12px;
    border: 1px solid rgba(132,199,255,.12);
    border-radius: 13px;
    background: rgba(5,39,75,.34);
}

.receipt-grid span {
    color: rgba(190,215,239,.62);
    font-size: 10px;
}

.receipt-grid strong {
    color: #f1f8ff;
    font-size: 11px;
    text-align: right;
}


/* VLPag v0.3.7 - retorno e exclusão protegida */
.login-back-row {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.login-back-button {
    width: 100%;
}

.danger-zone {
    border-color: rgba(255,118,118,.25);
    background:
        linear-gradient(145deg, rgba(93,26,39,.22), rgba(4,35,69,.40));
}

.delete-warning {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(255,118,118,.22);
    border-radius: 14px;
    color: #ffd9d9;
    background: rgba(105,30,43,.28);
    font-size: 11px;
    line-height: 1.65;
}

.delete-warning strong {
    display: block;
    margin-top: 7px;
    color: #fff0f0;
}

.danger-link-button {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border: 1px solid rgba(255,118,118,.28);
    border-radius: 15px;
    color: #ffd7d7;
    background: rgba(122,33,49,.38);
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    text-align: center;
    transition: background 160ms ease, border-color 160ms ease;
}

.danger-link-button:hover {
    border-color: rgba(255,138,138,.42);
    background: rgba(143,39,57,.48);
}


/* VLPag v0.3.8 - sucesso da cobrança e descrição pública */
.payment-status-block {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.payment-status-block .payment-status {
    margin-bottom: 0;
}

.payment-service-description {
    max-width: 100%;
    padding: 0 14px;
    color: #eef8ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    word-break: break-word;
}

.payment-service-description::before {
    content: "Descrição: ";
    color: rgba(190,215,239,.68);
    font-weight: 700;
}

.charge-description-box {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(132,199,255,.13);
    border-radius: 14px;
    background: rgba(5,39,75,.34);
}

.charge-description-box span {
    color: rgba(190,215,239,.62);
    font-size: 10px;
}

.charge-description-box strong {
    color: #f1f8ff;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.public-link-box {
    padding: 13px 14px;
    border: 1px solid rgba(132,199,255,.16);
    border-radius: 14px;
    color: #cfe9ff;
    background: rgba(3,30,59,.56);
    font: 11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
    word-break: break-all;
}

.charge-link-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.charge-action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


/* VLPag v0.3.9 - histórico e atualização em tempo real */
.history-shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 28px 14px;
}

.history-panel {
    max-width: none;
}

.history-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.history-top h1 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 850;
}

.history-top p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.history-filters {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) 180px 120px;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.history-filters .primary-button {
    min-height: 48px;
}

.history-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.history-card {
    padding: 16px;
    border: 1px solid rgba(132,199,255,.15);
    border-radius: 19px;
    background:
        linear-gradient(145deg,rgba(7,45,86,.64),rgba(4,32,63,.52));
}

.history-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.history-card-head .payment-status {
    margin: 0;
    flex: 0 0 auto;
}

.history-reference {
    color: #eef8ff;
    font-size: 12px;
    font-weight: 850;
}

.history-date,
.history-paid-at {
    margin-top: 4px;
    color: rgba(190,215,239,.58);
    font-size: 10px;
}

.history-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(132,199,255,.10);
}

.history-main > div {
    display: grid;
    gap: 4px;
}

.history-main span {
    color: rgba(190,215,239,.58);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.history-main strong {
    color: #f1f8ff;
    font-size: 13px;
    word-break: break-word;
}

.history-main > div:last-child {
    text-align: right;
}

.history-description {
    margin-top: 12px;
    padding: 10px 11px;
    border-radius: 12px;
    color: #d9ebfb;
    background: rgba(4,31,60,.46);
    font-size: 11px;
    line-height: 1.5;
    word-break: break-word;
}

.history-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 13px;
}

.history-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.history-empty {
    text-align: center;
}

select {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid #32425f;
    border-radius: 15px;
    color: #eef8ff;
    background: #071325;
    font: inherit;
    font-size: 12px;
    outline: none;
}

select:focus {
    border-color: rgba(80,166,255,.72);
    box-shadow: 0 0 0 3px rgba(36,134,236,.12);
}

@media (max-width: 720px) {
    .history-top {
        flex-direction: column;
    }

    .history-filters,
    .history-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 440px) {
    .history-actions {
        grid-template-columns: 1fr;
    }
}


/* VLPag v0.3.11 - reenvio de e-mail por status */
.history-resend-form {
    display: contents;
}

.history-email-button {
    width: 100%;
}

.history-card:has(.history-resend-form) .history-actions {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.payment-status.refunded {
    color: #ffe0ad;
    background: rgba(133,78,22,.34);
    border-color: rgba(238,170,83,.24);
}

@media (max-width: 760px) {
    .history-card:has(.history-resend-form) .history-actions {
        grid-template-columns: 1fr;
    }
}


/* VLPag v0.3.12 - interface compacta mobile */
.dashboard-grid-compact {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.dashboard-grid-compact .action-card {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 8px;
    text-align: center;
}

.dashboard-grid-compact .action-card > span:last-child {
    display: block;
}

.dashboard-grid-compact .action-icon {
    margin: 0;
}

.dashboard-grid-compact .action-title {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}

.settings-brand,
.history-brand {
    margin-bottom: 16px;
}

.settings-brand .brand-icon,
.history-brand .brand-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 11px;
    border-radius: 18px;
}

.settings-brand .brand-icon svg,
.history-brand .brand-icon svg {
    width: 30px;
    height: 30px;
}

.settings-tabs {
    position: relative;
    display: flex;
    gap: 7px;
    margin: 14px 0 16px;
    padding-bottom: 3px;
    overflow-x: auto;
    scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
    display: none;
}

.settings-tabs button {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(132,199,255,.18);
    border-radius: 12px;
    color: rgba(220,238,255,.72);
    background: rgba(8,52,100,.28);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.settings-tabs button.active {
    color: #fff;
    border-color: rgba(107,190,255,.55);
    background: rgba(30,112,199,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

[data-settings-panel][hidden] {
    display: none !important;
}

.settings-secret {
    margin-top: 12px;
    font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing: .08em;
    word-break: break-all;
}

.history-list {
    grid-template-columns: 1fr !important;
    gap: 10px;
}

.history-card {
    padding: 14px;
    border-radius: 17px;
}

.history-card:has(.history-resend-form) .history-actions,
.history-actions {
    grid-template-columns: 1fr 1fr !important;
}

.history-resend-form {
    display: block;
    grid-column: 1 / -1;
}

.history-resend-form .secondary-button {
    width: 100%;
}

.history-reference {
    font-size: 11px;
}

.history-main {
    margin-top: 11px;
    padding-top: 11px;
}

.history-description {
    margin-top: 9px;
}

.pagination {
    margin-top: 14px;
}

@media (max-width: 390px) {
    .dashboard-grid-compact {
        gap: 7px;
    }

    .dashboard-grid-compact .action-card {
        min-height: 102px;
        padding: 12px 5px;
        border-radius: 17px;
    }

    .dashboard-grid-compact .action-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .dashboard-grid-compact .action-title {
        font-size: 11px;
    }
}


/* VLPag v0.3.15.1 - alinhamento dos atalhos de clientes */
.customer-quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: 10px 0 14px;
}

.customer-quick-links .text-link {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px 10px;
    min-height: 44px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    border-radius: 16px;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .customer-quick-links {
        grid-template-columns: 1fr;
    }
}

.compact-primary-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 12px;
    text-decoration: none;
}

.customer-list {
    display: grid;
    gap: 10px;
}

.customer-card {
    padding: 14px;
    border: 1px solid rgba(132,199,255,.15);
    border-radius: 17px;
    background:
        linear-gradient(145deg,rgba(7,45,86,.64),rgba(4,32,63,.52));
}

.customer-card-main {
    display: grid;
    gap: 4px;
}

.customer-card-main strong {
    color: #f1f8ff;
    font-size: 13px;
}

.customer-card-main span {
    color: #c8e1f6;
    font-size: 11px;
    word-break: break-word;
}

.customer-card-main small {
    color: rgba(190,215,239,.58);
    font-size: 9px;
}

.customer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.customer-delete-link {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    color: #ffc9c9;
    border: 1px solid rgba(255,118,118,.18);
    border-radius: 12px;
    background: rgba(104,29,43,.20);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}


/* VLPag v0.3.16 - detalhes da cobrança */
.history-actions-v316 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

.history-actions-v316 .history-details-link {
    grid-column: 1 / -1;
}

.invoice-detail-summary {
    display: grid;
    gap: 13px;
}

.invoice-detail-head,
.detail-section-title-row,
.attempt-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.invoice-detail-head .payment-status,
.attempt-card-head .payment-status {
    flex: 0 0 auto;
    margin: 0;
}

.detail-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: rgba(190,215,239,.58);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detail-reference {
    display: block;
    color: #f1f8ff;
    font-size: 12px;
    word-break: break-all;
}

.detail-receipt-grid {
    margin-top: 0;
}

.detail-value-list {
    display: grid;
    gap: 8px;
}

.detail-value-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(132,199,255,.10);
    border-radius: 12px;
    background: rgba(4,31,60,.36);
}

.detail-value-list span {
    color: rgba(190,215,239,.62);
    font-size: 10px;
}

.detail-value-list strong {
    color: #f1f8ff;
    font-size: 12px;
}

.detail-value-list .total {
    border-color: rgba(87,177,255,.22);
    background: rgba(15,75,135,.34);
}

.detail-value-list .total strong {
    font-size: 15px;
}

.detail-link-actions {
    grid-template-columns: 1fr 1fr;
}

.detail-link-actions .charge-action-link {
    grid-column: 1 / -1;
}

.detail-email-form {
    margin-top: 10px;
}

.detail-attempt-count {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(132,199,255,.16);
    border-radius: 999px;
    color: #cfe8fb;
    background: rgba(15,70,125,.32);
    font-size: 10px;
    font-weight: 800;
}

.attempt-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.attempt-card {
    padding: 12px;
    border: 1px solid rgba(132,199,255,.12);
    border-radius: 14px;
    background: rgba(4,31,60,.38);
}

.attempt-card-head > div {
    display: grid;
    gap: 3px;
}

.attempt-card-head strong {
    color: #f1f8ff;
    font-size: 11px;
}

.attempt-card-head span:not(.payment-status) {
    color: rgba(190,215,239,.55);
    font-size: 9px;
}

.attempt-meta {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 10px;
}

.attempt-meta > div {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 10px;
    background: rgba(5,39,75,.34);
}

.attempt-meta span {
    color: rgba(190,215,239,.54);
    font-size: 8px;
    text-transform: uppercase;
}

.attempt-meta strong {
    color: #eaf5ff;
    font-size: 10px;
}

.attempt-open-link {
    min-height: 40px;
    margin-top: 9px;
    font-size: 11px;
}

@media (max-width: 420px) {
    .detail-link-actions,
    .attempt-meta {
        grid-template-columns: 1fr;
    }

    .detail-link-actions .charge-action-link {
        grid-column: auto;
    }
}


/* VLPag v0.3.17 - detalhes em abas e tarifa obrigatória */
.invoice-detail-topline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(132,199,255,.15);
    border-radius: 16px;
    background: rgba(4,34,67,.42);
}

.invoice-detail-topline > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.invoice-detail-topline .payment-status {
    flex: 0 0 auto;
    margin: 0;
}

.detail-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
    margin: 0 0 14px;
}

.detail-tabs button {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    min-height: 40px;
    padding: 8px 5px;
    border: 1px solid rgba(132,199,255,.18);
    border-radius: 12px;
    color: rgba(220,238,255,.72);
    background: rgba(8,52,100,.28);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.detail-tabs button.active {
    color: #fff;
    border-color: rgba(107,190,255,.55);
    background: rgba(30,112,199,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

[data-detail-panel][hidden] {
    display: none !important;
}

.detail-value-list .fee-negative {
    color: #ffd1d1;
}

.detail-value-list .net-total {
    border-color: rgba(91,220,145,.24);
    background: rgba(26,104,70,.22);
}

.detail-value-list .net-total strong {
    color: #c7f6d7;
}

@media (max-width: 390px) {
    .detail-tabs {
        gap: 5px;
    }

    .detail-tabs button {
        padding: 8px 3px;
        font-size: 9px;
    }
}


/* VLPag v0.3.17.1 - alinhamento dos botões finais em Detalhes */
.detail-bottom-actions {
    margin-top: 16px;
    padding-top: 4px;
    clear: both;
}

.detail-bottom-actions .text-link {
    min-height: 44px;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .detail-bottom-actions {
        margin-top: 14px;
    }
}


/* VLPag v0.4.1 - settings mobile alignment */
.settings-shell {
    width: 100%;
    max-width: 560px;
}
.settings-panel {
    width: 100%;
}
.settings-brand {
    width: 100%;
    align-items: center;
    justify-content: center;
}
.settings-panel .nav-row {
    justify-content: center;
}
.settings-tabs {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin: 14px auto 16px;
}
.settings-tabs button {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 100px;
    text-align: center;
}
@media (max-width: 480px) {
    .settings-tabs button {
        flex: 1 1 calc(50% - 8px);
    }
}
@media (max-width: 380px) {
    .settings-tabs button {
        flex: 1 1 100%;
    }
}


/* VLPag v0.5.1 - preview credenciais PagHiper */
.paghiper-credential-preview {
    display: grid;
    gap: 8px;
    margin: 2px 0 16px;
    padding: 12px;
    border: 1px solid rgba(132,199,255,.14);
    border-radius: 15px;
    background: rgba(5,39,75,.34);
}
.credential-preview-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
}
.credential-preview-row span {
    color: rgba(188,215,239,.72);
    font-size: 10px;
    font-weight: 700;
}
.credential-preview-row strong {
    color: #eef8ff;
    font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size: 11px;
    word-break: break-all;
    text-align: right;
}
.paghiper-credential-preview small {
    color: rgba(172,202,229,.55);
    font-size: 9px;
    line-height: 1.4;
}


/* VLPag v0.5.2 - icone oficial do portal */
.brand-icon.official-vlpag-icon {
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.brand-icon.official-vlpag-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
}
.settings-brand .brand-icon.official-vlpag-icon img,
.history-brand .brand-icon.official-vlpag-icon img,
.admin-brand .brand-icon.official-vlpag-icon img {
    width: 100%;
    height: 100%;
}


/* ==========================================================
   VLPag FINAL THEME v0.5.5.0
   Sem azul. Apenas tonalidades escuras aprovadas.
   ========================================================== */

:root {
    --page-top: #080D13 !important;
    --page-bottom: #080D13 !important;
    --card: #111820 !important;
    --card-border: #151E28 !important;
    --text: #FFFFFF !important;
    --muted: rgba(255,255,255,.66) !important;
    --button-border: #151E28 !important;
    --button-shadow: rgba(0,0,0,.26) !important;
    --field: #121A23 !important;
    --field-border: #151E28 !important;
}

html, body {
    background: #080D13 !important;
    color: #FFFFFF !important;
}

.panel,
.auth-card,
.settings-card,
.section-card,
.history-card,
.credential-status,
.public-summary,
.payment-card {
    background: linear-gradient(180deg, #151E28 0%, #111820 28%, #111820 100%) !important;
    border-color: #151E28 !important;
    box-shadow:
        0 22px 58px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.panel::before {
    background: rgba(255,255,255,.025) !important;
}

.brand-icon {
    width: 70px !important;
    height: 70px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    padding: 0 !important;
    border: 1px solid #151E28 !important;
    border-radius: 22px !important;
    background: #171F29 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.34) !important;
    overflow: hidden !important;
}

.brand-icon > svg,
.brand-icon > img {
    display: none !important;
}

.brand-icon::before {
    content: "" !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    background: url('/vlpag/assets/vlpag-card-symbol.svg?v=0550') center/contain no-repeat !important;
}

.primary-button,
.btn.primary,
button.primary,
input[type="submit"] {
    color: #FFFFFF !important;
    border-color: #151E28 !important;
    background: #171F29 !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.primary-button:hover,
.btn.primary:hover,
button.primary:hover,
input[type="submit"]:hover {
    background: #1C2733 !important;
    border-color: #1C2733 !important;
}

.secondary-button,
.btn.secondary,
.text-link,
.settings-tabs button {
    color: #FFFFFF !important;
    border-color: #151E28 !important;
    background: #121A23 !important;
    box-shadow: none !important;
}

.secondary-button:hover,
.btn.secondary:hover,
.text-link:hover,
.settings-tabs button:hover {
    background: #1C2733 !important;
    border-color: #1C2733 !important;
}

.settings-tabs button.active {
    color: #FFFFFF !important;
    border-color: #1C2733 !important;
    background: #1C2733 !important;
}

.action-card,
.shortcut-card,
.customer-card,
.invoice-card {
    color: #FFFFFF !important;
    border-color: #151E28 !important;
    background: #171F29 !important;
    box-shadow: none !important;
}

.action-card:hover,
.shortcut-card:hover,
.customer-card:hover,
.invoice-card:hover {
    background: #1C2733 !important;
    border-color: #1C2733 !important;
}

.action-icon,
.shortcut-icon {
    color: #FFFFFF !important;
    border: 1px solid #151E28 !important;
    background: #121A23 !important;
    box-shadow: none !important;
}

.field input,
.field select,
.field textarea,
input:not([type="submit"]),
select,
textarea {
    color: #FFFFFF !important;
    background: #121A23 !important;
    border-color: #151E28 !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input:not([type="submit"]):focus,
select:focus,
textarea:focus {
    border-color: #1C2733 !important;
    background: #121A23 !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.025) !important;
}

.message {
    color: #FFFFFF !important;
    background: #121A23 !important;
    border-color: #151E28 !important;
}

/* END VLPag FINAL THEME v0.5.5.0 */


/* ==========================================================
   VLPag BUTTON COLORS v0.5.5.1
   Tons fechados e discretos.
   ========================================================== */

/* Ação principal */
.primary-button,
.btn.primary,
button.primary,
input[type="submit"] {
    color: #FFFFFF !important;
    background: #244A3D !important;
    border-color: #356554 !important;
    box-shadow:
        0 9px 22px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.primary-button:hover,
.btn.primary:hover,
button.primary:hover,
input[type="submit"]:hover {
    background: #2D5A49 !important;
    border-color: #356554 !important;
}

/* Secundários */
.secondary-button,
.btn.secondary,
.text-link {
    color: #FFFFFF !important;
    background: #293B4A !important;
    border-color: #3B5264 !important;
}
.secondary-button:hover,
.btn.secondary:hover,
.text-link:hover {
    background: #33495A !important;
    border-color: #3B5264 !important;
}

/* Abas */
.settings-tabs button {
    color: rgba(255,255,255,.78) !important;
    background: #121A23 !important;
    border-color: #151E28 !important;
}
.settings-tabs button:hover {
    color: #FFFFFF !important;
    background: #3B3047 !important;
    border-color: #554461 !important;
}
.settings-tabs button.active {
    color: #FFFFFF !important;
    background: #493A57 !important;
    border-color: #554461 !important;
}

/* Home: diferencia os três atalhos sem saturação. */
.action-card:nth-child(1),
.shortcut-card:nth-child(1) {
    background: #244A3D !important;
    border-color: #356554 !important;
}
.action-card:nth-child(1):hover,
.shortcut-card:nth-child(1):hover {
    background: #2D5A49 !important;
}

.action-card:nth-child(2),
.shortcut-card:nth-child(2) {
    background: #293B4A !important;
    border-color: #3B5264 !important;
}
.action-card:nth-child(2):hover,
.shortcut-card:nth-child(2):hover {
    background: #33495A !important;
}

.action-card:nth-child(3),
.shortcut-card:nth-child(3) {
    background: #3B3047 !important;
    border-color: #554461 !important;
}
.action-card:nth-child(3):hover,
.shortcut-card:nth-child(3):hover {
    background: #493A57 !important;
}

/* Ícones internos dos atalhos: tom mais escuro do próprio card. */
.action-card:nth-child(1) .action-icon,
.shortcut-card:nth-child(1) .shortcut-icon {
    background: #1D3A31 !important;
    border-color: #356554 !important;
}
.action-card:nth-child(2) .action-icon,
.shortcut-card:nth-child(2) .shortcut-icon {
    background: #22313D !important;
    border-color: #3B5264 !important;
}
.action-card:nth-child(3) .action-icon,
.shortcut-card:nth-child(3) .shortcut-icon {
    background: #30273A !important;
    border-color: #554461 !important;
}

/* Botões de aviso/reemissão/atenção quando existirem. */
.btn-warning,
.button-warning,
.warning-button {
    color: #FFFFFF !important;
    background: #4B3D27 !important;
    border-color: #665437 !important;
}
.btn-warning:hover,
.button-warning:hover,
.warning-button:hover {
    background: #5A4930 !important;
}

/* Ações destrutivas. */
.btn-danger,
.button-danger,
.danger-button,
.delete-button {
    color: #FFFFFF !important;
    background: #482C32 !important;
    border-color: #634047 !important;
}
.btn-danger:hover,
.button-danger:hover,
.danger-button:hover,
.delete-button:hover {
    background: #57363D !important;
}

/* Botões utilitários / gerenciamento. */
.btn-info,
.button-info,
.manage-button {
    color: #FFFFFF !important;
    background: #263F43 !important;
    border-color: #39595E !important;
}
.btn-info:hover,
.button-info:hover,
.manage-button:hover {
    background: #2E4C51 !important;
}

/* Mantém painéis e campos escuros. */
.panel,
.auth-card,
.settings-card,
.section-card,
.history-card,
.credential-status,
.public-summary,
.payment-card {
    background: linear-gradient(180deg, #151E28 0%, #111820 28%, #111820 100%) !important;
}

.field input,
.field select,
.field textarea,
input:not([type="submit"]),
select,
textarea {
    background: #121A23 !important;
}

/* END VLPag BUTTON COLORS v0.5.5.1 */


/* VLPag CARD ICON v0.5.5.3 — SVG de cartão exato do usuário */
.brand-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.brand-icon > svg,
.brand-icon > img {
    display: none !important;
    opacity: 0 !important;
}

.brand-icon::before {
    content: "" !important;
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    background: url('/vlpag/assets/vlpag-icon-v7.svg?v=7') center/contain no-repeat !important;
}

/* VLPAG-V063-VIVID-START */
/* Mais vivo sem neon; mantém o fundo e a identidade escura do VLPag. */
.primary-button,
.btn.primary {
    border-color: rgba(111, 187, 255, .68) !important;
    background: linear-gradient(145deg, #287fd8, #185fae) !important;
    box-shadow:
        0 12px 28px rgba(19, 99, 190, .34),
        inset 0 1px 0 rgba(255,255,255,.19) !important;
}

.secondary-button,
.btn.secondary {
    border-color: rgba(102, 162, 214, .48) !important;
    background: linear-gradient(145deg, #315d7e, #27485f) !important;
    box-shadow:
        0 9px 22px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.danger-button {
    color: #fff0f2 !important;
    border-color: rgba(209, 105, 124, .54) !important;
    background: linear-gradient(145deg, #713c48, #562d36) !important;
}

.danger-button:hover {
    background: linear-gradient(145deg, #814550, #63323d) !important;
}

.action-card {
    border-color: rgba(105, 168, 224, .34) !important;
    background: linear-gradient(145deg, #254764, #1b344a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 12px 28px rgba(0,0,0,.18) !important;
}

.action-card:hover {
    border-color: rgba(126, 194, 255, .58) !important;
    background: linear-gradient(145deg, #2c5678, #20405a) !important;
}

.action-icon {
    background: linear-gradient(145deg, #3b98e8, #226fb8) !important;
    box-shadow: 0 8px 22px rgba(29, 113, 194, .32) !important;
}

.text-link {
    border-color: rgba(91, 150, 203, .32) !important;
    background: rgba(37, 78, 111, .58) !important;
}

.text-link:hover {
    background: rgba(48, 98, 139, .72) !important;
}

.vlpag-tab.is-active {
    background: rgba(52, 137, 224, .25) !important;
    border-color: rgba(104, 177, 249, .66) !important;
    color: #8bc4ff !important;
}
/* VLPAG-V063-VIVID-END */