@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=VT323&display=swap');

/* ----------------------------------
           VARIÁVEIS DE COR
----------------------------------- */

:root {
    --phosphor-bright: #39ff14;
    /* Verde neon vibrante */
    --phosphor-dim: #1a6b0c;
    /* Verde escuro para o "sangramento" da luz */
    --screen-bg: #031203;
    /* Fundo quase preto, com um levíssimo tom verde */

    --color-bg: #1a1a1a;
    --color-chassi: #A48366;

    --text-main: #2d3142;
    --text-muted: #70757a;
    --accent-blue: #2f80ed;
    --accent-gray: #a6a6a6;

    --font-main: 'Inter', sans-serif;
    --font-mono: "VT323", monospace;
}

/* ----------------------------------
           RESET E BACKGROUND DA PÁGINA
----------------------------------- */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: var(--font-mono);
    font-size: 20px;
}

/* ----------------------------------
           A CARCAÇA FÍSICA DO MONITOR (Bege)
----------------------------------- */
.monitor-chassis {
    background-color: var(--color-chassi);
    /* Cor bege clássica dos anos 80/90 */
    /* background-color: #d8d8ce; Cor bege clássica dos anos 80/90 */
    padding: 40px 40px 20px 40px;
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.8),
        inset 0 3px 5px rgba(255, 255, 255, 0.8),
        inset 0 -5px 15px rgba(160, 160, 150, 0.8);
    position: relative;
}

/* ----------------------------------
           O TUBO DE VIDRO DO MONITOR (CRT)
        ----------------------------------- */
.crt-glass {
    width: 800px;
    height: 600px;
    background-color: var(--screen-bg);
    /* Curvatura típica de tubo de imagem */
    border-radius: 30px / 40px;
    position: relative;
    overflow: hidden;

    /* Moldura preta interna e reflexos do vidro */
    border: 18px solid #1a1a1a;
    border-bottom-width: 25px;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 1),
        inset 0 0 15px rgba(0, 0, 0, 1),
        0 0 10px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------
           EFEITO DE SCANLINES (Linhas de varredura)
        ----------------------------------- */
.crt-glass::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    /* Espessura das linhas */
    z-index: 10;
    pointer-events: none;
}

/* ----------------------------------
           VIGNETTE E SUJEIRA/SOMBRA NAS BORDAS
        ----------------------------------- */
.crt-glass::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /* Escurece as bordas simulando a curvatura e perda de brilho */
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 11;
    pointer-events: none;
    /* Leve reflexo côncavo do vidro */
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.03);
}

/* ----------------------------------
           BARRA DE ATUALIZAÇÃO (Refresh Rate)
        ----------------------------------- */
.refresh-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background: rgba(57, 255, 20, 0.08);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.15);
    z-index: 9;
    opacity: 0.5;
    animation: scanline 7s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(520px);
    }
}

/* ----------------------------------
           CONTEÚDO DA TELA E GLOW (Brilho do Fósforo)
        ----------------------------------- */
.screen-content {
    color: var(--phosphor-bright);
    font-size: 24px;
    padding: 30px;
    height: 100%;
    box-sizing: border-box;

    /* Efeito de Bloom / Sangramento de cor essencial no fósforo */
    text-shadow:
        0 0 3px var(--phosphor-bright),
        0 0 8px var(--phosphor-dim),
        0 0 15px var(--phosphor-dim);

    line-height: 1.1;
    /* Animação suave de "flicker" natural de monitores antigos */
    animation: textFlicker 0.12s infinite alternate;
}

.screen-content .crt-memo {
    background-color: transparent;
    /* Remove o fundo branco padrão do campo memo */
    border: none;
    /* Remove a borda padrão do formulário */
    color: inherit;
    /* Herda a cor do fósforo brilhante do elemento pai */
    font-family: inherit;
    /* Herda a fonte monospace VT323 */
    font-size: inherit;
    /* Herda o tamanho da fonte de 20px */
    text-shadow: inherit;
    /* Aplica o brilho/bloom das letras */
    resize: none;
    /* Impede que o usuário redimensione a caixa arrastando o canto */
    outline: none;
    /* Remove a linha de foco do navegador ao clicar */
    overflow: hidden;
    /* Remove barras de rolagem */
    margin: 0;
    /* Zera as margens como era feito na tag <pre> original[cite: 2] */
    width: 100%;
    height: 100%;
    line-height: inherit;
    /* Herda o espaçamento de linha do container */
}

@keyframes textFlicker {
    0% {
        opacity: 0.92;
        text-shadow: 0 0 3px var(--phosphor-bright), 0 0 8px var(--phosphor-dim);
    }

    100% {
        opacity: 1;
        text-shadow: 0 0 4px var(--phosphor-bright), 0 0 10px var(--phosphor-dim), 0 0 15px var(--phosphor-dim);
    }
}

/* ----------------------------------
           RODAPÉ DO MONITOR (Botões e Logo)
        ----------------------------------- */
.monitor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 0 5px;
}

.brand-logo {
    font-family: 'Arial', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: #363633;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 20px;
    height: 16px;
    border: 2px solid #363633;
    border-radius: 4px 4px 10px 10px;
}

.model-text {
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    color: #363633;
    margin-right: 20px;
}

.model-text span {
    background: #4a4a42;
    color: #d8d8ce;
    padding: 1px 4px;
}

.power-panel {
    display: flex;
    align-items: center;
    gap: 15px;
}

.power-button {
    width: 24px;
    height: 14px;
    background-color: #c4c4b8;
    border: 2px solid #a0a095;
    border-top-color: #fff;
    border-left-color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.power-led {
    width: 8px;
    height: 8px;
    background-color: #39ff14;
    /* Led aceso */
    border-radius: 50%;
    box-shadow: 0 0 8px #39ff14, inset 0 0 2px rgba(255, 255, 255, 0.5);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}