:root{
  --bg:#0f1720;
  --card-bg: #fff;
  --muted:#6b7280;
  --radius:14px;
}
*{box-sizing:border-box}
html { background: linear-gradient(180deg,#06070a 0%, #0e1419 100%); position: fixed; width: 100%; overflow: auto; }
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* color: #111827; */
  color: #FFF;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:10px;
  overflow: auto;
}

/* Top bar similar to screenshot */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
  margin-bottom:12px;
}
.topbar .left{display:flex;gap:10px;align-items:center}
.topbar .emoji{font-size:20px}
.topbar .right{opacity:.8;font-size:14px}
.topbar a{color: #62b2d9}

/* Feed container */
.feed{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:420px; /* mobile width */
  margin: 0 auto;
  padding-bottom:40px;
}

/* Card */
.card{
  background:var(--card-bg);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 14px 40px rgba(2,6,23,0.65); }
.card-media{ height:200px; background:#ddd; display:block; position:relative; }
.card-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Body */
.card-body{ padding:12px 14px; }
.card-title{
  font-size:15px;
  margin:0 0 8px 0;
  color:#0f172a;
  line-height:1.18;
}
.card-meta{ display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.share-btn{
  background:transparent;border:0;cursor:pointer;font-size:16px;padding:6px;border-radius:8px;color: #FFF;
}
.share-btn:hover{ background:#f3f4f6; color: #06070a; }
.card .share-btn{
  color: #06070a;
}
.top { max-width:420px; margin:0 auto 12px; display:flex; justify-content:space-between; align-items:center; }
.loading { color: #666; }
.feed { max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:14px; padding-bottom:40px; }
.card { background:#fff; color:#0f172a; border-radius:16px; overflow:hidden; box-shadow:0 8px 30px rgba(2,6,23,0.6); cursor:pointer }
.media { height:200px; background:#ddd; }
.media img { width:100%; height:100%; object-fit:cover; display:block; }
.body { padding:12px; }
.title { margin:0 0 8px 0; font-size:15px; }
.meta { display:flex; justify-content:space-between; color:#6b7280; font-size:13px }
.note { max-width:420px; margin:10px auto; color:#ddd; text-align:center; font-size:13px }


.container {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
}

/* HERO IMAGE */
.hero {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    margin-bottom: 25px;
}
.hero img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

/* TITLE */
h1 {
  font-size: 20px;
  margin-bottom: 10px;
  line-height: 1.3;
}
h1.blog-title {
    font-size: 25px;
}

/* META */
.meta {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 30px;
}

/* BODY CONTENT */
.content {
    background: #161b22;
    padding: 24px;
    border-radius: 16px;
    line-height: 1.8;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    margin-bottom: 40px;
}

.content h2, .content h3 {
    color: #58a6ff;
    margin-top: 25px;
}

.content p {
    color: #d1d5db;
    margin-bottom: 18px;
    font-size: 16px;
}
.content img {
  width: 100%;
  height: auto;
}

/* SHARE BUTTON */
.share-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}


/* BACK BUTTON */
.back {
    display: inline-block;
    color: #58a6ff;
    margin-top: 30px;
    text-decoration: none;
    font-size: 15px;
}


/* AD Loader */
.shimmer-card {
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 2rem;
	background: #ffffff36;
	border-radius: 1rem;
	box-shadow: .25rem .125rem 1rem rgba(0,0,0,.5);
	padding: 1.5rem;
}
.profile {
	aspect-ratio: 1;
	width: 4rem;
	background: #EDEDED;
	border-radius: 50%;
	animation-delay: 1s;
}
.content {
	/* background: #EDEDED; */
	border-radius: 1rem;
	height: 100%;
}
.shimmer {
	background: linear-gradient(
		110deg,
		#ededed42 30%,
		#DCDCDC 50%,
		#ededed42 70%
	);
	background-size: 200%;
	animation: shimmer 1.5s infinite linear;
}
@keyframes shimmer {
	0% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0 0;
	}
}



.skeliton-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff24;
  padding: 15px;
  border-radius: 10px;
  margin: 10px auto;
  position: relative;
  max-width: 420px;
}
.skeliton-ad-lbl {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  padding: 4px 5px;
  color: #DDD;
  background: #8f8f8f54;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 5px;
}
.skeliton-post {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skeliton-post .skeliton-avatar {
  float: left;
  width: 52px;
  height: 52px;
  border-radius: 25%;
  margin-right: 8px;
  background-image: linear-gradient(110deg, #ededed42 0px, #dcdcdcd2 40px, #ededed42 80px);
  background-size: 600px;
  animation: shine-avatar 1.6s infinite linear;
}
.skeliton-flex {
  display: flex;
  align-items: center;
}
.skeliton-post .skeliton-ad-line {
  float: left;
  width: 24px;
  height: 16px;
  margin-top: 5px;
  margin-right: 10px;
  border-bottom-right-radius: 7px;
  background-image: linear-gradient(110deg, #ededed42 0px, #dcdcdcd2 40px, #ededed42 80px);
  background-size: 600px;
  animation: shine-ad-line 1.6s infinite linear;
}
.skeliton-post .skeliton-line {
  float: left;
  width: 155px;
  height: 25px;
  margin-top: 5px;
  background-image: linear-gradient(110deg, #ededed42 0px, #dcdcdcd2 40px, #ededed42 80px);
  background-size: 600px;
  animation: shine-line 1.6s infinite linear;
}
.skeliton-post .skeliton-sub-line {
  float: left;
  width: 190px;
  height: 16px;
  margin-top: 7px;
  background-image: linear-gradient(110deg, #ededed42 0px, #dcdcdcd2 40px, #ededed42 80px);
  background-size: 600px;
  animation: shine-sub-line 1.6s infinite linear;
}

.skeliton-post .skeliton-btn {
  float: left;
  width: 70px;
  height: 30px;
  margin-left: 10px;
  border-radius: 20px;
  background-image: linear-gradient(110deg, #ededed42 0px, #dcdcdcd2 40px, #ededed42 80px);
  background-size: 600px;
  animation: shine-btn 1.6s infinite linear;
}
.skeliton-post .skeliton-avatar + .skeliton-line {
  margin-top: 11px;
  width: 100px;
}

@keyframes shine-avatar {
  0% {
    background-position: -32px;
  }
  40%, 100% {
    background-position: 208px;
  }
}

@keyframes shine-line {
  0% {
    background-position: -120px;
  }
  40%, 100% {
    background-position: 190px;
  }
}
@keyframes shine-sub-line {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 190px;
  }
}
@keyframes shine-ad-line {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 190px;
  }
}

@keyframes shine-btn {
  0% {
    background-position: -450px;
  }
  40%, 100% {
    background-position: 150px;
  }
}