/* VLPag v0.5.4.8 — paleta oficial do portal VL Apps */

:root {
    color-scheme: dark;
    --page-top: #06152a;
    --page-bottom: #0b2d52;
    --card: rgba(8,31,58,.94);
    --card-border: rgba(122,184,255,.20);
    --text: #f7fbff;
    --muted: #9db8d3;
    --button-border: rgba(132,199,255,.32);
    --button-shadow: rgba(0,108,230,.32);
}

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

body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(41,139,255,.20), transparent 38%),
        linear-gradient(155deg, var(--page-top), var(--page-bottom)) !important;
}

.panel,
.auth-card,
.settings-card,
.section-card {
    border-color: var(--card-border) !important;
    background: var(--card) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(16px);
}

.brand-icon {
    width: 70px !important;
    height: 70px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    padding: 0 !important;
    border: 1px solid rgba(149,210,255,.34) !important;
    border-radius: 22px !important;
    color: #f7fbff !important;
    background: linear-gradient(145deg, #36a2ff, #1266da) !important;
    box-shadow:
        0 12px 28px rgba(20,116,224,.38),
        inset 0 1px 0 rgba(255,255,255,.26) !important;
    overflow: hidden !important;
}

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

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

.action,
button.primary,
.button.primary,
.btn-primary,
input[type="submit"] {
    color: #f7fbff !important;
    border-color: rgba(132,199,255,.32) !important;
    background:
        linear-gradient(
            145deg,
            rgba(35,127,226,.98),
            rgba(17,91,181,.98)
        ) !important;
    box-shadow:
        0 12px 26px rgba(0,108,230,.32),
        inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.action-icon {
    color: #f7fbff !important;
    border-color: rgba(255,255,255,.24) !important;
    background: rgba(2,35,73,.28) !important;
}

.subtitle,
.muted,
small {
    color: var(--muted) !important;
}