/* =====================================================
   ОЗЕРО ДРУЗЕЙ — main.css (чистая пересборка)
   Дизайн-система сайта. Лайтбокс — в lightbox.css.
   ===================================================== */

/* ========== ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ========== */

/* Светлая тема */
:root {
    --bg: #f8f9fa;
    --bg-card: #ffffff;
    --text: #1a1a1a;
    --text-muted: #6c757d;
    --muted: #6c757d;
    --border: #dee2e6;
    --primary: #2a9d8f;
    --primary-hover: #21867a;
    --secondary: #e76f51;
    --secondary-hover: #d45a3d;
    --success: #52b788;
    --warning: #f4a261;
    --error: #e63946;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
    --turquoise: #2a9d8f;
    --turquoise-dark: #2a9d8f;
    --turquoise-light: #e8f4f8;
    --terracotta: #e76f51;
    --green: #52b788;
    --surface: #ffffff;
    --input-bg: #ffffff;
    --code-bg: #f1f3f5;
}

/* Тёмная тема */
[data-theme="dark"] {
    --bg: #1a1a2e;
    --bg-card: #16213e;
    --text: #e4e4e7;
    --text-muted: #a1a1aa;
    --muted: #a1a1aa;
    --border: #3f3f46;
    --primary: #3dd6c4;
    --primary-hover: #2bc4b2;
    --secondary: #f4845f;
    --secondary-hover: #e06d4a;
    --success: #6ee7a0;
    --warning: #fbbf77;
    --error: #f87171;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
    --turquoise: #3dd6c4;
    --turquoise-dark: #3dd6c4;
    --turquoise-light: #1e3a5f;
    --terracotta: #f4845f;
    --green: #6ee7a0;
    --surface: #16213e;
    --input-bg: #0f3460;
    --code-bg: #0f3460;
}

/* Фоновые изображения */
body {
    background-color: var(--bg);
    background-image: url('/images/bg-day.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body {
    background-image: url('/images/bg-night.jpg');
}

/* Кнопка переключателя темы */
.theme-toggle {
    background: none;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

.theme-toggle:hover {
    border-color: var(--primary);
    transform: rotate(20deg);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

[data-theme="light"] .theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

/* Адаптация существующих компонентов под темы */
.card, .blog-post, .own-post, .chat-box, .form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.input, textarea.input, select.input {
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
}

.input:focus, textarea.input:focus, select.input:focus {
    border-color: var(--primary);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--secondary);
    color: white;
}

.btn-secondary:hover {
    background: var(--secondary-hover);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.muted, .chat-meta span, .blog-meta .muted {
    color: var(--text-muted);
}

code, pre {
    background: var(--code-bg);
    color: var(--text);
}

/* Скроллбар для тёмной темы */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
/* ---------- 1. Переменные дизайна ---------- */
:root {
    --turquoise:       #167a70;
    --turquoise-dark:  #0f5f57;
    --turquoise-light: #eaf6f4;
    --terracotta:      #c2684a;
    --terracotta-dark: #a1523a;
    --green:           #4e7d46;

    --bg:      #f7f5f0;
    --surface: #ffffff;
    --border:  #e3ded4;

    --text:  #26343a;
    --muted: #6b7a78;

    --radius: 14px;
    --shadow: 0 8px 24px rgba(31, 94, 88, .08);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

img { max-width: 100%; display: block; }

/* ---------- 3. Сетка ---------- */
.container { width: min(1080px, 92%); margin-inline: auto; }

/* ---------- 4. Типографика ---------- */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; color: var(--turquoise-dark); }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
.muted { color: var(--muted); }

/* ---------- 5. Кнопки ---------- */
.btn {
    display: inline-block;
    padding: .65rem 1.4rem;
    border-radius: 999px;
    border: 0;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.btn-small { padding: .35rem 1rem; font-size: .9rem; }
.btn-primary   { background: var(--turquoise);  color: #fff; }
.btn-primary:hover   { background: var(--turquoise-dark); }
.btn-secondary { background: var(--terracotta); color: #fff; }
.btn-secondary:hover { background: var(--terracotta-dark); }
.btn-ghost {
    background: transparent;
    color: var(--turquoise);
    border: 2px solid var(--turquoise);
}
.btn-ghost:hover { background: var(--turquoise-light); }

/* ---------- 6. Карточки ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}

/* ---------- 7. Шапка ---------- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
}
.logo { font-weight: 800; font-size: 1.2rem; color: var(--turquoise); text-decoration: none; }

.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-weight: 500; }
.nav a:hover { color: var(--terracotta); }
.nav a.btn:hover { color: #fff; }
.nav-user { font-weight: 600; color: var(--green); }

/* ---------- 8. Hero главной ---------- */
.hero {
    background: linear-gradient(135deg, var(--turquoise-light), #fdf1ec 60%, #eef4ea);
    padding: 4rem 0 3.5rem;
    text-align: center;
}
.hero h1 { font-size: 2.6rem; }
.hero p  { max-width: 640px; margin: 0 auto 1.6rem; color: var(--muted); font-size: 1.1rem; }

/* ---------- 9. Секции и карточки дней ---------- */
.section { padding: 2.5rem 0; }
.section h2, .section .subtitle { text-align: center; }
.section .subtitle { color: var(--muted); margin-bottom: 1.8rem; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.day { text-align: center; }
a.day {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
a.day:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(31, 94, 88, .14);
}
.day-badge {
    display: inline-block;
    background: var(--terracotta);
    color: #fff;
    border-radius: 999px;
    padding: .2rem .85rem;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* ---------- 10. Подвал ---------- */
.site-footer {
    background: var(--turquoise-dark);
    color: #dff0ee;
    padding: 1.4rem 0;
    margin-top: 3rem;
    text-align: center;
    font-size: .95rem;
}

/* ---------- 11. Адаптивность ---------- */
@media (max-width: 640px) {
    .site-header .container { flex-direction: column; }
    .hero h1 { font-size: 2rem; }
}

/* ---------- 12. Формы и уведомления ---------- */
.form-wrap { max-width: 460px; padding: 2.5rem 0; }
.form { display: flex; flex-direction: column; gap: .9rem; padding: 1.8rem; }
.form h2 { text-align: center; }

.field { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; font-weight: 600; }
.input {
    padding: .6rem .9rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font: inherit;
}
.input:focus { outline: 2px solid var(--turquoise); border-color: transparent; }

.form-note { text-align: center; margin: .3rem 0 0; }
.form-note a { color: var(--terracotta); }

.alert { padding: .7rem 1rem; border-radius: 10px; margin-bottom: .8rem; font-size: .95rem; }
.alert-error   { background: #fdecea; color: #a13327; border: 1px solid #f5c6c0; }
.alert-success { background: #e8f5e9; color: #2e6b34; border: 1px solid #c8e6c9; }
.alert-warn    {
    background: #fff8e1; color: #8a6116; border: 1px solid #f3e2b0;
    width: min(1080px, 92%); margin: 1rem auto 0;
}

/* ---------- 13. Внутренние страницы и Отчёт ---------- */
.page-hero {
    background: linear-gradient(135deg, var(--turquoise-light), #fdf1ec);
    padding: 2.2rem 0;
    text-align: center;
}
.page-hero h1 { margin-bottom: .3rem; }
.page-hero p  { color: var(--muted); margin: 0; }

.report { max-width: 800px; padding: 2rem 0 1rem; }
.report-day {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.8rem;
    margin-bottom: 2rem;
    scroll-margin-top: 90px;
}
.day-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.day-head h2 { margin: 0; }

.photo-placeholder {
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: var(--turquoise-light);
    color: var(--muted);
    text-align: center;
    padding: 2.5rem 1rem;
    margin-top: 1rem;
}

/* ---------- 14. Галерея ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.g-item { position: relative; }
.gallery a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform .25s;
}
.gallery a:hover img { transform: scale(1.05); }

.del-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.del-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: rgba(15, 30, 28, .55); color: #fff;
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.del-btn:hover { background: var(--terracotta); }
/* ========== ФОНОВЫЕ ИЗОБРАЖЕНИЯ И ПРОЗРАЧНОСТЬ ========== */

body {
    background-color: var(--bg);
    background-image: url('/images/bg-day.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
}

html[data-theme="dark"] body {
    background-image: url('/images/bg-night.jpg');
}

/* Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    z-index: -1;
}

html[data-theme="dark"] body::before {
    background: rgba(0, 0, 0, 0.3);
}

/* Шапка */
.site-header {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .site-header {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Навигация */
.nav a {
    color: var(--text);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

html[data-theme="dark"] .nav a {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    font-weight: 600;
}

.nav a:hover {
    color: var(--primary);
}

.logo {
    color: var(--turquoise-dark);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

html[data-theme="dark"] .logo {
    color: #3dd6c4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.nav-user {
    color: var(--text);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

html[data-theme="dark"] .nav-user {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* КАРТОЧКИ — ключевое изменение */
.card, .blog-post, .own-post, .chat-box, .form, .news-item, .day,
.report-day, .chat-right, .slot {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .own-post,
html[data-theme="dark"] .chat-box,
html[data-theme="dark"] .form,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .day,
html[data-theme="dark"] .report-day,
html[data-theme="dark"] .chat-right,
html[data-theme="dark"] .slot {
    background: rgba(20, 20, 40, 0.85) !important; /* Было 0.3, стало 0.85 */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Текст внутри карточек — делаем ярче в тёмной теме */
html[data-theme="dark"] .card,
html[data-theme="dark"] .blog-post,
html[data-theme="dark"] .own-post,
html[data-theme="dark"] .chat-box,
html[data-theme="dark"] .form,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .day,
html[data-theme="dark"] .report-day,
html[data-theme="dark"] .chat-right,
html[data-theme="dark"] .slot {
    color: #e4e4e7;
}

html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .blog-post h2,
html[data-theme="dark"] .own-post strong,
html[data-theme="dark"] .form h2,
html[data-theme="dark"] .form label span {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Поля ввода */
.input, textarea.input, select.input {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] textarea.input,
html[data-theme="dark"] select.input {
    background: rgba(30, 30, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] textarea.input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Алерты */
.alert {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    color: #1a1a1a;
}

html[data-theme="dark"] .alert {
    background: rgba(30, 30, 50, 0.8) !important;
    color: #e4e4e7;
}

html[data-theme="dark"] .alert-error {
    background: rgba(230, 57, 70, 0.3) !important;
    color: #ff6b6b;
}

html[data-theme="dark"] .alert-success {
    background: rgba(82, 183, 136, 0.3) !important;
    color: #6ee7a0;
}

/* Кнопки */
.btn-ghost {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

html[data-theme="dark"] .btn-ghost {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-primary {
    background: var(--primary) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background: var(--secondary) !important;
    color: #ffffff !important;
}

/* Hero */
.hero, .page-hero {
    background: transparent !important;
}

.news-section {
    background: transparent !important;
}

/* Подвал */
.site-footer {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    color: #1a1a1a;
}

html[data-theme="dark"] .site-footer {
    background: rgba(20, 20, 40, 0.8) !important;
    color: #e4e4e7;
}

/* Заголовки */
h1, h2, h3, h4 {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}
/* ========== ЧАТ — ПОЛНАЯ ПРОЗРАЧНОСТЬ ========== */

/* Контейнер сообщений — МАКСИМАЛЬНО ПРОЗРАЧНЫЙ */
.chat-messages,
.chat-messages-wrapper,
.chat-box .chat-messages {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .chat-messages,
html[data-theme="dark"] .chat-messages-wrapper,
html[data-theme="dark"] .chat-box .chat-messages {
    background: rgba(15, 15, 35, 0.4) !important;
}

/* Форма ввода — прозрачная */
.chat-form,
.chat-input-wrapper {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .chat-form,
html[data-theme="dark"] .chat-input-wrapper {
    background: rgba(15, 15, 35, 0.4) !important;
}

/* Правая панель видео — прозрачная */
.chat-right,
.video-panel {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html[data-theme="dark"] .chat-right,
html[data-theme="dark"] .video-panel {
    background: rgba(15, 15, 35, 0.4) !important;
}

/* Кнопки переключения каналов */
.chat-tab {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
}

html[data-theme="dark"] .chat-tab {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

.chat-tab.active {
    background: rgba(42, 157, 143, 0.8) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .chat-tab.active {
    background: rgba(61, 214, 196, 0.6) !important;
}

/* Поле ввода */
.chat-form .input,
#chat-input {
    background: rgba(255, 255, 255, 0.7) !important;
}

html[data-theme="dark"] .chat-form .input,
html[data-theme="dark"] #chat-input {
    background: rgba(30, 30, 50, 0.6) !important;
    color: #ffffff !important;
}

/* Кнопки видео */
.chat-right button,
.video-panel button {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #1a1a1a !important;
}

html[data-theme="dark"] .chat-right button,
html[data-theme="dark"] .video-panel button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Текст сообщений — яркий */
.chat-text {
    color: #1a1a1a !important;
    font-weight: 500;
}

html[data-theme="dark"] .chat-text {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Имена */
.chat-meta strong {
    color: #000000 !important;
    font-weight: 700;
}

html[data-theme="dark"] .chat-meta strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Время */
.chat-meta {
    color: #6c757d !important;
}

html[data-theme="dark"] .chat-meta {
    color: #a1a1aa !important;
}

/* Заголовок видео */
.chat-right h3 {
    color: #1a1a1a !important;
}

html[data-theme="dark"] .chat-right h3 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Описание видео */
.chat-right p,
.chat-right .small {
    color: #555 !important;
}

html[data-theme="dark"] .chat-right p,
html[data-theme="dark"] .chat-right .small {
    color: #c0c0c0 !important;
}
/* Кнопка темы — компактная, в одну строку с меню */
.theme-toggle {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    margin-left: 0.3rem !important;
    flex-shrink: 0;
}

/* Навигация — не переносить элементы */
.nav {
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    align-items: center;
}

/* Уменьшаем отступы между пунктами меню */
.nav a {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Имя пользователя — компактнее */
.nav-user {
    font-size: 0.9rem;
    margin-right: 0.3rem;
}

/* Кнопки Вход/Выход/Регистрация — компактнее */
.nav .btn-small {
    padding: 0.3rem 0.7rem !important;
    font-size: 0.85rem;
}

/* На мобильных — разрешаем перенос */
@media (max-width: 1200px) {
    .nav {
        flex-wrap: wrap !important;
        justify-content: center;
    }
}
/* Подзаголовки на главной и других страницах — яркие в тёмной теме */
.page-hero p,
.hero p,
.section-subtitle {
    color: var(--text-muted);
}

html[data-theme="dark"] .page-hero p,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .section-subtitle {
    color: #d0d0d0 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* Шапка в тёмной теме — полупрозрачная с размытием */
[data-theme="dark"] .site-header {
    background: rgba(26, 26, 46, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
/* Шапка в тёмной теме — как в светлой */
[data-theme="dark"] .site-header {
    background: rgba(26, 26, 46, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem 0;
}

[data-theme="dark"] .logo {
    white-space: nowrap;
    font-size: 1.1rem;
}

[data-theme="dark"] .site-header .container {
    padding: 0.3rem 1rem;
}

[data-theme="dark"] .nav {
    gap: 0.8rem;
}

[data-theme="dark"] .nav a {
    font-size: 0.85rem;
}
/* Шапка в тёмной теме — ТОЧНО как в светлой, только фон темнее */
[data-theme="dark"] .site-header {
    background: rgba(26, 26, 46, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Выпадающее меню для админки */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background: none;
    border: none;
    color: var(--text);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: var(--surface);
    min-width: 220px;
    box-shadow: var(--shadow);
    border-radius: 8px;
    z-index: 100;
    border: 1px solid var(--border);
}

.dropdown-content a {
    color: var(--text);
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid var(--border);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: var(--turquoise-light);
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Аватар в навигации */
.nav-user {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    font-weight: 500;
}

.nav-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.5rem;
}
/* ========== ПЕРЕКЛЮЧАТЕЛЬ ВИДИМОСТИ ПАРОЛЯ ========== */
.password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrap .input {
    width: 100%;
    padding-right: 45px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    transition: color 0.2s;
    border-radius: 4px;
}

.password-toggle:hover {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.05);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Тёмная тема */
html[data-theme="dark"] .password-toggle {
    color: #a1a1aa;
}

html[data-theme="dark"] .password-toggle:hover {
    color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}
/* Стили для блоков редактора на фронте */
.editor-image {
    margin: 1.5rem 0;
}

.editor-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.editor-image-full img {
    width: 100%;
}

.editor-image-half {
    display: flex;
    justify-content: center;
}

.editor-image-half img {
    width: 50%;
}

.editor-image-quarter {
    display: flex;
    justify-content: center;
}

.editor-image-quarter img {
    width: 25%;
}

.editor-image-left {
    float: left;
    margin: 0 1.5rem 1rem 0;
}

.editor-image-right {
    float: right;
    margin: 0 0 1rem 1.5rem;
}

.editor-image figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.editor-quote {
    border-left: 4px solid var(--primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--card-bg);
    border-radius: 0 8px 8px 0;
}

.editor-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    color: var(--text-muted);
}

.editor-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.editor-warning strong {
    display: block;
    margin-bottom: 0.5rem;
}

.editor-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.editor-table td,
.editor-table th {
    border: 1px solid var(--border);
    padding: 0.5rem;
}

.editor-delimiter {
    border: none;
    border-top: 2px solid var(--border);
    margin: 2rem 0;
}

.editor-button {
    display: inline-block;
    margin: 1rem 0;
}

.editor-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}

.editor-file-size {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.editor-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.editor-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.editor-gallery-item figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.editor-embed {
    display: block;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    margin: 1rem 0;
}

.editor-embed-title {
    display: block;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.editor-embed-url {
    color: var(--primary);
    font-size: 0.9rem;
}
/* Стили для отображения блоков редактора на фронте */
.img-full img {
    width: 100%;
}

.img-half {
    display: flex;
    justify-content: center;
}

.img-half img {
    width: 50%;
}

.img-quarter {
    display: flex;
    justify-content: center;
}

.img-quarter img {
    width: 25%;
}

.img-circle img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.img-left {
    float: left;
    margin: 0 1rem 1rem 0;
}

.img-right {
    float: right;
    margin: 0 0 1rem 1rem;
}

figure {
    margin: 1rem 0;
}

figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted, #666);
    margin-top: 0.5rem;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 1rem 0;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}