* {
    box-sizing: border-box;
}

:root {
    --bg: #090b10;
    --bg2: #0e1118;
    --card: #131720;
    --card2: #171c27;
    --border: #242b39;
    --text: #f4f6fb;
    --muted: #8f98aa;
    --green: #35d07f;
    --red: #ff5d68;
    --yellow: #ffc857;
    --blue: #5f8cff;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(95,140,255,.08), transparent 30%),
        var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

.topo {
    height: 76px;
    border-bottom: 1px solid var(--border);
    background: rgba(9, 11, 16, .94);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: sticky;
    top: 0;
    z-index: 50;
}

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

.logo > span {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #5f8cff, #744cff);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.logo strong {
    display: block;
}

.logo small {
    color: var(--muted);
}

nav {
    display: flex;
    gap: 8px;
}

nav a {
    padding: 10px 13px;
    border-radius: 9px;
    color: #c8ced9;
    font-size: 14px;
}

nav a:hover {
    background: var(--card);
    color: white;
}

.container {
    max-width: 1250px;
    margin: auto;
    padding: 38px 22px 80px;
}

.hero {
    min-height: 330px;
    display: flex;
    align-items: center;
    padding: 55px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at 85% 20%, rgba(95,140,255,.18), transparent 35%),
        linear-gradient(135deg, #121723, #0d1017);
    margin-bottom: 46px;
}

.tag {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(38px, 5vw, 68px);
    line-height: .98;
    margin: 0 0 20px;
    letter-spacing: -2px;
}

.hero p {
    max-width: 600px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

.botoes {
    margin-top: 28px;
    display: flex;
    gap: 12px;
}

.btn {
    border: 1px solid var(--border);
    background: var(--card);
    padding: 13px 19px;
    border-radius: 10px;
    font-weight: 700;
}

.btn.principal {
    background: #5f8cff;
    border-color: #5f8cff;
}

h2 {
    margin-top: 42px;
    margin-bottom: 18px;
    font-size: 23px;
}

.page-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 20px;
}

.page-title h1 {
    margin: 0;
    font-size: 36px;
}

.page-title p {
    color: var(--muted);
    margin: 8px 0 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.stat {
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.stat span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.stat strong {
    font-size: 24px;
}

.verde {
    color: var(--green) !important;
}

.vermelho {
    color: var(--red) !important;
}

.amarelo {
    color: var(--yellow) !important;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.sinal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    transition: transform .15s ease, border-color .15s ease;
}

.sinal:hover {
    transform: translateY(-2px);
    border-color: #39445b;
}

.sinal-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.modalidade {
    font-weight: 700;
    font-size: 13px;
    text-transform: capitalize;
}

.sinal > small {
    color: var(--muted);
}

.sinal h3 {
    margin: 8px 0 20px;
    font-size: 19px;
    line-height: 1.4;
}

.sinal h3 span {
    color: var(--yellow);
    font-size: 11px;
    margin: 0 4px;
}

.estado {
    font-size: 11px;
    font-weight: 900;
    padding: 7px 9px;
    border-radius: 8px;
}

.estado.win {
    background: rgba(53,208,127,.12);
    color: var(--green);
}

.estado.loss {
    background: rgba(255,93,104,.12);
    color: var(--red);
}

.estado.void {
    background: rgba(95,140,255,.12);
    color: #80a2ff;
}

.estado.pendente {
    background: rgba(255,200,87,.12);
    color: var(--yellow);
}

.linha {
    margin: 13px 0;
}

.linha span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.linha strong {
    font-size: 14px;
}

.dados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding-top: 16px;
    gap: 8px;
}

.dados small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 5px;
}

.dados b {
    font-size: 14px;
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
}

.filtros a {
    padding: 9px 13px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13px;
}

.filtros a:hover {
    border-color: #58647e;
}

.tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}

th {
    color: var(--muted);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 15px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

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

.form-data {
    display: flex;
    gap: 10px;
    align-items: center;
}

input[type="date"],
input[type="month"] {
    background: var(--card);
    color: white;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px 12px;
}

button {
    background: var(--blue);
    color: white;
    border: 0;
    border-radius: 9px;
    padding: 11px 15px;
    cursor: pointer;
    font-weight: 700;
}

.vazio {
    text-align: center;
    color: var(--muted);
    padding: 80px 20px;
    border: 1px dashed var(--border);
    border-radius: 15px;
}

footer {
    text-align: center;
    border-top: 1px solid var(--border);
    padding: 28px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 1000px) {
    .stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

    nav {
        display: none;
    }
}

@media (max-width: 650px) {
    .container {
        padding: 25px 15px 60px;
    }

    .hero {
        padding: 32px 22px;
        min-height: 290px;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .page-title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   ATUALIZAÇÕES EM TEMPO REAL
   ========================================================= */

.live-toast {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    min-width: 310px;
    max-width: 420px;

    padding: 16px 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    background: rgba(19, 23, 32, .97);
    border: 1px solid #35405a;
    border-radius: 14px;

    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);

    opacity: 0;
    transform: translateY(25px);
    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.live-toast.mostrar {
    opacity: 1;
    transform: translateY(0);
}

.live-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    flex: 0 0 42px;

    border-radius: 11px;
    background: #202737;

    font-size: 20px;
}

.live-toast strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.live-toast span {
    display: block;
    color: #9aa4b8;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 650px) {
    .live-toast {
        left: 15px;
        right: 15px;
        bottom: 15px;

        min-width: 0;
        max-width: none;
    }
}

/* =========================================================
   FUNDO DIOGO — TODAS AS PÁGINAS
   ========================================================= */

body {
    position: relative;
    background: #090b10;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background-image:
        linear-gradient(
            rgba(5, 8, 14, 0.83),
            rgba(5, 8, 14, 0.91)
        ),
        url("/static/diogo-fundo.png");

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 92vh;

    pointer-events: none;
}

.topo {
    background: rgba(9, 11, 16, 0.88);
}

.sinal,
.stat,
.tabela-wrap,
table {
    background: rgba(19, 23, 32, 0.88);
    backdrop-filter: blur(5px);
}

.hero {
    background:
        linear-gradient(
            135deg,
            rgba(18, 23, 35, 0.86),
            rgba(13, 16, 23, 0.86)
        );
}

@media (max-width: 650px) {
    body::before {
        background-size: auto 75vh;
        background-position: center bottom;
    }
}


/* =========================================================
   EFEITOS DE FUNDO PREMIUM
   ========================================================= */

/* Desliga o fundo antigo para não tapar as novas camadas */
body::before {
    display: none !important;
}

body {
    background: #050914 !important;
    position: relative;
    overflow-x: hidden;
}

.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Tua imagem */
.bg-image {
    position: absolute;
    inset: 0;

    background-image: url("/static/diogo-fundo.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 90vh;

    opacity: 0.42;
    filter:
        saturate(0.9)
        contrast(1.08);
}

/* Azul escuro geral */
.bg-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(3, 10, 28, 0.35),
            rgba(3, 9, 22, 0.72)
        ),
        radial-gradient(
            circle at 50% 15%,
            rgba(15, 87, 255, 0.25),
            transparent 42%
        );
}

/* Luz azul esquerda/direita */
.bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(90px);
}

.bg-glow-left {
    left: -260px;
    top: -210px;

    background:
        radial-gradient(
            circle,
            rgba(49, 132, 255, 0.85),
            rgba(15, 77, 210, 0.25) 38%,
            transparent 68%
        );
}

.bg-glow-right {
    right: -260px;
    top: -210px;

    background:
        radial-gradient(
            circle,
            rgba(49, 132, 255, 0.85),
            rgba(15, 77, 210, 0.25) 38%,
            transparent 68%
        );
}

/* Fumo/luz laranja */
.bg-smoke {
    position: absolute;
    width: 650px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.55;
}

.bg-smoke-left {
    left: -300px;
    bottom: -80px;

    background:
        radial-gradient(
            circle,
            rgba(255, 102, 0, 0.95),
            rgba(255, 91, 0, 0.32) 40%,
            transparent 70%
        );
}

.bg-smoke-right {
    right: -300px;
    bottom: -80px;

    background:
        radial-gradient(
            circle,
            rgba(255, 102, 0, 0.95),
            rgba(255, 91, 0, 0.32) 40%,
            transparent 70%
        );
}

/* Escurecimento dos cantos */
.bg-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, 0.28) 72%,
            rgba(0, 0, 0, 0.65) 100%
        );
}

/* Conteúdo fica por cima */
.topo,
.container,
footer {
    position: relative;
    z-index: 2;
}

/* Cards com vidro escuro */
.sinal,
.stat,
.tabela-wrap,
table {
    background: rgba(13, 19, 31, 0.82) !important;
    backdrop-filter: blur(12px);
}

/* Topo transparente */
.topo {
    background: rgba(5, 9, 17, 0.82) !important;
    backdrop-filter: blur(12px);
}

/* Mobile */
@media (max-width: 650px) {
    .bg-image {
        background-size: auto 72vh;
        background-position: center bottom;
    }

    .bg-glow {
        width: 350px;
        height: 350px;
    }

    .bg-smoke {
        width: 380px;
        height: 350px;
    }
}


.logo-img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 0 18px rgba(0, 140, 255, 0.25);
}


/* =========================================================
   CARROSSEL ÚLTIMOS SINAIS
   ========================================================= */

.sinais-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 4px 0 18px;
}

/* pequeno fade nos lados */
.sinais-slider::before,
.sinais-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 75px;
    z-index: 5;
    pointer-events: none;
}

.sinais-slider::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(5, 9, 20, 0.9),
        transparent
    );
}

.sinais-slider::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(5, 9, 20, 0.9),
        transparent
    );
}

.sinais-track {
    display: flex;
    gap: 17px;
    width: max-content;

    animation: sinaisScroll 38s linear infinite;
}

.sinal-slide {
    width: 355px;
    min-width: 355px;
}

/* para quando passa o rato por cima */
.sinais-slider:hover .sinais-track {
    animation-play-state: paused;
}

@keyframes sinaisScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 8.5px));
    }
}

@media (max-width: 650px) {

    .sinal-slide {
        width: 290px;
        min-width: 290px;
    }

    .sinais-track {
        animation-duration: 30s;
    }

    .sinais-slider::before,
    .sinais-slider::after {
        width: 30px;
    }
}


/* LINK CASA RECOMENDADA */

.casa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 3px;
    padding: 8px 12px;

    border-radius: 8px;

    background: rgba(95, 140, 255, 0.12);
    border: 1px solid rgba(95, 140, 255, 0.25);

    color: #8eb0ff;
    font-size: 13px;
    font-weight: 800;

    transition: .2s ease;
}

.casa-link:hover {
    background: rgba(95, 140, 255, 0.22);
    border-color: rgba(95, 140, 255, 0.55);
    color: white;
    transform: translateY(-1px);
}


/* =========================================================
   AUTENTICAÇÃO
   ========================================================= */

.nav-registo {
    background: #5f8cff;
    color: white !important;
}

.nav-user {
    color: #8eb0ff !important;
    font-weight: 800;
}

.auth-page {
    min-height: calc(100vh - 190px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    padding: 34px;

    background: rgba(12, 18, 30, 0.86);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;

    backdrop-filter: blur(16px);
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
}

.auth-logo {
    text-align: center;
    margin-bottom: 18px;
}

.auth-logo img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
}

.auth-card h1 {
    text-align: center;
    margin: 0 0 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--muted);
    margin-bottom: 26px;
}

.auth-card label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #b9c1d1;
    margin: 15px 0 7px;
}

.auth-card input {
    width: 100%;
    padding: 13px 14px;

    background: rgba(5, 9, 17, .75);
    border: 1px solid var(--border);
    border-radius: 10px;

    color: white;
    outline: none;
}

.auth-card input:focus {
    border-color: #5f8cff;
}

.auth-submit {
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    font-size: 14px;
}

.auth-erro {
    background: rgba(255,93,104,.12);
    border: 1px solid rgba(255,93,104,.25);
    color: #ff8991;

    padding: 11px 13px;
    border-radius: 9px;
    font-size: 13px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border);
}

.google-btn {
    width: 100%;
    background: white;
    color: #222;
    padding: 13px;
    opacity: .65;
}

.auth-bottom {
    margin: 24px 0 0 !important;
    font-size: 13px;
}

.auth-bottom a {
    color: #7ba0ff;
    font-weight: 800;
}

.perfil-box {
    max-width: 700px;
    display: flex;
    gap: 22px;
    align-items: center;

    padding: 30px;

    background: rgba(13, 19, 31, .82);
    border: 1px solid var(--border);
    border-radius: 18px;
    backdrop-filter: blur(12px);
}

.perfil-avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: linear-gradient(135deg, #5f8cff, #744cff);

    font-size: 32px;
    font-weight: 900;
}

.perfil-box h1 {
    margin: 4px 0;
}

.perfil-box p,
.perfil-box small {
    color: var(--muted);
}

.perfil-acoes {
    margin-top: 20px;
}

.logout-btn {
    display: inline-block;
    padding: 11px 16px;

    background: rgba(255,93,104,.12);
    border: 1px solid rgba(255,93,104,.25);
    border-radius: 9px;

    color: #ff7d86;
    font-weight: 800;
}