:root{
  --bg:#0b0f14;
  --text:#ffffff;
  --card:#111827;
  --border:#1f2937;
}

.light{
  --bg:#ffffff;
  --text:#111827;
  --card:#f3f4f6;
  --border:#e5e7eb;
}

/*  */

body{
  background:var(--bg);
  color:var(--text);
  font-family:sans-serif;
  padding:40px;
}

.blog-card{
  background:var(--card);
  padding:20px;
  margin-bottom:20px;
  border-radius:12px;
  border:1px solid var(--border);
  transition:0.3s;
}

.blog-card:hover{
  transform:translateY(-4px);
  border-color:#3b82f6;
}

.container{
  max-width:900px;
  margin:auto;
}

.title{
  font-size:32px;
  margin-bottom:10px;
}

.subtitle{
  color:#9ca3af;
  margin-bottom:30px;
}

.blog-card h2{
  margin-bottom:10px;
}

.blog-img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:15px;
}

.blog-card img{
  width:100%;
  height:auto;
  border-radius:10px;
  margin:15px 0;
}

/* HEADER */
.header{
  position:sticky;
  top:0;
  background:var(--bg);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  z-index:100;
}

.header-inner{
  display:flex;
  align-items:center;
  height:60px;
}

.logo{
  font-weight:600;
}

/* BACK BUTTON */
.back-btn{
  margin:20px 0;
  background:none;
  border:1px solid #1f2937;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  color:#fff;
}

.back-btn:hover{
  border-color:#3b82f6;
}

/* BLOG DETAIL */
.blog-detail{
  max-width:800px;
}

.blog-detail h1{
  margin-bottom:15px;
}

.blog-detail p{
  color:#d1d5db;
  line-height:1.6;
}

.blog-detail img{
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border-radius:10px;
  margin:15px 0;
}

#progress-bar{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:#3b82f6;
  z-index:9999;
  transition:width 0.1s;
}

.blog-layout{
  display:flex;
  gap:40px;
}

.toc{
  width:200px;
  position:sticky;
  top:80px;
  height:max-content;
}

.toc h3{
  margin-bottom:10px;
}

.toc-item{
  font-size:14px;
  color:#9ca3af;
  margin-bottom:8px;
  cursor:pointer;
}

.toc-item:hover{
  color:#fff;
}

.read-time{
  color:#9ca3af;
  margin-bottom:10px;
}

.toc-item.active{
  color:#3b82f6;
  font-weight:600;
}