*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}
body{background:linear-gradient(135deg,#000,#4c0009,#000);background-size:400% 400%;animation:gradientBG 15s ease infinite;color:#333;min-height:100vh}
a{text-decoration:unset;color:#002c6f}
td{padding:10px}
@keyframes gradientBG{0%{background-position:0 50%}
50%{background-position:100% 50%}
to{background-position:0 50%}
}
.container{max-width:1000px;margin:0 auto;background:#fff}
.header{width:1000px;margin:auto;background:url(img/header.webp);height:150px}
.header .logo_right{display:flex;font-size:.8em;color:#fff;padding:122px 245px 0 365px}
.header .ad_text{padding-right:5px;align-content:center}
.header .ad_text a{color:#ff0;font-weight:600;font-size:14px}
#adjs{background:#fff;width:1000px;margin:auto}
#adjs a{font-size:24px;line-height:1;display:block}
marquee{background:#f6f6f6;padding:10px;margin-bottom:15px}
#category-1-posts{margin:0 20px 50px;display:inline-block}
#category-2-posts{text-align:center}
#category-1-posts li{text-align:center;width:50%;float:left}
#category-1-posts li,#category-2-posts li{list-style:none}
#category-1-posts li a{font-size:1.35rem;font-weight:600;display:block;padding:5px}
#category-2-posts li a{font-size:1.75rem;font-weight:600;display:block;padding:5px;color:#000}
#category-1-posts li a:hover{text-decoration:underline}
.articles-container{gap:30px;background:#fff}
.article-card{background:#fff;overflow:hidden;animation:fadeIn .8s ease;opacity:0;transform:translateY(30px);animation-fill-mode:forwards;height:auto;display:flex;flex-direction:column;position:relative;border:1px solid #cecece;border-radius:15px;margin:0 20px 20px}
@keyframes fadeIn{to{opacity:1;transform:translateY(0)}
}
.article-card:first-child{animation-delay:.2s}
.article-card:nth-child(2){animation-delay:.4s}
.article-card:nth-child(3){animation-delay:.6s}
.article-card:nth-child(4){animation-delay:.8s}
.article-card:nth-child(5){animation-delay:1s}
.article-card:nth-child(6){animation-delay:1.2s}
.card-header{background:linear-gradient(90deg,#f9f0e4,#d4eef0);text-align:center;padding:15px;position:relative;min-height:120px}
.card-title{font-size:1.5rem;font-weight:600;margin-top:50px;line-height:1.4;max-height:4.4em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.card-subtitle{font-size:.95rem;opacity:.85;margin:20px 0 30px}
.card-content{padding:20px;flex:1;overflow-y:auto;line-height:1.7;color:#444}
.card-content p{margin-bottom:15px}
.card-content img{max-width:100%;height:auto;border-radius:8px;margin:15px 0;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.card-footer{padding:15px 25px;background:#f8f9fa;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:#6c757d}
.loading-container{text-align:center;padding:80px 20px}
.spinner{width:60px;height:60px;border-radius:50%;border:5px solid hsla(0,0%,100%,.3);border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin:0 auto 30px}
@keyframes spin{to{transform:rotate(1turn)}
}
.loading-container{background:#fff}
.loading-text{font-size:1.5rem;font-weight:500}
.error-message{background:rgba(231,76,60,.8);padding:20px;border-radius:10px;margin:20px 0;animation:fadeIn .8s ease}
.empty-state,.error-message{color:#fff;text-align:center}
.empty-state{padding:80px 20px;grid-column:1/-1}
.empty-state i{font-size:5rem;margin-bottom:25px;opacity:.7}
.empty-state h3{font-size:2.2rem;margin-bottom:15px}
.last-updated{text-align:center;color:hsla(0,0%,100%,.7);padding:15px;font-size:.95rem;background:#8e3c46}
.content-fade{position:relative;overflow:hidden}
.content-fade:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff)}
.nav-buttons{gap:15px;line-height:50px;position:sticky;top:0;z-index:999;background:#002c6f;width:1000px;margin:auto;padding:10px;overflow-x:auto;white-space:nowrap}
.nav-btn,.nav-buttons{display:flex;justify-content:flex-start}
.nav-btn{background:hsla(0,0%,100%,.15);color:#fff;font-weight:600;padding:0 10px;height:30px;font-size:1rem;cursor:pointer;align-items:center;transition:all .3s;backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2)}
.nav-btn:hover{background:hsla(0,0%,100%,.3)}
.nav-btn.red{color:red}
.nav-btn.blue{color:#85f4ff}
.nav-btn.green{color:#0f0}
.nav-btn.yellow{color:#ff0}
.float-buttons{position:fixed;right:30px;bottom:30px;display:flex;flex-direction:column;gap:15px;z-index:1000}
.float-btn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3498db,#2c3e50);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;position:relative;overflow:hidden}
.float-btn:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,0));opacity:0;transition:opacity .3s}
.float-btn:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.float-btn:hover:after{opacity:1}
.float-btn:active{transform:translateY(0) scale(.95)}
.float-btn i{pointer-events:none}
#back-to-top{display:none}
#back-to-top:target{display:flex}
#refresh-btn{animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1)}
50%{transform:scale(1.1)}
to{transform:scale(1)}
}
#reserved-link{background:linear-gradient(135deg,#9b59b6,#8e44ad)}
.footer{font-size:.85em;padding:10px 0;text-align:center;background:#002c6f;width:1000px;margin:auto;color:#fff}
.footer a{color:#fff;padding:5px}
@media (max-width:992px){.header,#adjs,.nav-buttons,.container,.footer{width:100%}
.articles-container{grid-template-columns:1fr}
.nav-buttons{height:118px;padding:25px 0 0}
.nav-btn,marquee{font-size:2.5rem;padding:35px 15px}
.articles-container,.card-subtitle,.card-title{font-size:2.5rem}
.float-buttons{right:15px;bottom:15px}
.float-btn{width:45px;height:45px;font-size:18px}
}