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

/* ===== THEME VARIABLES ===== */

/* Dark-Light (default) */
:root, [data-theme="dark-light"] {
    --bg-body: #325376;
    --header-bg: #012136;
    --header-border: #51b9d2;
    --header-title: #51b9d2;
    --header-issn: #aac8d8;
    --nav-bg: #013a5c;
    --nav-link: #cde6f0;
    --nav-hover-bg: #51b9d2;
    --nav-hover-color: #012136;
    --main-bg: #fff;
    --main-color: #333;
    --main-h2: #012136;
    --main-h2-border: #51b9d2;
    --main-h3: #013a5c;
    --side-bg: #012136;
    --side-color: #cde6f0;
    --side-h3: #51b9d2;
    --side-border: #1a4a6a;
    --link-color: #51b9d2;
    --vol-bg: #012136;
    --vol-color: #51b9d2;
    --vol-hover: #013a5c;
    --issue-bg: #013a5c;
    --issue-color: #fff;
    --issue-hover-bg: #51b9d2;
    --issue-hover-color: #012136;
    --article-border: #eee;
    --article-num: #012136;
    --article-authors: #666;
    --article-title: #012136;
    --breadcrumb-color: #999;
    --breadcrumb-sep: #ccc;
    --breadcrumb-current: #666;
    --footer-bg: #012136;
    --footer-border: #51b9d2;
    --footer-color: #aac8d8;
    --editor-strong: #012136;
    --editor-span: #666;
    --contact-strong: #012136;
    --switcher-bg: #012136;
    --switcher-color: #aac8d8;
    --switcher-active-bg: #51b9d2;
    --switcher-active-color: #012136;
}

/* Light */
[data-theme="light"] {
    --bg-body: #f0f2f5;
    --header-bg: #ffffff;
    --header-border: #2563eb;
    --header-title: #1e3a5f;
    --header-issn: #6b7280;
    --nav-bg: #1e3a5f;
    --nav-link: #e0e7ef;
    --nav-hover-bg: #2563eb;
    --nav-hover-color: #fff;
    --main-bg: #ffffff;
    --main-color: #1f2937;
    --main-h2: #1e3a5f;
    --main-h2-border: #2563eb;
    --main-h3: #1e3a5f;
    --side-bg: #ffffff;
    --side-color: #374151;
    --side-h3: #1e3a5f;
    --side-border: #e5e7eb;
    --link-color: #2563eb;
    --vol-bg: #1e3a5f;
    --vol-color: #fff;
    --vol-hover: #2563eb;
    --issue-bg: #e5e7eb;
    --issue-color: #1f2937;
    --issue-hover-bg: #2563eb;
    --issue-hover-color: #fff;
    --article-border: #e5e7eb;
    --article-num: #1e3a5f;
    --article-authors: #6b7280;
    --article-title: #1e3a5f;
    --breadcrumb-color: #9ca3af;
    --breadcrumb-sep: #d1d5db;
    --breadcrumb-current: #6b7280;
    --footer-bg: #1e3a5f;
    --footer-border: #2563eb;
    --footer-color: #d1d5db;
    --editor-strong: #1e3a5f;
    --editor-span: #6b7280;
    --contact-strong: #1e3a5f;
    --switcher-bg: #e5e7eb;
    --switcher-color: #6b7280;
    --switcher-active-bg: #2563eb;
    --switcher-active-color: #fff;
}

/* Dark */
[data-theme="dark"] {
    --bg-body: #0a0f1a;
    --header-bg: #111827;
    --header-border: #3b82f6;
    --header-title: #60a5fa;
    --header-issn: #6b7280;
    --nav-bg: #1f2937;
    --nav-link: #9ca3af;
    --nav-hover-bg: #3b82f6;
    --nav-hover-color: #fff;
    --main-bg: #111827;
    --main-color: #d1d5db;
    --main-h2: #e5e7eb;
    --main-h2-border: #3b82f6;
    --main-h3: #93c5fd;
    --side-bg: #1f2937;
    --side-color: #9ca3af;
    --side-h3: #60a5fa;
    --side-border: #374151;
    --link-color: #60a5fa;
    --vol-bg: #1f2937;
    --vol-color: #60a5fa;
    --vol-hover: #374151;
    --issue-bg: #374151;
    --issue-color: #d1d5db;
    --issue-hover-bg: #3b82f6;
    --issue-hover-color: #fff;
    --article-border: #374151;
    --article-num: #93c5fd;
    --article-authors: #9ca3af;
    --article-title: #e5e7eb;
    --breadcrumb-color: #6b7280;
    --breadcrumb-sep: #4b5563;
    --breadcrumb-current: #9ca3af;
    --footer-bg: #111827;
    --footer-border: #3b82f6;
    --footer-color: #6b7280;
    --editor-strong: #e5e7eb;
    --editor-span: #9ca3af;
    --contact-strong: #e5e7eb;
    --switcher-bg: #1f2937;
    --switcher-color: #6b7280;
    --switcher-active-bg: #3b82f6;
    --switcher-active-color: #fff;
}

/* ===== BASE STYLES ===== */

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg-body);
    color: var(--main-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
    background: var(--header-bg);
    border-bottom: 3px solid var(--header-border);
}
.header-inner {
    max-width: 1020px;
    margin: 0 auto;
    padding: 20px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.header-logo img { height: 70px; }
.header-info h1 {
    font-size: 22px;
    font-weight: bold;
    color: var(--header-title);
    margin-bottom: 4px;
}
.header-info .issn {
    font-size: 13px;
    color: var(--header-issn);
}

/* Theme switcher */
.theme-switcher {
    display: flex;
    gap: 4px;
    background: var(--switcher-bg);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}
.theme-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    background: transparent;
    color: var(--switcher-color);
    transition: all 0.2s;
    font-family: Arial, sans-serif;
}
.theme-btn.active {
    background: var(--switcher-active-bg);
    color: var(--switcher-active-color);
}
.theme-btn:hover:not(.active) {
    opacity: 0.8;
}

/* Navigation */
.site-nav {
    background: var(--nav-bg);
}
.nav-inner {
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
}
.nav-inner a {
    display: block;
    padding: 12px 18px;
    color: var(--nav-link);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.nav-inner a:hover,
.nav-inner a.active {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-color);
    text-decoration: none;
}

/* Main layout */
.site-wrapper {
    max-width: 1020px;
    margin: 0 auto;
    padding: 20px 15px;
    flex: 1;
    width: 100%;
}
.two-col {
    display: flex;
    gap: 20px;
}
.col-main {
    flex: 1;
    background: var(--main-bg);
    border-radius: 4px;
    padding: 25px 30px;
    min-height: 400px;
}
.col-side {
    width: 260px;
    flex-shrink: 0;
}
.side-box {
    background: var(--side-bg);
    border-radius: 4px;
    padding: 18px;
    margin-bottom: 15px;
    color: var(--side-color);
}
.side-box h3 {
    font-size: 15px;
    color: var(--side-h3);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--side-border);
    padding-bottom: 8px;
}
.side-box p, .side-box a {
    font-size: 13px;
    line-height: 1.6;
}
.side-box a { color: var(--link-color); }

/* Content */
.col-main h2 {
    font-size: 20px;
    color: var(--main-h2);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--main-h2-border);
    padding-bottom: 8px;
}
.col-main h3 {
    font-size: 16px;
    color: var(--main-h3);
    margin: 18px 0 8px;
}
.col-main p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.col-main ul {
    margin: 0 0 15px 25px;
    font-size: 14px;
    line-height: 1.7;
}

/* Editorial board */
.editor-section { margin-bottom: 20px; }
.editor-section h3 { margin-bottom: 6px; }
.editor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 25px;
}
.editor-list li {
    font-size: 13px;
    line-height: 1.8;
    break-inside: avoid;
}
.editor-list li strong { color: var(--editor-strong); }
.editor-list li span { color: var(--editor-span); font-style: italic; }

/* Archive */
.archive-volume {
    margin-bottom: 20px;
}
.archive-volume h3 {
    cursor: pointer;
    background: var(--vol-bg);
    color: var(--vol-color);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 15px;
}
.archive-volume h3:hover { background: var(--vol-hover); }
.archive-issue { margin: 10px 0 10px 15px; }
.archive-issue h4 {
    cursor: pointer;
    font-size: 14px;
    color: var(--issue-color);
    background: var(--issue-bg);
    padding: 7px 12px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.archive-issue h4:hover {
    background: var(--issue-hover-bg);
    color: var(--issue-hover-color);
}
.archive-issue h4 .toggle {
    display: inline-block;
    width: 18px;
    font-weight: bold;
    text-align: center;
}
.article-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--article-border);
    font-size: 13px;
    line-height: 1.6;
}
.article-item .article-num {
    font-weight: bold;
    color: var(--article-num);
    margin-right: 4px;
}
.article-item .authors { color: var(--article-authors); }
.article-item .title { color: var(--article-title); font-weight: bold; }
.article-item .pdf-link {
    color: #c0392b;
    font-weight: bold;
    margin-left: 8px;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 13px;
    margin-bottom: 16px;
    color: var(--breadcrumb-color);
}
.breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .sep {
    margin: 0 6px;
    color: var(--breadcrumb-sep);
}
.breadcrumb .current {
    color: var(--breadcrumb-current);
}

/* Contact */
.contact-info { font-size: 14px; line-height: 1.8; }
.contact-info strong { color: var(--contact-strong); }

/* Footer */
.site-footer {
    background: var(--footer-bg);
    border-top: 3px solid var(--footer-border);
    color: var(--footer-color);
    font-size: 12px;
    text-align: center;
    padding: 15px;
    margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .two-col { flex-direction: column; }
    .col-side { width: 100%; }
    .editor-list { column-count: 1; }
    .nav-inner a { padding: 10px 12px; font-size: 13px; }
    .header-inner { flex-direction: column; align-items: flex-start; }
}