/* БАЗА */
* { 
    box-sizing: border-box; 
    outline: none; 
    /* ГЛАВНОЕ: Убирает зум на двойное нажатие на всех элементах */
    touch-action: manipulation; 
}

body { background: #000; color: #ccc; font-family: Arial, sans-serif; margin: 0; font-size: 13px; }
a { text-decoration: none; color: #888; transition: 0.2s; cursor: pointer; }
a:hover { color: #fff; }

/* ШАПКА */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #1a1a1a; background: #000; position: relative; z-index: 100; }
.nav-left { display: flex; align-items: center; gap: 20px; }
.brand { font-size: 18px; color: #fff; letter-spacing: 0.5px; white-space: nowrap; }

.menu { display: flex; align-items: center; }
.menu a, .menu-link { color: #666; margin-right: 15px; font-size: 13px; cursor: pointer; display: block; }
.menu a:hover, .menu-link:hover { color: #fff; }

.mobile-menu-btn { display: none; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 5px; }
.mobile-dropdown { display: none; background: #111; padding: 10px; border-bottom: 1px solid #333; position: absolute; width: 100%; top: 60px; left: 0; z-index: 99; }
.mobile-dropdown a { display: block; padding: 12px 15px; color: #ccc; border-bottom: 1px solid #222; }

/* Стили для скопированной кнопки входа в моб. меню */
#mobileAuthEntry a { display: block; padding: 12px 15px; color: #ccc; border-bottom: 1px solid #222; font-weight: bold; }
#mobileAuthEntry a:hover { background: #1a1a1a; color: #fff; }

/* DROPDOWN (Desktop) */
.dropdown-container { position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: -10px; }
.dropdown-menu { display: none; position: absolute; background-color: #0a0a0a; min-width: 160px; border: 1px solid #333; z-index: 1000; top: 30px; left: 0; }
.dropdown-menu a { padding: 10px 15px; border-bottom: 1px solid #111; margin: 0; }
.dropdown-menu a:hover { background: #1a1a1a; color: #fff; }
.dropdown-container:hover .dropdown-menu { display: block; }

/* НАВИГАЦИЯ СПРАВА */
.nav-right { display: flex; align-items: center; gap: 15px; }
.online-counter { display: flex; align-items: center; gap: 6px; border: 1px solid #222; padding: 5px 8px; border-radius: 4px; background: #080808; }
.green-dot { width: 8px; height: 8px; background-color: #00ff00; border-radius: 50%; box-shadow: 0 0 5px #00ff00; animation: pulse 2s infinite; }
#onlineCount { font-weight: bold; color: #fff; font-size: 11px; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

#searchInput { background: #111; border: 1px solid #222; color: #888; padding: 6px 10px; width: 150px; font-size: 12px; }
#searchInput:focus { border-color: #444; color: #fff; }

/* КОНТЕНТ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; margin-top: 30px; }
.ascii-container { display: flex; justify-content: center; margin: 20px 0 40px 0; overflow-x: auto; }
.ascii-art { color: #fff; font-family: 'Courier New', monospace; font-size: 12px; line-height: 10px; white-space: pre; text-align: center; }

/* ТАБЛИЦА (Grid Layout) */
/* ПК Версия: Title | Type | User | Date | Views */
.table-header { 
    display: grid; 
    grid-template-columns: 1fr 12% 15% 10% 10%; 
    background: #1c1c1c; 
    color: #fff; 
    padding: 10px 15px; 
    font-size: 13px; 
    margin-bottom: 5px; 
    font-weight: bold; 
}

.table-row { 
    display: grid; 
    grid-template-columns: 1fr 12% 15% 10% 10%; 
    background: #111; 
    padding: 12px 15px; 
    margin-bottom: 5px; 
    align-items: center; 
    color: #888; 
    border-left: 3px solid transparent; 
}
.table-row:hover { background: #1a1a1a; }

/* Обрезка текста троеточием */
.table-row > div, .table-header > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    padding-right: 10px;
}

.bg-Admin { background-color: #1a0505 !important; border-left: 3px solid #ff0000; }
.bg-God { background-color: #1a1a1a !important; border-left: 3px solid #fff; box-shadow: inset 0 0 15px #000; }
.bg-Premium { border-left: 3px solid #b200ff; }

.pin-tag { color: #666; font-style: italic; font-size: 11px; margin-right: 6px; font-weight: normal; }
.col-title { color: #ccc; font-weight: bold; font-size: 13px; display: block; }
.col-meta { font-size: 12px; color: #666; display: block; }

/* РАНГИ */
.role-Admin { color: red; font-weight: bold; animation: glow 2s infinite; }
@keyframes glow { 0% { text-shadow: 0 0 5px red; } 50% { text-shadow: 0 0 15px red; } 100% { text-shadow: 0 0 5px red; } }

.role-Premium { font-weight: bold; background: linear-gradient(to right, #d400ff, #7a00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.role-God { color: #eee; font-weight: bold; text-shadow: 0 0 8px #fff; position: relative; }
.role-God::after { content: ' ✨'; font-size: 10px; animation: sparkle 0.8s infinite; }
@keyframes sparkle { 0% { opacity:0; } 50% { opacity:1; } 100% { opacity:0; } }

.role-Banned { color: #800000; font-weight: bold; text-decoration: line-through; }
.role-User { color: #4dabf7; font-weight: bold; }
.role-Anon { color: #555; font-style: italic; }

/* ПОСТЫ И КОММЕНТАРИИ */
.section-title { color: #fff; margin-top: 30px; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; font-size: 14px; text-transform: uppercase; font-weight: bold; }
.post-content, .comment-content { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-family: monospace; color: #ccc; line-height: 1.5; }
.file-link { display: block; background: #0e0e0e; border: 1px solid #222; padding: 10px; margin-bottom: 5px; color: #888; font-size: 12px; text-decoration: none; font-family: monospace; }
.file-link:hover { background: #1a1a1a; border-color: #444; color: #fff; }

/* ФОРМЫ */
.form-box { width: 100%; max-width: 600px; margin: 40px auto; padding: 0 10px; }
.form-title { text-align: center; color: #fff; margin-bottom: 20px; font-weight: normal; }
.inp-bar { width: 100%; background: #111; border: 1px solid #222; color: #fff; padding: 15px; margin-bottom: 10px; font-family: Arial, sans-serif; font-size: 13px; }
.inp-bar:focus { border-color: #555; background: #151515; }
.content-area { width: 100%; background: #080808; border: 1px solid #222; color: #ccc; padding: 20px; min-height: 300px; font-family: monospace; margin-bottom: 10px; resize: vertical; overflow-wrap: anywhere; }
.content-area:focus { border-color: #555; }

input[type="file"]::file-selector-button { background-color: #111; color: #888; border: 1px solid #333; padding: 8px 15px; margin-right: 15px; cursor: pointer; font-weight: bold; font-size: 11px; text-transform: uppercase; }
input[type="file"]::file-selector-button:hover { background-color: #222; color: #fff; }

.btn-bar { width: 100%; background: #222; color: #ccc; border: 1px solid #333; padding: 15px; cursor: pointer; font-weight: bold; margin-top: 10px; text-transform: uppercase; }
.btn-bar:hover { background: #ccc; color: #000; }
.btn-action { background: #000; color: #fff; border: 1px solid #333; padding: 4px 8px; cursor: pointer; margin-right: 5px; font-size: 10px; text-transform: uppercase; }
.btn-action:hover { background: #222; }

/* МОБИЛКИ */
@media (max-width: 768px) {
    .menu { display: none; }
    .mobile-menu-btn { display: block; }
    .nav-right input { width: 100px; }
    
    /* FIX: Жестко скрываем кнопку входа (которая возле поиска), 
       так как она скопирована в мобильное меню скриптом */
    #authLink { display: none !important; }
    
    .container { padding: 0 10px; }

    /* Таблица для телефонов: делаем как на ПК, но убираем лишнее */
    .table-header, .table-row { 
        display: grid; 
        font-size: 12px; /* Чуть крупнее чем было (10px), для удобства */
        padding: 10px;
        gap: 5px;
        border-bottom: 1px solid #1a1a1a;
        
        /* Сетка: Title (auto) | User (22%) | Date (22%) */
        /* Убрали колонку Type для места */
        grid-template-columns: 1fr 22% 22%;
    }

    /* На ПК структура колонок (предположительно 5 шт):
       1: Title
       2: Type (Убираем по просьбе)
       3: User
       4: Date
       5: Views/Replies (Убираем для экономии места)
    */
    
    .table-header > div:nth-child(2),
    .table-row > div:nth-child(2),
    .table-header > div:nth-child(5),
    .table-row > div:nth-child(5) {
        display: none !important;
    }
    
    .col-title { font-size: 13px; }
}