/* ============================================================= */
/*   СТРУКТУРА CSS ДЛЯ MYBB.RU - THEME NEURSHOP                 */
/* ============================================================= */

/* 0. Сброс стандартных отступов браузера */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 1. Основные переменные (Цвета и Шрифты) 
   В старых версиях MyBB это пишется просто как :root или в начале файла */
:root {
    --main-bg: #0A0A1A;
    --card-bg: #16162C;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0B5;
    --accent-gold: #FFD700;
    --accent-cyan: #00D4FF;
    --border-color: rgba(255, 215, 0, 0.3);
    --font-main: 'Segoe UI', Arial, sans-serif;
}

/* 2. Тело документа (Фон сайта) */
body {
    background: var(--main-bg);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
}

/* 3. Контейнер форума (#pun-wrap) 
   Ограничивает ширину контента, чтобы текст не растягивался на весь экран */
#pun-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(135deg, var(--main-bg), #1a1a2e);
}

/* 4. Шапка и Навигация */
#pun-navlinks {
    background: var(--card-bg);
    border-bottom: 2px solid var(--accent-gold);
}
#pun-navlinks a {
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Категории форумов (Заголовки разделов) */
.punbb .category h2,
#pun-main h2 {
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    color: var(--accent-gold);
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    font-size: 1.2em;
    /* Эффект легкого шума/grain для атмосферы lightleak */
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY10dHRsbGiIiYhLS0lQUFJiYmOjo6SEhP///+QSkDJAQICAwMDA+Pj4+/v7+/v7/f39/w8PD9/f28vLy7u7u3t7eoqKiqqqqrq6uvr6+tra2jo6Oi4uLampqZmZl/f39ra2tbW1tJSUlNTU1wcHBycnJoaGhgYGBkZGReXl5/f39OTk5GRkZEREQ8PDxAQEA/Pz9/f39PT09XV1dTU1NTU1NSUlJFRUVBQUE9PT0+Pj46Ojo4ODg8PDxCQkJCQkJD///8fHx+fn5+vr6+zs7O/v7+np6enp6fv7+/n5+fT09PT09PX19fr6+vz8/P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAADEALAAAAAABAAEAAAgEAFEEBQgFBgkKCwwNDhESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMDBAQEBgcICQoLDA0ODxAREhMUFRYXGBkaGxwdHh8gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+P0BBQkNERUZHSElKS0xNTk9QUVJTVFVWV1hZWltcXV5fYGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6e3x9fn+AgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vb6/wMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t/g4eLj5OXm5+jp6uvs7e7v8PHy8/T19vf4+fr7/P3+/wAD');
    background-blend-mode: overlay;
}

/* 6. Ячейки тем и сообщений */
.tclcon, .post-content {
    background: var(--card-bg);
    border-left: 3px solid var(--accent-cyan);
    padding: 15px;
    transition: transform 0.3s ease;
}
.tclcon:hover {
    transform: translateX(5px);
}

/* 7. Кнопки */
input[type="submit"], input[type="button"] {
    background: var(--accent-gold);
    color: #0A0A1A !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
input[type="submit"]:hover {
    background: #ffedb3;
    animation: pulse 1.5s infinite;
}

/* 8. Анимации (Lightleak / Глитч) */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
}

@keyframes glitch {
    0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    1% { clip-path: polygon(5% 0, 95% 0, 95% 100%, 5% 100%); }
    2% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

/* Применение глитча к логотипу или заголовкам при необходимости */
.glitch-text {
    position: relative;
    animation: glitch 2s infinite;
}