/* ══════════ PAGE CONTAINER ══════════ */
      .content-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px 60px;
      }

      /* ══════════ HERO / WELCOME ══════════ */
      .hero {
        background: linear-gradient(135deg, var(--brand-dark), var(--brand));
        padding: 36px 32px 28px;
        position: relative;
        overflow: hidden;
      }

      .hero-container{
        max-width: 1100px;
        margin: auto;
        padding:0 20px;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.02) 0,
          rgba(255, 255, 255, 0.02) 1px,
          transparent 1px,
          transparent 20px
        );
        pointer-events: none;
      }
      .hero-welcome {
		display:flex;
        font-family: "Fredoka One", cursive;
        font-size: 28px;
        color: white;
        margin-bottom: 4px;
        position: relative;
      }
      .hero-sub {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 20px;
        position: relative;
      }

      /* ── STATS ROW ── */
      .stats-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        position: relative;
      }
      .stat-card {
        background: rgba(255, 255, 255, 0.1);
        border: 1.5px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--radius-lg);
        padding: 14px 18px;
        min-width: 140px;
        flex: 1;
      }
      .stat-label {
        font-size: 0.68rem;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 4px;
      }
      .stat-value {
        font-family: "Fredoka One", cursive;
        font-size: 22px;
        color: white;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .stat-value .sub {
        font-family: "Nunito", sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
      }
      .stat-card.streak {
        border-color: var(--gold);
        background: rgba(245, 166, 11, 0.15);
      }
      .stat-card.streak .stat-value {
        color: var(--gold);
      }


	 /* ── Hero Back button ── */
.hero-back-button{
	margin-left:auto;
	flex-shrink:0;
	display:flex;
	justify-content:flex-end;
}

.hero-back-button a.aim-dashboard-btn{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:6px;

	width:auto !important;
	min-width:0 !important;
	max-width:100%;
	height:38px;
	padding:0 18px;

	background:#fff !important;
	color:#683FA0 !important;

	border:1px solid rgba(255,255,255,.35);
	border-radius:10px;

	font-size:13px !important;
	font-weight:700 !important;
	line-height:1 !important;
	text-decoration:none !important;
	white-space:nowrap;

	box-shadow:0 3px 12px rgba(0,0,0,.12);
	transition:all .2s ease;
	box-sizing:border-box;
}

.hero-back-button a.aim-dashboard-btn:hover{
	background:#F7F2FF !important;
	color:#4B247A !important;
	transform:translateY(-1px);
	box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Tablet */
@media (max-width:900px){
	.hero-back-button{
		margin-left:auto;
		justify-content:flex-end;
	}

	.hero-back-button a.aim-dashboard-btn{
		height:36px;
		padding:0 14px;
		font-size:12px !important;
	}
}
/* Mobile & Tablet */
@media (max-width:768px){

	.hero-welcome{
		display:grid;
		grid-template-columns:minmax(0, auto) auto;
		align-items:center;
		justify-content:start;
		column-gap:8px;
		row-gap:16px;
	}

	/* Heading stays in the first column */
	.hero-welcome h1,
	.hero-welcome .hero-title{
		grid-column:1;
		grid-row:1;

		width:auto;
		min-width:0;
		margin:0;

		line-height:1.2;
	}

	/* Rocket stays beside the heading */
	.hero-welcome > img{
		grid-column:2;
		grid-row:1;

		display:block;
		flex:none;
		width:28px;
		height:auto;
		margin:0;
	}

	/* Button moves to its own row */
	.hero-back-button{
		grid-column:1 / -1;
		grid-row:2;

		width:100%;
		margin:0;

		display:flex;
		justify-content:flex-start;
	}

	.hero-back-button a.aim-dashboard-btn{
		display:inline-flex !important;
		align-items:center;
		justify-content:center;

		width:fit-content !important;
		min-width:0 !important;
		max-width:100%;

		height:42px;
		padding:0 18px;

		font-size:13px !important;
		white-space:nowrap;
		box-sizing:border-box;
	}

	/* Subtitle moves below the button */
	.hero-welcome p,
	.hero-welcome .hero-subtitle{
		grid-column:1 / -1;
		grid-row:3;

		width:100%;
		margin:0;
		line-height:1.5;
	}
}

/* Small phones */
@media (max-width:480px){

	.hero-welcome{
		column-gap:6px;
		row-gap:14px;
		padding-top:20px;
		padding-bottom:20px;
	}

	.hero-welcome > img{
		width:24px;
	}

	.hero-back-button a.aim-dashboard-btn{
		height:40px;
		padding:0 16px;
		font-size:12px !important;
	}
}
      /* ── PROGRESS BAR (in hero) ── */
      .hero-progress {
        margin-top: 18px;
        position: relative;
      }
      .hp-bar-bg {
        height: 10px;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 5px;
        overflow: hidden;
      }
      .hp-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--teal), var(--green));
        border-radius: 5px;
        transition: width 0.8s ease;
        position: relative;
      }
      .hp-bar-fill::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.3)
        );
        border-radius: 0 5px 5px 0;
      }
      .hp-label {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        font-size: 0.75rem;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.5);
      }
      .hp-label .done {
        color: var(--teal);
      }

      /* ══════════ CONTINUE BUTTON ══════════ */
      .continue-section {
        padding: 24px 0;
      }
      .continue-card-link {
        display: block;
        text-decoration: none;
        color: inherit;
      }
      .continue-card-link:hover {
        color: inherit;
      }
      .continue-card {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 2px solid var(--border);
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: var(--shadow-sm);
      }
      .continue-card:hover {
        border-color: var(--brand);
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
      }
      .continue-card.continue-card--complete {
        cursor: default;
        border-color: var(--teal);
      }
      .continue-card.continue-card--complete:hover {
        transform: none;
      }
      .continue-card .cc-btn--complete {
        background: var(--teal-light);
        color: var(--teal-dark);
        cursor: default;
        font-weight: 700;
      }
      .cc-icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, var(--brand), var(--teal));
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(104, 63, 160, 0.25);
      }
      .cc-info {
        flex: 1;
      }
      .cc-overline {
        font-size: 0.68rem;
        font-weight: 900;
        color: var(--teal-dark);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 2px;
      }
      .cc-title {
        font-family: "Fredoka One", cursive;
        font-size: 17px;
        color: var(--text);
        margin-bottom: 3px;
      }
      .cc-topic {
        font-size: 1rem;
        font-weight: 700;
        color: var(--brand);
        margin-bottom: 2px;
      }
      .cc-step {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-light);
      }
      .cc-btn {
        background: linear-gradient(135deg, var(--brand), var(--teal));
        color: white;
        border: none;
        border-radius: var(--radius-pill);
        padding: 12px 28px;
        font-family: "Nunito", sans-serif;
        font-size: 0.88rem;
        font-weight: 900;
        cursor: pointer;
        flex-shrink: 0;
        transition: opacity 0.2s;
      }
      .cc-btn:hover {
        opacity: 0.9;
      }






      /* ══════════ SECTION HEADERS ══════════ */
      .section-label {
        font-size: 0.68rem;
        font-weight: 900;
        color: var(--brand);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .section-title {
        font-family: "Fredoka One", cursive;
        font-size: 22px;
        color: var(--text);
        margin-bottom: 18px;
      }

      /* ══════════ MASCOT STRIP ══════════ */
      .mascots-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 36px;
      }
      .mascot-mini {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 2px solid var(--border);
        padding: 18px 16px;
        text-align: center;
        transition: all 0.2s;
      }
      .mascot-mini:hover {
        border-color: var(--brand);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .mm-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 0 auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        border: 3px solid white;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
      }
      .mm-name {
        font-family: "Fredoka One", cursive;
        font-size: 1rem;
        color: var(--text);
        margin-bottom: 2px;
      }
      .mm-role {
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .mm-desc {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-light);
        line-height: 1.5;
      }
.mascots-strip .mascot-mini .mod-icon img{
    border-radius: 100%;
    margin-top: 10px;
}
      /* ══════════ LESSON LINKS ══════════ */
      .lesson-links-module {
        margin-bottom: 20px;
      }
      .lesson-links-label {
        font-size: 0.7rem;
        font-weight: 800;
        color: var(--text-light);
        letter-spacing: 0.5px;
        margin-bottom: 8px;
      }
      .lesson-links-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin: 0;
        padding: 0;
      }
      .lesson-links-list li {
        margin: 0;
      }
      .lesson-links-list a,
      .lesson-links-list span {
        font-size: 0.85rem;
        color: var(--brand);
        text-decoration: none;
        font-weight: 600;
      }
      .lesson-links-list a:hover {
        text-decoration: underline;
      }
      .lesson-links-list span {
        color: var(--text-light);
      }

      /* ══════════ MODULE GRID ══════════ */
      .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 36px;
      }
      .mod-card {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 2px solid var(--border);
        padding: 20px 18px 16px;
        cursor: pointer;
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
      }
      .mod-card:hover:not(.locked) {
        border-color: var(--brand);
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(104, 63, 160, 0.15);
      }

      /* Active module glow */
      .mod-card.active {
        border-color: var(--brand);
        box-shadow:
          0 0 0 3px rgba(104, 63, 160, 0.15),
          0 8px 24px rgba(104, 63, 160, 0.12);
      }
      .mod-card.active::before {
        content: "▶ CONTINUE";
        position: absolute;
        top: 10px;
        right: 10px;
        background: linear-gradient(135deg, var(--brand), var(--teal));
        color: white;
        font-size: 0.6rem;
        font-weight: 900;
        letter-spacing: 1px;
        padding: 3px 10px;
        border-radius: var(--radius-pill);
      }
      .mod-icon-wrap.mod-icon-locked::after {
        content: "🔒";
        position: absolute;
        bottom: -12px;
        right: -15px;
        font-size: 16px;
    }
      /* Completed module */
      .mod-card.completed {
        border-color: var(--teal);
      }
      .mod-card.completed::before {
        content: "✅ COMPLETE";
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--teal-light);
        color: var(--teal-dark);
        font-size: 0.6rem;
        font-weight: 900;
        letter-spacing: 1px;
        padding: 3px 10px;
        border-radius: var(--radius-pill);
      }

      /* Locked module — lesson icon + small lock overlay from module-icon only (no double lock) */
      .mod-card.locked {
        cursor: not-allowed;
      }

      /* Digital Safety category — teal border and tag */
      .mod-card.digital-safety {
        border-color: rgba(13, 191, 176, 0.35);
        border-left: 4px solid var(--teal);
      }
      .mod-card.digital-safety .mod-tag.tag-safety {
        background: var(--teal-light);
        color: var(--teal-dark);
      }

      .mod-num {
        font-size: 0.65rem;
        font-weight: 900;
        color: var(--text-light);
        letter-spacing: 1.5px;
        margin-bottom: 8px;
      }
      .mod-icon {
        font-size: 36px;
        margin-bottom: 10px;
        display: block;
      }
      .mod-icon img {
        object-fit: cover;
        border-radius: var(--radius-sm);
      }
      .mod-title {
        font-family: "Fredoka One", cursive;
        font-size: 15px;
        color: var(--text);
        margin-bottom: 4px;
        line-height: 1.3;
      }
      .mod-topic {
        font-size: 1rem;
        font-weight: 700;
        color: var(--brand);
        margin-bottom: 4px;
      }
      .mod-desc {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-light);
        line-height: 1.5;
        margin-bottom: 10px;
      }
      .mod-tag {
        font-size: 0.65rem;
        font-weight: 900;
        border-radius: 20px;
        padding: 3px 10px;
        display: inline-block;
      }
      .tag-ai,
      .tag-lesson {
        background: var(--brand-light);
        color: var(--brand);
      }
      .tag-safety {
        background: var(--teal-light);
        color: var(--teal-dark);
      }

      /* ══════════ BADGE SHELF ══════════ */
      .badge-shelf {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 2px solid var(--border);
        padding: 22px 24px;
        margin-bottom: 36px;
      }
      .badge-shelf-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
      }
      .badge-shelf-title {
        font-family: "Fredoka One", cursive;
        font-size: 17px;
        color: var(--text);
      }
      .badge-count {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-light);
      }
      .badge-count span {
        color: var(--gold);
        font-weight: 900;
      }
      .badges-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .badge-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 68px;
      }
      .badge-circle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border: 3px solid var(--border);
        background: var(--surface);
        transition: all 0.3s;
      }
      .badge-circle.earned {
        border-color: var(--gold);
        background: var(--gold-light);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
        animation: badgeEarned 0.5s ease;
      }
      @keyframes badgeEarned {
        0% {
          transform: scale(0.8) rotate(-10deg);
        }
        60% {
          transform: scale(1.1) rotate(3deg);
        }
        100% {
          transform: scale(1) rotate(0);
        }
      }
      .badge-circle.locked {
        border-color: var(--border);
        background: var(--surface);
      }
      .badge-label {
        font-size: 0.6rem;
        font-weight: 800;
        color: var(--text-light);
        text-align: center;
        line-height: 1.2;
      }
      .badge-label.earned {
        color: var(--text);
        font-weight: 900;
      }

      /* ══════════ STREAK SECTION ══════════ */
      .streak-bar {
        background: var(--white);
        border-radius: var(--radius-xl);
        border: 2px solid var(--border);
        padding: 18px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 36px;
      }
      .streak-flame {
        font-size: 38px;
        flex-shrink: 0;
        animation: flicker 1.5s ease-in-out infinite alternate;
      }
      @keyframes flicker {
        0% {
          transform: scale(1) rotate(-2deg);
        }
        100% {
          transform: scale(1.08) rotate(2deg);
        }
      }
      .streak-info {
        flex: 1;
      }
      .streak-title {
        font-family: "Fredoka One", cursive;
        font-size: 18px;
        color: var(--text);
        margin-bottom: 2px;
      }
      .streak-sub {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-light);
        margin-bottom: 8px;
      }
      .streak-days {
        display: flex;
        gap: 6px;
      }
      .streak-dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
        font-weight: 900;
        border: 2px solid var(--border);
        background: var(--surface);
        color: var(--text-light);
      }
      .streak-dot.lit {
        background: linear-gradient(135deg, var(--gold), #d97706);
        border-color: var(--gold);
        color: white;
      }
      .streak-dot.today {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(104, 63, 160, 0.15);
      }
      .streak-best {
        text-align: right;
        flex-shrink: 0;
      }
      .streak-best-label {
        font-size: 0.65rem;
        font-weight: 900;
        color: var(--text-light);
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .streak-best-num {
        font-family: "Fredoka One", cursive;
        font-size: 24px;
        color: var(--gold);
      }

      /* ══════════ RESPONSIVE ══════════ */
      @media (max-width: 768px) {
        .stats-row {
          flex-direction: column;
        }
        .mascots-strip {
          grid-template-columns: 1fr;
        }
        /* .modules-grid {
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        } */
        .hero {
          padding: 24px 20px 20px;
        }
        .hero-welcome {
          font-size: 22px;
        }
        .continue-card {
          flex-direction: column;
          text-align: center;
        }
        .streak-bar {
          flex-direction: column;
          text-align: center;
        }
        .streak-best {
          text-align: center;
        }
        .streak-days {
          justify-content: center;
        }
      }