:root { --primary: #0a0a0f; --secondary: #101116; --accent: #00e0ff; --accent-dark: #0072ff; --text-primary: #f0f0f5; --text-secondary: rgba(240, 240, 245, 0.7); --gradient: linear-gradient(135deg, var(--accent), var(--accent-dark)); --card-bg: rgba(20, 21, 27, 0.8); --glass: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --success: #4caf50; --warning: #ffc107; --danger: #f44336; --info: #2196f3; --border-radius-lg: 18px; --border-radius-md: 14px; --border-radius-sm: 10px; --topbar-height: 60px; --sidebar-width: 240px; } body.light-theme { --primary: #f4f7fa; --secondary: #ffffff; --text-primary: #1f2937; --text-secondary: #6b7280; --card-bg: #ffffff; --glass: rgba(0, 0, 0, 0.03); --glass-border: rgba(0, 0, 0, 0.08); --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.unlocalized { visibility: hidden; } body { background-color: var(--primary); color: var(--text-primary); font-family: 'Montserrat', sans-serif; line-height: 1.7; min-height: 100vh; overflow-x: hidden; position: relative; padding-top: var(--topbar-height); transition: background-color 0.3s, color 0.3s; } #main-container { padding-left: 0; transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); } body.details-view-active { overflow: hidden; } #particles-js { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0.25; } body.light-theme #particles-js { opacity: 0.5; } @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 992px) { #main-container.sidebar-open { padding-left: var(--sidebar-width); } } @media (max-width: 576px) { :root { --border-radius-lg: 14px; --border-radius-md: 10px; --border-radius-sm: 8px; --topbar-height: 55px; } } body::-webkit-scrollbar { width: 12px; } body::-webkit-scrollbar-track { background: var(--primary); border-left: 1px solid var(--glass-border); } body::-webkit-scrollbar-thumb { background-color: var(--accent-dark); border-radius: 10px; border: 3px solid var(--primary); } body::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } body.light-theme::-webkit-scrollbar-track { background: var(--secondary); border-left: 1px solid var(--glass-border); } body.light-theme::-webkit-scrollbar-thumb { background-color: #bdc3c7; border-color: var(--secondary); } body.light-theme::-webkit-scrollbar-thumb:hover { background-color: #a3aab1; }