body {
    background: #f6f7fb;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(99,102,241,0.15), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(168,85,247,0.12), transparent 40%),
        linear-gradient(180deg, #f8fafc, #ffffff);
}
/* Garante que a estrutura suporte o rodapé no fundo */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* O elemento principal cresce para ocupar o espaço, 
   mas sem forçar alinhamento central */
main, .content-wrapper {
    flex: 1 0 auto;
}

/* Garante que o rodapé não encolha */
footer {
    flex-shrink: 0;
}
.navbar{
    background: transparent !important;
}

.gradient {
    background: linear-gradient(135deg, oklch(55% .22 265), oklch(70% .18 290));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gradient {
    background: linear-gradient(135deg, oklch(55% .22 265), oklch(70% .18 290));
    border: none;
    color: #fff;
}

.btn-gradient:hover {
    opacity: .95;
    color: #fff;
}

.icon_feat{
    width:40px;
    height:40px;
    background:#6366f1;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.btn_copy{
    width:30px;
    height:30px;
    font-size:18px;
    color:#6366f1;
    background:transparent;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor: pointer;
    transition: background 0.25s ease-in-out, color 0.3s ease-in-out;
}

.btn_copy:hover{
    color:white !important;
    background:#6366f1;
}

.cs_link{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 18px;
    display: block;
}

.cs_input {
    font-size: 14px;
}

.btn_criar_conta {
    background: linear-gradient(135deg, oklch(55% .22 265), oklch(70% .18 290));
}

.form-control::placeholder {
    font-size: 14px;
}

.cs_h1 {
    font-size: 3rem;
    font-weight: 700;
}

@media (min-width: 576px) {
    .cs_h1 {
        font-size: 3.25rem;
    }
}

.text_font_xxs {
    font-size: 0.6rem !important;
    line-height: 0.6rem;
}

.text_font_xs {
    font-size: 0.75rem !important;
    line-height: 0.8rem;
}

.text_font_sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem;
}

.text_font_base {
    font-size: 1rem !important;
    line-height: 1.5rem;
}

.text_font_lg {
    font-size: 1.125rem !important;
}

/* ***************** */
/* borda RGB animada */
/* ***************** */
.rgb-border {
    position: relative;
    border-radius: 14px;
    z-index: 0;
}

/* camada da borda animada */
.rgb-border::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #6366f1,
        #22c55e,
        #06b6d4,
        #a855f7,
        #f59e0b,
        #ef4444,
        #6366f1
        );
    background-size: 300% 300%;
    animation: rgbMove 6s linear infinite;

    z-index: -1;

    filter: blur(3px);
}

/* fundo interno */
.rgb-border::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: white;
    border-radius: inherit;
    z-index: -1;
}

/* animação */
@keyframes rgbMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* */
.rgb-glow-border {
    position: relative;
    border-radius: 12px;
    z-index: 0;
}

/* BORDA FINA */
.rgb-glow-border::before {
    content: "";
    position: absolute;
    inset: -1px; /* 👈 bem fino (antes era -2px ou -3px) */
    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #6366f1,
        #22c55e,
        #06b6d4,
        #a855f7,
        #f59e0b,
        #ef4444,
        #6366f1
        );

    background-size: 300% 300%;
    animation: rgbMove 6s ease-in-out infinite;

    filter: blur(3px); /* 👈 glow bem leve */
    opacity: 0.6;      /* 👈 reduz “forte neon” */
    z-index: -1;
}

/* fundo interno */
.rgb-glow-border::after {
    content: "";
    position: absolute;
    inset: 1px; /* 👈 deixa a borda mais “fina visualmente” */
    background: inherit;
    border-radius: inherit;
    z-index: -1;
}

@keyframes rgbMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}