@font-face {
    font-family: 'Font Awesome';
    src: url('../fonts/fa-brands-400.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome';
    src: url('../fonts/fa-regular-400.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome';
    src: url('../fonts/fa-solid-900.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome';
    src: url('../fonts/fa-v4compatibility.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* =========================================
   00-COMMON.CSS
   Переменные, тема, сброс, базовые компоненты,
   формы, пагинация, страницы авторизации.
   ========================================= */

/* ── VARIABLES ── */
:root {
    --bg: #FAFAFA;
    --bg-alt: #F5F5F5;
    --bg-max: #FFFFFF;
    --text: #1A1A1A;
    --text-muted: #5A5A5A;
    --red: #AD1519;
    --yellow: #FABD00;
    --border: #E8E8E8;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    --font-mono: "Fira Code", "Consolas", monospace;
    --radius: 4px;
    --max-w: 100%;

    --scroll-border: #AD1519;
    --scroll-bg: #FABD00;
    --scroll-arrow: #AD1519;

    @media (min-width: 576px) {
        --max-w: 540px;
    }
    @media (min-width: 768px) {
        --max-w: 720px;
    }
    @media (min-width: 992px) {
        --max-w: 960px;
    }
    /* Исправлено: было 9600px */
    @media (min-width: 1200px) {
        --max-w: 1140px;
    }
    @media (min-width: 1400px) {
        --max-w: 1360px;
    }
}

/* ── DARK THEME OVERRIDES (Собраны в начале, как просил) ── */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121214;
        --bg-alt: #1A1D23;
        --bg-max: #000000;
        --card-bg: #22252D;
        --text: #E8E8E8;
        --text-muted: #8A8F98;
        --border: #2E323A;
    }
}

:root.theme-dark {
    --bg: #121214;
    --bg-alt: #1A1D23;
    --bg-max: #000000;
    --text: #E8E8E8;
    --text-muted: #8A8F98;
    --border: #2E323A;
}

/* Тени и специфичные переопределения для тёмной темы */

:root.theme-dark .single-post-code-block {
    background: #1A1D23;
}

:root.theme-dark .single-post-comment-form {
    background: var(--bg-alt);
    border-color: var(--border);
}

:root.theme-dark .auth-card {
    background: var(--bg-alt);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

:root.theme-dark .auth-input {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

:root.theme-dark .profile-avatar {
    background: var(--bg-alt);
}

:root.theme-dark .profile-stat {
    background: var(--bg-alt);
}

:root.theme-dark .activity-item {
    background: var(--bg-alt);
}

/* PADIDNGS, MARGINS ETC. */

.mb-0 {
    margin-bottom: 0;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 16px;
}

a {
    color: var(--red);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    text-decoration: underline;
}

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

main {
    min-width: 0;
    width: 100%;
}

li {
    line-height: 1.4;
}

p {
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* User menu in navbar */

.admin-user-menu-dropdown {
    position: relative;
    color: var(--red);
    padding-left: 0.3rem;
    transition: transform 0.2s ease;
    display: flex;
    justify-content: end;
}

.admin-user-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.user-menu-user-name {
    color: var(--red);
    font-weight: 600;
    padding: 0.25rem 0.5rem;
}

.admin-avatar {
    width: 36px;
    height: 36px;
    background: var(--bg-alt);
    color: var(--red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    border: 1px solid var(--border);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-user-menu-btn:hover .admin-avatar {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(173, 21, 25, 0.1);
}



.admin-user-menu-btn.active .admin-user-menu-dropdown {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

/* Само меню */
.admin-user-menu {
    position: absolute;
    top: 120%; /* Чуть ниже кнопки */
    right: 0;
    width: 220px;
    background: var(--bg-max);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 200;

    /* Скрыто по умолчанию */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

/* Состояние открытого меню */
.admin-user-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-user-menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text);
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.admin-user-menu-dropdown-item:hover {
    background: var(--bg-alt);
    color: var(--red);
    text-decoration: none;
}

.admin-user-menu-dropdown-item span {
    width: 16px;
    text-align: center;
    opacity: 0.7;
}

.admin-profile-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

:root.theme-dark .admin-user-menu {
    background: var(--card-bg); /* #22252D — мягче, чем #000, лучше для выпадашек */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: var(--border);
}

:root.theme-dark .admin-user-menu-dropdown-item {
    color: var(--text);
}

:root.theme-dark .admin-user-menu-dropdown-item:hover {
    background: var(--bg-alt);
}

:root.theme-dark .admin-profile-dropdown-divider {
    background: var(--border);
}

/* TITLES */

.page-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: 2px solid var(--yellow);
    display: inline-block;
    color: var(--text);
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

.item-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

/* LISTS */

.list-triangle {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.list-triangle li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--text);
}

.list-triangle li::before {
    content: '▸';
    color: var(--red);
    font-weight: 700;
}

/* ── BUTTONS ── */
/* Базовый класс для всех красных кнопок */
.btn-primary,
.btn-submit {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: var(--red);
    color: #FFF;
    border-radius: var(--radius);
    font-weight: 500;
    transition: filter 0.2s;
    border: none;
    cursor: pointer;
}

.btn-select {
    background: var(--yellow);
}

.btn-primary:hover,
.btn-select:hover,
.btn-submit:hover {
    filter: brightness(0.9);
    text-decoration: none;
}

/* Если .btn-submit нужен чуть крупнее — только отличие */
.btn-submit {
    padding: 0.7rem 1.5rem;
    font-weight: 600;
}

.btn-full {
    width: 100%;
    margin-top: 0.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ── PAGINATION ── */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 2.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--yellow);
}

.page-link {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--red);
    border-radius: var(--radius);
    background: var(--bg-max);
    color: var(--text);
    font-weight: 500;
}

.page-link:hover {
    background: var(--bg-alt);
    text-decoration: none;
}

.page-link.active {
    background: var(--red);
    color: #FFF;
    border-color: var(--red);
}

.page-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.page-ellipsis {
    color: var(--text-muted);
    align-self: center;
    padding: 0 0.25rem;
}

/* ── UNIFIED FORMS ── */
.form-common {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.form-row .form-group:not(:last-child) {
    margin-bottom: 1rem;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}

.form-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.form-warning {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--red);
    font-weight: 600;
}

/* Input & Textarea (разделены для будущей кастомизации) */

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 2px rgba(250, 189, 0, 0.2);
}

.form-textarea { min-height: 100px; resize: vertical; }

.form-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8.825L0.375 3.175l0.85-0.85L6 7.1l4.775-4.775 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
}

/* Checkboxes & Radios */
.form-checkbox,
.form-radiobutton {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input,
.form-radiobutton input {
    margin-top: 0.2rem;
    accent-color: var(--red);
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.form-checkbox input:focus,
.form-radiobutton input:focus {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.form-check-label {
    color: var(--text);
    line-height: 1.6;
}

/* === MULTIPLE SELECT === */
.form-select-multiple {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg-max);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    transition: border-color 0.2s, box-shadow 0.2s;

    appearance: none;
    -webkit-appearance: none;
}

.form-select-multiple:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 2px rgba(250, 189, 0, 0.2);
}

/* Стилизация отдельных опций внутри списка */
.form-select-multiple option {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-bottom: 1px solid transparent; /* Разделитель, если нужен */
}

/* Чередование фона для удобства чтения (опционально) */
.form-select-multiple option:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Выбранные элементы (зависит от ОС/браузера, но можно подкрасить фон) */
.form-select-multiple option:checked {
    background-color: var(--red);
    color: #fff;
}

/* Buttons */
.form-submit,
.form-cancel,
.form-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter 0.2s, background 0.2s;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;

    /* Запрещаем растягивание в grid/flex */
    width: auto;
    height: auto;
    align-self: start;
    justify-self: start;
}

.form-submit {
    background: var(--red);
    color: #FFF;
}

.form-submit:hover {
    filter: brightness(0.9);
}

.form-cancel,
.form-reset {
    background: var(--bg-alt);
    color: var(--text);
    border-color: var(--border);
}

.form-cancel:hover,
.form-reset:hover {
    background: var(--border);
}

/* Dark Theme Overrides */
:root.theme-dark .form-input,
:root.theme-dark .form-textarea,
:root.theme-dark .form-select {
    background: var(--bg);
    border-color: var(--border);
}

:root.theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238A8F98' d='M6 8.825L0.375 3.175l0.85-0.85L6 7.1l4.775-4.775 0.85 0.85z'/%3E%3C/svg%3E");
}

:root.theme-dark .form-cancel,
:root.theme-dark .form-reset {
    background: var(--bg-alt);
    border-color: var(--border);
}

/* ── AUTH PAGES ── */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--bg);
}

.auth-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--red);
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-container .form-submit {
    display: block;
    margin: 1.5rem auto 0;
}

/* === ALERTS === */
.alert {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: #f0f0f0;
}

/* Info (Синий) */
.alert-info {
    background-color: #e3f2fd;
    color: #0d47a1;
    border-left-color: #1e88e5;
}

/* Success (Зелёный) */
.alert-success {
    background-color: #e8f5e9;
    color: #1b5e20;
    border-left-color: #43a047;
}

/* Warning (Жёлтый) */
.alert-warning {
    background-color: #fff8e1;
    color: #f57f17;
    border-left-color: #ffca28;
}

/* Danger (Красный) */
.alert-danger {
    background-color: #ffebee;
    color: #c62828;
    border-left-color: var(--red); /* Используем твою переменную */
}