body { font-family: system-ui, sans-serif; margin: 0; padding: 0; background: #0b0c10; color: #eeeeee; overflow-x: hidden; }
a { color: #66fcf1; text-decoration: none; }
header { background: #1f2833; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; border-bottom: 1px solid #45a29e; }
header h1 { margin: 0; font-size: 1.4rem; white-space: nowrap; }
.nav-container { position: relative; width: 100%; overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent); mask-image: linear-gradient(to right, transparent, black 30px, black calc(100% - 30px), transparent); }
nav { display: flex; gap: 1.2rem; width: 100%; overflow-x: auto; padding: 0 30px 8px 30px; scrollbar-width: none; -ms-overflow-style: none; }
nav::-webkit-scrollbar { display: none; }
nav a { white-space: nowrap; font-weight: 500; color: #66fcf1; font-size: 0.95rem; }
main { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.section-title { font-size: 1.8rem; margin-bottom: 1.5rem; color: #66fcf1; }
.category-row { margin-bottom: 2rem; }
.category-banner { width: 100%; height: 250px; border-radius: 12px; overflow: hidden; position: relative; display: block; border: 1px solid #45a29e44; transition: transform 0.3s ease, border-color 0.3s ease; }
.category-banner:hover { transform: scale(1.01); border-color: #66fcf1; }
.category-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.category-banner-text { position: absolute; bottom: 25px; left: 25px; z-index: 2; }
.category-banner-text h2 { margin: 0; font-size: 2.2rem; color: #66fcf1; text-shadow: 2px 2px 8px rgba(0,0,0,0.8); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.card-banner { position: relative; height: 300px; border-radius: 0.75rem; overflow: hidden; border: 1px solid #45a29e33; display: flex; align-items: flex-end; background-color: #1f2833; }
.card-banner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(0.7); transition: 0.4s ease; }
.card-banner:hover img { filter: brightness(0.9); transform: scale(1.05); }
.card-banner-info { position: relative; z-index: 2; padding: 0.8rem; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.9)); }
.card-banner-title { font-size: 0.9rem; font-weight: 700; color: #66fcf1; margin: 0; }
.card-banner-tagline { font-size: 0.75rem; color: #45a29e; font-weight: bold; }
footer { border-top: 1px solid #45a29e; padding: 2rem; text-align: center; background: #1f2833; margin-top: 3rem; color: #c5c6c7; }
.breadcrumbs { font-size: 0.9rem; margin-bottom: 1rem; color: #c5c6c7; }
.entry-layout { display: grid; grid-template-columns: 400px 1fr; gap: 2rem; align-items: start; }
.entry-layout img { width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
@media (max-width: 768px) { 
    .entry-layout { grid-template-columns: 1fr; } 
    .entry-layout img { max-width: 300px; margin: 0 auto 1.5rem auto; display: block; }
    .category-banner { height: 160px; }
    .category-banner-text h2 { font-size: 1.6rem; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
}
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; background: #1f2833; border-radius: 8px; overflow: hidden; }
th { background: #45a29e; color: #0b0c10; padding: 12px; text-align: left; font-size: 0.9rem; text-transform: uppercase; }
td { padding: 12px; border-bottom: 1px solid #45a29e33; font-size: 0.95rem; }
tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(102, 252, 241, 0.05); }
td a { background: #45a29e; color: #0b0c10 !important; padding: 5px 12px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; transition: 0.3s; }
td a:hover { background: #66fcf1; box-shadow: 0 0 10px #66fcf166; }