/* Virtual World SIG - Modern Theme */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg: #0a0a0f;
  --surface: #12121a;
  --surface-2: #1a1a28;
  --surface-3: #222236;
  --border: #2a2a40;
  --text: #e0e0ef;
  --text-muted: #8888aa;
  --accent: #6c5ce7;
  --accent-light: #a29bfe;
  --accent-glow: rgba(108, 92, 231, 0.3);
  --gradient-1: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%);
  --gradient-2: linear-gradient(135deg, #0a0a0f 0%, #1a1a28 100%);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:16px;
  min-height:100vh;
}

a{color:var(--accent-light);text-decoration:none;transition:color .2s}
a:hover{color:#fff;text-decoration:underline}

img{max-width:100%;height:auto;border-radius:var(--radius-sm)}

/* ── Header ─────────────────────────────────── */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);
  background:rgba(18,18,26,0.85);
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
}
.site-logo{
  font-size:1.4rem;font-weight:800;
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.5px;
}
.site-logo a{
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-decoration:none;
}
.site-tagline{
  font-size:0.8rem;color:var(--text-muted);
  font-weight:400;margin-top:2px;
}

nav ul{display:flex;gap:0.5rem;list-style:none}
nav a{
  padding:0.5rem 1rem;border-radius:var(--radius-sm);
  font-size:0.9rem;font-weight:500;
  color:var(--text-muted);transition:all .2s;
}
nav a:hover,nav a.active{
  background:var(--surface-2);color:var(--text);text-decoration:none;
}

/* ── Hero Banner ────────────────────────────── */
.hero{
  background:var(--gradient-2);
  padding:4rem 2rem 3rem;
  text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%, var(--accent-glow) 0%, transparent 60%),
             radial-gradient(circle at 70% 50%, rgba(0,206,201,0.15) 0%, transparent 60%);
}
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}
.hero h1{
  font-size:2.5rem;font-weight:800;
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1rem;
}
.hero p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto}

/* ── Main Layout ────────────────────────────── */
.main-container{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 320px;gap:2rem;
  padding:2rem;
}
.content-area{min-width:0}
.sidebar{position:sticky;top:5rem;align-self:start}

@media(max-width:900px){
  .main-container{grid-template-columns:1fr;padding:1rem}
  .sidebar{position:static}
  .header-inner{flex-direction:column;gap:1rem}
  nav ul{flex-wrap:wrap;justify-content:center}
  .hero h1{font-size:1.8rem}
}

/* ── Post Cards ─────────────────────────────── */
.post-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;margin-bottom:1.5rem;
  transition:border-color .3s, box-shadow .3s;
}
.post-card:hover{
  border-color:var(--accent);
  box-shadow:0 0 20px var(--accent-glow);
}
.post-card h2{font-size:1.4rem;margin-bottom:0.75rem;line-height:1.3}
.post-card h2 a{color:var(--text)}
.post-card h2 a:hover{color:var(--accent-light);text-decoration:none}

.post-meta{
  display:flex;gap:1rem;flex-wrap:wrap;
  font-size:0.85rem;color:var(--text-muted);
  margin-bottom:1rem;padding-bottom:0.75rem;
  border-bottom:1px solid var(--border);
}
.post-meta span{display:flex;align-items:center;gap:0.3rem}

.post-body{color:var(--text);line-height:1.8}
.post-body p{margin-bottom:1rem}
.post-body img{margin:1rem 0;border-radius:var(--radius-sm)}
.post-body strong{color:#fff}
.post-body h2,.post-body h3{margin:1.5rem 0 0.75rem;color:#fff}
.post-body ul,.post-body ol{margin:0.5rem 0 1rem 1.5rem}
.post-body li{margin-bottom:0.3rem}
.post-body blockquote{
  border-left:3px solid var(--accent);
  padding:0.75rem 1.25rem;margin:1rem 0;
  background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-muted);
}

/* ── Single Post Page ───────────────────────── */
.single-post{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem;
}
.single-post h1{
  font-size:2rem;margin-bottom:1rem;
  line-height:1.3;color:#fff;
}

/* ── Sidebar Widgets ────────────────────────── */
.widget{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;margin-bottom:1.5rem;
}
.widget h3{
  font-size:0.9rem;text-transform:uppercase;
  letter-spacing:1px;color:var(--accent-light);
  margin-bottom:1rem;padding-bottom:0.5rem;
  border-bottom:1px solid var(--border);
}
.widget ul{list-style:none}
.widget li{padding:0.4rem 0;border-bottom:1px solid rgba(42,42,64,0.5)}
.widget li:last-child{border-bottom:none}
.widget a{font-size:0.9rem;color:var(--text-muted)}
.widget a:hover{color:var(--accent-light)}

/* ── Category Page ──────────────────────────── */
.category-header{
  padding:2rem;max-width:1200px;margin:0 auto;
}
.category-header h1{
  font-size:2rem;
  background:var(--gradient-1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Pagination ─────────────────────────────── */
.pagination{
  display:flex;gap:0.5rem;justify-content:center;
  margin:2rem 0;
}
.pagination a,.pagination span{
  padding:0.5rem 1rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  font-size:0.9rem;color:var(--text-muted);
}
.pagination a:hover{border-color:var(--accent);color:var(--text);text-decoration:none}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Footer ─────────────────────────────────── */
.site-footer{
  background:var(--surface);border-top:1px solid var(--border);
  padding:3rem 2rem 2rem;margin-top:3rem;
  text-align:center;
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.footer-links a{color:var(--text-muted);font-size:0.9rem}
.footer-links a:hover{color:var(--accent-light)}
.footer-copy{color:var(--text-muted);font-size:0.8rem}

/* ── Archive list ───────────────────────────── */
.archive-list{list-style:none}
.archive-list li{
  padding:0.75rem 0;border-bottom:1px solid var(--border);
}
.archive-list .date{
  font-size:0.8rem;color:var(--text-muted);
  margin-right:1rem;min-width:100px;display:inline-block;
}

/* ── Breadcrumb ─────────────────────────────── */
.breadcrumb{
  font-size:0.85rem;color:var(--text-muted);
  margin-bottom:1.5rem;
}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--accent-light)}
.breadcrumb span{margin:0 0.4rem;opacity:0.5}

/* ── Back link ──────────────────────────────── */
.back-link{
  display:inline-flex;align-items:center;gap:0.4rem;
  color:var(--text-muted);font-size:0.9rem;
  margin-bottom:1.5rem;
}
.back-link:hover{color:var(--accent-light)}

/* scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}