/* =========================================================
   CODEBHAVYA FULL STACK / MERN
   Complete Course + Lesson Stylesheet
   Premium Dark Theme + Clear Content Hierarchy
   ========================================================= */

:root{
  --bg:#181c20;
  --panel:#22272c;
  --panel2:#292f35;
  --panel3:#0f1317;
  --line:#3d464d;
  --line2:#515c64;

  --text:#e8edf0;
  --text-strong:#f3f6f7;
  --muted:#b5c0c7;
  --soft:#8d99a2;

  --gold:#f0c85a;
  --gold-soft:#ffe39a;

  --cyan:#63d2da;
  --cyan-soft:#a8edf0;

  --green:#68c99a;
  --green-soft:#b8ead1;

  --red:#ed7c72;
  --red-soft:#f4b5af;

  --orange:#e9aa5e;
  --orange-soft:#f3ce98;

  --blue:#79aee8;

  --nav:#15191d;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  min-width:320px;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}

button,
input{
  font:inherit;
  max-width:100%;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

a{
  color:inherit;
  overflow-wrap:anywhere;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  gap:20px;
  min-height:70px;
  padding:7px clamp(16px,3vw,40px);
  background:#15191d;
  border-bottom:2px solid #465057;
  box-shadow:0 3px 12px #0004;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  margin-right:auto;
  text-decoration:none;
  min-width:0;
}

.brand img{
  width:54px;
  height:52px;
  object-fit:contain;
  background:#fff;
  border-radius:4px;
  flex:0 0 auto;
}

.brand span{
  font:700 29px Georgia,serif;
  color:#dce3e7;
  white-space:nowrap;
}

.brand b{
  font-weight:700;
}

.brand strong{
  color:var(--gold);
}

.site-header nav{
  display:flex;
  gap:5px;
}

.site-header nav a{
  padding:10px 12px;
  border-radius:7px;
  color:#cbd4d9;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:.15s;
}

.site-header nav a:hover,
.site-header nav a.active{
  background:#292f35;
  color:var(--gold);
}

.nav-toggle{
  display:none;
  border:1px solid #4d5961;
  border-radius:7px;
  background:#252b30;
  color:#eee;
  padding:7px 10px;
  font-size:21px;
  cursor:pointer;
  flex:0 0 auto;
}


/* =========================================================
   READING PROGRESS
   ========================================================= */

.reading-progress{
  position:sticky;
  top:70px;
  z-index:90;
  height:3px;
  background:#2a3035;
}

.reading-progress i{
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
}


/* =========================================================
   LESSON LAYOUT
   ========================================================= */

.lesson-layout{
  display:grid;
  grid-template-columns:275px minmax(0,1fr);
  width:100%;
  max-width:1550px;
  margin:auto;
  min-width:0;
}

.lesson-layout>aside{
  position:sticky;
  top:73px;
  height:calc(100vh - 73px);
  min-width:0;
  overflow:auto;
  padding:19px 13px;
  background:#1a1f23;
  border-right:1px solid var(--line);
}

.course-home{
  display:block;
  margin:0 6px 15px;
  color:var(--gold);
  font-weight:900;
  text-decoration:none;
}

.lesson-layout aside label{
  display:block;
  min-width:0;
}

.lesson-layout aside label span{
  display:block;
  margin:0 5px 6px;
  color:#8e9aa3;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lesson-layout aside input{
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--line2);
  border-radius:7px;
  background:#242a2f;
  color:var(--text);
  outline:none;
}

.lesson-layout aside input:focus{
  border-color:#82702f;
  box-shadow:0 0 0 2px #6d5b2c55;
}

.lesson-layout aside nav{
  display:grid;
  gap:4px;
  margin-top:14px;
  min-width:0;
}

.lesson-layout aside nav a{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-width:0;
  padding:9px 8px;
  border:1px solid transparent;
  border-radius:7px;
  color:#b1bcc3;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  transition:.15s;
}

.lesson-layout aside nav a b{
  color:#74818a;
}

.lesson-layout aside nav a:hover{
  background:#262c31;
  border-color:#404a52;
  color:#e2e8eb;
}

.lesson-layout aside nav a.active{
  background:#332f23;
  border-color:#74622f;
  color:#f0f2f3;
  box-shadow:inset 3px 0 0 var(--gold);
}

.lesson-layout aside nav a.active b{
  color:var(--gold);
}

.lesson-layout aside nav a.locked{
  opacity:.45;
}

.lesson-layout aside nav a small{
  grid-column:2;
  color:#78848c;
  overflow-wrap:anywhere;
}

.lesson-layout>main{
  width:100%;
  max-width:1160px;
  min-width:0;
  padding:28px clamp(16px,3.5vw,48px) 60px;
}


/* =========================================================
   LESSON HERO
   ========================================================= */

.lesson-hero{
  display:grid;
  grid-template-columns:75px minmax(0,1fr);
  gap:20px;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:clamp(25px,4vw,42px);
  border:1px solid #4b555c;
  border-radius:14px;
  background:
    linear-gradient(135deg,#292f35,#20252a);
  box-shadow:0 8px 25px #0002;
  overflow:hidden;
}

.lesson-hero>div{
  min-width:0;
  max-width:100%;
}

.hero-level-number{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:4px;
  color:var(--gold);
  font:700 45px Georgia,serif;
}

.eyebrow,
.section-label{
  margin:0;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.lesson-hero h1{
  margin:9px 0 12px;
  color:var(--text-strong);
  font:700 clamp(34px,5vw,58px)/1.05 Georgia,serif;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}

.lesson-hero>div:last-child>p:not(.eyebrow){
  max-width:900px;
  color:#c2cbd1;
  line-height:1.75;
  overflow-wrap:anywhere;
}

.lesson-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
  max-width:100%;
}

.lesson-meta span{
  max-width:100%;
  padding:7px 10px;
  border:1px solid #4d5961;
  border-radius:99px;
  background:#20262b;
  color:#bfd0d7;
  font-size:10px;
  font-weight:800;
  overflow-wrap:anywhere;
}


/* =========================================================
   LESSON SECTIONS
   ========================================================= */

.lesson-section{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:18px;
  padding:clamp(21px,3vw,30px);
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  box-shadow:0 5px 18px #00015;
  overflow:hidden;
}

.lesson-section h2{
  margin:6px 0 15px;
  color:var(--gold);
  font:700 clamp(27px,3vw,38px)/1.15 Georgia,serif;
  overflow-wrap:anywhere;
}

.lesson-section h3{
  margin-top:18px;
  color:var(--cyan);
  font-size:18px;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.lesson-section h4{
  color:var(--gold-soft);
  overflow-wrap:anywhere;
}

.lesson-section p,
.lesson-section li{
  color:#c0c9cf;
  line-height:1.72;
  overflow-wrap:anywhere;
}

.section-description{
  max-width:850px;
  color:#9eabb3!important;
}

.concept-heading{
  display:flex;
  align-items:center;
  gap:13px;
  max-width:100%;
  padding-bottom:13px;
  border-bottom:1px solid #3b444b;
}

.concept-heading h2{
  min-width:0;
}

.concept-number{
  display:grid;
  place-items:center;
  flex:0 0 43px;
  width:43px;
  height:43px;
  border:1px solid #74622f;
  border-radius:8px;
  background:#332f23;
  color:var(--gold);
  font-weight:900;
}

.concept-intro{
  font-size:15px;
  color:#d8e0e4!important;
}

.explanation-list{
  display:grid;
  gap:7px;
  min-width:0;
}

.explanation-list p{
  position:relative;
  margin:0;
  padding-left:18px;
}

.explanation-list p:before{
  content:"•";
  position:absolute;
  left:1px;
  color:var(--cyan);
  font-weight:900;
}

.content-points{
  display:grid;
  gap:6px;
  padding-left:22px;
}

.content-points li::marker{
  color:var(--cyan);
}


/* =========================================================
   INFORMATION BOXES
   ========================================================= */

.key-idea,
.warning-box,
.mistake-box,
.real-example,
.try-it-box{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:15px;
  padding:15px;
  border:1px solid #465159;
  border-radius:9px;
  background:#2a3035;
  overflow:hidden;
}

.key-idea{
  border-left:3px solid var(--cyan);
  background:#222e31;
}

.warning-box{
  border-left:3px solid var(--orange);
  background:#302b23;
}

.mistake-box{
  border-left:3px solid var(--red);
  background:#302523;
}

.real-example{
  border-left:3px solid var(--gold);
  background:#302d24;
}

.try-it-box{
  border-left:3px solid var(--green);
  background:#243029;
}

.key-idea>span,
.warning-box>span,
.mistake-box>span{
  font-size:20px;
}

.key-idea strong{
  color:var(--cyan-soft);
}

.warning-box strong{
  color:var(--orange-soft);
}

.mistake-box strong{
  color:var(--red-soft);
}

.real-example>strong{
  color:var(--gold-soft);
}

.try-it-box>strong{
  color:var(--green-soft);
}

.key-idea p,
.warning-box p,
.mistake-box p,
.real-example p{
  margin:4px 0 0;
}

.real-example ol,
.try-it-box ol{
  margin-bottom:0;
}


/* =========================================================
   INLINE TECHNICAL ELEMENTS
   ========================================================= */

.lesson-section code:not(pre code){
  padding:2px 5px;
  border:1px solid #465158;
  border-radius:4px;
  background:#181d21;
  color:var(--cyan-soft);
  font:12px Consolas,monospace;
  overflow-wrap:anywhere;
}

.lesson-section strong{
  color:#e7edf0;
}

.lesson-section em{
  color:#d2dbe0;
}


/* =========================================================
   OUTPUT / CODE
   ========================================================= */

.output-box{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:12px;
  overflow:hidden;
  border:1px solid #465159;
  border-radius:8px;
  background:#15191d;
}

.output-box strong{
  display:block;
  padding:9px 12px;
  color:var(--green);
  background:#1b2822;
  border-bottom:1px solid #35453d;
  font-size:10px;
  letter-spacing:.08em;
}

.output-box pre{
  max-width:100%;
  margin:0;
  padding:12px;
  overflow-x:auto;
  overflow-y:hidden;
  color:#d8e4e8;
  font:12px/1.65 Consolas,monospace;
  white-space:pre;
}

.code-box{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:15px;
  overflow:hidden;
  border:1px solid #414b52;
  border-radius:9px;
  background:var(--panel3);
  box-shadow:0 4px 15px #0002;
}

.code-box header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 12px;
  border-bottom:1px solid #30383e;
  background:#1a2024;
  color:var(--cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.code-box header button{
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid #71612f;
  border-radius:6px;
  background:#302c22;
  color:var(--gold);
  cursor:pointer;
  font-size:10px;
  font-weight:900;
}

.code-box header button:hover{
  background:#3a3425;
  color:var(--gold-soft);
}

.code-box pre{
  max-width:100%;
  margin:0;
  padding:14px;
  overflow-x:auto;
  overflow-y:hidden;
  color:#dbe7eb;
  font:12px/1.7 Consolas,"Courier New",monospace;
  white-space:pre;
}


/* =========================================================
   COMPARISON TABLE
   ========================================================= */

.comparison-table{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:15px;
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid #404a51;
  border-radius:9px;
}

.comparison-table table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
}

.comparison-table th{
  padding:11px 12px;
  background:#30383e;
  color:var(--gold);
  text-align:left;
  font-size:11px;
}

.comparison-table td{
  padding:11px 12px;
  border-top:1px solid #3b454b;
  color:#c0c9cf;
  vertical-align:top;
  overflow-wrap:anywhere;
}

.comparison-table tr:nth-child(even) td{
  background:#262c31;
}

.comparison-table td strong{
  color:#e8edef;
}


/* =========================================================
   COMPACT LEARNING FLOWS
   ========================================================= */

.learning-flow{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:16px;
  overflow:hidden;
}

.learning-flow h3{
  margin-bottom:10px;
}

.learning-flow .flow-track{
  width:min(100%,620px);
  max-width:100%;
  margin:14px auto 0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.learning-flow .flow-item{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:11px 14px;
  border:1px solid #414b52;
  border-radius:8px;
  background:#282e34;
  overflow:hidden;
}

.flow-number{
  color:var(--gold);
  font:900 11px Consolas,monospace;
}

.flow-content{
  min-width:0;
}

.flow-content strong{
  display:block;
  color:#e5ebee;
  overflow-wrap:anywhere;
}

.flow-content span{
  display:block;
  margin-top:3px;
  color:#a4afb6;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.flow-arrow{
  padding:4px;
  color:#6e7b84;
  text-align:center;
  font-weight:900;
}


/* =========================================================
   GRIDS
   ========================================================= */

.method-grid,
.status-grid,
.role-grid,
.objective-grid,
.revision-grid,
.practice-grid,
.glossary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:13px;
  min-width:0;
}

.method-card,
.status-card,
.role-panel,
.objective-grid article,
.revision-grid article,
.practice-card,
.glossary-grid article{
  min-width:0;
  padding:14px;
  border:1px solid #424c53;
  border-radius:8px;
  background:#282e34;
  overflow:hidden;
}

.method-card>b{
  color:var(--cyan);
  font-family:Consolas,monospace;
}

.method-card code{
  display:inline-block;
  max-width:100%;
  margin-top:8px;
  color:var(--gold-soft);
  font:11px Consolas,monospace;
  overflow-wrap:anywhere;
}

.status-card>b{
  color:var(--gold);
  font:900 12px Consolas,monospace;
}

.status-card h3{
  margin:7px 0 4px;
}

.status-card p{
  margin:0;
}


/* =========================================================
   URL BREAKDOWN
   ========================================================= */

.url-breakdown{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
  min-width:0;
}

.url-breakdown article{
  min-width:0;
  padding:12px;
  border:1px solid #414b52;
  border-radius:8px;
  background:#272d32;
  overflow:hidden;
}

.url-breakdown code{
  color:var(--cyan);
  font:900 12px Consolas,monospace;
  overflow-wrap:anywhere;
}

.url-breakdown p{
  margin:5px 0 0;
  font-size:12px;
}


/* =========================================================
   ARCHITECTURE
   ========================================================= */

.architecture-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:15px;
  min-width:0;
}

.architecture-flow article{
  min-width:0;
  padding:14px;
  border:1px solid #414b52;
  border-radius:8px;
  background:#282e34;
  overflow:hidden;
}

.architecture-flow article>span{
  color:var(--gold);
  font:900 10px Consolas,monospace;
}

.architecture-flow h3{
  margin:7px 0;
  color:var(--cyan);
}

.architecture-flow ul,
.role-panel ul{
  padding-left:18px;
}


/* =========================================================
   REQUEST / RESPONSE / ROLES
   ========================================================= */

.message-panel{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:14px;
  padding:14px;
  border:1px solid #404a51;
  border-radius:8px;
  background:#1e2428;
  overflow:hidden;
}

.message-panel h3{
  margin-top:0;
  color:var(--cyan);
}

.message-line{
  display:flex;
  justify-content:space-between;
  gap:20px;
  min-width:0;
  padding:8px 0;
  border-bottom:1px solid #353e44;
}

.message-line span{
  min-width:0;
  color:#909ca4;
  font-size:11px;
  overflow-wrap:anywhere;
}

.message-panel pre{
  max-width:100%;
  padding:12px;
  overflow:auto;
  background:#101418;
  color:#d8e3e7;
  font:12px/1.6 Consolas,monospace;
  white-space:pre;
}

.role-panel h3{
  margin-top:0;
  color:var(--cyan);
}


/* =========================================================
   OBJECTIVES / REVISION
   ========================================================= */

.objective-grid article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
}

.objective-grid article>b{
  color:var(--gold);
  font:900 11px Consolas,monospace;
}

.objective-grid p{
  margin:0;
}

.revision-grid article{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
}

.revision-grid article>b{
  color:var(--gold);
  font:900 11px Consolas,monospace;
}

.revision-grid strong{
  color:#e2e8eb;
}

.revision-grid p{
  margin:3px 0;
}


/* =========================================================
   INTERVIEW
   ========================================================= */

.interview-list{
  display:grid;
  gap:8px;
  min-width:0;
}

.interview-item{
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid #404a51;
  border-radius:8px;
  background:#282e34;
}

.interview-item summary{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  min-width:0;
  padding:13px;
  cursor:pointer;
  color:#e5eaed;
  font-weight:800;
  list-style:none;
}

.interview-item summary::-webkit-details-marker{
  display:none;
}

.interview-item summary>span{
  color:var(--gold);
  font:900 11px Consolas,monospace;
}

.interview-answer{
  min-width:0;
  padding:0 13px 13px 55px;
  border-top:1px solid #394249;
}

.interview-answer p{
  margin-bottom:0;
}


/* =========================================================
   PRACTICE
   ========================================================= */

.practice-card header{
  display:flex;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  color:#909ba3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.practice-card header b{
  color:var(--gold);
}

.practice-card h3{
  margin:10px 0 5px;
  color:#e5eaed;
}

.practice-card p{
  margin:0;
}

.practice-card details{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid #3a444a;
}

.practice-card summary{
  cursor:pointer;
  color:var(--cyan);
  font-size:11px;
  font-weight:800;
}


/* =========================================================
   QUIZ
   ========================================================= */

.quiz-question{
  width:100%;
  min-width:0;
  margin-top:12px;
  padding:15px;
  border:1px solid #404a51;
  border-radius:9px;
  background:#282e34;
  overflow:hidden;
}

.quiz-number{
  color:var(--gold);
  font:900 10px Consolas,monospace;
}

.quiz-question h3{
  margin:7px 0 11px;
  color:#e6ebee;
}

.quiz-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  min-width:0;
}

.quiz-options button{
  min-width:0;
  padding:10px;
  border:1px solid #4b565e;
  border-radius:7px;
  background:#23292e;
  color:#d0d8dd;
  cursor:pointer;
  text-align:left;
  overflow-wrap:anywhere;
}

.quiz-options button:hover{
  border-color:#68747c;
  background:#2a3036;
}

.quiz-options button.correct{
  border-color:#4f9273;
  background:#21362d;
  color:var(--green-soft);
}

.quiz-options button.wrong{
  border-color:#9b514a;
  background:#3a2523;
  color:var(--red-soft);
}

.quiz-options button:disabled{
  cursor:default;
}

.quiz-result{
  margin-top:9px;
  padding:10px;
  border-radius:7px;
  background:#20262a;
  color:#cbd3d8;
}

.quiz-result.success{
  border-left:3px solid var(--green);
}

.quiz-result.failure{
  border-left:3px solid var(--red);
}


/* =========================================================
   GLOSSARY
   ========================================================= */

.glossary-grid article strong{
  color:var(--cyan);
}

.glossary-grid article p{
  margin:4px 0 0;
  font-size:12px;
}


/* =========================================================
   COMPLETION
   ========================================================= */

.completion-section{
  border-color:#4f6a57;
  background:#252e29;
}

.completion-section h2{
  color:var(--green);
}

.complete-button,
.lesson-nav a,
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:10px 14px;
  border:1px solid #4e5960;
  border-radius:7px;
  background:#292f34;
  color:#dbe1e4;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  overflow-wrap:anywhere;
}

.complete-button{
  margin-top:8px;
  border-color:#527b66;
  color:var(--green-soft);
}

.complete-button.completed{
  background:#294238;
  color:var(--green-soft);
}

.lesson-nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
  min-width:0;
}

.lesson-nav a:hover,
.button:hover{
  border-color:#6c767d;
  color:var(--gold);
}

.button.primary{
  background:#3a3425;
  border-color:#776634;
  color:var(--gold);
}


/* =========================================================
   PREMIUM TRACE
   ========================================================= */

.premium-trace{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:12px;
  align-items:start;
  min-width:0;
}

.trace-left{
  align-self:start;
  min-width:0;
  max-width:100%;
}

.trace-code{
  width:100%;
  max-width:100%;
  height:auto!important;
  max-height:300px;
  overflow:auto;
  padding:9px;
  border:1px solid #30373d;
  border-radius:8px;
  background:#101317;
}

.trace-code>div{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  min-width:0;
  padding:4px 7px;
  border-left:3px solid transparent;
}

.trace-code>div.active{
  background:#332f24;
  border-left-color:var(--gold);
}

.trace-code>div.completed{
  opacity:.5;
}

.trace-line-number{
  color:#66737c;
  font:10px Consolas,monospace;
}

.trace-code code{
  white-space:pre;
  color:#d8e3e8;
  font:12px/1.65 Consolas,"Courier New",monospace;
}

.trace-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}

.trace-controls button{
  padding:8px 11px;
  border:1px solid #4b555c;
  border-radius:7px;
  background:#292f34;
  color:#dce2e5;
  font-weight:900;
  cursor:pointer;
}

.trace-controls button.primary{
  border-color:#74622f;
  background:#383222;
  color:var(--gold);
}

.trace-controls button:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.premium-trace>.trace-state{
  align-self:start;
  width:100%;
  max-width:100%;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  min-width:0;
  padding:16px;
  border:1px solid #444e55;
  border-radius:9px;
  background:#292f35;
  overflow:hidden;
}

.trace-state-label{
  display:block;
  color:#87949d;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}

.trace-state strong{
  display:block;
  margin-top:6px;
  color:var(--cyan);
  font-size:19px;
  overflow-wrap:anywhere;
}

.trace-state p{
  margin:8px 0 0;
  color:#b4bec4;
  overflow-wrap:anywhere;
}


/* =========================================================
   LESSON MOBILE MENU
   ========================================================= */

.lesson-menu{
  display:none;
}

.shade{
  position:fixed;
  inset:0;
  z-index:110;
  background:#0008;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:200;
  max-width:calc(100vw - 36px);
  padding:10px 14px;
  border:1px solid #4b555c;
  border-radius:7px;
  background:#252b30;
  color:#e2e7e9;
  opacity:0;
  transform:translateY(8px);
  transition:.18s;
}

.toast.show{
  opacity:1;
  transform:none;
}

.loading{
  padding:30px;
  color:#a2adb4;
  text-align:center;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 25px;
  width:100%;
  padding:25px clamp(18px,4vw,50px);
  border-top:1px solid #3d474e;
  background:#15191d;
  color:#929da5;
  min-width:0;
}

.site-footer strong{
  color:var(--gold);
  font:700 24px Georgia,serif;
}

.site-footer p{
  margin:5px 0;
  overflow-wrap:anywhere;
}

.site-footer nav{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.site-footer nav a{
  color:#bdc6cc;
  text-decoration:none;
  font-size:12px;
}

.site-footer nav a:hover{
  color:var(--gold);
}

.site-footer>p{
  grid-column:1/-1;
  padding-top:12px;
  border-top:1px solid #30373d;
  font-size:10px;
}


/* =========================================================
   LESSON RESPONSIVE
   ========================================================= */

@media(max-width:950px){

  .lesson-layout{
    grid-template-columns:235px minmax(0,1fr);
  }

  .lesson-layout>main{
    padding:22px 18px 50px;
  }

  .architecture-flow{
    grid-template-columns:1fr 1fr;
  }

  .url-breakdown{
    grid-template-columns:1fr 1fr;
  }

  .premium-trace{
    grid-template-columns:1fr;
  }

  .premium-trace>.trace-state{
    width:100%;
  }
}


@media(max-width:820px){

  .nav-toggle{
    display:block;
  }

  .site-header nav{
    position:absolute;
    top:70px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    padding:10px;
    border-bottom:1px solid #424a50;
    background:#171b1f;
  }

  .site-header nav.open{
    display:flex;
  }

  .lesson-menu{
    position:sticky;
    top:70px;
    z-index:95;
    display:block;
    width:100%;
    min-height:42px;
    border:0;
    border-bottom:1px solid #41494f;
    background:#20262b;
    color:#e1e5e8;
    font-weight:900;
  }

  .lesson-layout{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .lesson-layout>aside{
    position:fixed;
    top:112px;
    left:0;
    bottom:0;
    z-index:120;
    width:min(88vw,320px);
    max-width:100vw;
    height:auto;
    transform:translateX(-105%);
    transition:transform .18s;
  }

  .lesson-layout>aside.open{
    transform:none;
  }

  .shade{
    top:112px;
  }

  .lesson-layout>main{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px 12px 40px;
    overflow:hidden;
  }

  .site-footer{
    grid-template-columns:1fr;
  }

  .site-footer>p{
    grid-column:auto;
  }
}


@media(max-width:560px){

  .site-header{
    gap:8px;
    padding-left:10px;
    padding-right:10px;
  }

  .brand{
    gap:8px;
  }

  .brand img{
    width:47px;
    height:45px;
  }

  .brand span{
    font-size:23px;
  }

  .lesson-layout>main{
    padding:12px 8px 35px;
  }

  .lesson-hero{
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
    max-width:100%;
    padding:22px 16px;
    border-radius:11px;
  }

  .hero-level-number{
    justify-content:flex-start;
    font-size:30px;
  }

  .lesson-hero h1{
    font-size:36px;
  }

  .lesson-section{
    width:100%;
    max-width:100%;
    padding:18px 14px;
    border-radius:10px;
  }

  .concept-heading{
    align-items:flex-start;
  }

  .concept-heading h2{
    min-width:0;
  }

  .objective-grid,
  .revision-grid,
  .practice-grid,
  .method-grid,
  .status-grid,
  .role-grid,
  .glossary-grid,
  .quiz-options{
    grid-template-columns:1fr;
  }

  .architecture-flow,
  .url-breakdown{
    grid-template-columns:1fr;
  }

  .lesson-nav{
    flex-direction:column;
  }

  .lesson-nav a{
    width:100%;
  }

  .premium-trace .trace-code{
    max-height:260px;
  }

  .trace-controls{
    width:100%;
  }

  .trace-controls button{
    flex:1 1 calc(50% - 7px);
    min-width:0;
  }

  .comparison-table{
    width:100%;
    max-width:100%;
  }

  .comparison-table table{
    min-width:470px;
  }

  .learning-flow .flow-track{
    width:100%;
  }

  .message-line{
    flex-direction:column;
    gap:4px;
  }

  .key-idea,
  .warning-box,
  .mistake-box,
  .real-example,
  .try-it-box{
    grid-template-columns:1fr;
    gap:7px;
  }

  .key-idea>span,
  .warning-box>span,
  .mistake-box>span{
    display:block;
  }

  .code-box header{
    flex-wrap:wrap;
  }
}


@media(max-width:380px){

  .brand span{
    font-size:21px;
  }

  .lesson-hero{
    padding:20px 13px;
  }

  .lesson-section{
    padding:16px 12px;
  }

  .lesson-hero h1{
    font-size:32px;
  }

  .trace-controls button{
    flex:1 1 100%;
  }
}


@media(prefers-reduced-motion:reduce){

  *{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}


/* =========================================================
   CODEBHAVYA FULL STACK COURSE INDEX
   ========================================================= */


/* ---------------------------------------------------------
   INDEX PAGE CONTAINER
   --------------------------------------------------------- */

body:has(> main > .hero) main{
  width:100%;
  max-width:none;
  min-width:0;
  padding:0 18px 50px;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

main > .hero{
  width:min(100%,1320px);
  max-width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:24px;
  padding:clamp(30px,5vw,58px);
  border:1px solid #4a555c;
  border-top:0;
  border-radius:0 0 14px 14px;
  background:linear-gradient(135deg,#292f35,#1c2125);
  box-shadow:0 10px 30px #0003;
  overflow:hidden;
}

main > .hero > div:first-child{
  min-width:0;
  max-width:100%;
}

.hero .eyebrow{
  margin:0 0 10px;
  color:var(--cyan);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.hero h1{
  max-width:900px;
  margin:0;
  color:var(--text-strong);
  font:700 clamp(38px,5.5vw,68px)/1.02 Georgia,serif;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}

.hero > div:first-child > p:not(.eyebrow){
  max-width:820px;
  margin:20px 0 0;
  color:#c0c9cf;
  font-size:16px;
  line-height:1.75;
  overflow-wrap:anywhere;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:23px;
}

.hero .button{
  min-height:42px;
}

.button.secondary{
  background:#292f34;
  border-color:#4c565e;
  color:#d5dce0;
}


/* ---------------------------------------------------------
   HERO STATISTICS
   --------------------------------------------------------- */

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:27px;
}

.stats>div{
  min-width:0;
  padding:13px;
  border:1px solid #414b52;
  border-radius:8px;
  background:#20262b;
}

.stats strong{
  display:block;
  color:var(--gold);
  font:700 25px Georgia,serif;
}

.stats span{
  display:block;
  margin-top:3px;
  color:#909ca4;
  font-size:10px;
  font-weight:800;
}


/* ---------------------------------------------------------
   MERN STACK MAP
   --------------------------------------------------------- */

.stack-map{
  align-self:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:330px;
  min-width:0;
  padding:24px;
  border:1px solid #444f56;
  border-radius:12px;
  background:#171c20;
  box-shadow:inset 0 0 0 1px #111417;
  text-align:center;
  overflow:hidden;
}

.stack-map span{
  color:var(--cyan);
  font:900 10px Consolas,monospace;
  letter-spacing:.12em;
}

.stack-map b{
  display:block;
  margin:12px 0;
  padding:13px 10px;
  border:1px solid #414b52;
  border-radius:8px;
  background:#252b30;
  color:#e0e6e9;
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.stack-map i{
  display:block;
  color:var(--gold);
  font:900 11px Consolas,monospace;
  font-style:normal;
}


/* ---------------------------------------------------------
   PROGRESS CARD
   --------------------------------------------------------- */

main > .progress-card{
  width:min(100%,1320px);
  max-width:100%;
  min-width:0;
  margin:20px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
  gap:28px;
  padding:23px;
  border:1px solid #414b52;
  border-radius:11px;
  background:#252b30;
  overflow:hidden;
}

.progress-card h2,
.roadmap h2{
  margin:6px 0 8px;
  color:var(--gold);
  font:700 clamp(26px,3vw,36px)/1.15 Georgia,serif;
}

.progress-card p:not(.section-label),
.roadmap header>p:not(.section-label){
  color:#aeb9c0;
  line-height:1.65;
}

.progress-card>div{
  min-width:0;
}

.progress-card>div:last-child{
  align-self:center;
}

.progress-card>div:last-child>strong{
  color:#dce3e7;
  font-size:13px;
}

.progress-track{
  height:9px;
  margin-top:9px;
  overflow:hidden;
  border:1px solid #3e474e;
  border-radius:99px;
  background:#15191d;
}

.progress-track i{
  display:block;
  width:0;
  height:100%;
  background:var(--gold);
  transition:width .25s ease;
}

.progress-card footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
}

.progress-card footer b{
  color:#929da5;
  font-size:10px;
}

.progress-card footer button{
  padding:6px 10px;
  border:1px solid #4b555c;
  border-radius:6px;
  background:#292f34;
  color:#cbd3d8;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.progress-card footer button:hover{
  border-color:#6a737a;
  color:var(--gold);
}


/* ---------------------------------------------------------
   ROADMAP CONTAINER
   --------------------------------------------------------- */

main > .roadmap{
  width:min(100%,1320px);
  max-width:100%;
  min-width:0;
  margin:20px auto 0;
  padding:27px;
  border:1px solid #414b52;
  border-radius:11px;
  background:#23292e;
  overflow:hidden;
}

.roadmap header{
  max-width:950px;
  min-width:0;
}

.roadmap header label{
  display:block;
  margin-top:18px;
}

.roadmap header label span{
  display:block;
  margin-bottom:6px;
  color:#909ca4;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.roadmap header input{
  width:min(100%,600px);
  max-width:100%;
  min-height:43px;
  padding:9px 12px;
  border:1px solid #4b555c;
  border-radius:7px;
  outline:none;
  background:#171b1f;
  color:#e2e7ea;
}

.roadmap header input::placeholder{
  color:#68747c;
}

.roadmap header input:focus{
  border-color:#8a7535;
  box-shadow:0 0 0 2px #5d542b55;
}


/* ---------------------------------------------------------
   ROADMAP GRID
   --------------------------------------------------------- */

#roadmapContent{
  width:100%;
  max-width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
  align-items:stretch;
}

#roadmapContent>*{
  min-width:0;
  max-width:100%;
}


/* ---------------------------------------------------------
   ROADMAP CARDS
   Strong selectors for dynamically generated cards
   --------------------------------------------------------- */

#roadmapContent .roadmap-card,
#roadmapContent .level-card,
#roadmapContent .course-level-card,
#roadmapContent .roadmap-item,
#roadmapContent .level-item,
#roadmapContent .course-card{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:190px;
  padding:17px;
  overflow:hidden;
  border:1px solid #4b565e !important;
  border-radius:9px;
  background:#292f35 !important;
  color:#e8edf0;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

#roadmapContent .roadmap-card:hover,
#roadmapContent .level-card:hover,
#roadmapContent .course-level-card:hover,
#roadmapContent .roadmap-item:hover,
#roadmapContent .level-item:hover,
#roadmapContent .course-card:hover{
  transform:translateY(-2px);
  border-color:#707c84 !important;
  background:#30373d !important;
  box-shadow:0 10px 24px #0003;
}


/* ---------------------------------------------------------
   ROADMAP LEVEL NUMBER
   --------------------------------------------------------- */

#roadmapContent .level-number,
#roadmapContent .roadmap-number,
#roadmapContent .level-badge,
#roadmapContent .course-level-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--gold) !important;
  font:900 10px Consolas,monospace;
  letter-spacing:.08em;
}


/* ---------------------------------------------------------
   ROADMAP CARD HEADINGS
   --------------------------------------------------------- */

#roadmapContent .roadmap-card h3,
#roadmapContent .level-card h3,
#roadmapContent .course-level-card h3,
#roadmapContent .roadmap-item h3,
#roadmapContent .level-item h3,
#roadmapContent .course-card h3{
  margin:8px 0 7px;
  color:#f0f4f6 !important;
  font-size:18px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

#roadmapContent .roadmap-card p,
#roadmapContent .level-card p,
#roadmapContent .course-level-card p,
#roadmapContent .roadmap-item p,
#roadmapContent .level-item p,
#roadmapContent .course-card p{
  margin:0;
  color:#bdc7cd !important;
  font-size:12px;
  line-height:1.65;
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   ROADMAP CARD LINKS
   --------------------------------------------------------- */

#roadmapContent .roadmap-card a,
#roadmapContent .level-card a,
#roadmapContent .course-level-card a,
#roadmapContent .roadmap-item a,
#roadmapContent .level-item a,
#roadmapContent .course-card a{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin-top:14px;
  padding:7px 10px;
  border:1px solid #756331 !important;
  border-radius:6px;
  background:#332e22 !important;
  color:var(--gold-soft) !important;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  overflow-wrap:anywhere;
}

#roadmapContent .roadmap-card a:hover,
#roadmapContent .level-card a:hover,
#roadmapContent .course-level-card a:hover,
#roadmapContent .roadmap-item a:hover,
#roadmapContent .level-item a:hover,
#roadmapContent .course-card a:hover{
  border-color:#a0873d !important;
  background:#403723 !important;
  color:#fff0ae !important;
}


/* ---------------------------------------------------------
   STATUS
   --------------------------------------------------------- */

#roadmapContent .level-status,
#roadmapContent .status,
#roadmapContent .card-status{
  float:right;
  max-width:100%;
  padding:4px 7px;
  border:1px solid #424b51;
  border-radius:99px;
  background:#20252a;
  color:#87939b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}


/* ---------------------------------------------------------
   COMPLETED STATUS
   --------------------------------------------------------- */

#roadmapContent .level-status.complete,
#roadmapContent .status.complete,
#roadmapContent .card-status.complete,
#roadmapContent .roadmap-card.complete .level-status,
#roadmapContent .level-card.complete .level-status,
#roadmapContent .course-level-card.complete .level-status{
  border-color:#4f8063 !important;
  background:#21362c !important;
  color:var(--green) !important;
}


/* ---------------------------------------------------------
   PLANNED STATUS
   --------------------------------------------------------- */

#roadmapContent .level-status.planned,
#roadmapContent .status.planned,
#roadmapContent .card-status.planned{
  border-color:#505960 !important;
  background:#20262b !important;
  color:#9aa6ad !important;
}


/* ---------------------------------------------------------
   PLANNED LEVEL CARDS
   --------------------------------------------------------- */

#roadmapContent .roadmap-card.planned,
#roadmapContent .level-card.planned,
#roadmapContent .course-level-card.planned,
#roadmapContent .roadmap-item.planned,
#roadmapContent .level-item.planned,
#roadmapContent .course-card.planned{
  background:#252a2f !important;
  border-color:#444d54 !important;
}

#roadmapContent .roadmap-card.planned:hover,
#roadmapContent .level-card.planned:hover,
#roadmapContent .course-level-card.planned:hover,
#roadmapContent .roadmap-item.planned:hover,
#roadmapContent .level-item.planned:hover,
#roadmapContent .course-card.planned:hover{
  background:#292f35 !important;
  border-color:#606b73 !important;
}

#roadmapContent .roadmap-card.planned a,
#roadmapContent .level-card.planned a,
#roadmapContent .course-level-card.planned a,
#roadmapContent .roadmap-item.planned a,
#roadmapContent .level-item.planned a,
#roadmapContent .course-card.planned a{
  border-color:#414950 !important;
  background:#22272b !important;
  color:#9aa6ad !important;
  cursor:default;
}


/* ---------------------------------------------------------
   SEARCH EMPTY STATE
   --------------------------------------------------------- */

#emptySearch{
  width:100%;
  max-width:100%;
  margin:25px 0 0;
  padding:18px;
  border:1px dashed #59656d;
  border-radius:8px;
  background:#181e22;
  color:#b3bec5;
  text-align:center;
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   ROADMAP SEARCH HIGHLIGHT / ACCESSIBILITY
   --------------------------------------------------------- */

#roadmapContent a:focus-visible,
.roadmap input:focus-visible,
.progress-card button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}


/* =========================================================
   CODEBHAVYA — FINAL VISUAL HIERARCHY
   STRONG CARD COLORS + CARD HEADINGS + MOBILE FIXES
   ========================================================= */


/* =========================================================
   INDEX HERO
   ========================================================= */

main > .hero{
  background:
    radial-gradient(
      circle at 85% 15%,
      #35434a 0%,
      #29363d 32%,
      #1b2227 72%
    );
  border-color:#56666f;
}

main > .hero .eyebrow{
  color:#63d2da;
}

main > .hero h1{
  color:#f8fafb;
}

main > .hero > div:first-child > p:not(.eyebrow){
  color:#d0dade;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions .button.primary{
  background:linear-gradient(135deg,#514523,#3b331d);
  border-color:#b09542;
  color:#ffeaa0;
  box-shadow:0 5px 18px #0004;
}

.hero-actions .button.primary:hover{
  background:linear-gradient(135deg,#65552a,#493e22);
  border-color:#d0b457;
  color:#fff4bf;
}

.hero-actions .button.secondary{
  background:#26353b;
  border-color:#5b727a;
  color:#dcecef;
}

.hero-actions .button.secondary:hover{
  background:#30434a;
  border-color:#78929b;
  color:#fff;
}


/* =========================================================
   STATISTICS
   ========================================================= */

.stats>div{
  background:linear-gradient(145deg,#202f34,#1b252a);
  border-color:#435c64;
  box-shadow:0 5px 16px #0003;
}

.stats>div:nth-child(1){
  border-top:3px solid #68c99a;
}

.stats>div:nth-child(2){
  border-top:3px solid #63d2da;
}

.stats>div:nth-child(3){
  border-top:3px solid #f0c85a;
}

.stats>div:nth-child(4){
  border-top:3px solid #e9aa5e;
}

.stats>div:nth-child(1) strong{
  color:#68c99a;
}

.stats>div:nth-child(2) strong{
  color:#63d2da;
}

.stats>div:nth-child(3) strong{
  color:#f0c85a;
}

.stats>div:nth-child(4) strong{
  color:#e9aa5e;
}

.stats span{
  color:#bdcbd0;
}


/* =========================================================
   MERN STACK MAP
   ========================================================= */

.stack-map{
  background:
    linear-gradient(
      180deg,
      #111a1f,
      #18252a
    );
  border-color:#49616a;
}

.stack-map span{
  color:#63d2da;
}

.stack-map b{
  background:#223238;
  border-color:#49616a;
  color:#eef6f8;
  box-shadow:0 4px 12px #0003;
}

.stack-map b:nth-of-type(1){
  border-left:4px solid #63d2da;
}

.stack-map b:nth-of-type(2){
  border-left:4px solid #f0c85a;
}

.stack-map b:nth-of-type(3){
  border-left:4px solid #68c99a;
}

.stack-map i{
  color:#b9c8cd;
}


/* =========================================================
   PROGRESS CARD
   ========================================================= */

main > .progress-card{
  background:
    linear-gradient(
      135deg,
      #26363b,
      #202a2f
    );
  border-color:#4e666e;
  box-shadow:0 7px 22px #0003;
}

.progress-card .section-label{
  color:#63d2da;
}

.progress-card h2{
  color:#f0c85a;
}

.progress-card p:not(.section-label){
  color:#c4d0d5;
}

.progress-track{
  background:#10171b;
  border-color:#435158;
}

.progress-track i{
  background:linear-gradient(
    90deg,
    #f0c85a,
    #68c99a
  );
}

.progress-card footer b{
  color:#aab9bf;
}


/* =========================================================
   ROADMAP CONTAINER
   ========================================================= */

main > .roadmap{
  background:
    linear-gradient(
      145deg,
      #202c32,
      #1b2429
    );
  border-color:#50646c;
  box-shadow:0 8px 25px #0003;
}

.roadmap .section-label{
  color:#63d2da;
}

.roadmap h2{
  color:#f0c85a;
}

.roadmap header>p:not(.section-label){
  color:#c5d1d6;
}


/* =========================================================
   SEARCH
   ========================================================= */

.roadmap header label span{
  color:#63d2da;
}

.roadmap header input{
  background:#11191d;
  border-color:#52636a;
  color:#edf5f7;
}

.roadmap header input::placeholder{
  color:#829198;
}

.roadmap header input:focus{
  border-color:#f0c85a;
  box-shadow:
    0 0 0 2px #f0c85a33,
    0 5px 18px #0003;
}


/* =========================================================
   ★ ROADMAP CARDS — STRONG COLOR TARGETING
   ========================================================= */

/*
   IMPORTANT:
   The JavaScript-generated roadmap cards are targeted through
   #roadmapContent > * instead of depending only on class names.
*/

#roadmapContent{
  gap:14px;
}


/* Every generated card */

#roadmapContent > *{
  position:relative;
  min-width:0;
  overflow:hidden;

  padding:19px;

  border:1px solid #48616a;
  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      #263940 0%,
      #202f35 55%,
      #1b282e 100%
    );

  box-shadow:
    0 6px 18px #0004;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


/* Colored top accent */

#roadmapContent > *::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:#63d2da;
}


/* Different accent colors for cards */

#roadmapContent > *:nth-child(4n+1)::before{
  background:#63d2da;
}

#roadmapContent > *:nth-child(4n+2)::before{
  background:#f0c85a;
}

#roadmapContent > *:nth-child(4n+3)::before{
  background:#68c99a;
}

#roadmapContent > *:nth-child(4n+4)::before{
  background:#e9aa5e;
}


/* Hover */

#roadmapContent > *:hover{
  transform:translateY(-4px);

  background:
    linear-gradient(
      145deg,
      #30474f,
      #263a42
    );

  border-color:#78919a;

  box-shadow:
    0 12px 28px #0005;
}


/* =========================================================
   CARD LEVEL NUMBER
   ========================================================= */

#roadmapContent > * .level-number,
#roadmapContent > * .roadmap-number,
#roadmapContent > * .level-badge,
#roadmapContent > * .course-level-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:46px;
  min-height:27px;

  padding:5px 9px;

  border:1px solid #5e8791;
  border-radius:6px;

  background:#173238;

  color:#7de1e8;

  font:900 11px Consolas,monospace;
  letter-spacing:.08em;
}


/* =========================================================
   ★ CARD HEADINGS — STRONG COLOR
   ========================================================= */

#roadmapContent > * h3,
#roadmapContent > * h2{
  margin:11px 0 8px;

  color:#f0c85a !important;

  font-size:19px;
  line-height:1.28;
  font-weight:900;

  text-shadow:0 1px 8px #0004;
}


/* Alternate heading colors */

#roadmapContent > *:nth-child(4n+2) h3,
#roadmapContent > *:nth-child(4n+2) h2{
  color:#63d2da !important;
}

#roadmapContent > *:nth-child(4n+3) h3,
#roadmapContent > *:nth-child(4n+3) h2{
  color:#68c99a !important;
}

#roadmapContent > *:nth-child(4n+4) h3,
#roadmapContent > *:nth-child(4n+4) h2{
  color:#e9aa5e !important;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

#roadmapContent > * p{
  margin:0;

  color:#cbd8dc !important;

  font-size:13px;
  line-height:1.65;
}


/* Strong text inside cards */

#roadmapContent > * strong,
#roadmapContent > * b{
  color:#eef5f7;
}


/* =========================================================
   CARD LINKS / OPEN LESSON
   ========================================================= */

#roadmapContent > * a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:16px;
  padding:8px 12px;

  border:1px solid #a28a3d;
  border-radius:7px;

  background:
    linear-gradient(
      135deg,
      #493f25,
      #342e20
    );

  color:#ffe69a !important;

  font-size:11px;
  font-weight:900;

  text-decoration:none;

  box-shadow:0 3px 10px #0003;
}

#roadmapContent > * a:hover{
  background:#5a4d29;
  border-color:#d0b65b;
  color:#fff5c5 !important;
}


/* =========================================================
   CARD STATUS
   ========================================================= */

#roadmapContent > * .level-status,
#roadmapContent > * .status,
#roadmapContent > * .card-status{
  padding:5px 8px;

  border-radius:99px;

  background:#1c272c;
  border:1px solid #52636a;

  color:#9eafb6;

  font-size:8px;
  font-weight:900;
}


/* Completed */

#roadmapContent > * .level-status.complete,
#roadmapContent > * .status.complete,
#roadmapContent > * .card-status.complete,
#roadmapContent > *.complete .level-status{
  background:#18372b;
  border-color:#4d9972;
  color:#72d6a2;
}


/* Planned */

#roadmapContent > * .level-status.planned,
#roadmapContent > * .status.planned,
#roadmapContent > * .card-status.planned,
#roadmapContent > *.planned .level-status{
  background:#24283a;
  border-color:#59638b;
  color:#9ca9e5;
}


/* =========================================================
   PLANNED CARDS
   ========================================================= */

#roadmapContent > *.planned{
  background:
    linear-gradient(
      145deg,
      #272b38,
      #20242e
    );

  border-color:#555d78;
}

#roadmapContent > *.planned::before{
  background:#8794d1;
}

#roadmapContent > *.planned h3,
#roadmapContent > *.planned h2{
  color:#aab5ed !important;
}

#roadmapContent > *.planned p{
  color:#b8becd !important;
}

#roadmapContent > *.planned a{
  background:#252a34;
  border-color:#555e6a;
  color:#9ca7b0 !important;
}


/* =========================================================
   SEARCH EMPTY STATE
   ========================================================= */

#emptySearch{
  background:#182126;
  border-color:#53666e;
  color:#b8c6cb;
}


/* =========================================================
   LESSON CONTENT COLORS
   ========================================================= */

.lesson-section h2{
  color:#f0c85a !important;
}

.lesson-section h3{
  color:#63d2da !important;
}

.lesson-section h4{
  color:#ffe39a !important;
}


/* =========================================================
   ★ LESSON 1 MOBILE — PREVENT BORDER OVERFLOW
   ========================================================= */

.lesson-section,
.lesson-hero,
.concept-heading,
.key-idea,
.warning-box,
.mistake-box,
.real-example,
.try-it-box,
.code-box,
.output-box,
.comparison-table,
.learning-flow,
.architecture-flow,
.message-panel,
.premium-trace,
.quiz-question,
.interview-item{
  max-width:100%;
  min-width:0;
}


/* Long text must wrap */

.lesson-section p,
.lesson-section li,
.lesson-section h2,
.lesson-section h3,
.lesson-section h4,
.lesson-hero h1,
.concept-heading h2{
  overflow-wrap:anywhere;
  word-break:normal;
}


/* Code areas scroll inside themselves */

.code-box pre,
.output-box pre,
.trace-code,
.message-panel pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}


/* =========================================================
   LESSON MOBILE STRONG FIX
   ========================================================= */

@media(max-width:820px){

  .lesson-layout>main{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .lesson-hero{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .lesson-section{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .lesson-section *{
    max-width:100%;
  }

  .lesson-section img,
  .lesson-section video,
  .lesson-section iframe{
    max-width:100%;
    height:auto;
  }

  .learning-flow,
  .flow-track,
  .flow-item{
    max-width:100%;
    min-width:0;
  }

  .learning-flow .flow-item{
    grid-template-columns:34px minmax(0,1fr);
  }

  .premium-trace{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .trace-left,
  .trace-code,
  .premium-trace>.trace-state{
    min-width:0;
    max-width:100%;
  }

  .trace-code{
    overflow-x:auto;
  }

  .comparison-table{
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }
}


/* =========================================================
   LESSON 1 — SMALL SCREEN
   ========================================================= */

@media(max-width:560px){

  .lesson-layout>main{
    padding-left:10px;
    padding-right:10px;
    overflow-x:hidden;
  }

  .lesson-hero{
    padding:20px 15px;
    border-radius:10px;
  }

  .lesson-hero h1{
    font-size:32px;
    line-height:1.1;
  }

  .lesson-section{
    padding:17px 13px;
    border-radius:10px;
  }

  .lesson-section h2{
    font-size:27px;
    line-height:1.2;
  }

  .lesson-section h3{
    font-size:17px;
  }

  .concept-heading{
    align-items:flex-start;
    gap:9px;
  }

  .concept-heading h2{
    min-width:0;
    font-size:23px;
  }

  .concept-number{
    flex:0 0 38px;
    width:38px;
    height:38px;
  }

  .key-idea,
  .warning-box,
  .mistake-box,
  .real-example,
  .try-it-box{
    grid-template-columns:1fr;
    gap:7px;
    padding:13px;
  }

  .code-box pre,
  .output-box pre,
  .trace-code code{
    font-size:11px;
  }

  .learning-flow .flow-item{
    grid-template-columns:30px minmax(0,1fr);
    padding:10px;
  }

  .message-line{
    flex-direction:column;
    gap:4px;
  }

  .comparison-table table{
    min-width:460px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:380px){

  .lesson-layout>main{
    padding-left:7px;
    padding-right:7px;
  }

  .lesson-section{
    padding:15px 11px;
  }

  .lesson-hero{
    padding:18px 12px;
  }

  .lesson-hero h1{
    font-size:29px;
  }

  .lesson-section h2{
    font-size:24px;
  }

  .concept-heading h2{
    font-size:21px;
  }

  .comparison-table table{
    min-width:430px;
  }
}


/* =========================================================
   END FINAL VISUAL HIERARCHY
   ========================================================= */


/* =========================================================
   CODEBHAVYA ROADMAP — HORIZONTAL CARD DESIGN
   ========================================================= */

/* Roadmap card container */
#roadmapContent {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 22px !important;
}

/* Every roadmap card */
#roadmapContent > div,
#roadmapContent > article,
#roadmapContent > section,
#roadmapContent .roadmap-card,
#roadmapContent .level-card,
#roadmapContent .course-level-card,
#roadmapContent .roadmap-item,
#roadmapContent .level-item,
#roadmapContent .course-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;

  min-width: 0 !important;
  width: 100% !important;
  min-height: 210px !important;

  padding: 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(39, 47, 54, 0.98),
      rgba(28, 34, 39, 0.98)
    ) !important;

  border: 1px solid #4b5962 !important;
  border-left: 4px solid var(--cyan) !important;
  border-radius: 14px !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28) !important;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Hover */
#roadmapContent > div:hover,
#roadmapContent > article:hover,
#roadmapContent > section:hover,
#roadmapContent .roadmap-card:hover,
#roadmapContent .level-card:hover,
#roadmapContent .course-level-card:hover,
#roadmapContent .roadmap-item:hover,
#roadmapContent .level-item:hover,
#roadmapContent .course-card:hover {
  transform: translateY(-4px) !important;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.38) !important;

  border-color: #687780 !important;
}


/* ---------------------------------------------------------
   CARD COLOR VARIATIONS
   --------------------------------------------------------- */

/* Cyan */
#roadmapContent > *:nth-child(3n + 1) {
  border-left-color: var(--cyan) !important;

  background:
    linear-gradient(
      145deg,
      rgba(45, 75, 80, 0.95),
      rgba(30, 39, 43, 0.98)
    ) !important;
}

/* Gold */
#roadmapContent > *:nth-child(3n + 2) {
  border-left-color: var(--gold) !important;

  background:
    linear-gradient(
      145deg,
      rgba(76, 67, 43, 0.95),
      rgba(35, 35, 32, 0.98)
    ) !important;
}

/* Green */
#roadmapContent > *:nth-child(3n) {
  border-left-color: var(--green) !important;

  background:
    linear-gradient(
      145deg,
      rgba(43, 72, 58, 0.95),
      rgba(29, 38, 34, 0.98)
    ) !important;
}


/* ---------------------------------------------------------
   ROADMAP HEADINGS
   --------------------------------------------------------- */

#roadmapContent h2,
#roadmapContent h3,
#roadmapContent h4,
#roadmapContent .card-title,
#roadmapContent .roadmap-title,
#roadmapContent .level-title {
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

/* Cyan heading */
#roadmapContent > *:nth-child(3n + 1) h2,
#roadmapContent > *:nth-child(3n + 1) h3,
#roadmapContent > *:nth-child(3n + 1) h4,
#roadmapContent > *:nth-child(3n + 1) .card-title,
#roadmapContent > *:nth-child(3n + 1) .roadmap-title,
#roadmapContent > *:nth-child(3n + 1) .level-title {
  color: var(--cyan-soft) !important;
}

/* Gold heading */
#roadmapContent > *:nth-child(3n + 2) h2,
#roadmapContent > *:nth-child(3n + 2) h3,
#roadmapContent > *:nth-child(3n + 2) h4,
#roadmapContent > *:nth-child(3n + 2) .card-title,
#roadmapContent > *:nth-child(3n + 2) .roadmap-title,
#roadmapContent > *:nth-child(3n + 2) .level-title {
  color: var(--gold-soft) !important;
}

/* Green heading */
#roadmapContent > *:nth-child(3n) h2,
#roadmapContent > *:nth-child(3n) h3,
#roadmapContent > *:nth-child(3n) h4,
#roadmapContent > *:nth-child(3n) .card-title,
#roadmapContent > *:nth-child(3n) .roadmap-title,
#roadmapContent > *:nth-child(3n) .level-title {
  color: var(--green-soft) !important;
}


/* ---------------------------------------------------------
   CARD TEXT
   --------------------------------------------------------- */

#roadmapContent p,
#roadmapContent li,
#roadmapContent span {
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

#roadmapContent strong {
  color: var(--text-strong) !important;
}


/* ---------------------------------------------------------
   LEVEL NUMBER
   --------------------------------------------------------- */

#roadmapContent .level-number,
#roadmapContent .roadmap-number,
#roadmapContent .number,
#roadmapContent .level-badge {
  color: var(--gold-soft) !important;
  font-weight: 900 !important;
}


/* ---------------------------------------------------------
   ROADMAP LINKS
   --------------------------------------------------------- */

#roadmapContent a:not(.complete-btn):not(.mark-complete):not(button) {
  color: var(--cyan-soft) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#roadmapContent a:not(.complete-btn):not(.mark-complete):not(button):hover {
  color: #ffffff !important;
}


/* =========================================================
   MARK COMPLETE BUTTON
   ========================================================= */

/* Remove textbox/input appearance */
#roadmapContent button,
#roadmapContent .mark-complete,
#roadmapContent .complete-btn,
#roadmapContent .markComplete,
#roadmapContent input[type="button"],
#roadmapContent input[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-width: 130px !important;
  height: 40px !important;

  margin-top: 16px !important;
  padding: 9px 17px !important;

  background: linear-gradient(
    135deg,
    #315f50,
    #3b8066
  ) !important;

  color: #eafff5 !important;

  border: 1px solid #68c99a !important;
  border-radius: 8px !important;

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  text-align: center !important;
  text-decoration: none !important;

  cursor: pointer !important;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25) !important;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Hover */
#roadmapContent button:hover,
#roadmapContent .mark-complete:hover,
#roadmapContent .complete-btn:hover,
#roadmapContent .markComplete:hover,
#roadmapContent input[type="button"]:hover,
#roadmapContent input[type="submit"]:hover {
  background: linear-gradient(
    135deg,
    #3d8067,
    #52a47f
  ) !important;

  color: #ffffff !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.35) !important;
}


/* Completed state */
#roadmapContent button.completed,
#roadmapContent .mark-complete.completed,
#roadmapContent .complete-btn.completed,
#roadmapContent .markComplete.completed,
#roadmapContent button[data-completed="true"] {
  background: linear-gradient(
    135deg,
    #355b4b,
    #477d64
  ) !important;

  color: #b8ead1 !important;

  border-color: #68c99a !important;

  cursor: default !important;
}


/* ---------------------------------------------------------
   MOBILE — 2 COLUMN ROADMAP
   --------------------------------------------------------- */

@media (max-width: 900px) {

  #roadmapContent {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 15px !important;
  }

}


/* ---------------------------------------------------------
   SMALL MOBILE — SINGLE COLUMN
   --------------------------------------------------------- */

@media (max-width: 600px) {

  #roadmapContent {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #roadmapContent > div,
  #roadmapContent > article,
  #roadmapContent > section,
  #roadmapContent .roadmap-card,
  #roadmapContent .level-card,
  #roadmapContent .course-level-card,
  #roadmapContent .roadmap-item,
  #roadmapContent .level-item,
  #roadmapContent .course-card {
    min-height: auto !important;
    padding: 18px !important;
  }

  #roadmapContent button,
  #roadmapContent .mark-complete,
  #roadmapContent .complete-btn,
  #roadmapContent .markComplete {
    width: 100% !important;
    min-width: 0 !important;
  }

}


/* =========================================================
   LESSON 1 — MOBILE OVERFLOW FIX
   ========================================================= */

@media (max-width: 560px) {

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .lesson-layout,
  .lesson-layout > main,
  .lesson-hero,
  .lesson-section,
  .lesson-section > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .lesson-hero,
  .lesson-section,
  .key-idea,
  .warning-box,
  .mistake-box,
  .real-example,
  .try-it-box,
  .premium-trace,
  .message-panel {
    overflow: hidden !important;
  }

  .lesson-hero h1,
  .lesson-hero h2,
  .lesson-section h2,
  .lesson-section h3,
  .lesson-section h4,
  .lesson-section p,
  .lesson-section li,
  .lesson-section a,
  .lesson-section span,
  .lesson-section strong {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .lesson-hero h1 {
    font-size: 31px !important;
    line-height: 1.15 !important;
  }

  .lesson-section pre,
  .code-box pre,
  .output-box pre,
  .message-panel pre,
  .trace-code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre !important;
  }

  .comparison-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .message-line {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  .key-idea,
  .warning-box,
  .mistake-box,
  .real-example,
  .try-it-box {
    min-width: 0 !important;
  }

}


/* =========================================================
   CODEBHAVYA FULL STACK
   ROADMAP — HORIZONTAL LEVEL GROUPS
   ========================================================= */

#roadmapContent {
  display: grid !important;

  /* Multiple level cards across the page */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: 18px !important;

  width: 100% !important;
}


/* ---------------------------------------------------------
   LEVEL CARDS
   --------------------------------------------------------- */

#roadmapContent > div,
#roadmapContent > article,
#roadmapContent > section,
#roadmapContent .roadmap-card,
#roadmapContent .level-card,
#roadmapContent .course-level-card,
#roadmapContent .roadmap-item,
#roadmapContent .level-item,
#roadmapContent .course-card {

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 230px !important;

  padding: 20px !important;

  background:
    linear-gradient(
      145deg,
      #293238,
      #20262b
    ) !important;

  border: 1px solid #46545d !important;

  border-top: 4px solid var(--cyan) !important;

  border-radius: 14px !important;

  box-sizing: border-box !important;

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.25) !important;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}


/* ---------------------------------------------------------
   CARD COLOR VARIATIONS
   --------------------------------------------------------- */

/* Cyan */
#roadmapContent > *:nth-child(4n + 1) {
  border-top-color: var(--cyan) !important;

  background:
    linear-gradient(
      145deg,
      #293d41,
      #202a2e
    ) !important;
}


/* Gold */
#roadmapContent > *:nth-child(4n + 2) {
  border-top-color: var(--gold) !important;

  background:
    linear-gradient(
      145deg,
      #403a2a,
      #292820
    ) !important;
}


/* Green */
#roadmapContent > *:nth-child(4n + 3) {
  border-top-color: var(--green) !important;

  background:
    linear-gradient(
      145deg,
      #293c34,
      #202b26
    ) !important;
}


/* Blue */
#roadmapContent > *:nth-child(4n + 4) {
  border-top-color: var(--blue) !important;

  background:
    linear-gradient(
      145deg,
      #2b3845,
      #20282f
    ) !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#roadmapContent > div:hover,
#roadmapContent > article:hover,
#roadmapContent > section:hover,
#roadmapContent .roadmap-card:hover,
#roadmapContent .level-card:hover,
#roadmapContent .course-level-card:hover,
#roadmapContent .roadmap-item:hover,
#roadmapContent .level-item:hover,
#roadmapContent .course-card:hover {

  transform: translateY(-4px) !important;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35) !important;
}


/* ---------------------------------------------------------
   LEVEL NUMBER
   --------------------------------------------------------- */

#roadmapContent .level-number,
#roadmapContent .roadmap-number,
#roadmapContent .number,
#roadmapContent .level-badge {

  color: var(--gold-soft) !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  letter-spacing: 0.08em !important;

  margin-bottom: 10px !important;
}


/* ---------------------------------------------------------
   LEVEL HEADINGS
   --------------------------------------------------------- */

#roadmapContent h2,
#roadmapContent h3,
#roadmapContent h4,
#roadmapContent .card-title,
#roadmapContent .roadmap-title,
#roadmapContent .level-title {

  margin: 0 0 10px !important;

  font-size: 18px !important;

  line-height: 1.35 !important;

  font-weight: 800 !important;

  color: var(--cyan-soft) !important;
}


/* Heading colors */

#roadmapContent > *:nth-child(4n + 1) h2,
#roadmapContent > *:nth-child(4n + 1) h3,
#roadmapContent > *:nth-child(4n + 1) h4,
#roadmapContent > *:nth-child(4n + 1) .card-title,
#roadmapContent > *:nth-child(4n + 1) .level-title {
  color: var(--cyan-soft) !important;
}


#roadmapContent > *:nth-child(4n + 2) h2,
#roadmapContent > *:nth-child(4n + 2) h3,
#roadmapContent > *:nth-child(4n + 2) h4,
#roadmapContent > *:nth-child(4n + 2) .card-title,
#roadmapContent > *:nth-child(4n + 2) .level-title {
  color: var(--gold-soft) !important;
}


#roadmapContent > *:nth-child(4n + 3) h2,
#roadmapContent > *:nth-child(4n + 3) h3,
#roadmapContent > *:nth-child(4n + 3) h4,
#roadmapContent > *:nth-child(4n + 3) .card-title,
#roadmapContent > *:nth-child(4n + 3) .level-title {
  color: var(--green-soft) !important;
}


#roadmapContent > *:nth-child(4n + 4) h2,
#roadmapContent > *:nth-child(4n + 4) h3,
#roadmapContent > *:nth-child(4n + 4) h4,
#roadmapContent > *:nth-child(4n + 4) .card-title,
#roadmapContent > *:nth-child(4n + 4) .level-title {
  color: #b9d8f5 !important;
}


/* ---------------------------------------------------------
   CARD DESCRIPTION
   --------------------------------------------------------- */

#roadmapContent p {

  color: var(--muted) !important;

  font-size: 14px !important;

  line-height: 1.55 !important;

  margin: 0 0 15px !important;
}


/* ---------------------------------------------------------
   OPEN LESSON
   --------------------------------------------------------- */

#roadmapContent a {

  color: var(--cyan-soft) !important;

  font-weight: 700 !important;

  text-decoration: none !important;
}

#roadmapContent a:hover {
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   MARK COMPLETE BUTTON
   --------------------------------------------------------- */

#roadmapContent button,
#roadmapContent .mark-complete,
#roadmapContent .complete-btn,
#roadmapContent .markComplete,
#roadmapContent input[type="button"],
#roadmapContent input[type="submit"] {

  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;

  min-width: 125px !important;

  height: 38px !important;

  margin-top: auto !important;

  padding: 8px 15px !important;

  background: #315f50 !important;

  color: #eafff5 !important;

  border: 1px solid var(--green) !important;

  border-radius: 8px !important;

  font-family: inherit !important;

  font-size: 13px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  cursor: pointer !important;

  white-space: nowrap !important;

  box-sizing: border-box !important;
}


#roadmapContent button:hover,
#roadmapContent .mark-complete:hover,
#roadmapContent .complete-btn:hover,
#roadmapContent .markComplete:hover {

  background: #3f8066 !important;

  color: #ffffff !important;

  border-color: #82d8ad !important;
}


/* Completed button */

#roadmapContent button.completed,
#roadmapContent .mark-complete.completed,
#roadmapContent .complete-btn.completed,
#roadmapContent .markComplete.completed,
#roadmapContent button[data-completed="true"] {

  background: #263d34 !important;

  color: var(--green-soft) !important;

  border-color: #4f9a79 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width: 1050px) {

  #roadmapContent {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

}


/* Small tablet */
@media (max-width: 760px) {

  #roadmapContent {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

}


/* Mobile */
@media (max-width: 520px) {

  #roadmapContent {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #roadmapContent > div,
  #roadmapContent > article,
  #roadmapContent > section,
  #roadmapContent .roadmap-card,
  #roadmapContent .level-card,
  #roadmapContent .course-level-card,
  #roadmapContent .roadmap-item,
  #roadmapContent .level-item,
  #roadmapContent .course-card {

    min-height: 210px !important;

    padding: 18px !important;
  }

}


/* =========================================================
   CODEBHAVYA FULL STACK
   STAGE-WISE ROADMAP
   3 LEVEL CARDS PER ROW
   ========================================================= */


/* ---------------------------------------------------------
   ROADMAP CONTAINER
   --------------------------------------------------------- */

#roadmapContent {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ---------------------------------------------------------
   EACH STAGE
   --------------------------------------------------------- */

#roadmapContent .stage {
  display: block !important;

  width: 100% !important;

  margin: 0 0 42px !important;

  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
}


/* ---------------------------------------------------------
   STAGE HEADER
   --------------------------------------------------------- */

#roadmapContent .stage-header {
  display: flex !important;

  align-items: flex-end !important;
  justify-content: space-between !important;

  gap: 25px !important;

  margin-bottom: 18px !important;

  padding-bottom: 14px !important;

  border-bottom: 1px solid var(--line) !important;
}


#roadmapContent .stage-header > div {
  min-width: 0 !important;
}


#roadmapContent .stage-range {
  display: block !important;

  margin-bottom: 5px !important;

  color: var(--gold) !important;

  font-size: 12px !important;

  font-weight: 900 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;
}


#roadmapContent .stage-header h3 {
  margin: 0 !important;

  color: var(--text-strong) !important;

  font-size: 24px !important;

  font-weight: 850 !important;

  line-height: 1.25 !important;
}


#roadmapContent .stage-header p {
  max-width: 580px !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 14px !important;

  line-height: 1.6 !important;

  text-align: right !important;
}


/* =========================================================
   THE IMPORTANT PART
   THREE LEVEL CARDS PER ROW
   ========================================================= */

#roadmapContent .level-grid {

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 18px !important;

  width: 100% !important;

  margin: 0 !important;
}


/* =========================================================
   LEVEL CARD
   ========================================================= */

#roadmapContent .level-card {

  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 250px !important;

  padding: 20px !important;

  box-sizing: border-box !important;

  background:
    linear-gradient(
      145deg,
      #293238,
      #20262b
    ) !important;

  border: 1px solid #46545d !important;

  border-top: 4px solid var(--cyan) !important;

  border-radius: 14px !important;

  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.24) !important;

  overflow: hidden !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}


/* ---------------------------------------------------------
   CARD COLOR VARIATIONS
   --------------------------------------------------------- */

#roadmapContent .level-card:nth-child(3n + 1) {

  border-top-color: var(--cyan) !important;

  background:
    linear-gradient(
      145deg,
      #293d41,
      #202a2e
    ) !important;
}


#roadmapContent .level-card:nth-child(3n + 2) {

  border-top-color: var(--gold) !important;

  background:
    linear-gradient(
      145deg,
      #403a2a,
      #292820
    ) !important;
}


#roadmapContent .level-card:nth-child(3n) {

  border-top-color: var(--green) !important;

  background:
    linear-gradient(
      145deg,
      #293c34,
      #202b26
    ) !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#roadmapContent .level-card:hover {

  transform: translateY(-4px) !important;

  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.34) !important;
}


/* =========================================================
   CARD TOP
   ========================================================= */

#roadmapContent .level-card-top {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 10px !important;

  margin-bottom: 14px !important;
}


/* LEVEL NUMBER */

#roadmapContent .level-number {

  color: var(--gold-soft) !important;

  font-size: 12px !important;

  font-weight: 900 !important;

  letter-spacing: 0.08em !important;
}


/* =========================================================
   STATUS
   ========================================================= */

#roadmapContent .level-status {

  display: inline-flex !important;

  align-items: center !important;

  padding: 4px 8px !important;

  border-radius: 20px !important;

  font-size: 10px !important;

  font-weight: 900 !important;

  letter-spacing: 0.05em !important;
}


#roadmapContent .level-status.available {

  background: rgba(104, 201, 154, 0.12) !important;

  color: var(--green-soft) !important;

  border: 1px solid rgba(104, 201, 154, 0.3) !important;
}


#roadmapContent .level-status.planned {

  background: rgba(141, 153, 162, 0.12) !important;

  color: var(--soft) !important;

  border: 1px solid rgba(141, 153, 162, 0.25) !important;
}


/* =========================================================
   CARD HEADING
   ========================================================= */

#roadmapContent .level-card h3 {

  margin: 0 0 10px !important;

  color: var(--cyan-soft) !important;

  font-size: 19px !important;

  font-weight: 850 !important;

  line-height: 1.3 !important;
}


#roadmapContent .level-card:nth-child(3n + 1) h3 {
  color: var(--cyan-soft) !important;
}


#roadmapContent .level-card:nth-child(3n + 2) h3 {
  color: var(--gold-soft) !important;
}


#roadmapContent .level-card:nth-child(3n) h3 {
  color: var(--green-soft) !important;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

#roadmapContent .level-card p {

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 14px !important;

  line-height: 1.55 !important;
}


/* =========================================================
   CARD ACTIONS
   ========================================================= */

#roadmapContent .level-actions {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 12px !important;

  margin-top: auto !important;

  padding-top: 20px !important;
}


/* =========================================================
   OPEN LESSON
   ========================================================= */

#roadmapContent .lesson-link {

  display: inline-flex !important;

  align-items: center !important;

  color: var(--cyan-soft) !important;

  font-size: 13px !important;

  font-weight: 800 !important;

  text-decoration: none !important;
}


#roadmapContent .lesson-link:hover {

  color: #ffffff !important;

  text-decoration: underline !important;
}


/* =========================================================
   MARK COMPLETE BUTTON
   ========================================================= */

/*
   IMPORTANT:
   This is a BUTTON, not an input/textbox.
*/

#roadmapContent .mark-complete {

  appearance: none !important;

  -webkit-appearance: none !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex: 0 0 auto !important;

  width: auto !important;

  min-width: 118px !important;

  height: 36px !important;

  margin: 0 !important;

  padding: 8px 13px !important;

  box-sizing: border-box !important;

  background:
    linear-gradient(
      135deg,
      #315f50,
      #3a765f
    ) !important;

  color: #eafff5 !important;

  border: 1px solid var(--green) !important;

  border-radius: 8px !important;

  outline: none !important;

  font-family: inherit !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  cursor: pointer !important;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.2) !important;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}


#roadmapContent .mark-complete:hover {

  background:
    linear-gradient(
      135deg,
      #3d8067,
      #4a9473
    ) !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.3) !important;
}


/* COMPLETED */

#roadmapContent .mark-complete.is-completed {

  background:
    linear-gradient(
      135deg,
      #263d34,
      #315344
    ) !important;

  color: var(--green-soft) !important;

  border-color: #4f9a79 !important;
}


/* =========================================================
   PLANNED CARD
   ========================================================= */

#roadmapContent .planned-label {

  color: var(--soft) !important;

  font-size: 12px !important;

  font-weight: 800 !important;
}


/* =========================================================
   LOCKED CARD
   ========================================================= */

#roadmapContent .level-card.locked {

  opacity: 0.82 !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

#roadmapContent .level-card[hidden] {

  display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  #roadmapContent .level-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  #roadmapContent .stage-header {

    align-items: flex-start !important;

    flex-direction: column !important;

    gap: 8px !important;
  }


  #roadmapContent .stage-header p {

    max-width: none !important;

    text-align: left !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  #roadmapContent .level-grid {

    grid-template-columns: 1fr !important;

    gap: 14px !important;
  }


  #roadmapContent .stage {

    margin-bottom: 34px !important;
  }


  #roadmapContent .stage-header h3 {

    font-size: 21px !important;
  }


  #roadmapContent .level-card {

    min-height: 220px !important;

    padding: 18px !important;
  }


  #roadmapContent .level-card h3 {

    font-size: 18px !important;
  }


  #roadmapContent .level-actions {

    align-items: flex-start !important;

    flex-direction: column !important;
  }


  #roadmapContent .mark-complete {

    width: auto !important;

    min-width: 118px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

  #roadmapContent .stage-header h3 {

    font-size: 19px !important;
  }


  #roadmapContent .level-card {

    padding: 16px !important;
  }


  #roadmapContent .level-card h3 {

    font-size: 17px !important;
  }

}

/* =========================================================
   FULL STACK — STAGE HEADER WIDTH & SPACING FIX
   ========================================================= */

#roadmapContent .stage-header {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 35px !important;

  width: 100% !important;
  margin: 0 0 20px !important;
  padding: 20px 4px 16px !important;
  box-sizing: border-box !important;

  border-bottom: 1px solid var(--line) !important;
}

/* LEFT SIDE */
#roadmapContent .stage-header > div {
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#roadmapContent .stage-range {
  display: block !important;
  margin: 0 0 7px !important;
  padding: 0 !important;

  color: var(--gold) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#roadmapContent .stage-header h3 {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--text-strong) !important;
  font-size: 23px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

/* RIGHT SIDE DESCRIPTION */
#roadmapContent .stage-header > p {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: left !important;

  /* Prevent unnecessary wrapping on wide screens */
  white-space: nowrap !important;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
  #roadmapContent .stage-header {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {
  #roadmapContent .stage-header {
    grid-template-columns: 250px minmax(0, 1fr) !important;
    column-gap: 25px !important;
  }

  #roadmapContent .stage-header > p {
    white-space: normal !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  #roadmapContent .stage-header {
    display: block !important;

    margin-bottom: 16px !important;
    padding: 17px 2px 14px !important;
  }

  #roadmapContent .stage-header > div {
    margin-bottom: 9px !important;
  }

  #roadmapContent .stage-range {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  #roadmapContent .stage-header h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }

  #roadmapContent .stage-header > p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
  }
}
/* =========================================================
   CODEBHAVYA FULL STACK INDEX — FINAL MOBILE HERO FIX
   Keeps desktop unchanged and prevents the hero from becoming
   an unnecessarily tall vertical stack on phones.
   ========================================================= */

@media (max-width: 760px) {

  /* Main index page spacing */
  body:has(> main > .hero) main {
    padding: 0 10px 34px !important;
  }

  /* HERO: one clean mobile column */
  body:has(> main > .hero) main > .hero {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
    padding: 28px 20px 22px !important;
    margin: 0 auto !important;
    border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
  }

  body:has(> main > .hero) main > .hero > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hero .eyebrow {
    margin-bottom: 9px !important;
    font-size: 9px !important;
    line-height: 1.4 !important;
    letter-spacing: .12em !important;
  }

  .hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.02em !important;
  }

  .hero > div:first-child > p:not(.eyebrow) {
    max-width: 100% !important;
    margin-top: 15px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Buttons stay compact instead of becoming a tall stack */
  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .hero-actions .button {
    flex: 1 1 150px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    text-align: center !important;
  }

  /* Statistics: 2 × 2 instead of four vertical blocks */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }

  .stats > div {
    min-width: 0 !important;
    padding: 11px 10px !important;
  }

  .stats strong {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  .stats span {
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  /* MERN visual: compact, horizontal relationship */
  .stack-map {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 12px !important;
    align-self: stretch !important;
    border-radius: 10px !important;
  }

  .stack-map span {
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }

  .stack-map b {
    margin: 8px 0 !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .stack-map i {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Progress card */
  body:has(> main > .hero) main > .progress-card {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 14px !important;
    padding: 18px !important;
  }

  .progress-card h2 {
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  .progress-card p:not(.section-label) {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .progress-card > div:last-child {
    width: 100% !important;
  }

  /* Roadmap */
  body:has(> main > .hero) main > .roadmap {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 18px !important;
    border-radius: 11px !important;
  }

  .roadmap h2 {
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  .roadmap header > p:not(.section-label) {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* Narrow phones */
@media (max-width: 430px) {

  body:has(> main > .hero) main {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body:has(> main > .hero) main > .hero {
    padding: 24px 15px 18px !important;
    gap: 17px !important;
  }

  .hero h1 {
    font-size: clamp(31px, 10.5vw, 42px) !important;
  }

  .hero > div:first-child > p:not(.eyebrow) {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .hero-actions {
    gap: 7px !important;
  }

  .hero-actions .button {
    flex: 1 1 100% !important;
    min-height: 39px !important;
  }

  .stats {
    gap: 7px !important;
    margin-top: 17px !important;
  }

  .stats > div {
    padding: 10px 8px !important;
  }

  .stats strong {
    font-size: 20px !important;
  }

  .stats span {
    font-size: 8.5px !important;
  }

  .stack-map {
    padding: 14px 10px !important;
  }

  .stack-map b {
    margin: 7px 0 !important;
    padding: 9px 7px !important;
    font-size: 10px !important;
  }

  body:has(> main > .hero) main > .progress-card,
  body:has(> main > .hero) main > .roadmap {
    padding: 15px !important;
  }
}

/* =========================================================
   END — FINAL FULL STACK INDEX MOBILE FIX
   ========================================================= */