/* Base Styles */
body { font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.8; color: #333; background-color: #f4f6f8; margin: 0; padding: 0; }
a { color: #3498db; text-decoration: none; transition: 0.3s; }
a:hover { color: #2980b9; text-decoration: underline; }
strong { color: #e74c3c; background: linear-gradient(transparent 70%, #ffcccb 70%); }

.container { max-width: 900px; margin: 40px auto; background: #fff; padding: 60px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

/* Headings */
h1 { font-size: 28px; text-align: center; margin-bottom: 40px; color: #2c3e50; }
h1 span { display: block; font-size: 16px; color: #7f8c8d; font-weight: normal; margin-top: 10px; }
h2 { font-size: 24px; border-bottom: 3px solid #3498db; padding-bottom: 10px; margin: 50px 0 20px; color: #2c3e50; }
h3 { font-size: 20px; border-left: 6px solid #3498db; padding-left: 15px; margin: 30px 0 15px; background: #f0f8ff; padding-top: 5px; padding-bottom: 5px; color: #2c3e50; }

/* Profile Section */
.profile-header { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; background: #eef2f5; padding: 30px; border-radius: 12px; }
.profile-img { width: 200px; height: 200px; background-color: #2c3e50; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 50px; flex-shrink: 0; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-intro h2 { border: none; margin: 0 0 10px; font-size: 22px; padding: 0; }
.catchphrase { font-weight: bold; color: #e67e22; display: block; margin-bottom: 10px; font-size: 14px; }

/* Table of Contents */
.toc { background: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 40px; }
.toc-title { font-weight: bold; text-align: center; margin-bottom: 15px; display: block; color: #555; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin-bottom: 10px; border-bottom: 1px dashed #eee; padding-bottom: 5px; }
.toc li:last-child { border-bottom: none; }
.toc a { color: #555; font-weight: 500; display: block; }
.toc a:hover { color: #3498db; padding-left: 5px; }

/* Career List */
.career-section { position: relative; padding-left: 20px; border-left: 4px solid #ddd; margin: 30px 0; }
.career-item { margin-bottom: 25px; position: relative; }
.career-item::before { content: ""; position: absolute; left: -28px; top: 5px; width: 12px; height: 12px; background: #3498db; border-radius: 50%; border: 2px solid #fff; }
.career-role { font-weight: bold; display: block; color: #2c3e50; font-size: 18px; }
.career-desc { font-size: 14px; color: #666; margin-top: 5px; }

/* Skill Grid */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.skill-card { background: #f0f4c3; padding: 15px; border-radius: 6px; text-align: center; border: 1px solid #cddc39; font-weight: bold; color: #827717; }

/* FAQ & HowTo */
.faq-item { margin-bottom: 20px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.faq-q { background: #2c3e50; color: #fff; padding: 15px 20px; font-weight: bold; position: relative; }
.faq-q::before { content: "Q"; color: #3498db; margin-right: 10px; font-size: 1.2em; }
.faq-a { padding: 20px; background: #fff; }
.faq-a::before { content: "A"; color: #e74c3c; margin-right: 10px; font-weight: bold; font-size: 1.2em; }

.howto-steps { counter-reset: step; }
.howto-step { position: relative; padding-left: 50px; margin-bottom: 20px; }
.howto-step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 35px; height: 35px; background: #e74c3c; color: #fff; text-align: center; line-height: 35px; border-radius: 50%; font-weight: bold; }
.howto-title { font-weight: bold; font-size: 18px; display: block; margin-bottom: 5px; }

/* Button */
.back-link { display: block; text-align: center; margin-top: 60px; color: #fff; background: #3498db; text-decoration: none; font-weight: bold; padding: 15px 30px; border-radius: 50px; transition: 0.3s; width: fit-content; margin-left: auto; margin-right: auto; box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); }
.back-link:hover { background: #2980b9; color: #fff; transform: translateY(-2px); text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
    .container { padding: 30px 20px; margin: 20px auto; }
    .profile-header { flex-direction: column; text-align: center; padding: 20px; }
    .profile-img { margin-bottom: 15px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
}