html,body{height:100%;min-height:100vh;margin:0;padding:0;font-family:Montserrat,sans-serif;color:#333;box-sizing:border-box;background-color:#f4f4f4;display:flex;flex-direction:column}*,*:before,*:after{box-sizing:inherit}#root,.app-layout{display:flex;flex-direction:column;min-height:100vh}.layout-content{flex:1 0 auto}footer{margin-top:auto}header.site-header{background-color:#2c3e50;color:#fff;padding:16px 24px;box-shadow:0 4px 8px #00000014;position:relative;z-index:10}.header-content{display:flex;justify-content:space-evenly;align-items:center;margin:auto;flex-wrap:wrap;gap:1rem}.logo{font-size:1.8rem;font-weight:700;margin:0}.logo a{color:#fff;text-decoration:none}.menu-toggle{display:none;background:none;border:none;font-size:28px;color:#fff;cursor:pointer}nav.nav{display:flex;flex-grow:1;justify-content:flex-end;transition:all .3s ease-in-out}nav.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}nav.nav ul li a{color:#ffffffb3;text-decoration:none;font-size:15px;padding:8px 12px;border-radius:6px;transition:background .3s,text-decoration .3s}nav.nav ul li a:hover{background-color:#ffffff1a;text-decoration:none;font-weight:500;color:#fff}@media (max-width: 768px){.menu-toggle{display:block}nav.nav{width:100%;max-height:0;overflow:hidden;flex-direction:column;background-color:#2c3e50;transition:max-height .3s ease-in-out}nav.nav.open{max-height:500px}nav.nav ul{flex-direction:column;align-items:center;gap:12px;padding:16px 0}nav.nav ul li a{width:100%;text-align:center;padding:12px;font-size:16px}}nav ul li a:hover{background-color:#ff5733}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}#scrollTopBtn{position:fixed;bottom:20px;right:20px;background-color:#ff5733;color:#fff;border:none;padding:10px 15px;font-size:18px;cursor:pointer;border-radius:50%;display:none}#scrollTopBtn:hover{background-color:#d43f00}.search-container{display:flex;justify-content:center;align-items:center;margin-top:30px;padding:0 16px;width:100%;box-sizing:border-box;position:relative;z-index:1}.search-wrapper{position:relative;max-width:1100px;width:100%}.search-wrapper i{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#999;font-size:16px;pointer-events:none}.search-wrapper input[type=text]{width:100%;padding:12px 16px 12px 40px;border-radius:8px;border:1px solid #ddd;background-color:#f9f9f9;font-size:16px;transition:border-color .3s,box-shadow .3s;box-sizing:border-box}.search-wrapper input[type=text]:focus{border-color:#fff3;outline:none;background-color:#fff}.blog-container{max-width:1200px;width:90%;margin:20px auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;flex:1 0 auto;grid-auto-rows:1fr;align-items:start}.blog-card{background:#1e2a38;padding:20px;border-radius:16px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:.3s ease-in-out;height:100%}.blog-card .icon{background-color:#eef1f5;width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;font-size:20px;color:#333}.blog-card .actions{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.blog-card .action-btn{padding:6px 14px;background-color:#2c3e50;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;transition:background .3s}.blog-card .action-btn:hover{background-color:#1a242f;text-decoration:none}.actions a{color:#fff;text-decoration:none;list-style-type:none}.blog-card h3{font-size:1.5rem;margin-bottom:10px}.category-btn{padding:6px 12px;font-size:12px;font-weight:500;border:none;border-radius:20px;background-color:#3498db;color:#fff;cursor:default;text-transform:uppercase;transition:background-color .3s ease}.filter-bar{display:flex;justify-content:flex-end;gap:10px;padding:10px 20px;flex-wrap:wrap;max-width:1200px;width:90%;margin:10px auto -20px}.filter-btn{padding:8px 16px;background-color:#ecf0f1;color:#2c3e50;border:none;border-radius:20px;cursor:pointer;font-weight:400;transition:all .3s ease}.filter-btn:hover{background-color:#bdc3c7}.filter-btn.active{background-color:#3498db;color:#fff}.switch{position:relative;display:inline-block;width:42px;height:24px}.switch input{opacity:0;width:0;height:0}.slider.round{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider.round:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.switch input:checked+.slider.round{background-color:#2c3e50}.switch input:checked+.slider.round:before{transform:translate(18px)}.details-container{max-width:800px;margin:60px auto;padding:40px 30px 60px;background:#fff;border-radius:12px;box-shadow:0 6px 20px #00000014;line-height:1.8;font-size:1.05rem;color:#2c3e50;transition:background-color .3s,color .3s}.details-container h1,.details-container h2,.details-container h3{color:#2c3e50;margin-bottom:16px}.details-container h1{font-size:2.2rem;margin-bottom:25px}.details-container h2{font-size:1.6rem;margin-top:32px}.details-container h3{font-size:1.3rem;margin-top:24px}.details-container p{margin-bottom:20px}.details-container pre{background:#f6f8fa;padding:16px;border-radius:8px;overflow-x:auto;font-size:.95rem}.details-container code{background:#f0f0f0;padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;font-size:.95rem;color:#c7254e}body.dark-mode .details-container{background-color:#2c3e50;color:#f1f1f1}body.dark-mode .details-container h1,body.dark-mode .details-container h2,body.dark-mode .details-container h3{color:#f1f1f1}body.dark-mode .details-container pre{background:#1a1a1a;color:#f1f1f1}body.dark-mode .details-container code{background:#333;color:#ffb3b3}body.dark-mode .article-body blockquote{background:#222;border-left:4px solid #3498db;padding:12px 16px;font-style:italic}.share-section{margin-top:40px}.share-section h3{font-size:1.2rem;margin-bottom:10px}.share-buttons{display:flex;gap:12px;flex-wrap:wrap}.share-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.95rem;transition:background-color .3s ease,transform .2s ease}.share-btn svg{font-size:1rem}.share-btn.twitter{background-color:#1da1f2;color:#fff}.share-btn.linkedin{background-color:#0077b5;color:#fff}.share-btn:hover{transform:translateY(-2px);opacity:.95}.share-btn.twitter:hover{background-color:#1a91d0}.share-btn.linkedin:hover{background-color:#005582}.share-btn.facebook{background-color:#3b5998;color:#fff}.share-btn.facebook:hover{background-color:#2d4373}.related-articles{margin-top:60px}.related-articles h3{font-size:1.4rem;margin-bottom:16px;color:#2c3e50}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.related-card{background-color:#f9f9f9;border-radius:12px;padding:16px;text-decoration:none;color:#2c3e50;box-shadow:0 2px 6px #0000000f;transition:transform .2s ease,box-shadow .2s ease;border:1px solid #2c3e50}.related-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000014}.related-card h4{font-size:1.1rem;margin-bottom:8px}.related-card p{font-size:.9rem;color:#555;margin-bottom:10px}.related-card .tag{font-size:.75rem;font-weight:700;background-color:#3498db;color:#fff;padding:4px 10px;border-radius:20px;display:inline-block}hr{border:none;height:1px;background-color:#ddd;margin:20px 0}footer{background-color:#2c3e50;color:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;width:100%;margin-top:auto;flex-shrink:0}.blog-card.viewed{opacity:.85;border:1px solid #ccc}.viewed-badge{background-color:#bdc3c7;color:#2c3e50;font-size:11px;padding:4px 10px;border-radius:16px;text-transform:uppercase;margin-left:6px;display:inline-block;font-weight:500}.bookmark-btn{background:none;border:none;font-size:18px;cursor:pointer;color:#999;margin-left:8px;transition:color .3s}.bookmark-btn.active{color:#f39c12}.bookmark-btn:hover{color:#e67e22}.clear-bookmarks-btn{background-color:#e74c3c;color:#fff;border:none;padding:10px 16px;font-size:14px;border-radius:8px;cursor:pointer;transition:background .3s ease}.clear-bookmarks-btn:hover{background-color:#c0392b}.clear-bookmarks-btn:disabled{background-color:#bdc3c7;cursor:not-allowed}.bookmarks-empty{padding:40px 20px;background-color:transparent}body.dark-mode .bookmarks-empty{background-color:transparent}mark{background-color:#fffa8b;color:inherit;padding:2px 4px;border-radius:4px;animation:highlightFadeIn .6s ease-in-out}@keyframes highlightFadeIn{0%{background-color:transparent;transform:scale(.95);opacity:0}to{background-color:#fffa8b;transform:scale(1);opacity:1}}.article-fade{opacity:0;transform:translateY(20px);animation:fadeInUp .4s ease-out forwards}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.footer-socials{display:flex;list-style:none;margin:0;padding:0}.footer-socials li{margin-left:15px}.footer-socials li a{color:#fff;font-size:18px;transition:color .3s}.footer-socials li a:hover{color:#3498db}.site-header{position:sticky;top:0;z-index:999;transition:box-shadow .3s ease}.site-header.scrolled{box-shadow:0 4px 12px #00000026}nav ul li a.active{text-decoration:none;font-weight:700;color:#2c3e50;background-color:#f9f9f9}body.dark-mode .app-layout,body.dark-mode .layout-content,body.dark-mode .blog-container{background-color:#1a1a1a}body.dark-mode:after{content:"";display:block;height:100px;background-color:#1a1a1a}body.dark-mode{background-color:#1a1a1a;color:#f1f1f1}body.dark-mode .blog-card{background-color:#2c3e50;color:#fff}body.dark-mode .search-wrapper input[type=text]{background-color:#333;color:#fff;border-color:#555}body.dark-mode .filter-btn{background-color:#444;color:#eee}body.dark-mode .filter-btn.active{background-color:#3498db;color:#fff}body.dark-mode header,body.dark-mode footer{background-color:#121212}body.dark-mode .category-btn{background-color:#2980b9}.not-found-container{text-align:center;padding:60px 20px;max-width:600px;margin:0 auto}.not-found-container h1{font-size:2.5rem;margin-bottom:20px;color:#e74c3c}.not-found-container p{font-size:1.2rem;margin-bottom:30px}.back-home{display:inline-block;background-color:#fff;border:1px solid #3498db;color:#3498db;padding:10px 20px;border-radius:8px;text-decoration:none;transition:background-color .3s ease}.back-home:hover{background-color:#2980b9;color:#fff;border:1px solid #2980b9;text-decoration:none}.not-found-image{max-width:50%;height:auto;margin-bottom:20px}.not-found-search{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;max-width:600px;margin:0 auto}body.dark-mode .not-found-container,body.dark-mode .not-found-search{background-color:transparent}.pagination{display:flex;justify-content:center;gap:10px;margin:30px 0;flex-wrap:wrap}.pagination-btn{padding:8px 14px;background-color:#ecf0f1;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:background .3s ease}.pagination-btn:hover{background-color:#bdc3c7}.pagination-btn.active{background-color:#3498db;color:#fff;font-weight:700}.pagination-btn.prev-next{background-color:#f1f1f1;color:#2c3e50;font-weight:500}.pagination-summary{text-align:center;font-size:14px;margin-top:-10px;margin-bottom:10px;color:#555}body.dark-mode .pagination{color:#f1f1f1}body.dark-mode .pagination-btn{background-color:#fff;color:#444}body.dark-mode .pagination-btn:hover{background-color:#555}body.dark-mode .pagination-btn.active{background-color:#3498db;color:#fff;font-weight:700}body.dark-mode .pagination-btn.prev-next{background-color:#333;color:#ccc}body.dark-mode .pagination-summary{color:#aaa}.article-skeleton{display:flex;flex-direction:column;border:1px solid #ddd;padding:1rem;border-radius:8px;background:#f8f8f8;animation:pulse 1.5s infinite ease-in-out}.skeleton-icon,.skeleton-title,.skeleton-body{background-color:#ddd;border-radius:4px}.skeleton-icon{width:40px;height:40px;margin-bottom:1rem}.skeleton-title{width:70%;height:18px;margin-bottom:.5rem}.skeleton-body{width:100%;height:12px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (max-width: 1200px){.blog-container{width:95%;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}@media (max-width: 1024px){.blog-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (max-width: 992px){.blog-container{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}}@media (max-width: 768px){.blog-container{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding:15px;margin:30px auto}.blog-card{padding:20px;min-height:160px}.blog-card h3{font-size:1.3rem;margin-bottom:12px}.blog-container{grid-template-columns:repeat(auto-fit,minmax(100%,1fr))}.menu-toggle{display:block}nav{width:100%;max-height:0;overflow:hidden;position:absolute;top:100%;left:0;background-color:#2c3e50;padding:10px 0;box-shadow:0 4px 6px #0000001a;transition:max-height .3s ease-out}nav.active{max-height:300px}nav ul{flex-direction:column;align-items:center;gap:10px}nav ul li{width:100%;text-align:center}nav ul li a{display:block;padding:12px}}@media (max-width: 576px){.blog-container{grid-template-columns:1fr;gap:15px}.blog-card{min-height:auto;padding:20px 15px}header h1{font-size:1.5rem}footer{flex-direction:column;text-align:center}.footer-socials{margin-top:10px;justify-content:center}.footer-socials li:first-child{margin-left:0}}@media (max-width: 480px){.search-wrapper input[type=text]{font-size:14px;padding:10px 14px 10px 38px}.search-wrapper i{font-size:14px;left:10px}}@media (max-width: 320px){.blog-card h3{font-size:1.2rem}.blog-card p{font-size:.9rem}main h1{font-size:1.5rem}}