/* =========================
   HEADER
========================= */
.simple-header {
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;

  /* 🔥 GAP FIX */
  margin-bottom: 3px;
}


.simple-header strong {
  font-size: 18px;
}

.simple-header small {
  display: block;
  font-size: 13px;
  color: #9ca3af;
}

.back {
  font-size: 20px;
}

.back a {
	text-decoration:none;
}

/* =========================
   INFO BOX
========================= */
.info-box {
  border-radius: 18px;
  padding: 18px;
  color: #fff;
  margin-bottom: 16px;
}

/* 🔥 HEADER ke baad first box ka extra gap remove */
.info-box:first-of-type {
  margin-top: 0;
}

.info-box h3 {
  margin-top: 0;
}

.info-box.blue {
  background: linear-gradient(135deg,#0b4bb3,#2563eb);
}

.info-box.red {
  background: linear-gradient(135deg,#ff4d4d,#ff6b6b);
}


/* =========================
   SECTION TITLE
========================= */
.section-title {
  margin: 18px 0 10px;
  font-size: 16px;
}


/* =========================
   TIPS
========================= */
.tip {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tip.simple {
  background: #eaf1ff;
}

.tip.danger {
  background: #ffecec;
  border: 1px solid #ffb4b4;
}

.tip .icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

.tip p {
  margin: 0;
  text-align: justify;
}


/* =========================
   HAPPY BOX
========================= */
.happy-box {
  margin-top: 20px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg,#eef4ff,#fff);
  border: 1px solid #c7d2fe;
}

.happy-box h3 {
  margin-top: 0;
  color: #1d4ed8;
}
/* 🔥 FIX EXTRA TOP GAP – TUTORIAL PAGE */
.tutorial-page.content {
  padding-top: 14px !important;
}