*{margin:0;padding:0;box-sizing:border-box}
body{
background:#0a0a0a;
color:#fff;
font-family:Arial;
padding:20px;
}
a{text-decoration:none;color:#fff}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.logo{
font-size:32px;
font-weight:bold;
color:#facc15;
}

.search{
width:420px;
padding:14px;
background:#161b22;
border:none;
border-radius:12px;
color:#fff;
}

.btn{
background:#d4af37;
color:#000;
padding:12px 18px;
border-radius:12px;
font-weight:bold;
display:inline-block;
border:none;
cursor:pointer;
}

.banner{
height:260px;
border-radius:22px;
background:linear-gradient(135deg,#111827,#d4af37);
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
font-weight:bold;
margin-bottom:24px;
}

.category-bar{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:24px;
}

.category-bar a{
background:#161b22;
padding:12px 18px;
border-radius:12px;
border:1px solid #333;
}

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}

.card{
background:#161b22;
border-radius:18px;
overflow:hidden;
border:1px solid #222;
transition:.2s;
}

.card:hover{
transform:translateY(-5px);
}

.card img{
width:100%;
height:190px;
object-fit:cover;
}

.info{
padding:14px;
}

.info h3{
font-size:16px;
height:46px;
overflow:hidden;
}

.info p{
font-size:13px;
color:#aaa;
height:40px;
overflow:hidden;
margin-top:8px;
}

.meta{
display:flex;
justify-content:space-between;
margin-top:10px;
font-size:12px;
color:#888;
}

.tag{
display:inline-block;
padding:6px 12px;
background:#d4af37;
color:#000;
border-radius:20px;
margin-top:10px;
font-size:12px;
}

.detail{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:420px 1fr;
gap:30px;
}

.cover{
width:100%;
border-radius:20px;
}

.box{
background:#161b22;
padding:30px;
border-radius:20px;
}

.line{
margin-top:14px;
color:#bbb;
}

.code{
background:#222;
padding:14px;
border-radius:12px;
margin-top:20px;
}

.login-bg{
background:#000;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

.login-box{
background:#161b22;
padding:40px;
border-radius:20px;
width:420px;
box-shadow:0 0 30px rgba(0,0,0,.6);
}

.login-title{
font-size:30px;
margin-bottom:20px;
color:#facc15;
text-align:center;
}

.input{
width:100%;
padding:14px;
border:none;
border-radius:12px;
background:#0f172a;
color:#fff;
margin-top:14px;
}

@media(max-width:900px){
.grid{grid-template-columns:repeat(2,1fr)}
.detail{grid-template-columns:1fr}
}

@media(max-width:600px){
.grid{grid-template-columns:1fr}
.search{width:100%}
.topbar{flex-direction:column}
}