/* ================= SAFE LOCAL RESET ================= */
.manual-page *,
.automation-page *,
.java-page *{
  box-sizing:border-box;
}

/* Sticky offset */
section[id]{scroll-margin-top:120px}

/* Layout containers */
.manual-page,
.automation-page,
.java-page{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

/* INFO BOXES */
.learning-path,
.progress-hint{
  background:#f8fafc;
  border-left:4px solid #2563eb;
  padding:16px 20px;
  border-radius:12px;
  margin:24px 0;
  font-size:15px;
  color:#0f172a;
}

.learn-box{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:24px;
  margin:32px 0;
}

.learn-box h3{margin-bottom:14px}
.learn-box ul{margin:0;padding-left:18px}
.learn-box li{margin-bottom:10px;color:#334155}

/* ================= ARTICLE LIST SECTIONS ================= */
.manual-section,
.automation-section,
.java-section{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:32px;
  margin-top:32px;
}

.manual-section h2,
.automation-section h2,
.java-section h2{
  font-size:28px;
  color:#2563eb;
}

.manual-divider,
.automation-divider,
.java-divider{
  width:60px;
  height:4px;
  background:#e5edff;
  border-radius:4px;
  margin:12px 0 28px;
}

/* LIST BASE */
.manual-list,
.automation-list,
.java-list{
  list-style:none;
  margin:0;
  padding:0;
}

.manual-list li,
.automation-list li,
.java-list li{
  display:flex;
  gap:18px;
  margin-bottom:28px;
  align-items:flex-start;
}

/* START HERE */
.start-here{
  padding-left:12px;
  border-left:4px solid #22c55e;
  background:linear-gradient(90deg,#f0fdf4,transparent);
  border-radius:10px;
}

/* NUMBER */
.manual-number,
.automation-number,
.java-number{
  width:44px;
  height:44px;
  min-width:44px;
  background:#2563eb;
  color:#ffffff;
  font-weight:700;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease;
}

/* CONTENT */
.manual-content,
.automation-content,
.java-content{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* TITLE */
.manual-title,
.automation-title,
.java-title{
  font-size:18px;
  font-weight:600;
  color:#0f172a;
  text-decoration:none;
  transition:transform .25s ease, color .25s ease;
}

/* HOVER MOVE RIGHT */
.manual-list li:hover .manual-number,
.automation-list li:hover .automation-number,
.java-list li:hover .java-number{
  transform:translateX(6px);
}

.manual-list li:hover .manual-title,
.automation-list li:hover .automation-title,
.java-list li:hover .java-title{
  transform:translateX(6px);
  color:#2563eb;
}

.manual-title:hover,
.automation-title:hover,
.java-title:hover{
  text-decoration:underline;
}

/* START BADGE */
.start-badge{
  background:#22c55e;
  color:#ffffff;
  font-size:11px;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  margin-left:6px;
}

/* TAGS */
.manual-tags,
.automation-tags,
.java-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.tag{
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
}

.tag-beginner{background:#dcfce7;color:#166534}
.tag-core{background:#dbeafe;color:#1e40af}
.tag-advanced{background:#fef3c7;color:#92400e}
.tag-interview{background:#f3e8ff;color:#6b21a8}

/* ================= END CTR ================= */
.end-ctr{
  margin:64px 0;
  background:linear-gradient(135deg,#2563eb,#4f46e5);
  color:#ffffff;
  border-radius:20px;
  padding:40px 28px;
  text-align:center;
}

.end-ctr h2{font-size:28px;margin-bottom:12px}

.end-ctr p{
  font-size:16px;
  opacity:.95;
  max-width:720px;
  margin:0 auto 24px;
}

.end-ctr-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

.end-ctr a{
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  font-size:15px;
}

.end-ctr .primary{
  background:#ffffff;
  color:#2563eb;
}

.end-ctr .secondary{
  border:2px solid rgba(255,255,255,.5);
  color:#ffffff;
}

/* MOBILE */
@media(max-width:768px){
  .manual-section,
  .automation-section,
  .java-section{padding:22px}

  .manual-title,
  .automation-title,
  .java-title{font-size:16px}

  .manual-number,
  .automation-number,
  .java-number{width:38px;height:38px}

  .end-ctr h2{font-size:22px}
}