html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    line-height: 1.6;
    background-color: #f8fafc;
    color: #2c3e50;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme {
    background-color: #0f172a;
    color: #cbd5e1;
}

.container {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Шапка */
.main-header {
    background-color: #0f172a;
    border-bottom: 3px solid #10b981;
    color: #fff;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.logo a {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    text-decoration: none;
}

.logo span { color: #10b981; }

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

.main-nav a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.main-nav a:hover, .main-nav a.active {
    color: #10b981;
}

/* Кнопка смены темы */
.theme-btn {
    background: #1e293b;
    border: 1px solid #334155;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.theme-btn:hover { background: #334155; }
.theme-btn .glyph-sun { display: block; }
.theme-btn .glyph-moon { display: none; }
body.dark-theme .theme-btn .glyph-sun { display: none; }
body.dark-theme .theme-btn .glyph-moon { display: block; }

/* Контентная сетка */
.content-wrapper {
    display: grid;
    grid-template-columns: 2.8fr 1.2fr;
    gap: 35px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.content-wrapper.single-column {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.main-article {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

body.dark-theme .main-article {
    background: #1e293b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.article-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
    color: #0f172a;
}
body.dark-theme .article-header h1 { color: #f8fafc; }

.meta {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 35px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}
body.dark-theme .meta { border-bottom: 1px solid #334155; }

.article-section h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #0f172a;
    border-left: 4px solid #10b981;
    padding-left: 12px;
}
body.dark-theme .article-section h2 { color: #f8fafc; }

.article-section p {
    margin-bottom: 15px;
    color: #334155;
    text-align: justify;
}
body.dark-theme .article-section p { color: #cbd5e1; }

.article-section ul { margin-left: 20px; margin-bottom: 15px; }
body.dark-theme .article-section ul { color: #cbd5e1; }

.info-block {
    background-color: #f0fdf4;
    border-left: 4px solid #10b981;
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}
body.dark-theme .info-block { background-color: #064e3b; }

/* Карточки химических субстанций */
.chem-card {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
body.dark-theme .chem-card { background-color: #141b2d; border-color: #334155; }
.chem-card:hover { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1); }

.card-trigger { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.card-trigger h3 { margin: 0; font-size: 18px; color: #0f172a; transition: color 0.2s; }
body.dark-theme .card-trigger h3 { color: #f8fafc; }
.chem-card:hover .card-trigger h3 { color: #10b981; }
.card-arrow { font-size: 12px; color: #64748b; transition: transform 0.3s ease; }

.card-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background-color: #fff; }
body.dark-theme .card-content { background-color: #1e293b; }
.card-inner-grid { padding: 20px; border-top: 1px solid #e2e8f0; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; align-items: center; }
body.dark-theme .card-inner-grid { border-top: 1px solid #334155; }
.svg-container-mini { width: 100%; max-width: 280px; justify-self: center; }
.chem-card.active-card .card-arrow { transform: rotate(180deg); color: #10b981; }

/* Химические ссылки и кнопки */
.chem-link { color: #10b981; text-decoration: none; transition: color 0.2s; }
.chem-link:hover { color: #059669; text-decoration: underline; }
body.dark-theme .chem-link { color: #34d399; }
.back-btn { display: inline-block; padding: 8px 16px; background-color: #f1f5f9; color: #475569; text-decoration: none; border-radius: 6px; font-weight: 600; }
.back-btn:hover { background-color: #e2e8f0; color: #0f172a; }
body.dark-theme .back-btn { background-color: #1e293b; color: #cbd5e1; border: 1px solid #334155; }

/* Инструменты и формы */
.calc-box { background: #f8fafc; border: 1px solid #e2e8f0; padding: 30px; border-radius: 8px; margin: 25px 0; }
body.dark-theme .calc-box { background: #141b2d; border-color: #334155; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group select { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font-size: 16px; }
body.dark-theme .form-group input, body.dark-theme .form-group select { background: #1e293b; border-color: #475569; color: #fff; }
.submit-btn { background: #10b981; color: #fff; border: none; padding: 14px 24px; font-size: 16px; font-weight: 600; border-radius: 6px; cursor: pointer; width: 100%; }
.submit-btn:hover { background: #059669; }

.text-accent { color: #10b981; font-size: 22px; }
.hidden { display: none !important; }

/* Таблицы и схемы */
.table-container { width: 100%; overflow-x: auto; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; min-width: 500px; }
th, td { border: 1px solid #e2e8f0; padding: 12px; }
body.dark-theme th, body.dark-theme td { border: 1px solid #334155; }
th { background-color: #f1f5f9; color: #0f172a; }
body.dark-theme th { background-color: #1e293b; color: #f8fafc; }
pre { background-color: #0f172a; color: #38bdf8; padding: 20px; border-radius: 8px; overflow-x: auto; font-family: monospace; margin: 20px 0; }
.svg-container { width: 100%; margin: 30px 0; }

/* Сайдбар */
.sidebar { position: sticky; top: 100px; height: fit-content; }
.sidebar-box { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); }
body.dark-theme .sidebar-box { background: #1e293b; }
.sidebar h3 { margin-bottom: 20px; font-size: 18px; }
.sidebar-menu { list-style: none; }
.sidebar-menu li { margin-bottom: 12px; }
.sidebar-menu a { color: #475569; text-decoration: none; font-weight: 500; display: block; padding: 8px 12px; border-radius: 6px; transition: all 0.2s; }
body.dark-theme .sidebar-menu a { color: #cbd5e1; }
.sidebar-menu a:hover { background-color: #f1f5f9; color: #10b981; padding-left: 18px; }
body.dark-theme .sidebar-menu a:hover { background-color: #334155; }

.main-footer { background-color: #0f172a; color: #94a3b8; text-align: center; padding: 25px 0; border-top: 1px solid #1e293b; }

@media (max-width: 992px) { .content-wrapper { grid-template-columns: 1fr; } .sidebar { position: static; } }
@media (max-width: 768px) { .main-header .container { flex-direction: column; text-align: center; } .article-header h1 { font-size: 28px; } .card-inner-grid { grid-template-columns: 1fr; } }