/* --- :root - Paleta de Cores e Variáveis --- */
:root {
    --bg-gradient: linear-gradient(160deg, #464E61, #5C4B51);
    --bg-texture: url('https://www.transparenttextures.com/patterns/stardust.png');
    --c-pink-light: #FFEBF1;
    --c-pink-mid: #E0A1B3;
    --c-pink-dark: #C5779C;
    --c-pink-hot: #C35187;
    --c-blue-light: #A9BAD8;
    --c-blue-mid: #C6D9EC;
    --c-blue-dark: #4a5369;
    --c-text: #555;
    --f-pixel: 'Silkscreen', monospace;
    --f-body: Calibri, sans-serif;
}

/* --- Estilos Gerais --- */
body {
    background-color: #5C4B51;
    background-image: var(--bg-texture), var(--bg-gradient);
    font: 11px var(--f-body); 
    padding: 20px 0;
}

.container {
    max-width: 800px; 
    margin: 0 auto;
}

/* --- Links e Texto --- */
a { color: var(--c-text); text-decoration: none; }
a:hover { color: var(--c-pink-hot); }
b { font-weight: bold; color: var(--c-blue-light); }
i { color: var(--c-pink-hot); font-style: normal; }

/* --- Header e Footer --- */
.site-header {
    background: var(--c-pink-light);
    border: 1px dotted var(--c-blue-mid);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 10px;
}
.sitename {
    font: bold 18px var(--f-pixel);
    color: var(--c-pink-dark);
}
.siteurl {
    font-size: 10px;
    color: var(--c-blue-light);
}
.site-footer {
    text-align: center;
    color: var(--c-blue-light);
    font-size: 9px;
    margin-top: 10px;
}

/* --- O SEGREDO DA CONSISTÊNCIA --- */
.main-layout {
    display: flex;
    gap: 10px;
    min-height: 75vh; /* Força o layout a ter no mínimo 75% da altura da tela */
    align-items: stretch; /* Garante que todas as colunas estiquem igualmente */
}

/* --- Colunas do Layout --- */
.side-navigation { width: 150px; }
.content-area { flex-grow: 1; display: flex; flex-direction: column; }
.status-sidebar { width: 180px; }

/* --- Estilo "Janela" para as Caixas de Conteúdo --- */
.content-box {
    background-color: #fff; /* Alterado de 'background' para 'background-color' */
    border: 1px dotted var(--c-blue-dark);
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    /* FUNDO QUADRICULADO */
    background-image: linear-gradient(rgba(220, 220, 220, 0.5) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(220, 220, 220, 0.5) 1px, transparent 1px);
    background-size: 15px 15px;
}
/* Faz a caixa de conteúdo principal crescer para preencher a coluna */
.content-area .content-box {
    flex-grow: 1;
}

.window-title-bar {
    background: var(--c-blue-dark);
    color: var(--c-blue-light);
    font: 9px var(--f-pixel);
    padding: 4px 10px;
    border-bottom: 1px dotted var(--c-blue-dark);
    flex-shrink: 0; /* Impede que a barra de título encolha, verificar, deu problema*/
}

/* --- Scrollbox Flexível --- */
.scrollbox {
    overflow: auto;
    padding: 15px;
    flex-grow: 1; /* Faz a área de scroll preencher todo o espaço restante na caixa */
    line-height: 1.6; /* Aumenta o espaçamento entre linhas para legibilidade */
}
.status-content {
    padding: 10px;
}
.status-content p {
    line-height: 1.8; /* Aumenta o espaçamento na caixa de status */
    margin: 0;
}
.status-content img {
    width: 100%;
    margin-bottom: 10px;
}

/* --- Navegação --- */
.side-navigation {
    background: var(--c-pink-light);
    border: 1px dotted var(--c-blue-mid);
    border-radius: 10px;
    padding: 10px;
    flex-shrink: 0;
}
.nav-title {
    font: bold 12px var(--f-pixel);
    color: var(--c-pink-mid);
    margin-bottom: 10px;
    text-align: center;
}
.side-navigation a {
    display: block;
    font: 9px var(--f-pixel);
    color: var(--c-pink-dark);
    padding: 6px;
    border-radius: 5px;
    text-align: center;
    transition: all 0.2s;
}
.side-navigation a:hover {
    background: #fff;
    color: var(--c-text);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; background: #fff; }
::-webkit-scrollbar-thumb { background-color: var(--c-pink-mid); border-radius: 5px; }

/* --- Estilos da Página "About" --- */
.about-avatar {
    float: left;
    width: 80px; /* Tamanho do avatar */
    height: 80px;
    margin-right: 15px;
    margin-bottom: 5px;
    border: 2px dotted var(--c-pink-mid);
    border-radius: 5px;
    image-rendering: pixelated; /* Mantém a arte pixelada nítida */
}

/* --- Estilos da Página "Guestbook" --- */
.guestbook-embed-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--c-pink-light);
    border: 2px dotted var(--c-pink-mid);
    border-radius: 5px;
    font-family: var(--f-pixel);
    color: var(--c-pink-dark);
    text-align: center;
}