:root {
    --fundo:#020308;
    --painel:#090b1d;
    --cartao:#0d1025;
    --borda:#232852;
    --texto:#f4f5ff;
    --suave:#a6acca;
    --roxo:#8257ff;
    --azul:#20b8ff;
    --verde:#46d7a4;
    --vermelho:#ff747e;
}
* {
    box-sizing:border-box;
}
body {
    min-height:100vh;
    margin:0;
    background:radial-gradient(circle at top right,#100d31 0,var(--fundo) 42%);
    color:var(--texto);
    font-family:Arial,Helvetica,sans-serif;
}
a {
    color:inherit;
    text-decoration:none;
}
/* Estrutura do painel depois do login. */
.layout {
    display:flex;
    min-height:100vh;
}
.barra-lateral {
    display:flex;
    flex-direction:column;
    width:240px;
    min-height:100vh;
    padding:26px 16px;
    background:rgba(3,4,12,.97);
    border-right:1px solid var(--borda);
}
.marca {
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--texto);
    font-size:19px;
    font-weight:bold;
}
.barra-lateral .marca {
    margin:0 8px 45px;
}
.marca small {
    display:block;
    margin-top:3px;
    color:var(--suave);
    font-size:11px;
    font-weight:normal;
}
.marca-icone {
    display:grid;
    width:37px;
    height:37px;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,var(--roxo),var(--azul));
    color:white;
}
.titulo-menu {
    margin:0 11px 10px;
    color:#71789f;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
}
nav a {
    display:block;
    margin:3px 0;
    padding:11px 12px;
    border-radius:8px;
    color:#c5c8df;
    font-size:14px;
}
nav a:hover {
    background:#121631;
    color:white;
}
.nota-lateral {
    margin-top:auto;
    padding:13px 11px;
    color:var(--suave);
    font-size:12px;
}
.ponto {
    display:inline-block;
    width:8px;
    height:8px;
    margin-right:6px;
    border-radius:50%;
    background:var(--verde);
    box-shadow:0 0 12px var(--verde);
}
.conteudo {
    width:min(1180px,calc(100% - 240px));
    margin:0 auto;
    padding:34px 42px 55px;
}
.topo,.cabecalho-secao,.introducao {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.topo {
    margin-bottom:30px;
}
.topo h1 {
    margin:4px 0 0;
    font-size:28px;
}
.texto-superior,.etiqueta {
    margin:0;
    color:var(--azul);
    font-size:10px;
    font-weight:bold;
    letter-spacing:1.35px;
}
.area-utilizador {
    display:flex;
    align-items:center;
    gap:10px;
}
.perfil-local {
    padding:9px 13px;
    border:1px solid var(--borda);
    border-radius:99px;
    color:var(--suave);
    font-size:12px;
}
.link-sair {
    padding:0;
    border:0;
    background:transparent;
    color:var(--suave);
    cursor:pointer;
    font:inherit;
    font-size:12px;
}
.link-sair:hover {
    color:var(--vermelho);
}
.introducao,.painel-cartao,.cartao {
    border:1px solid var(--borda);
    background:linear-gradient(135deg,rgba(14,16,38,.97),rgba(7,9,23,.97));
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.introducao {
    padding:25px 28px;
    border-radius:14px;
}
.introducao h2,.painel-cartao h2 {
    margin:0 0 6px;
    font-size:18px;
}
.introducao p,.painel-cartao p {
    margin:0;
    color:var(--suave);
    font-size:13px;
    line-height:1.5;
}
.cartoes-resumo {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:20px 0;
}
.cartao {
    min-height:128px;
    padding:19px;
    border-radius:12px;
}
.cartao span,.cartao small {
    display:block;
    color:var(--suave);
    font-size:12px;
}
.cartao strong {
    display:block;
    margin:10px 0 6px;
    color:var(--azul);
    font-size:32px;
}
.painel-cartao {
    margin-top:20px;
    padding:24px;
    border-radius:14px;
}
.cabecalho-secao {
    margin-bottom:19px;
}
.link-simples {
    color:var(--azul);
    font-size:13px;
}
.botao {
    display:inline-flex;
    min-height:37px;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:0;
    border-radius:8px;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:bold;
}
.botao-principal {
    background:linear-gradient(135deg,var(--roxo),#5f69ff);
    color:white;
}
.botao-principal:hover {
    filter:brightness(1.13);
}
.botao-secundario {
    border:1px solid #454a78;
    background:#20244a;
    color:#e6e7fa;
}
.pequeno {
    min-height:31px;
    padding:0 11px;
    font-size:12px;
}
.lista-servidores,.lista-cartoes {
    display:grid;
    gap:10px;
}
.linha-servidor,.item-catalogo {
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px;
    border:1px solid #20244a;
    border-radius:10px;
    background:rgba(2,3,12,.45);
}
.linha-servidor>div:nth-child(2) {
    flex:1;
}
.linha-servidor strong,.item-catalogo strong {
    display:block;
    font-size:14px;
}
.linha-servidor span:not(.estado),.item-catalogo p {
    margin:4px 0 0;
    color:var(--suave);
    font-size:12px;
}
.avatar-servidor,.avatar-jogo,.avatar-maquina {
    display:grid;
    width:36px;
    height:36px;
    flex:0 0 36px;
    place-items:center;
    border-radius:9px;
    background:#283067;
    color:#dfe5ff;
    font-size:14px;
    font-weight:bold;
}
.avatar-jogo {
    background:#3d2674;
}
.avatar-maquina {
    background:#1e566d;
}
.estado {
    display:inline-block;
    padding:5px 9px;
    border-radius:99px;
    background:#2d3154;
    color:#c2c6dc;
    font-size:11px;
    font-weight:bold;
    text-transform:capitalize;
}
.estado-ativo {
    background:rgba(70,215,164,.15);
    color:var(--verde);
}
.estado-parado {
    background:rgba(255,116,126,.14);
    color:var(--vermelho);
}
.estado-desconhecido {
    background:rgba(32,184,255,.13);
    color:var(--azul);
}
.estado-vazio {
    padding:28px;
    border:1px dashed #3c4171;
    border-radius:10px;
    text-align:center;
}
.estado-vazio h3 {
    margin:0 0 7px;
    font-size:15px;
}
/* Formulários e tabelas do painel. */
.pagina-duas-colunas {
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(0,1.3fr);
    gap:20px;
}
.pagina-duas-colunas .painel-cartao,.formulario-largo {
    margin-top:0;
}
.formulario-cartao form {
    display:grid;
    gap:14px;
    margin-top:20px;
}
label {
    display:grid;
    gap:7px;
    color:#e4e5f6;
    font-size:12px;
    font-weight:bold;
}
input,textarea,select {
    width:100%;
    padding:10px 11px;
    border:1px solid #2a2e55;
    border-radius:7px;
    outline:0;
    background:#060713;
    color:var(--texto);
    font:inherit;
    font-size:13px;
}
textarea {
    min-height:85px;
    resize:vertical;
}
input:focus,textarea:focus,select:focus {
    border-color:var(--roxo);
    box-shadow:0 0 0 3px rgba(130,87,255,.13);
}
.formulario-servidor {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr .65fr auto;
    align-items:end;
    gap:12px;
}
.aviso {
    padding:13px;
    border-left:3px solid var(--azul);
    border-radius:6px;
    background:rgba(32,184,255,.08);
    color:#cad9f7;
    font-size:13px;
}
.aviso a {
    color:var(--azul);
    text-decoration:underline;
}
.tabela-responsiva {
    overflow-x:auto;
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
}
th {
    padding:10px;
    border-bottom:1px solid var(--borda);
    color:#868dab;
    font-size:11px;
    letter-spacing:.4px;
    text-transform:uppercase;
}
td {
    padding:13px 10px;
    border-bottom:1px solid rgba(51,55,98,.65);
    color:#d8daf0;
    font-size:13px;
}
tbody tr:last-child td {
    border-bottom:0;
}
.mensagem {
    margin-bottom:17px;
    padding:12px 14px;
    border-radius:8px;
    font-size:13px;
}
.mensagem-sucesso {
    border:1px solid rgba(70,215,164,.35);
    background:rgba(70,215,164,.12);
    color:#b5f3dc;
}
.mensagem-erro {
    border:1px solid rgba(255,116,126,.35);
    background:rgba(255,116,126,.12);
    color:#ffd0d5;
}
/* Página pública antes do login. */
.pagina-publica {
    background:#020308;
}
.cabecalho-publico {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    padding:22px 0;
}
.cabecalho-publico .marca {
    margin:0;
}
.nav-publica,.acoes-publicas,.hero-acoes {
    display:flex;
    align-items:center;
    gap:22px;
}
.nav-publica a,.link-entrar {
    color:var(--suave);
    font-size:13px;
}
.nav-publica a:hover,.link-entrar:hover {
    color:white;
}
.acoes-publicas,.hero-acoes {
    gap:12px;
}
.hero-publico {
    display:grid;
    grid-template-columns:1fr 1.02fr;
    align-items:center;
    gap:55px;
    width:min(1180px,calc(100% - 48px));
    min-height:600px;
    margin:0 auto;
    padding:80px 0 75px;
}
.hero-texto h1 {
    max-width:590px;
    margin:0;
    font-size:clamp(40px,5.3vw,69px);
    line-height:1.03;
    letter-spacing:-2.5px;
}
.hero-texto h1 span {
    background:linear-gradient(90deg,#a989ff,#2fbfff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.texto-hero {
    max-width:520px;
    margin:24px 0;
    color:var(--suave);
    font-size:17px;
    line-height:1.65;
}
.botao-grande {
    min-height:44px;
    padding:0 19px;
}
.nota-hero {
    margin-top:17px;
    color:#777d9f;
    font-size:12px;
}
.mockup-painel {
    overflow:hidden;
    transform:perspective(1000px) rotateY(-7deg) rotateX(2deg);
    border:1px solid #2a2d64;
    border-radius:13px;
    background:#0a0d21;
    box-shadow:24px 30px 80px rgba(70,53,185,.20);
}
.mockup-topo {
    display:flex;
    align-items:center;
    gap:6px;
    height:39px;
    padding:0 14px;
    border-bottom:1px solid #252956;
    background:#101331;
}
.mockup-topo strong {
    margin-left:8px;
    color:#b7bddc;
    font-size:10px;
    font-weight:normal;
}
.luz {
    width:7px;
    height:7px;
    border-radius:50%;
}
.luz.roxa {
    background:var(--roxo);
}
.luz.azul {
    background:var(--azul);
}
.luz.cinzenta {
    background:#5f648c;
}
.mockup-corpo {
    display:flex;
    min-height:350px;
}
.mockup-corpo aside {
    width:68px;
    padding:15px;
    border-right:1px solid #242751;
    background:#070919;
}
.mockup-marca {
    display:grid;
    width:27px;
    height:27px;
    place-items:center;
    border-radius:7px;
    background:var(--roxo);
    font-size:12px;
    font-weight:bold;
}
.mockup-corpo aside i {
    display:block;
    width:28px;
    height:5px;
    margin-top:22px;
    border-radius:10px;
    background:#242950;
}
.mockup-conteudo {
    flex:1;
    padding:28px;
}
.mockup-conteudo>p {
    margin:0;
    color:var(--azul);
    font-size:8px;
    letter-spacing:1px;
}
.mockup-conteudo h2 {
    margin:5px 0 20px;
    font-size:22px;
}
.mockup-numeros {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
.mockup-numeros div {
    padding:12px;
    border:1px solid #252954;
    border-radius:7px;
    background:#10132b;
}
.mockup-numeros small,.mockup-lista small {
    display:block;
    color:#8890b2;
    font-size:9px;
}
.mockup-numeros b {
    display:block;
    margin-top:5px;
    color:var(--azul);
    font-size:18px;
}
.mockup-lista {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:11px;
    padding:10px;
    border:1px solid #242850;
    border-radius:7px;
}
.mockup-lista span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--verde);
}
.mockup-lista div {
    flex:1;
}
.mockup-lista b {
    display:block;
    font-size:10px;
}
.mockup-lista em {
    color:var(--verde);
    font-size:9px;
    font-style:normal;
}
.mockup-lista em.parado {
    color:var(--vermelho);
}
.recursos-publicos,.passos-publicos {
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    padding:90px 0;
    border-top:1px solid #1b1f42;
}
.titulo-publico {
    max-width:540px;
}
.titulo-publico h2,.passos-publicos h2 {
    margin:0;
    font-size:31px;
    line-height:1.2;
}
.grelha-recursos {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:35px;
}
.grelha-recursos article {
    min-height:210px;
    padding:25px;
    border:1px solid #202449;
    border-radius:12px;
    background:#080a19;
}
.numero-recurso {
    color:var(--azul);
    font-size:12px;
    font-weight:bold;
}
.grelha-recursos h3 {
    margin:37px 0 9px;
    font-size:17px;
}
.grelha-recursos p {
    color:var(--suave);
    font-size:13px;
    line-height:1.6;
}
.passos-publicos {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}
.passos-publicos ol {
    display:grid;
    gap:15px;
    min-width:380px;
    margin:0;
    padding:0;
    list-style:none;
}
.passos-publicos li {
    display:flex;
    align-items:center;
    gap:14px;
    color:#d6d9f0;
    font-size:14px;
}
.passos-publicos li span {
    display:grid;
    width:30px;
    height:30px;
    place-items:center;
    border:1px solid #40467c;
    border-radius:50%;
    color:var(--azul);
    font-size:12px;
}
.rodape-publico {
    display:flex;
    justify-content:space-between;
    width:min(1180px,calc(100% - 48px));
    margin:0 auto;
    padding:24px 0 36px;
    border-top:1px solid #1b1f42;
    color:#727897;
    font-size:12px;
}
/* Registo e login. */
.pagina-autenticacao {
    display:grid;
    min-height:100vh;
    place-items:center;
    padding:24px;
    background:radial-gradient(circle at 50% 0,#15103d 0,#020308 55%);
}
.cartao-autenticacao {
    width:min(100%,430px);
    padding:34px;
    border:1px solid #292d5a;
    border-radius:14px;
    background:#090b1c;
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.cartao-autenticacao .marca {
    margin:0 0 42px;
}
.cartao-autenticacao h1 {
    margin:0 0 8px;
    font-size:25px;
}
.texto-autenticacao {
    margin:0;
    color:var(--suave);
    font-size:13px;
}
.formulario-autenticacao {
    display:grid;
    gap:16px;
    margin-top:26px;
}
.formulario-autenticacao .botao {
    width:100%;
    margin-top:4px;
}
.troca-autenticacao {
    margin:25px 0 0;
    color:var(--suave);
    font-size:13px;
    text-align:center;
}
.troca-autenticacao a {
    color:var(--azul);
}
@media (max-width:850px) {
    .barra-lateral {
        width:76px;
        padding:20px 10px;
    }
    .barra-lateral .marca {
        margin:0 auto 35px;
    }
    .barra-lateral .marca>span:last-child,.titulo-menu,nav a,.nota-lateral {
        font-size:0;
    }
    nav a {
        height:40px;
        padding:0;
    }
    .conteudo {
        width:calc(100% - 76px);
        padding:25px 20px;
    }
    .cartoes-resumo {
        grid-template-columns:repeat(2,1fr);
    }
    .pagina-duas-colunas,.formulario-servidor,.hero-publico {
        grid-template-columns:1fr;
    }
    .nav-publica {
        display:none;
    }
    .hero-publico {
        padding-top:55px;
    }
    .mockup-painel {
        max-width:590px;
        transform:none;
    }
    .passos-publicos {
        align-items:flex-start;
        flex-direction:column;
    }
    .passos-publicos ol {
        min-width:0;
    }
}
@media (max-width:520px) {
    .layout {
        display:block;
    }
    .barra-lateral {
        position:static;
        width:100%;
        min-height:auto;
        flex-direction:row;
        padding:12px;
    }
    .barra-lateral .marca {
        margin:0 auto 0 0;
    }
    nav {
        display:flex;
    }
    nav a {
        width:30px;
    }
    .conteudo {
        width:100%;
        padding:21px 15px;
    }
    .topo,.introducao {
        align-items:flex-start;
        flex-direction:column;
    }
    .area-utilizador {
        display:none;
    }
    .cartoes-resumo {
        grid-template-columns:1fr 1fr;
        gap:9px;
    }
    .painel-cartao {
        padding:17px;
    }
    .cabecalho-publico,.hero-publico,.recursos-publicos,.passos-publicos,.rodape-publico {
        width:min(100% - 30px,1180px);
    }
    .cabecalho-publico .link-entrar {
        display:none;
    }
    .hero-texto h1 {
        letter-spacing:-1.5px;
    }
    .hero-acoes {
        align-items:stretch;
        flex-direction:column;
    }
    .mockup-conteudo {
        padding:19px;
    }
    .mockup-corpo aside {
        width:51px;
        padding:11px;
    }
    .mockup-corpo aside i {
        width:20px;
    }
    .grelha-recursos {
        grid-template-columns:1fr;
    }
    .rodape-publico {
        gap:8px;
        flex-direction:column;
    }
    .cartao-autenticacao {
        padding:26px 21px;
    }
}