/* ============================================================
   Стили для контента, загружаемого через MainPage
   ============================================================ */

/* ----- Базовые стили ----- */
#mainpage-content .md-p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
}

/* ----- Заголовки ----- */
#mainpage-content .md-h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cream);
    margin: 28px 0 12px 0;
    padding-left: 0;
    border-left: none;
    letter-spacing: 0.3px;
}

#mainpage-content .md-h4 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-sub);
    margin: 22px 0 10px 0;
    padding-left: 0;
    letter-spacing: 0.2px;
}

/* ----- Списки ----- */
#mainpage-content .md-list {
    list-style: none;
    padding-left: 4px;
    margin: 6px 0 20px 0;
}

#mainpage-content .md-list .md-li {
    margin-bottom: 6px;
    padding-left: 20px;
    color: var(--text);
    line-height: 1.6;
    position: relative;
}

#mainpage-content .md-list .md-li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

#mainpage-content .md-list-num {
    padding-left: 24px;
    margin: 6px 0 20px 0;
    color: var(--text);
}

#mainpage-content .md-list-num .md-li-num {
    margin-bottom: 6px;
    padding-left: 4px;
    line-height: 1.6;
}

#mainpage-content .md-list-num .md-li-num::marker {
    color: var(--accent);
    font-weight: 600;
}

/* ----- ССЫЛКИ (глобально внутри mainpage-content) ----- */
#mainpage-content a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#mainpage-content a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

/* Также ссылки внутри параграфов и списков */
#mainpage-content .md-p a,
#mainpage-content .md-list .md-li a,
#mainpage-content .md-list-num .md-li-num a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#mainpage-content .md-p a:hover,
#mainpage-content .md-list .md-li a:hover,
#mainpage-content .md-list-num .md-li-num a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

/* ----- Загрузка и ошибки ----- */
#mainpage-content .md-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
}

#mainpage-content .md-loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--spinner-track);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: md-spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes md-spin {
    to { transform: rotate(360deg); }
}

#mainpage-content .md-error {
    text-align: center;
    padding: 30px 20px;
    color: var(--red-soft);
    background: rgba(60, 30, 30, 0.3);
    border-radius: 12px;
    border: 1px solid var(--red-border);
}

#mainpage-content .md-error-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 12px;
}

#mainpage-content .md-retry-btn {
    margin-top: 16px;
    padding: 8px 24px;
    background: var(--spinner-track);
    color: var(--text-bright);
    border: 1px solid var(--border-pill);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

#mainpage-content .md-retry-btn:hover {
    background: var(--bg-retry-hover);
}

/* ----- Fallback ----- */
#mainpage-content .md-fallback {
    white-space: pre-wrap;
    color: var(--text);
    line-height: 1.7;
}

#mainpage-content .md-fallback br {
    display: block;
    content: "";
    margin: 8px 0;
}

/* ----- Дополнительно: обычный текст без классов ----- */
#mainpage-content {
    color: var(--text);
    line-height: 1.8;
}

#mainpage-content br {
    display: none; /* Скрываем лишние <br> от парсера */
}

/* Параграфы без класса */
#mainpage-content p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
}

/* ============================================================
   Стили для контента, загружаемого через Rules
   ============================================================ */

/* ----- Базовые стили ----- */
#rules-content .md-p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
}

/* ----- Заголовки ----- */
#rules-content .md-h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cream);
    margin: 28px 0 12px 0;
    padding-left: 0;
    border-left: none;
    letter-spacing: 0.3px;
}

#rules-content .md-h4 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-sub);
    margin: 22px 0 10px 0;
    padding-left: 0;
    letter-spacing: 0.2px;
}

/* ----- Списки ----- */
#rules-content .md-list {
    list-style: none;
    padding-left: 4px;
    margin: 6px 0 20px 0;
}

#rules-content .md-list .md-li {
    margin-bottom: 6px;
    padding-left: 20px;
    color: var(--text);
    line-height: 1.6;
    position: relative;
}

#rules-content .md-list .md-li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

#rules-content .md-list-num {
    padding-left: 24px;
    margin: 6px 0 20px 0;
    color: var(--text);
}

#rules-content .md-list-num .md-li-num {
    margin-bottom: 6px;
    padding-left: 4px;
    line-height: 1.6;
}

#rules-content .md-list-num .md-li-num::marker {
    color: var(--accent);
    font-weight: 600;
}

/* ----- ССЫЛКИ (глобально внутри mainpage-content) ----- */
#rules-content a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#rules-content a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

/* Также ссылки внутри параграфов и списков */
#rules-content .md-p a,
#rules-content .md-list .md-li a,
#rules-content .md-list-num .md-li-num a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#rules-content .md-p a:hover,
#rules-content .md-list .md-li a:hover,
#rules-content .md-list-num .md-li-num a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

/* ----- Загрузка и ошибки ----- */
#rules-content .md-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
}

#rules-content .md-loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--spinner-track);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: md-spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes md-spin {
    to { transform: rotate(360deg); }
}

#rules-content .md-error {
    text-align: center;
    padding: 30px 20px;
    color: var(--red-soft);
    background: rgba(60, 30, 30, 0.3);
    border-radius: 12px;
    border: 1px solid var(--red-border);
}

#rules-content .md-error-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 12px;
}

#rules-content .md-retry-btn {
    margin-top: 16px;
    padding: 8px 24px;
    background: var(--spinner-track);
    color: var(--text-bright);
    border: 1px solid var(--border-pill);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}

#rules-content .md-retry-btn:hover {
    background: var(--bg-retry-hover);
}

/* ----- Fallback ----- */
#rules-content .md-fallback {
    white-space: pre-wrap;
    color: var(--text);
    line-height: 1.7;
}

#rules-content .md-fallback br {
    display: block;
    content: "";
    margin: 8px 0;
}

/* ----- Дополнительно: обычный текст без классов ----- */
#rules-content {
    color: var(--text);
    line-height: 1.8;
}

#rules-content br {
    display: none; /* Скрываем лишние <br> от парсера */
}

/* Параграфы без класса */
#rules-content p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
}

/* Заголовки */
.md-h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--md-h1);
    margin: 24px 0 16px 0;
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
}

.md-h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cream);
    margin: 22px 0 14px 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.md-h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cream);
    margin: 20px 0 12px 0;
}

.md-h4 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-sub);
    margin: 16px 0 10px 0;
}

/* Горизонтальный разделитель — оранжевая полоска */
.md-hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right,
        rgba(184, 124, 75, 0),
        var(--accent) 20%,
        var(--accent-hover) 50%,
        var(--accent) 80%,
        rgba(184, 124, 75, 0)
    );
    margin: 28px 0;
    opacity: 0.7;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(184, 124, 75, 0.15);
}

/* ============================================================
   ЕДИНЫЙ РЕНДЕР во вьювере новостей/FAQ
   (тот же стиль markdown, что и на страницах #mainpage-content
   и #rules-content — чтобы статья одинаково выглядела везде)
   ============================================================ */

#news-viewer-content .md-p {
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--text);
}

#news-viewer-content .md-h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cream);
    margin: 28px 0 12px 0;
    padding-left: 0;
    border-left: none;
    letter-spacing: 0.3px;
}

#news-viewer-content .md-h4 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-sub);
    margin: 22px 0 10px 0;
    padding-left: 0;
    letter-spacing: 0.2px;
}

#news-viewer-content .md-list {
    list-style: none;
    padding-left: 4px;
    margin: 6px 0 20px 0;
}

#news-viewer-content .md-list .md-li {
    margin-bottom: 6px;
    padding-left: 20px;
    color: var(--text);
    line-height: 1.6;
    position: relative;
}

#news-viewer-content .md-list .md-li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

#news-viewer-content .md-list-num {
    padding-left: 24px;
    margin: 6px 0 20px 0;
    color: var(--text);
}

#news-viewer-content .md-list-num .md-li-num {
    margin-bottom: 6px;
    padding-left: 4px;
    line-height: 1.6;
}

#news-viewer-content .md-list-num .md-li-num::marker {
    color: var(--accent);
    font-weight: 600;
}

#news-viewer-content a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#news-viewer-content a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

#news-viewer-content .md-p a,
#news-viewer-content .md-list .md-li a,
#news-viewer-content .md-list-num .md-li-num a {
    color: var(--accent-hover);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 124, 75, 0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
}

#news-viewer-content .md-p a:hover,
#news-viewer-content .md-list .md-li a:hover,
#news-viewer-content .md-list-num .md-li-num a:hover {
    color: var(--accent-glow);
    border-bottom-color: var(--accent);
}

#news-viewer-content br {
    display: none;
}

#news-viewer-content .md-fallback {
    white-space: pre-wrap;
    color: var(--text);
    line-height: 1.7;
}