:root{--bg-color:#0A0A0A;--card-bg:#1A1A1A;--text-primary:#FFFFFF;--text-secondary:#A0A0A0;--gold:#D4AF37;--border-color:#333333}
.light{--bg-color:#F5F5F5;--card-bg:#FFFFFF;--text-primary:#121212;--text-secondary:#555555;--border-color:#E0E0E0}
body{background-color:var(--bg-color);color:var(--text-primary);font-family:'Inter',sans-serif;transition:background-color .3s,color .3s}
.playfair{font-family:'Playfair Display',serif}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-color)}
::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.hidden{display:none!important}
.glass{background:var(--card-bg);border:1px solid var(--border-color)}
.gold-gradient-text{background:linear-gradient(to right,#D4AF37,#F3E5AB);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-tab.active{border-bottom:2px solid var(--gold);color:var(--gold)}
html{scroll-behavior:smooth}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#splash-overlay{position:fixed;inset:0;z-index:9999;background:radial-gradient(ellipse at center,#0F2040 0%,#060E1A 70%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:opacity 1s ease}
#splash-overlay.fade-out{opacity:0;pointer-events:none}
.splash-logo{font-size:5rem;margin-bottom:.5rem;animation:logoFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(201,168,76,.4))}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash-brand{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;background:linear-gradient(135deg,#E8C96A,#C9A84C,#9A7A30);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px;margin-bottom:.3rem}
.splash-subtitle{font-size:.8rem;color:#B8C4E0;letter-spacing:3px;text-transform:uppercase;font-weight:300;margin-bottom:2rem;animation:fadeInUp .8s .4s ease both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.splash-dots{display:flex;gap:.5rem;animation:fadeInUp .8s .6s ease both}
.splash-dot{width:6px;height:6px;border-radius:50%;background:#C9A84C;animation:dotPulse 1.2s ease-in-out infinite}
.splash-dot:nth-child(2){animation-delay:.2s}
.splash-dot:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}
.splash-version{margin-top:2rem;font-size:.65rem;color:rgba(184,196,224,.3);letter-spacing:2px}
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3}
.folder-card{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.folder-card:hover{transform:translateY(-4px);box-shadow:0 0 30px rgba(212,175,55,0.2);border-color:var(--gold)}
.folder-icon{transition:all 0.3s ease}
.folder-card:hover .folder-icon{transform:scale(1.1);color:#F3E5AB}
.breadcrumb-item{transition:color 0.2s ease;cursor:pointer}
.breadcrumb-item:hover{color:var(--gold)}
.article-card{transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer}
.article-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 4px 20px rgba(212,175,55,0.15)}
.view-enter{animation:viewSlideIn 0.4s ease forwards}
@keyframes viewSlideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.article-section{border-left:3px solid var(--gold);padding-left:1rem;margin-bottom:1.5rem}
.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}