/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background:#0a0a0a; color:#e0e0e0; line-height:1.5; }
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
/* Header & Nav */
header { background:#000000cc; backdrop-filter:blur(8px); position:sticky; top:0; z-index:100; border-bottom:1px solid #ff3366; padding:1rem 0; }
.nav-container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.logo { font-size:1.8rem; font-weight:800; letter-spacing:-1px; background:linear-gradient(135deg,#fff,#ff3366); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ltd-accent { color:#ff3366; background:none; -webkit-background-clip:unset; background-clip:unset; }
nav a { color:#eee; text-decoration:none; margin-left:2rem; font-weight:500; transition:color 0.2s; }
nav a:hover { color:#ff3366; }
/* Hero */
.hero { background: radial-gradient(circle at 20% 30%, #1a1a2e, #0a0a0a); padding:4rem 0; text-align:center; border-bottom:2px solid #ff3366; }
.hero h1 { font-size:3rem; font-weight:800; background:linear-gradient(135deg,#fff,#ff99cc); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { font-size:1.2rem; letter-spacing:3px; margin:1rem 0; color:#ccc; font-weight:300; }
.neon-bar { width:80px; height:4px; background:#ff3366; margin:1.5rem auto; box-shadow:0 0 8px #ff3366; }
/* Card Grid */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:2rem; margin:3rem auto; }
.card { background:#111; border-radius:16px; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; border:1px solid #222; }
.card:hover { transform:translateY(-5px); box-shadow:0 20px 30px -15px rgba(255,51,102,0.2); }
.card-img { width:100%; height:200px; object-fit:cover; }
.card-img-placeholder { background:#222; height:200px; display:flex; align-items:center; justify-content:center; color:#666; }
.card-content { padding:1.2rem; }
.card-content h3 a { color:white; text-decoration:none; font-size:1.4rem; }
.meta { font-size:0.8rem; color:#aaa; margin:0.5rem 0; }
.read-more { display:inline-block; margin-top:1rem; color:#ff3366; font-weight:600; text-decoration:none; }
.pagination { display:flex; justify-content:center; gap:0.5rem; margin:2rem 0; }
.pagination a { padding:0.5rem 1rem; background:#1e1e1e; border-radius:8px; text-decoration:none; color:#ccc; }
.pagination a.active { background:#ff3366; color:white; }
footer { background:#030303; text-align:center; padding:2rem 0; margin-top:3rem; border-top:1px solid #222; }
.footer-tagline { font-size:0.8rem; color:#ff3366; margin-top:0.5rem; }
/* Article Detail */
.article-header { background:#0a0a0a; padding:2rem 0; border-bottom:1px solid #ff3366; }
.back-home { color:#ff3366; text-decoration:none; }
.article-body { padding:2rem 0; }
.featured-img { max-width:100%; margin:1rem 0; border-radius:12px; }
.content { font-size:1.1rem; line-height:1.7; color:#ddd; }
.content img { max-width:100%; height:auto; margin:1rem auto; display:block; }
.share-buttons a { background:#1e1e1e; padding:0.3rem 0.8rem; border-radius:20px; margin-right:0.8rem; text-decoration:none; color:#ff3366; }
/* Admin */
.admin-container, .admin-form { max-width:1100px; margin:2rem auto; background:#111; padding:2rem; border-radius:24px; }
table { width:100%; border-collapse:collapse; background:#1a1a1a; }
th, td { padding:0.8rem; text-align:left; border-bottom:1px solid #333; }
.btn-new { background:#ff3366; padding:0.5rem 1rem; border-radius:40px; display:inline-block; margin-bottom:1rem; color:white; text-decoration:none; }
.login-body { display:flex; justify-content:center; align-items:center; height:100vh; background:#000; }
.login-box { background:#111; padding:2rem; border-radius:20px; width:320px; text-align:center; }
input, textarea, button { width:100%; margin-bottom:1rem; padding:0.6rem; background:#222; border:1px solid #333; color:white; border-radius:8px; }
button { background:#ff3366; border:none; cursor:pointer; font-weight:bold; }
@media (max-width:720px){ .hero h1{font-size:2rem;} nav a{margin-left:1rem;} }