/* --- GLOBAL VARIABLES --- */
:root { 
    --navy: #0a192f; --info: #0dcaf0; --paper: #ffffff; 
    --bg-area: #f4f7f9; --text-main: #333; --sidebar-bg: #ffffff;
    --article-font-size: 11.5pt;
}

[data-theme="dark"] {
    --navy: #020617; --info: #0ea5e9; --paper: #1e293b;
    --bg-area: #0f172a; --text-main: #f1f5f9; --sidebar-bg: #1e293b;
}

/* --- BASE STYLES --- */
body, html { height: 100%; margin: 0; font-family: 'Inter', sans-serif; background: var(--bg-area); transition: all 0.3s ease; }

/* --- INDEX PAGE STYLES --- */
.hero-section { background: var(--navy); color: white; padding: 80px 20px; text-align: center; }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; padding: 50px; }
.pillar-card { background: var(--paper); padding: 30px; border-radius: 12px; border-top: 5px solid var(--info); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* --- ARTICLE VIEWER & JOURNAL STYLES --- */
.viewer-nav { height: 70px; background: var(--navy); border-bottom: 2px solid var(--info); position: sticky; top: 0; z-index: 1000; }
.main-wrapper { display: flex; min-height: calc(100vh - 70px); }
.sidebar { width: 280px; background: var(--sidebar-bg); border-right: 1px solid rgba(0,0,0,0.1); padding: 30px; }
.journal-sheet { 
    background: var(--paper); width: 800px; min-height: 1120px; 
    margin: 40px auto; padding: 80px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
    position: relative; 
}
.watermark { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 3.5rem; color: rgba(0,0,0,0.02); font-weight: 900; pointer-events: none; 
}

/* --- PRINT & PDF OPTIMIZATION --- */
@media print {
    .viewer-nav, .sidebar, .no-print { display: none !important; }
    .journal-sheet { width: 100% !important; box-shadow: none !important; margin: 0 !important; }
}

.btn-navy { background-color: var(--navy); color: var(--info); border: 1px solid var(--info); }
.btn-outline-navy { border: 1px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background-color: var(--navy); color: var(--info); }
.active-filter { box-shadow: 0 0 10px var(--info); }