:root {
  --bg: #020713;
  --panel: rgba(8, 17, 35, 0.72);
  --panel-strong: rgba(9, 20, 43, 0.92);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.68);
  --soft: rgba(255, 255, 255, 0.10);
  --blue: #2f84ff;
  --cyan: #37d5ff;
  --purple: #8b5cf6;
  --line: rgba(100, 181, 255, 0.22);
  --shadow: 0 20px 80px rgba(0, 95, 255, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 80% 8%,
      rgba(47, 132, 255, 0.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 30%,
      rgba(42, 103, 205, 0.065),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #030716 0%,
      #020713 45%,
      #02050d 100%
    );

  z-index: -4;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select { font: inherit; }
.container { width: min(1120px, calc(100% - 42px)); margin-inline: auto; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 999;
  background: linear-gradient(90deg, var(--cyan), var(--blue), #8b5cf6);
  box-shadow: 0 0 20px rgba(55,213,255,0.8);
}
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow { position: fixed; border-radius: 999px; filter: blur(80px); pointer-events: none; z-index: -3; animation: breathe 10s infinite ease-in-out; }
.glow-one { width: 360px; height: 360px; background: rgba(47,132,255,.20); top: -120px; right: 12%; }
.glow-two { width: 340px; height: 340px; background: rgba(55,213,255,.12); bottom: 10%; left: -120px; animation-delay: -3s; }
.glow-three { width: 240px; height: 240px; background: rgba(121,73,255,.12); bottom: -80px; right: 20%; animation-delay: -6s; }
@keyframes breathe { 0%,100%{ transform: scale(1) translate3d(0,0,0); } 50%{ transform: scale(1.25) translate3d(30px,-20px,0); } }

.site-header { position: sticky; top: 0; z-index: 80; backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(2,7,19,.62); }
.nav { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { font-size: 26px; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.brand span { color: var(--blue); }
.brand-mark { margin-right: 8px; font-size: 13px; }
.nav-links { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 14px; }
.nav-links a { transition: .25s ease; }
.nav-links a:hover, .nav-links .nav-highlight { color: var(--cyan); }
.talk-btn, .primary-btn, .secondary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 12px; font-weight: 700; transition: .28s ease; cursor: pointer;
}
.talk-btn { padding: 11px 18px; background: linear-gradient(135deg, #184adf, var(--blue)); box-shadow: 0 12px 35px rgba(47,132,255,.26); white-space: nowrap; }
.primary-btn { padding: 16px 25px; background: linear-gradient(135deg, #1d66ff, var(--blue)); box-shadow: 0 16px 42px rgba(47,132,255,.34); }
.secondary-btn { padding: 15px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); }
.talk-btn:hover, .primary-btn:hover, .secondary-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(47,132,255,.28); }
.pulse-btn { animation: softPulse 2.8s infinite; }
@keyframes softPulse { 0%,100%{ box-shadow: 0 0 0 rgba(55,213,255,0); } 50%{ box-shadow: 0 0 40px rgba(55,213,255,.18); } }
.menu-btn { display: none; background: transparent; border: 0; color: white; font-size: 28px; }

.side-dock { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 75; display: flex; flex-direction: column; gap: 16px; padding: 18px 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(8,17,35,.65); border-radius: 26px; backdrop-filter: blur(14px); }
.side-dock a { width: 30px; height: 30px; display: grid; place-items: center; color: rgba(255,255,255,.58); transition: .25s ease; font-size: 13px; }
.side-dock a:hover, .side-dock a.active { color: var(--blue); transform: scale(1.18); }

.hero { min-height: calc(100vh - 74px); display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 40px; padding: 56px 0 22px; position: relative; }
.availability { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.04); font-size: 13px; }
.availability span { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 16px var(--blue); }
.intro-line { margin-top: 28px; color: var(--cyan); font-weight: 700; }
.hero h1, .study-hero h1 { margin-top: 8px; font-size: clamp(58px, 8vw, 96px); line-height: .95; letter-spacing: -.075em; }
.hero h1 span, .study-hero h1 span { display: block; color: var(--blue); text-shadow: 0 0 45px rgba(47,132,255,.35); position: relative; }
.hero h1 span::after { content: ""; display: inline-block; width: 3px; height: .82em; background: var(--cyan); margin-left: 6px; animation: blink 1s infinite; }
@keyframes blink { 0%,45%{ opacity:1; } 46%,100%{ opacity:0; } }
.role { margin-top: 22px; color: rgba(255,255,255,.84); line-height: 1.7; }
.role b { color: var(--blue); margin-inline: 8px; }
.hero-text { margin-top: 22px; max-width: 430px; color: var(--muted); line-height: 1.8; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.hero-visual { min-height: 620px; position: relative; display: grid; place-items: end center; isolation: isolate; }
.hero-photo { position: relative; z-index: 2; height: min(680px, 78vh); width: min(480px, 100%); object-fit: cover; object-position: center 18%; filter: drop-shadow(0 30px 70px rgba(0,0,0,.7)); animation: photoFloat 6s infinite ease-in-out; border-radius: 0 0 42px 42px; }
@keyframes photoFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-15px); } }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(47,132,255,.35); z-index: 0; }
.orbit-one { width: 455px; height: 455px; top: 56px; right: 60px; box-shadow: 0 0 35px rgba(47,132,255,.22), inset 0 0 40px rgba(47,132,255,.08); animation: rotate 16s linear infinite; }
.orbit-two { width: 360px; height: 360px; top: 106px; right: 106px; border-style: dashed; animation: rotateReverse 22s linear infinite; }
@keyframes rotate { to{ transform: rotate(360deg); } }
@keyframes rotateReverse { to{ transform: rotate(-360deg); } }
.floating-badge { position: absolute; z-index: 3; padding: 17px 18px; background: rgba(8,17,35,.82); border: 1px solid var(--blue); border-radius: 14px; box-shadow: var(--shadow); font-size: 28px; font-weight: 900; animation: floatBadge 4s infinite ease-in-out; }
.floating-badge small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; font-weight: 500; }
.badge-one { right: 0; bottom: 95px; }
.badge-two { left: 45px; top: 110px; animation-delay: -1.4s; }
@keyframes floatBadge { 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-16px) rotate(2deg); } }

.socials { margin-top: 30px; }
.socials p { color: var(--muted); margin-bottom: 12px; }
.socials div { display: flex; flex-wrap: wrap; gap: 14px; }
.socials a { width: 54px; height: 54px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); border-radius: 15px; transition: .28s ease; font-weight: 900; box-shadow: 0 16px 42px rgba(0,0,0,.18); overflow: visible; }
.socials a span { position: relative; z-index: 1; font-size: 20px; }
.socials a small { position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%) translateY(5px); color: rgba(255,255,255,.62); font-size: 11px; opacity: 0; pointer-events: none; transition: .25s ease; white-space: nowrap; }
.socials a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: .28s ease; }
.socials a:hover { transform: translateY(-8px) scale(1.08) rotate(-2deg); border-color: var(--blue); color: white; }
.socials a:hover small { opacity: 1; transform: translateX(-50%) translateY(0); }
.socials a:hover::before { opacity: 1; }
.socials .tiktok:hover::before { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,242,234,.16), rgba(255,0,80,.16)); }
.socials .instagram:hover::before { background: linear-gradient(135deg, rgba(255,214,0,.18), rgba(255,0,128,.18), rgba(121,73,255,.18)); }
.socials .facebook:hover::before { background: rgba(24,119,242,.18); }
.socials .youtube:hover::before { background: rgba(255,0,0,.18); }
.socials .linkedin:hover::before { background: rgba(10,102,194,.18); }
.contact-socials { display: flex; justify-content: center; margin-top: 28px; }
.contact-socials div { justify-content: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: rgba(8,17,35,.64); backdrop-filter: blur(18px); border-radius: 22px; box-shadow: var(--shadow); margin-top: 10px; overflow: hidden; }
.stats div { padding: 30px 20px; text-align: center; position: relative; }
.stats div:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 28%; width: 1px; height: 44%; background: rgba(255,255,255,.15); }
.stats strong { display: block; font-size: 31px; }
.stats span { color: var(--muted); font-size: 13px; }

.section-label { color: var(--blue); text-transform: uppercase; font-size: 13px; letter-spacing: .12em; font-weight: 800; margin-bottom: 14px; }
h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -.055em; }
h2 span { display: block; color: var(--blue); }
.center-heading { text-align: center; margin-bottom: 36px; }
.about, .section-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; padding-block: 92px; }
.about-copy p:not(.section-label) { color: var(--muted); line-height: 1.75; margin-top: 18px; }
.info-grid { margin-top: 32px; display: grid; gap: 16px; }
.info-grid div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; color: rgba(255,255,255,.82); }
.info-grid span { color: rgba(255,255,255,.60); }
.photo-frame { position: relative; border-radius: 26px; padding: 8px; border: 1px solid var(--blue); background: rgba(47,132,255,.08); box-shadow: 0 0 45px rgba(47,132,255,.25); overflow: hidden; }
.photo-frame::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(120deg, transparent, rgba(55,213,255,.4), transparent); animation: shine 4s infinite linear; }
@keyframes shine { from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }
.photo-frame img { position: relative; z-index: 1; height: 520px; width: 100%; object-fit: cover; border-radius: 20px; }
.photo-caption { position: absolute; left: 25px; bottom: 25px; z-index: 2; border: 1px solid rgba(255,255,255,.13); background: rgba(0,0,0,.42); backdrop-filter: blur(14px); padding: 12px 16px; border-radius: 13px; color: var(--cyan); font-weight: 800; }

.study-highlight { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: center; padding-block: 96px; }
.study-highlight-copy p:not(.section-label) { color: var(--muted); line-height: 1.75; margin-top: 18px; max-width: 520px; }
.study-highlight-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.study-preview { position: relative; border-radius: 28px; padding: 8px; border: 1px solid rgba(55,213,255,.24); background: rgba(47,132,255,.08); box-shadow: var(--shadow); transition: .3s ease; }
.study-preview:hover { transform: translateY(-10px) scale(1.01); border-color: var(--cyan); }
.study-preview img { border-radius: 22px; height: 390px; width: 100%; object-fit: cover; }
.study-preview-card { position: absolute; padding: 12px 15px; border-radius: 16px; background: rgba(5,11,23,.72); border: 1px solid rgba(55,213,255,.24); color: var(--cyan); backdrop-filter: blur(14px); font-weight: 800; box-shadow: 0 18px 55px rgba(0,0,0,.25); animation: floatBadge 4s infinite ease-in-out; }
.card-one { left: 24px; top: 34px; }
.card-two { right: 34px; bottom: 88px; animation-delay: -1.2s; }
.card-three { left: 80px; bottom: 28px; animation-delay: -2s; }

.skills { padding-block: 76px; }
.tech-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tech-card { min-height: 112px; display: grid; place-items: center; gap: 8px; padding: 22px 10px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0,0,0,.15); transition: .3s ease; position: relative; overflow: hidden; text-align: center; }
.tech-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0, rgba(47,132,255,.25), transparent 55%); opacity: 0; transition: .3s; }
.tech-card:hover { transform: translateY(-12px) scale(1.03); border-color: var(--blue); box-shadow: 0 20px 70px rgba(47,132,255,.22); }
.tech-card:hover::before { opacity: 1; }
.tech-card b { position: relative; z-index: 1; font-size: 18px; }
.tech-card span { font-size: 13px; color: var(--muted); font-weight: 600; position: relative; z-index: 1; }
.services { padding-block: 72px; }
.service-list { display: grid; gap: 18px; }
.service-list article { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 24px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 18px; transition: .3s; }
.service-list article:hover { transform: translateX(10px); border-color: var(--blue); background: rgba(47,132,255,.08); }
.service-list b { font-size: 19px; }
.service-list p { color: var(--muted); line-height: 1.6; }
.service-list span { color: var(--blue); font-size: 24px; }

.projects { padding-block: 76px; }
.projects-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; gap: 20px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project-card { position: relative; border: 1px solid rgba(47,132,255,.22); background: rgba(6,15,32,.82); border-radius: 22px; padding: 18px; box-shadow: 0 25px 70px rgba(0,0,0,.28); transition: .35s ease; overflow: hidden; }
.project-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(47,132,255,.12), transparent 38%, rgba(55,213,255,.06)); opacity: 0; transition: .35s ease; pointer-events: none; }
.project-card:hover { transform: translateY(-12px); border-color: rgba(47,132,255,.62); box-shadow: 0 25px 80px rgba(47,132,255,.18); }
.project-card:hover::before { opacity: 1; }
.project-thumb { height: 205px; border-radius: 18px; margin-bottom: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #050b17; position: relative; overflow: hidden; border: 1px solid rgba(47,132,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 45px rgba(0,0,0,.28); transition: .45s ease; }
.project-card:hover .project-thumb { transform: scale(1.025); border-color: rgba(47,132,255,.55); box-shadow: 0 0 0 1px rgba(47,132,255,.25), 0 20px 60px rgba(47,132,255,.16); }
.thumb-pos { background-image: url("../assets/images/project-pos.png"); }
.thumb-daily { background-image: url("../assets/images/project-dailydo.webp"); }
.thumb-booking { background-image: url("../assets/images/project-booking.png"); }
.thumb-fitness { background-image: url("../assets/images/project-fitness.webp"); background-size: contain; }
.thumb-finance { background-image: url("../assets/images/project-finance.png"); }
.thumb-gaming { background-image: url("../assets/images/project-gaming.webp"); }
.thumb-gpa-calculator {
  background-image: url("../assets/images/project-gpa-calculator.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.project-card-link .thumb-gpa-calculator {
  position: relative;
}


.project-card h3 { position: relative; z-index: 2; font-size: 20px; line-height: 1.25; margin-top: 4px; }
.project-card p { position: relative; z-index: 2; color: rgba(255,255,255,.68); line-height: 1.6; margin: 12px 0 16px; }
.project-tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.project-tags span { color: var(--cyan); background: rgba(55,213,255,.10); padding: 6px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(55,213,255,.12); }

.contact { padding: 88px 0 120px; }
.contact-card { text-align: center; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(47,132,255,.12), rgba(255,255,255,.04), rgba(121,73,255,.10)); border-radius: 30px; padding: 58px 24px; box-shadow: var(--shadow); }
.contact-card p:not(.section-label) { color: var(--muted); max-width: 620px; margin: 20px auto 0; line-height: 1.8; }
.contact-actions { margin-top: 30px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.top-btn { position: fixed; right: 28px; bottom: 28px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(8,17,35,.65); color: white; cursor: pointer; backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: .3s; z-index: 90; }
.top-btn.visible { opacity: 1; pointer-events: auto; }
.top-btn:hover { transform: translateY(-6px); color: var(--blue); border-color: var(--blue); }

/* Study Hub page */
.study-hero { min-height: calc(92vh - 74px); display: grid; grid-template-columns: 1fr .9fr; gap: 44px; align-items: center; padding-block: 58px; }
.study-hero-text { margin-top: 22px; max-width: 560px; color: var(--muted); line-height: 1.8; font-size: 18px; }
.study-terminal { border: 1px solid rgba(55,213,255,.24); background: rgba(6,15,32,.82); border-radius: 28px; padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.study-terminal::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 10%, rgba(47,132,255,.18), transparent 35%); pointer-events: none; }
.terminal-bar { display: flex; gap: 9px; margin-bottom: 20px; }
.terminal-bar span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.terminal-bar span:nth-child(2) { background: #ffbd2e; }
.terminal-bar span:nth-child(3) { background: #28c840; }
.study-terminal pre { color: rgba(220,240,255,.86); line-height: 1.75; overflow-x: auto; position: relative; z-index: 1; font-size: 15px; }
.year-section, .modules-section, .resource-section, .howto { padding-block: 76px; }
.year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.year-card { min-height: 250px; border: 1px solid rgba(255,255,255,.10); background: rgba(8,17,35,.70); border-radius: 24px; padding: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.22); transition: .3s ease; position: relative; overflow: hidden; }
.year-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0, rgba(47,132,255,.16), transparent 45%); opacity: 0; transition: .3s; }
.year-card:hover { transform: translateY(-10px); border-color: var(--blue); }
.year-card:hover::before, .active-card::before { opacity: 1; }
.year-number { color: var(--cyan); font-size: 14px; font-weight: 900; letter-spacing: .12em; }
.year-card h3 { font-size: 28px; margin-top: 20px; position: relative; z-index: 1; }
.year-card p { color: var(--muted); line-height: 1.6; margin-top: 14px; position: relative; z-index: 1; }
.semester-list { display: grid; gap: 12px; margin-top: 22px; position: relative; z-index: 1; }
.semester-link { display: flex; justify-content: space-between; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 16px; transition: .25s; }
.semester-link:hover { transform: translateX(6px); border-color: var(--cyan); }
.semester-link span { font-size: 11px; color: var(--cyan); }
.active-sem { border-color: rgba(55,213,255,.4); background: rgba(55,213,255,.08); }
.muted-link { color: rgba(255,255,255,.72); }
.coming-pill { display: inline-flex; margin-top: 18px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 12px; }
.module-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.module-card { border: 1px solid rgba(47,132,255,.20); background: rgba(6,15,32,.80); border-radius: 24px; padding: 12px; cursor: pointer; transition: .32s ease; overflow: hidden; }
.module-card:hover { transform: translateY(-10px); border-color: var(--cyan); box-shadow: 0 20px 70px rgba(47,132,255,.18); }
.module-card img { height: 135px; width: 100%; object-fit: cover; border-radius: 18px; margin-bottom: 16px; }
.module-card h3 { font-size: 24px; }
.module-card p { color: var(--muted); line-height: 1.5; margin-top: 5px; font-size: 14px; }
.filter-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 auto 26px; padding: 18px; border: 1px solid rgba(47,132,255,.22); background: rgba(8,17,35,.72); border-radius: 22px; }
.filter-panel select { width: 100%; background: #07111f; color: white; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 13px 14px; outline: none; }
.filter-panel select:focus { border-color: var(--cyan); }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.resource-card { position: relative; border: 1px solid rgba(255,255,255,.10); background: rgba(8,17,35,.78); border-radius: 24px; padding: 22px; min-height: 250px; box-shadow: 0 24px 70px rgba(0,0,0,.22); transition: .3s ease; overflow: hidden; }
.resource-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(47,132,255,.12), transparent 45%, rgba(55,213,255,.08)); opacity: 0; transition: .3s; pointer-events: none; }
.resource-card:hover { transform: translateY(-10px); border-color: rgba(55,213,255,.45); }
.resource-card:hover::before { opacity: 1; }
.resource-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; position: relative; z-index: 1; }
.resource-meta span { font-size: 11px; padding: 6px 9px; border-radius: 999px; background: rgba(55,213,255,.10); color: var(--cyan); border: 1px solid rgba(55,213,255,.12); }
.resource-card h3 { font-size: 21px; line-height: 1.25; position: relative; z-index: 1; }
.resource-card p { color: var(--muted); line-height: 1.65; margin: 12px 0 20px; position: relative; z-index: 1; }
.resource-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.resource-actions a { padding: 11px 14px; border-radius: 12px; background: rgba(47,132,255,.14); color: var(--cyan); border: 1px solid rgba(55,213,255,.20); font-size: 13px; font-weight: 800; transition: .25s; }
.resource-actions a:hover { transform: translateY(-3px); background: rgba(47,132,255,.24); }
.empty-state { display: none; text-align: center; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 22px; padding: 36px; color: var(--muted); }
.empty-state h3 { color: white; font-size: 26px; margin-bottom: 8px; }
.howto-card { border: 1px solid var(--line); background: rgba(8,17,35,.72); border-radius: 28px; padding: 34px; box-shadow: var(--shadow); }
.howto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.howto-steps div { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius: 18px; padding: 20px; }
.howto-steps b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(47,132,255,.16); color: var(--cyan); margin-bottom: 14px; }
.howto-steps p { color: var(--muted); line-height: 1.65; }
code { color: var(--cyan); background: rgba(55,213,255,.08); padding: 2px 6px; border-radius: 6px; }
.small-note { color: var(--muted); margin-top: 20px; line-height: 1.7; }

.reveal { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(10px); transition: 800ms cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.delay-1 { transition-delay: 120ms; }
.delay-2 { transition-delay: 220ms; }
.delay-3 { transition-delay: 320ms; }

@media (max-width: 1080px) {
  .side-dock { display: none; }
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .year-grid, .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .hero, .about, .section-split, .study-highlight, .study-hero { grid-template-columns: 1fr; }
  .hero { padding-top: 34px; }
  .hero-visual { min-height: 540px; order: -1; }
  .hero-photo { height: 540px; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2)::after { display: none; }
  .filter-panel { grid-template-columns: repeat(2, 1fr); }
  .howto-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1120px); }
  .site-header { background: rgba(2,7,19,.78); }
  .nav { height: 68px; }
  .brand { font-size: 22px; }
  .nav-links { position: absolute; top: 74px; left: 14px; right: 14px; display: none; flex-direction: column; gap: 18px; padding: 24px; background: rgba(8,17,35,.96); border: 1px solid rgba(47,132,255,.22); border-radius: 20px; backdrop-filter: blur(18px); box-shadow: 0 25px 70px rgba(0,0,0,.35); }
  .nav-links.open { display: flex; }
  .talk-btn { display: none; }
  .menu-btn { display: block; }
  .hero, .study-hero { min-height: auto; gap: 28px; padding: 34px 0 28px; }
  .hero h1, .study-hero h1 { font-size: clamp(46px, 15vw, 68px); line-height: .95; }
  .hero-text, .study-hero-text { font-size: 15px; line-height: 1.75; max-width: 100%; }
  .primary-btn, .secondary-btn { width: 100%; padding: 15px 18px; }
  .hero-visual { min-height: 430px; place-items: center; }
  .hero-photo { height: 430px; width: min(330px, 100%); object-position: center top; border-radius: 0 0 32px 32px; }
  .orbit-one { width: 315px; height: 315px; top: 58px; right: auto; }
  .orbit-two { width: 245px; height: 245px; top: 92px; right: auto; }
  .floating-badge { display: none; }
  .stats, .tech-grid, .project-grid, .year-grid, .resource-grid, .module-grid { grid-template-columns: 1fr; }
  .stats div::after { display: none; }
  .about, .section-split { gap: 36px; padding-block: 58px; }
  h2 { font-size: clamp(34px, 11vw, 48px); }
  .photo-frame img { height: 390px; object-position: center top; }
  .study-highlight { padding-block: 58px; }
  .study-preview img { height: 270px; }
  .study-preview-card { display: none; }
  .skills, .projects, .year-section, .modules-section, .resource-section, .howto { padding-block: 56px; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-head { flex-direction: column; align-items: flex-start; }
  .project-thumb { height: 195px; background-size: contain; }
  .filter-panel { grid-template-columns: 1fr; }
  .study-terminal pre { font-size: 12px; }
  .contact-card { padding: 42px 18px; border-radius: 24px; }
  .contact-actions { flex-direction: column; }
  .contact-actions a { width: 100%; }
  .top-btn { width: 46px; height: 46px; right: 18px; bottom: 18px; }
}
@media (max-width: 420px) {
  .hero h1, .study-hero h1 { font-size: 46px; }
  .hero-photo { height: 390px; width: min(300px,100%); }
  .hero-visual { min-height: 390px; }
  .orbit-one { width: 285px; height: 285px; }
  .orbit-two { width: 220px; height: 220px; }
  .project-thumb { height: 175px; }
  .photo-frame img { height: 350px; }
}

/* Study Hub By J - public active semester update */
.section-subtitle {
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--muted);
  line-height: 1.7;
}

.disabled-sem {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.4);
}

.disabled-sem:hover {
  transform: none;
  border-color: rgba(255,255,255,.10);
}

.year-card.coming {
  opacity: .78;
}

.public-filter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}

.managed-card h2 {
  margin-bottom: 16px;
}

.managed-text {
  color: var(--muted);
  line-height: 1.75;
  max-width: 850px;
}

.managed-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.managed-points div {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 20px;
}

.managed-points b {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(47,132,255,.16);
  color: var(--cyan);
  margin-bottom: 12px;
}

.managed-points p {
  color: var(--muted);
  line-height: 1.65;
}

.disabled-resource {
  opacity: .65;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .public-filter,
  .managed-points {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   STUDY HUB RESOURCE CARD LAYOUT FIX
   Paste at VERY BOTTOM of styles.css
========================================== */

.resource-panel {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.resource-filters {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.resource-filters select {
  width: 100% !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  padding: 0 18px !important;
  background: rgba(5, 13, 28, 0.9) !important;
  border: 1px solid rgba(100, 181, 255, 0.22) !important;
  color: #fff !important;
  font-size: 15px !important;
}

.resource-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.resource-card {
  width: 100% !important;
  min-width: 0 !important;
  padding: 26px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(47, 132, 255, 0.22) !important;
  background: rgba(6, 15, 32, 0.82) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25) !important;
  transition: 0.3s ease !important;
}

.resource-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(47, 132, 255, 0.65) !important;
  box-shadow: 0 28px 85px rgba(47, 132, 255, 0.16) !important;
}

.resource-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.resource-meta span {
  display: inline-flex !important;
  width: auto !important;
  min-width: auto !important;
  white-space: nowrap !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  color: var(--cyan) !important;
  background: rgba(55, 213, 255, 0.10) !important;
  border: 1px solid rgba(55, 213, 255, 0.13) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.resource-card h3 {
  font-size: 23px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  color: #fff !important;
  word-break: normal !important;
}

.resource-card p {
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 22px !important;
  word-break: normal !important;
}

.resource-actions {
  margin-top: auto !important;
}

.resource-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 18px !important;
  border-radius: 13px !important;
  color: #020713 !important;
  background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
  font-weight: 800 !important;
  box-shadow: 0 16px 42px rgba(47, 132, 255, 0.25) !important;
}

.resource-actions a:hover {
  transform: translateY(-3px) !important;
}

.empty-state {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  text-align: center !important;
  padding: 44px 24px !important;
  border-radius: 22px !important;
}

/* Tablet */
@media (max-width: 900px) {
  .resource-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .resource-filters {
    grid-template-columns: 1fr !important;
  }

  .resource-card {
    padding: 22px !important;
  }

  .resource-card h3 {
    font-size: 21px !important;
  }

  .resource-meta span {
    font-size: 11px !important;
  }
}
/* ==========================================
   STUDY HUB NOTICE / DISCLAIMER SECTION
========================================== */

.study-notice {
  padding-block: 70px;
}

.notice-card {
  border: 1px solid rgba(47, 132, 255, 0.25);
  background:
    radial-gradient(circle at 15% 20%, rgba(47, 132, 255, 0.16), transparent 35%),
    radial-gradient(circle at 85% 90%, rgba(55, 213, 255, 0.10), transparent 35%),
    rgba(6, 15, 32, 0.82);
  border-radius: 30px;
  padding: 42px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.26);
}

.notice-card h2 {
  max-width: 760px;
}

.notice-text {
  max-width: 900px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.85;
  font-size: 16px;
}

.notice-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.notice-grid div {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.045);
  border-radius: 20px;
  padding: 22px;
}

.notice-grid span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(55, 213, 255, 0.10);
  border: 1px solid rgba(55, 213, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.notice-grid p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
}

@media (max-width: 850px) {
  .notice-card {
    padding: 28px;
  }

  .notice-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   STUDY HUB CONTACT SECTION
========================================== */

.contact {
  padding: 88px 0 120px;
}

.contact-card {
  text-align: center;
  border: 1px solid rgba(100, 181, 255, 0.22);
  background:
    radial-gradient(circle at 20% 20%, rgba(47, 132, 255, 0.13), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(121, 73, 255, 0.12), transparent 38%),
    rgba(6, 15, 32, 0.82);
  border-radius: 30px;
  padding: 58px 24px;
  box-shadow: 0 20px 80px rgba(0, 95, 255, 0.18);
}

.contact-card h2 {
  max-width: 720px;
  margin-inline: auto;
}

.contact-card p:not(.section-label) {
  color: rgba(255, 255, 255, 0.68);
  max-width: 720px;
  margin: 20px auto 0;
  line-height: 1.8;
}

.contact-actions {
  margin-top: 30px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-socials {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.contact-socials .socials {
  margin-top: 0;
}

.contact-socials .socials div {
  justify-content: center;
}

@media (max-width: 760px) {
  .contact {
    padding: 60px 0 90px;
  }

  .contact-card {
    padding: 42px 18px;
    border-radius: 24px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions a {
    width: 100%;
  }
}
/* ==========================================
   HOME STUDY HUB SPOTLIGHT
========================================== */

.home-study-banner {
  margin-top: 34px;
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(47, 132, 255, 0.35);
  background:
    radial-gradient(circle at 12% 20%, rgba(47, 132, 255, 0.22), transparent 32%),
    radial-gradient(circle at 90% 80%, rgba(55, 213, 255, 0.12), transparent 35%),
    rgba(6, 15, 32, 0.88);
  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.05),
    0 25px 90px rgba(47, 132, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.home-study-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(55, 213, 255, 0.10), transparent);
  transform: translateX(-100%);
  animation: studyBannerShine 5s infinite;
}

@keyframes studyBannerShine {
  0% { transform: translateX(-100%); }
  45%, 100% { transform: translateX(100%); }
}

.study-banner-icon {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(47, 132, 255, 0.28), rgba(55, 213, 255, 0.10));
  border: 1px solid rgba(55, 213, 255, 0.24);
  font-size: 38px;
  box-shadow: 0 20px 60px rgba(47, 132, 255, 0.22);
}

.study-banner-content {
  position: relative;
  z-index: 2;
}

.study-banner-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(55, 213, 255, 0.10);
  border: 1px solid rgba(55, 213, 255, 0.15);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-study-banner h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  color: #fff;
}

.home-study-banner p {
  margin-top: 12px;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.study-banner-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.study-banner-tags span {
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 700;
}

.study-banner-btn {
  position: relative;
  z-index: 2;
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #020713;
  font-weight: 900;
  box-shadow: 0 18px 55px rgba(47, 132, 255, 0.30);
  transition: 0.28s ease;
}

.study-banner-btn:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 24px 70px rgba(47, 132, 255, 0.42);
}

/* floating button only for mobile */
.mobile-study-float {
  display: none;
}

/* Make navbar Study Hub link more visible if it exists */
.nav-links a[href="study.html"] {
  color: var(--cyan);
  font-weight: 800;
}

/* Mobile */
@media (max-width: 760px) {
  .home-study-banner {
    margin-top: 22px;
    margin-bottom: 26px;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
  }

  .study-banner-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 30px;
  }

  .home-study-banner h2 {
    font-size: 34px;
  }

  .home-study-banner p {
    font-size: 15px;
  }

  .study-banner-btn {
    width: 100%;
  }

  .mobile-study-float {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #020713;
    font-weight: 900;
    box-shadow: 0 18px 60px rgba(47, 132, 255, 0.42);
  }

  .top-btn {
    bottom: 82px;
  }
}
/* ==========================================
   CREATIVE SIDE DOCK NAVIGATION
========================================== */

.side-dock {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 75;

  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: 16px 10px;
  border: 1px solid rgba(47, 132, 255, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 132, 255, 0.18), transparent 45%),
    rgba(6, 15, 32, 0.78);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.side-dock a {
  width: 42px;
  height: 42px;
  position: relative;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;

  transition: 0.28s ease;
}

.side-dock a::before {
  content: attr(data-label);
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);

  padding: 8px 12px;
  border-radius: 999px;

  color: white;
  background: rgba(6, 15, 32, 0.95);
  border: 1px solid rgba(47, 132, 255, 0.28);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);

  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
}

.side-dock a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.side-dock a:hover,
.side-dock a.active {
  color: var(--cyan);
  background: rgba(47, 132, 255, 0.16);
  border-color: rgba(55, 213, 255, 0.28);
  transform: scale(1.12);
  box-shadow: 0 0 25px rgba(47, 132, 255, 0.25);
}

.dock-icon {
  font-size: 17px;
  line-height: 1;
}

/* Special highlight for Study Hub icon */
.side-dock a[href="study.html"] {
  background: rgba(47, 132, 255, 0.10);
  border-color: rgba(55, 213, 255, 0.20);
}

.side-dock a[href="study.html"] .dock-icon {
  filter: drop-shadow(0 0 8px rgba(55, 213, 255, 0.45));
}

/* Hide on mobile */
@media (max-width: 980px) {
  .side-dock {
    display: none;
  }
}
/* ==========================================
   STUDY HUB FEEDBACK SECTION
========================================== */

.feedback-section {
  padding: 70px 0;
}

.feedback-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 34px;
  align-items: start;
  border: 1px solid rgba(47, 132, 255, 0.25);
  background:
    radial-gradient(circle at 12% 15%, rgba(47, 132, 255, 0.16), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(55, 213, 255, 0.10), transparent 35%),
    rgba(6, 15, 32, 0.84);
  border-radius: 30px;
  padding: 36px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.26);
}

.feedback-copy p:not(.section-label) {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.8;
}

.feedback-form {
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.feedback-form input,
.feedback-form select,
.feedback-form textarea {
  width: 100%;
  border: 1px solid rgba(100, 181, 255, 0.22);
  background: rgba(5, 13, 28, 0.92);
  color: #fff;
  border-radius: 14px;
  padding: 15px 16px;
  font: inherit;
  outline: none;
  transition: 0.25s ease;
}

.feedback-form textarea {
  resize: vertical;
  min-height: 130px;
}

.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
  border-color: rgba(55, 213, 255, 0.65);
  box-shadow: 0 0 0 4px rgba(55, 213, 255, 0.08);
}

.feedback-form button {
  justify-self: start;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #020713;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 55px rgba(47, 132, 255, 0.30);
  transition: 0.28s ease;
}

.feedback-form button:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(47, 132, 255, 0.42);
}

@media (max-width: 850px) {
  .feedback-card {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .feedback-form button {
    width: 100%;
    justify-content: center;
  }
}
/* ==========================================
   LIVE ONLINE STUDENT COUNT
========================================== */

.live-learners {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid rgba(55, 213, 255, 0.22);
  background: rgba(55, 213, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  box-shadow: 0 16px 40px rgba(47, 132, 255, 0.12);
}

.live-learners strong {
  color: var(--cyan);
  font-size: 18px;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.9);
  animation: livePulse 1.7s infinite ease-in-out;
}

@keyframes livePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}
/* ==========================================
   FINAL MOBILE POLISH FOR STUDY HUB UPDATES
========================================== */

@media (max-width: 760px) {
  /* Study Hub live count */
  .live-learners {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .live-learners strong {
    font-size: 17px;
  }

  /* Study page hero buttons */
  .study-hero .hero-actions {
    width: 100%;
  }

  .study-hero .primary-btn,
  .study-hero .secondary-btn {
    width: 100%;
  }

  /* Resource cards */
  .resource-panel {
    padding: 0;
  }

  .resource-filters {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .resource-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .resource-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .resource-card h3 {
    font-size: 21px !important;
  }

  .resource-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .resource-actions a {
    width: 100% !important;
  }

  /* Feedback section */
  .feedback-section {
    padding: 54px 0;
  }

  .feedback-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .feedback-copy h2 {
    font-size: 34px;
  }

  .feedback-copy p:not(.section-label) {
    font-size: 15px;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .feedback-form input,
  .feedback-form select,
  .feedback-form textarea {
    font-size: 14px;
    padding: 14px 15px;
  }

  .feedback-form button {
    width: 100%;
    justify-content: center;
  }

  /* Notice section */
  .study-notice {
    padding-block: 54px;
  }

  .notice-card {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .notice-card h2 {
    font-size: 34px;
  }

  .notice-text {
    font-size: 15px;
  }

  .notice-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact section */
  .contact {
    padding: 56px 0 90px;
  }

  .contact-card {
    padding: 38px 18px !important;
    border-radius: 24px !important;
  }

  .contact-card h2 {
    font-size: 34px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions a {
    width: 100%;
  }

  .contact-socials .socials div {
    gap: 12px;
  }

  .contact-socials .socials a {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 420px) {
  .study-hero h1 {
    font-size: 48px;
  }

  .study-terminal {
    font-size: 12px;
  }

  .resource-card h3 {
    font-size: 20px !important;
  }

  .notice-card h2,
  .feedback-copy h2,
  .contact-card h2 {
    font-size: 30px;
  }
}
/* ==========================================
   FIX LIVE ONLINE COUNT SIZE
========================================== */

.live-learners {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;

  margin-top: 22px !important;
  padding: 10px 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(55, 213, 255, 0.25) !important;
  background: rgba(55, 213, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 14px 35px rgba(47, 132, 255, 0.12) !important;
}

.live-learners strong {
  color: var(--cyan) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

.live-dot {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.9) !important;
}

/* Mobile: still small, but centered nicely */
@media (max-width: 760px) {
  .live-learners {
    width: fit-content !important;
    max-width: calc(100% - 20px) !important;
    margin-top: 18px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  .live-learners strong {
    font-size: 16px !important;
  }
}
/* ==========================================
   MOBILE YEAR SECTION COLLAPSE
========================================== */

.view-years-btn {
  display: none;
}

@media (max-width: 760px) {
  .year-section .year-grid .year-card.coming {
    display: none;
  }

  .year-section.show-all-years .year-grid .year-card.coming {
    display: block;
  }

  .view-years-btn {
    width: 100%;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 15px 18px;
    border: 1px solid rgba(55, 213, 255, 0.25);
    border-radius: 16px;

    background: rgba(55, 213, 255, 0.08);
    color: var(--cyan);

    font-weight: 900;
    cursor: pointer;
    transition: 0.28s ease;
  }

  .view-years-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(55, 213, 255, 0.55);
    background: rgba(55, 213, 255, 0.14);
  }

  .view-years-btn span {
    transition: 0.25s ease;
  }

  .year-section.show-all-years .view-years-btn span {
    transform: rotate(180deg);
  }
}
/* ==========================================
   WHATSAPP CHANNEL UPDATE BOX
========================================== */

.whatsapp-channel-box {
  margin-top: 26px;
  max-width: 720px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;

  padding: 18px 20px;
  border-radius: 22px;

  border: 1px solid rgba(34, 197, 94, 0.28);
  background:
    radial-gradient(circle at 10% 20%, rgba(34, 197, 94, 0.15), transparent 35%),
    rgba(6, 15, 32, 0.88);

  box-shadow: 0 20px 60px rgba(34, 197, 94, 0.10);
}

.whatsapp-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  font-size: 22px;
}

.whatsapp-channel-box h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 6px;
}

.whatsapp-channel-box p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.6;
}

.whatsapp-channel-box a {
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 14px;

  background: #22c55e;
  color: #03120a;

  font-weight: 900;
  transition: 0.28s ease;
}

.whatsapp-channel-box a:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 45px rgba(34, 197, 94, 0.28);
}

/* Mobile */
@media (max-width: 760px) {
  .whatsapp-channel-box {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 22px 18px;
  }

  .whatsapp-channel-box a {
    width: 100%;
    text-align: center;
  }
}
/* ==========================================
   HERO LIVE COUNT POSITION FIX
========================================== */

.study-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 70px;
}

.study-hero-left {
  min-width: 0;
}

.study-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.study-hero-right .live-learners {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;

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

  padding: 15px 24px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.82) !important;

  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;

  box-shadow:
    0 0 35px rgba(34, 197, 94, 0.12),
    0 22px 70px rgba(0, 0, 0, 0.25) !important;

  animation: liveFloat 3.5s ease-in-out infinite;
}

.study-hero-right .live-learners strong {
  color: #7cff9e !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.study-hero-right .live-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.95) !important;
}

@keyframes liveFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Mobile: show under badge, before scrolling */
@media (max-width: 760px) {
  .study-hero-content {
    display: block !important;
  }

  .study-hero-right {
    min-height: auto !important;
    justify-content: flex-start !important;
    margin-top: 18px !important;
  }

  .study-hero-right .live-learners {
    padding: 12px 17px !important;
    font-size: 13px !important;
    animation: none !important;
  }

  .study-hero-right .live-learners strong {
    font-size: 16px !important;
  }
}
/* ==========================================
   HERO LIVE COUNT RIGHT SIDE
========================================== */

.study-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 70px;
}

.study-hero-left {
  min-width: 0;
}

.study-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.study-hero-right .live-learners {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;

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

  padding: 15px 24px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.82) !important;

  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;

  box-shadow:
    0 0 35px rgba(34, 197, 94, 0.12),
    0 22px 70px rgba(0, 0, 0, 0.25) !important;

  animation: liveFloat 3.5s ease-in-out infinite;
}

.study-hero-right .live-learners strong {
  color: #7cff9e !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.study-hero-right .live-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.95) !important;
}

@keyframes liveFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Mobile */
@media (max-width: 760px) {
  .study-hero-content {
    display: block !important;
  }

  .study-hero-right {
    min-height: auto !important;
    justify-content: flex-start !important;
    margin-top: 18px !important;
  }

  .study-hero-right .live-learners {
    padding: 12px 17px !important;
    font-size: 13px !important;
    animation: none !important;
  }

  .study-hero-right .live-learners strong {
    font-size: 16px !important;
  }
}

/* ==========================================
   FIX HERO LAYOUT + FLOAT LIVE COUNT
========================================== */

.study-hero {
  position: relative !important;
}

.study-hero-content {
  display: block !important;
  width: 100% !important;
}

.study-hero-left {
  width: 100% !important;
  max-width: 650px !important;
}

.study-hero-left h1 {
  max-width: 620px !important;
  word-break: normal !important;
  white-space: normal !important;
}

.study-hero-left .hero-description {
  max-width: 620px !important;
}

.study-hero-right {
  position: absolute !important;
  top: 250px !important;
  right: 12% !important;

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

  width: auto !important;
  min-height: 0 !important;
  z-index: 5 !important;
}

.study-hero-right .live-learners {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;

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

  padding: 14px 24px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(34, 197, 94, 0.38) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.86) !important;

  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;

  box-shadow:
    0 0 35px rgba(34, 197, 94, 0.15),
    0 22px 70px rgba(0, 0, 0, 0.25) !important;

  animation: liveFloat 3.5s ease-in-out infinite;
}

.study-hero-right .live-learners strong {
  color: #7cff9e !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.study-hero-right .live-dot {
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.95) !important;
}

@keyframes liveFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Tablet */
@media (max-width: 1000px) {
  .study-hero-right {
    right: 7% !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .study-hero {
    position: relative !important;
  }

  .study-hero-left {
    max-width: 100% !important;
  }

  .study-hero-right {
    position: absolute !important;
    top: 160px !important;
    right: 28px !important;

    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .study-hero-right .live-learners {
    padding: 10px 13px !important;
    font-size: 12px !important;
    gap: 7px !important;
    animation: none !important;
  }

  .study-hero-right .live-learners strong {
    font-size: 14px !important;
  }

  .study-hero-right .live-dot {
    width: 8px !important;
    height: 8px !important;
  }
}

/* Very small mobile */
@media (max-width: 420px) {
  .study-hero-right {
    top: 150px !important;
    right: 22px !important;
  }

  .study-hero-right .live-learners {
    padding: 9px 11px !important;
    font-size: 11px !important;
  }
}
/* ==========================================
   FINAL STUDY HERO CLEAN FIX
========================================== */

.study-hero {
  min-height: calc(92vh - 74px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr) !important;
  gap: 70px !important;
  align-items: center !important;
  padding-block: 58px !important;
}

.study-hero-left {
  min-width: 0 !important;
  max-width: 650px !important;
}

.study-hero-right {
  display: grid !important;
  gap: 22px !important;
  justify-items: center !important;
  align-content: center !important;
  min-width: 0 !important;
}

.study-hero h1 {
  max-width: 650px !important;
  word-break: normal !important;
  white-space: normal !important;
}

.study-hero .hero-description {
  max-width: 620px !important;
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.8 !important;
  font-size: 18px !important;
  margin-top: 22px !important;
}

.study-hero .study-terminal {
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 !important;
}

.study-hero .terminal-bar,
.study-hero .terminal-dots {
  display: flex !important;
  gap: 9px !important;
  margin-bottom: 20px !important;
}

.study-hero .terminal-bar span,
.study-hero .terminal-dots span {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ff5f57 !important;
}

.study-hero .terminal-bar span:nth-child(2),
.study-hero .terminal-dots span:nth-child(2) {
  background: #ffbd2e !important;
}

.study-hero .terminal-bar span:nth-child(3),
.study-hero .terminal-dots span:nth-child(3) {
  background: #28c840 !important;
}

.study-hero .live-learners {
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;

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

  margin: 0 !important;
  padding: 11px 17px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.86) !important;

  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 14px !important;
  line-height: 1 !important;

  box-shadow:
    0 0 35px rgba(34, 197, 94, 0.15),
    0 18px 55px rgba(0, 0, 0, 0.25) !important;
}

.study-hero .live-learners strong {
  color: #7cff9e !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.study-hero .live-dot {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.95) !important;
}

/* Mobile */
@media (max-width: 980px) {
  .study-hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-block: 34px 28px !important;
  }

  .study-hero-left {
    max-width: 100% !important;
  }

  .study-hero-right {
    justify-items: start !important;
  }

  .study-hero .study-terminal {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  .study-hero h1 {
    font-size: clamp(58px, 18vw, 86px) !important;
  }

  .study-hero .hero-description {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }

  .study-hero .live-learners {
    padding: 9px 13px !important;
    font-size: 12px !important;
  }

  .study-hero .live-learners strong {
    font-size: 14px !important;
  }
}
/* ==========================================
   FINAL HERO FIX - DESKTOP + MOBILE
========================================== */

.study-hero {
  position: relative !important;
  min-height: calc(92vh - 74px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr) !important;
  gap: 70px !important;
  align-items: center !important;
  padding-block: 70px 60px !important;
}

.study-hero-left {
  max-width: 650px !important;
  min-width: 0 !important;
}

.study-hero-right {
  position: static !important;
  display: grid !important;
  gap: 22px !important;
  justify-items: center !important;
  align-content: center !important;
  min-width: 0 !important;
}

.study-hero .study-terminal {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.study-hero .live-learners {
  position: relative !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: auto !important;
  margin: 0 !important;

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

  padding: 11px 17px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.86) !important;

  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 14px !important;
  line-height: 1 !important;

  box-shadow:
    0 0 35px rgba(34, 197, 94, 0.15),
    0 18px 55px rgba(0, 0, 0, 0.25) !important;

  z-index: 10 !important;
}

.study-hero .live-learners strong {
  color: #7cff9e !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

.study-hero .live-dot {
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.95) !important;
}

/* MOBILE FIX */
@media (max-width: 760px) {
  .study-hero {
    display: block !important;
    min-height: auto !important;
    padding-block: 38px 48px !important;
  }

  .study-hero-left {
    max-width: 100% !important;
  }

  .study-hero h1 {
    font-size: clamp(58px, 18vw, 86px) !important;
    line-height: 0.95 !important;
    margin-top: 18px !important;
  }

  .study-hero .hero-description {
    font-size: 17px !important;
    line-height: 1.8 !important;
    margin-top: 22px !important;
  }

  .study-hero .hero-actions {
    margin-top: 30px !important;
  }

  .study-hero-right {
    position: static !important;
    display: block !important;
    margin-top: 24px !important;
  }

  /* live count visible near top without breaking layout */
  .study-hero .live-learners {
    position: absolute !important;
    top: 145px !important;
    right: 22px !important;

    padding: 9px 12px !important;
    font-size: 11px !important;
    gap: 7px !important;
  }

  .study-hero .live-learners strong {
    font-size: 13px !important;
  }

  .study-hero .live-dot {
    width: 8px !important;
    height: 8px !important;
  }

  /* about box goes below WhatsApp box, no overlap */
  .study-hero .study-terminal {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    padding: 20px !important;
  }

  .study-hero .study-terminal pre {
    font-size: 12px !important;
    line-height: 1.65 !important;
  }

  .whatsapp-channel-box {
    margin-top: 26px !important;
  }
}

@media (max-width: 420px) {
  .study-hero .live-learners {
    top: 140px !important;
    right: 18px !important;
  }
}
/* ==========================================
   FINAL MOBILE HERO SIZE FIX
========================================== */

@media (max-width: 760px) {
  .study-hero {
    padding-block: 34px 44px !important;
  }

  .study-hero h1 {
    font-size: 54px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    margin-top: 18px !important;
  }

  .study-hero h1 span {
    font-size: 58px !important;
  }

  .study-hero .hero-description {
    font-size: 16px !important;
    line-height: 1.75 !important;
    margin-top: 24px !important;
  }

  .study-hero .live-learners {
    position: static !important;
    margin-top: 16px !important;
    margin-bottom: 18px !important;
    padding: 9px 13px !important;
    font-size: 12px !important;
    width: fit-content !important;
    max-width: fit-content !important;
  }

  .study-hero .live-learners strong {
    font-size: 14px !important;
  }

  .study-hero .live-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .study-hero-right {
    margin-top: 22px !important;
  }

  .study-hero .study-terminal {
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  .study-hero h1 {
    font-size: 50px !important;
  }

  .study-hero h1 span {
    font-size: 54px !important;
  }
}
/* ==========================================
   MOBILE LIVE COUNT RIGHT SIDE FIX
========================================== */

@media (max-width: 760px) {
  .study-hero {
    position: relative !important;
  }

  .study-hero h1 {
    font-size: 50px !important;
    line-height: 0.95 !important;
    letter-spacing: -0.055em !important;
    margin-top: 18px !important;
    max-width: 280px !important;
  }

  .study-hero h1 span {
    font-size: 54px !important;
  }

  .study-hero .live-learners {
    position: absolute !important;
    top: 175px !important;
    right: 18px !important;

    width: fit-content !important;
    max-width: 160px !important;
    margin: 0 !important;

    padding: 8px 11px !important;
    font-size: 11px !important;
    gap: 6px !important;

    z-index: 20 !important;
  }

  .study-hero .live-learners strong {
    font-size: 13px !important;
  }

  .study-hero .live-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .study-hero .hero-description {
    margin-top: 26px !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 420px) {
  .study-hero .live-learners {
    top: 172px !important;
    right: 16px !important;
  }
}
.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quiz-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
}
.resource-card {
  position: relative;
  overflow: visible;
}

.new-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: linear-gradient(135deg, #ff3b30, #ff9500);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 11px;
  border-radius: 999px;
  letter-spacing: 0.6px;
  box-shadow: 0 0 16px rgba(255, 59, 48, 0.55);
  z-index: 50;
  animation: pulseNew 1.4s infinite;
}

@keyframes pulseNew {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.45);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255, 149, 0, 0.75);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.45);
  }
}

.resource-card h3 {
  padding-right: 75px;
}
/* ==========================================
   RESOURCE WARNING POPUP
========================================== */

.resource-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
  background: rgba(2, 7, 19, 0.78);
  backdrop-filter: blur(12px);
}

.resource-popup.active {
  display: flex;
}

.resource-popup-card {
  position: relative;
  width: min(560px, 100%);
  padding: 34px;
  border-radius: 28px;

  border: 1px solid rgba(55, 213, 255, 0.25);
  background:
    radial-gradient(circle at 20% 20%, rgba(47, 132, 255, 0.18), transparent 35%),
    rgba(6, 15, 32, 0.96);

  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48);
  text-align: center;
}

.popup-close {
  position: absolute;
  top: 16px;
  right: 18px;

  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.popup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.28);
  font-size: 30px;
}

.resource-popup-card h2 {
  font-size: 34px;
  margin-bottom: 16px;
}

.resource-popup-card p {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  margin-top: 12px;
}

.resource-popup-card b {
  color: #fff;
}

.popup-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.popup-cancel,
.popup-open {
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.popup-cancel {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.popup-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #020713;
}

@media (max-width: 560px) {
  .resource-popup-card {
    padding: 28px 20px;
    border-radius: 24px;
  }

  .resource-popup-card h2 {
    font-size: 28px;
  }

  .popup-actions {
    flex-direction: column;
  }

  .popup-cancel,
  .popup-open {
    width: 100%;
  }
}
/* ==========================================
   FINAL SIMPLE MODULE NEW BADGE ONLY
========================================== */

.module-card.module-has-new {
  border-color: rgba(47, 132, 255, 0.25) !important;
  box-shadow: none !important;
}

.module-card.module-has-new::after,
.module-card.module-has-new::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.module-update-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 122, 24, 0.95) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 12px rgba(255, 122, 24, 0.45) !important;
  animation: none !important;
  z-index: 20 !important;
}

.module-update-badge::before {
  content: "" !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #fff !important;
}

/* ==========================================
   NEW GPA CALCULATOR BUTTON HIGHLIGHT
========================================== */

.gpa-tool-btn {
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  border-color: rgba(55, 213, 255, 0.55) !important;
  background: linear-gradient(
    135deg,
    rgba(47, 132, 255, 0.22),
    rgba(55, 213, 255, 0.10)
  ) !important;
  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.16),
    0 0 26px rgba(47, 132, 255, 0.28) !important;
  animation: gpaPulse 1.8s infinite ease-in-out !important;
}

.gpa-tool-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-20deg);
  animation: gpaShine 2.6s infinite;
}

.gpa-new-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #22c55e;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.65);
}

@keyframes gpaPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(55, 213, 255, 0.16),
      0 0 24px rgba(47, 132, 255, 0.25);
  }

  50% {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(55, 213, 255, 0.30),
      0 0 38px rgba(55, 213, 255, 0.38);
  }
}

@keyframes gpaShine {
  0% {
    left: -80%;
  }

  55%, 100% {
    left: 130%;
  }
}

@media (max-width: 760px) {
  .gpa-tool-btn {
    width: 100% !important;
    margin-top: 4px !important;
  }

  .gpa-new-badge {
    top: -7px;
    right: 10px;
  }
}
/* ==========================================
   GPA CALCULATOR NEW TOOL BUTTON
========================================== */

.study-hero-actions .gpa-tool-btn {
  width: 100% !important;
  max-width: 470px !important;
  margin-top: 6px !important;

  position: relative !important;
  overflow: hidden !important;

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

  color: #ffffff !important;
  border: 1px solid rgba(55, 213, 255, 0.62) !important;
  background: linear-gradient(
    135deg,
    rgba(47, 132, 255, 0.30),
    rgba(55, 213, 255, 0.12)
  ) !important;

  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.14),
    0 0 26px rgba(47, 132, 255, 0.30) !important;

  animation: gpaPulse 1.9s infinite ease-in-out !important;
}

.gpa-tool-btn .gpa-new-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 4px 8px !important;
  border-radius: 999px !important;

  background: #22c55e !important;
  color: #ffffff !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;

  box-shadow: 0 0 14px rgba(34, 197, 94, 0.65) !important;
}

.gpa-tool-btn .gpa-arrow {
  font-weight: 900 !important;
  color: var(--cyan) !important;
}

.gpa-tool-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.20),
    transparent
  );
  transform: skewX(-20deg);
  animation: gpaShine 2.8s infinite;
}

.gpa-tool-btn span {
  position: relative;
  z-index: 2;
}

@keyframes gpaPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 1px rgba(55, 213, 255, 0.14),
      0 0 24px rgba(47, 132, 255, 0.26);
  }

  50% {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(55, 213, 255, 0.30),
      0 0 38px rgba(55, 213, 255, 0.40);
  }
}

@keyframes gpaShine {
  0% {
    left: -80%;
  }

  55%, 100% {
    left: 130%;
  }
}

@media (max-width: 760px) {
  .study-hero-actions .gpa-tool-btn {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* ==========================================
   CREATIVE GPA CALCULATOR LOADING SCREEN
========================================== */

.gpa-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 35%, rgba(47, 132, 255, 0.28), transparent 32%),
    radial-gradient(circle at 20% 80%, rgba(55, 213, 255, 0.12), transparent 30%),
    rgba(2, 7, 19, 0.94);

  backdrop-filter: blur(20px);
  overflow: hidden;
}

.gpa-loading-screen.active {
  display: flex;
}

.gpa-loading-screen::before {
  content: "GPA";
  position: absolute;
  font-size: clamp(120px, 18vw, 260px);
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(47, 132, 255, 0.045);
  animation: gpaBackgroundMove 3s infinite ease-in-out;
}

.gpa-loading-card {
  position: relative;
  z-index: 3;

  width: min(390px, calc(100% - 36px));
  padding: 32px 24px;
  border-radius: 28px;

  text-align: center;

  background:
    linear-gradient(135deg, rgba(6, 15, 32, 0.96), rgba(8, 20, 44, 0.88));

  border: 1px solid rgba(55, 213, 255, 0.35);

  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.48),
    0 0 45px rgba(47, 132, 255, 0.20),
    inset 0 0 25px rgba(55, 213, 255, 0.04);

  animation: gpaCardPop 0.45s ease both;
}

.gpa-mini-calculator {
  width: 82px;
  height: 92px;
  margin: 0 auto 18px;
  padding: 10px;
  border-radius: 20px;

  background: rgba(2, 7, 19, 0.72);
  border: 1px solid rgba(55, 213, 255, 0.38);

  box-shadow:
    0 0 25px rgba(55, 213, 255, 0.22),
    inset 0 0 20px rgba(47, 132, 255, 0.08);

  animation: gpaCalcFloat 1.6s infinite ease-in-out;
}

.calc-screen {
  height: 26px;
  display: grid;
  place-items: center;

  border-radius: 9px;
  background: rgba(55, 213, 255, 0.13);
  color: var(--cyan);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.calc-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.calc-grid span {
  height: 11px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  animation: gpaButtonBlink 1.2s infinite ease-in-out;
}

.calc-grid span:nth-child(2) { animation-delay: 0.1s; }
.calc-grid span:nth-child(3) { animation-delay: 0.2s; }
.calc-grid span:nth-child(4) { animation-delay: 0.3s; }
.calc-grid span:nth-child(5) { animation-delay: 0.4s; }
.calc-grid span:nth-child(6) { animation-delay: 0.5s; }

.gpa-loading-card h2 {
  font-size: 25px;
  letter-spacing: -0.045em;
  margin-bottom: 8px;
}

.gpa-loading-card p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.5;
}

.gpa-progress {
  width: 100%;
  height: 8px;
  margin-top: 20px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.gpa-progress span {
  display: block;
  height: 100%;
  width: 0%;

  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));

  box-shadow: 0 0 18px rgba(55, 213, 255, 0.65);
  animation: gpaProgressLoad 1.15s ease forwards;
}

.gpa-loading-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.gpa-loading-steps span {
  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(55, 213, 255, 0.08);
  border: 1px solid rgba(55, 213, 255, 0.18);

  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 800;
}

.gpa-floating-chip {
  position: absolute;
  z-index: 2;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(6, 15, 32, 0.72);
  border: 1px solid rgba(55, 213, 255, 0.28);

  color: var(--cyan);
  font-weight: 900;

  box-shadow: 0 0 25px rgba(47, 132, 255, 0.18);
  animation: gpaChipFloat 3s infinite ease-in-out;
}

.chip-a {
  top: 24%;
  left: 22%;
}

.chip-b {
  bottom: 26%;
  right: 22%;
  animation-delay: -1s;
}

.chip-c {
  top: 30%;
  right: 25%;
  animation-delay: -1.7s;
}

@keyframes gpaCardPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gpaCalcFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(-2deg);
  }
}

@keyframes gpaButtonBlink {
  0%, 100% {
    background: rgba(255, 255, 255, 0.14);
  }

  50% {
    background: rgba(55, 213, 255, 0.55);
  }
}

@keyframes gpaProgressLoad {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes gpaBackgroundMove {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-14px) scale(1.04);
  }
}

@keyframes gpaChipFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  50% {
    transform: translateY(-16px);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .gpa-floating-chip {
    display: none;
  }

  .gpa-loading-card {
    width: min(340px, calc(100% - 34px));
    padding: 30px 20px;
  }

  .gpa-loading-card h2 {
    font-size: 22px;
  }
}







/* ==========================================
   GLOBAL WEBSITE LOADING SCREEN
========================================== */

.site-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 35%, rgba(47, 132, 255, 0.28), transparent 32%),
    radial-gradient(circle at 16% 85%, rgba(55, 213, 255, 0.12), transparent 28%),
    #020713;

  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  overflow: hidden;
}

.site-loading-screen::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(55, 213, 255, 0.12);
  box-shadow:
    0 0 0 80px rgba(55, 213, 255, 0.025),
    0 0 0 160px rgba(47, 132, 255, 0.02);
  animation: siteLoaderOrbit 4.2s linear infinite;
}

.site-loading-screen.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-card {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100% - 40px));
  padding: 34px 26px;
  text-align: center;

  background: rgba(5, 12, 28, 0.88);
  border: 1px solid rgba(55, 213, 255, 0.30);
  border-radius: 28px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48),
    0 0 48px rgba(47, 132, 255, 0.18);

  animation: siteLoaderCardIn 0.5s ease both;
}

.site-loader-logo {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 22px;

  display: grid;
  place-items: center;

  color: #ffffff;
  font-size: 32px;
  font-weight: 900;

  background:
    linear-gradient(135deg, rgba(47, 132, 255, 0.95), rgba(55, 213, 255, 0.78));
  box-shadow:
    0 0 28px rgba(55, 213, 255, 0.38),
    inset 0 0 16px rgba(255, 255, 255, 0.18);

  animation: siteLogoFloat 1.5s ease-in-out infinite;
}

.site-loader-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
  letter-spacing: -0.045em;
}

.site-loader-card p {
  margin: 9px 0 20px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
}

.site-loader-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.site-loader-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;

  background: linear-gradient(90deg, #2f84ff, #37d5ff);
  box-shadow: 0 0 18px rgba(55, 213, 255, 0.68);

  animation: siteLoaderProgress 1.05s ease forwards;
}

.site-loader-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 17px;
}

.site-loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #37d5ff;
  animation: siteDotBounce 1s ease-in-out infinite;
}

.site-loader-dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.site-loader-dots span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes siteLoaderCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes siteLogoFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(-3deg);
  }
}

@keyframes siteLoaderProgress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes siteDotBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

@keyframes siteLoaderOrbit {
  from {
    transform: rotate(0deg) scale(0.92);
  }

  to {
    transform: rotate(360deg) scale(1.08);
  }
}

@media (max-width: 500px) {
  .site-loader-card {
    padding: 30px 20px;
  }

  .site-loader-card h2 {
    font-size: 22px;
  }
}
/* ==========================================
   STUDY HUB — PREMIUM WELCOME LOADER
========================================== */

.study-loader-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 40%, rgba(47, 132, 255, 0.18), transparent 24%),
    radial-gradient(circle at 15% 85%, rgba(55, 213, 255, 0.10), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(47, 132, 255, 0.10), transparent 27%),
    #020713 !important;
}

.study-loader-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background-image:
    linear-gradient(rgba(55, 213, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.55;
  animation: studyGridMove 12s linear infinite;
}

.study-loader-screen::after {
  content: "";
  position: absolute;
  width: min(920px, 80vw);
  height: min(920px, 80vw);
  border-radius: 50%;
  border: 1px solid rgba(55, 213, 255, 0.08);
  box-shadow:
    0 0 0 72px rgba(55, 213, 255, 0.024),
    0 0 0 145px rgba(47, 132, 255, 0.018),
    0 0 90px rgba(47, 132, 255, 0.12);
  animation: studyBackgroundPulse 4s ease-in-out infinite;
}

.study-loader-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.34;
  pointer-events: none;
}

.glow-one {
  top: 9%;
  left: 10%;
  background: #2f84ff;
  animation: studyGlowFloat 7s ease-in-out infinite;
}

.glow-two {
  width: 340px;
  height: 340px;
  background: rgba(42, 103, 205, 0.075);
  bottom: 10%;
  left: -120px;
  animation-delay: -3s;
}

.study-loader-card {
  position: relative;
  z-index: 5;
  width: min(450px, calc(100% - 36px));
  padding: 34px 32px 28px;
  border-radius: 32px;
  text-align: center;

  background:
    linear-gradient(145deg, rgba(9, 21, 46, 0.96), rgba(3, 9, 23, 0.94));
  border: 1px solid rgba(91, 178, 255, 0.38);

  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.60),
    0 0 60px rgba(47, 132, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  animation: studyLoaderEnter 0.55s cubic-bezier(.2, .9, .3, 1) both;
}

.study-loader-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.07), transparent 28%, transparent 70%, rgba(55, 213, 255, 0.06));
}

.study-loader-orbit {
  position: relative;
  width: 126px;
  height: 126px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
}

.study-loader-orbit::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid rgba(55, 213, 255, 0.72);
  border-top-color: transparent;
  border-left-color: rgba(47, 132, 255, 0.32);
  animation: studyOrbitRotate 2.1s linear infinite;
}

.study-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(135, 203, 255, 0.34);
  animation: studyOrbitRotate 8s linear infinite reverse;
}

.study-loader-emblem {
  position: relative;
  z-index: 2;
  width: 83px;
  height: 83px;
  display: grid;
  place-items: center;
  border-radius: 28px;

  background:
    linear-gradient(145deg, rgba(75, 149, 255, 0.98), rgba(41, 193, 245, 0.88));
  box-shadow:
    0 0 30px rgba(55, 213, 255, 0.52),
    inset 0 1px 10px rgba(255, 255, 255, 0.28);

  animation: studyEmblemFloat 1.65s ease-in-out infinite;
}

.study-loader-emblem svg {
  width: 50px;
  height: 50px;
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18));
}

.orbit-dot {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 5px rgba(55, 213, 255, 0.16),
    0 0 16px #37d5ff;
}

.orbit-dot-one {
  top: 9px;
  right: 25px;
  animation: studyDotPulse 1.3s ease-in-out infinite;
}

.orbit-dot-two {
  left: 9px;
  bottom: 25px;
  width: 8px;
  height: 8px;
  background: #37d5ff;
  animation: studyDotPulse 1.3s ease-in-out infinite 0.65s;
}

.study-loader-label {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: #37d5ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.study-loader-card h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.study-loader-card h2 span {
  color: #37d5ff;
  text-shadow: 0 0 20px rgba(55, 213, 255, 0.32);
}

.study-loader-message {
  position: relative;
  z-index: 2;
  margin: 10px 0 23px;
  color: rgba(227, 240, 255, 0.68);
  font-size: 14px;
}

.loader-typing-dots {
  display: inline-block;
  width: 20px;
  overflow: hidden;
  vertical-align: bottom;
  animation: studyTypingDots 1.25s steps(4, end) infinite;
}

.study-loader-progress {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(120, 190, 255, 0.14);
}

.study-loader-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;

  background:
    linear-gradient(90deg, #2f84ff 0%, #37d5ff 55%, #b7f4ff 100%);
  box-shadow: 0 0 22px rgba(55, 213, 255, 0.70);

  animation: studyProgressLoad 1.05s cubic-bezier(.22, .75, .27, 1) forwards;
}

.study-loader-progress span::after {
  content: "";
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  transform: translateX(-150%);
  animation: studyProgressShine 0.9s ease-in-out infinite;
}

.study-loader-status {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: rgba(213, 237, 255, 0.67);
  font-size: 12px;
  font-weight: 700;
}

.study-loader-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d985;
  box-shadow: 0 0 14px rgba(57, 217, 133, 0.92);
  animation: studyStatusPulse 1.2s ease-in-out infinite;
}

.study-floating-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 132px;
  padding: 11px 14px;
  border-radius: 17px;

  background: rgba(8, 21, 46, 0.66);
  border: 1px solid rgba(102, 184, 255, 0.22);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);

  color: #fff;
  animation: studyFloatCard 4s ease-in-out infinite;
}

.study-floating-card strong,
.study-floating-card small {
  display: block;
  white-space: nowrap;
}

.study-floating-card strong {
  color: #eaf7ff;
  font-size: 10px;
  letter-spacing: 0.10em;
}

.study-floating-card small {
  margin-top: 3px;
  color: rgba(194, 220, 245, 0.58);
  font-size: 10px;
}

.float-card-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: #37d5ff;
  box-shadow: 0 0 15px rgba(55, 213, 255, 0.82);
}

.float-card-symbol {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(47, 132, 255, 0.24);
  color: #37d5ff;
  font-size: 11px;
  font-weight: 900;
}

.study-float-quiz {
  top: 26%;
  left: calc(50% - 355px);
  animation-delay: -0.8s;
}

.study-float-gpa {
  top: 31%;
  right: calc(50% - 365px);
  animation-delay: -2.1s;
}

.study-float-notes {
  bottom: 23%;
  left: calc(50% - 335px);
  animation-delay: -1.3s;
}

.study-particle {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #37d5ff;
  box-shadow: 0 0 16px rgba(55, 213, 255, 0.85);
  animation: studyParticleFloat 5s ease-in-out infinite;
}

.particle-one { top: 21%; left: 25%; }
.particle-two { top: 17%; right: 26%; width: 7px; height: 7px; animation-delay: -1.4s; }
.particle-three { bottom: 24%; right: 23%; animation-delay: -3.1s; }
.particle-four { bottom: 19%; left: 35%; width: 3px; height: 3px; animation-delay: -2.2s; }
.particle-five { top: 40%; right: 16%; width: 3px; height: 3px; animation-delay: -0.7s; }

@keyframes studyLoaderEnter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes studyOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes studyEmblemFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-7px) scale(1.03);
  }
}

@keyframes studyDotPulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes studyProgressLoad {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes studyProgressShine {
  to {
    transform: translateX(380%);
  }
}

@keyframes studyTypingDots {
  from {
    width: 0;
  }

  to {
    width: 20px;
  }
}

@keyframes studyStatusPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes studyFloatCard {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

@keyframes studyParticleFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  50% {
    transform: translateY(-28px);
    opacity: 1;
  }
}

@keyframes studyBackgroundPulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes studyGlowFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(45px, -35px);
  }
}

@keyframes studyGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 48px 48px;
  }
}

@media (max-width: 760px) {
  .study-loader-card {
    width: min(360px, calc(100% - 32px));
    padding: 29px 22px 25px;
    border-radius: 27px;
  }

  .study-loader-card h2 {
    font-size: 28px;
  }

  .study-floating-card {
    min-width: auto;
    padding: 9px 11px;
  }

  .study-floating-card strong {
    font-size: 9px;
  }

  .study-floating-card small {
    display: none;
  }

  .study-float-quiz {
    top: 18%;
    left: 6%;
  }

  .study-float-gpa {
    top: 24%;
    right: 5%;
  }

  .study-float-notes {
    bottom: 18%;
    left: 8%;
  }
}

@media (max-width: 430px) {
  .study-floating-card {
    display: none;
  }

  .study-loader-card {
    width: min(340px, calc(100% - 28px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-loader-screen *,
  .study-loader-screen::before,
  .study-loader-screen::after {
    animation: none !important;
  }
}
/* ==========================================
   PORTFOLIO — PREMIUM PERSONAL WELCOME LOADER
========================================== */

.portfolio-loader-screen {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 39%, rgba(47, 132, 255, 0.19), transparent 25%),
    radial-gradient(circle at 13% 84%, rgba(55, 213, 255, 0.10), transparent 29%),
    radial-gradient(circle at 88% 12%, rgba(107, 61, 255, 0.10), transparent 26%),
    #020713 !important;
}

.portfolio-loader-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background-image:
    linear-gradient(rgba(55, 213, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 255, 0.035) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.52;
  animation: portfolioGridMove 13s linear infinite;
}

.portfolio-loader-screen::after {
  content: "";
  position: absolute;
  width: min(920px, 80vw);
  height: min(920px, 80vw);
  border-radius: 50%;
  border: 1px solid rgba(55, 213, 255, 0.08);
  box-shadow:
    0 0 0 70px rgba(55, 213, 255, 0.022),
    0 0 0 145px rgba(47, 132, 255, 0.018),
    0 0 95px rgba(47, 132, 255, 0.13);
  animation: portfolioBackgroundPulse 4.2s ease-in-out infinite;
}

.portfolio-loader-glow {
  position: absolute;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  filter: blur(95px);
  pointer-events: none;
}

.portfolio-glow-one {
  top: 7%;
  left: 9%;
  background: rgba(47, 132, 255, 0.45);
  animation: portfolioGlowFloat 8s ease-in-out infinite;
}

.portfolio-glow-two {
  right: 8%;
  bottom: 8%;
  background: rgba(55, 213, 255, 0.26);
  animation: portfolioGlowFloat 9s ease-in-out infinite reverse;
}

.portfolio-loader-card {
  position: relative;
  z-index: 5;
  width: min(460px, calc(100% - 36px));
  padding: 34px 32px 28px;
  border-radius: 32px;
  text-align: center;
  overflow: hidden;

  background:
    linear-gradient(145deg, rgba(9, 21, 46, 0.97), rgba(3, 9, 23, 0.95));
  border: 1px solid rgba(102, 184, 255, 0.38);

  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.60),
    0 0 60px rgba(47, 132, 255, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  animation: portfolioLoaderEnter 0.55s cubic-bezier(.2, .9, .3, 1) both;
}

.portfolio-loader-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 31px;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.07),
      transparent 30%,
      transparent 70%,
      rgba(55, 213, 255, 0.06)
    );
}

.portfolio-loader-orbit {
  position: relative;
  width: 142px;
  height: 142px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
}

.portfolio-loader-orbit::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid rgba(55, 213, 255, 0.78);
  border-top-color: transparent;
  border-left-color: rgba(47, 132, 255, 0.30);
  animation: portfolioOrbitRotate 2.1s linear infinite;
}

.portfolio-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(135, 203, 255, 0.35);
  animation: portfolioOrbitRotate 8.5s linear infinite reverse;
}

.portfolio-profile-ring {
  position: relative;
  z-index: 2;
  width: 102px;
  height: 102px;
  overflow: hidden;
  border-radius: 50%;
  padding: 4px;

  background: linear-gradient(135deg, #2f84ff, #37d5ff);

  box-shadow:
    0 0 30px rgba(55, 213, 255, 0.44),
    0 0 70px rgba(47, 132, 255, 0.16);

  animation: portfolioProfileFloat 1.8s ease-in-out infinite;
}

.portfolio-profile-ring img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #071326;
}

.portfolio-orbit-dot {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;

  box-shadow:
    0 0 0 5px rgba(55, 213, 255, 0.16),
    0 0 18px #37d5ff;
}

.portfolio-orbit-dot-one {
  top: 10px;
  right: 27px;
  animation: portfolioDotPulse 1.25s ease-in-out infinite;
}

.portfolio-orbit-dot-two {
  left: 10px;
  bottom: 27px;
  width: 8px;
  height: 8px;
  background: #37d5ff;
  animation: portfolioDotPulse 1.25s ease-in-out infinite 0.65s;
}

.portfolio-loader-label {
  position: relative;
  z-index: 2;
  margin: 0 0 8px;
  color: #37d5ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.portfolio-loader-card h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.portfolio-loader-card h2 span {
  color: #37d5ff;
  text-shadow: 0 0 20px rgba(55, 213, 255, 0.33);
}

.portfolio-loader-message {
  position: relative;
  z-index: 2;
  margin: 10px 0 23px;
  color: rgba(227, 240, 255, 0.68);
  font-size: 14px;
}

.portfolio-typing-dots {
  display: inline-block;
  width: 20px;
  overflow: hidden;
  vertical-align: bottom;
  animation: portfolioTypingDots 1.25s steps(4, end) infinite;
}

.portfolio-loader-progress {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(120, 190, 255, 0.14);
}

.portfolio-loader-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f84ff 0%, #37d5ff 55%, #b7f4ff 100%);
  box-shadow: 0 0 22px rgba(55, 213, 255, 0.68);
  animation: portfolioProgressLoad 1.05s cubic-bezier(.22, .75, .27, 1) forwards;
}

.portfolio-loader-progress span::after {
  content: "";
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  transform: translateX(-150%);
  animation: portfolioProgressShine 0.9s ease-in-out infinite;
}

.portfolio-loader-status {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: rgba(213, 237, 255, 0.67);
  font-size: 12px;
  font-weight: 700;
}

.portfolio-loader-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d985;
  box-shadow: 0 0 14px rgba(57, 217, 133, 0.92);
  animation: portfolioStatusPulse 1.2s ease-in-out infinite;
}

.portfolio-float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 134px;
  padding: 11px 14px;
  border-radius: 17px;

  background: rgba(8, 21, 46, 0.68);
  border: 1px solid rgba(102, 184, 255, 0.23);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);

  animation: portfolioFloatCard 4s ease-in-out infinite;
}

.portfolio-float-card strong,
.portfolio-float-card small {
  display: block;
  white-space: nowrap;
}

.portfolio-float-card strong {
  color: #eaf7ff;
  font-size: 10px;
  letter-spacing: 0.10em;
}

.portfolio-float-card small {
  margin-top: 3px;
  color: rgba(194, 220, 245, 0.58);
  font-size: 10px;
}

.portfolio-float-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;

  color: #37d5ff;
  font-size: 13px;
  font-weight: 900;

  background: rgba(47, 132, 255, 0.25);
  box-shadow: 0 0 15px rgba(47, 132, 255, 0.15);
}

.portfolio-float-code {
  top: 27%;
  left: calc(50% - 358px);
  animation-delay: -0.8s;
}

.portfolio-float-projects {
  top: 32%;
  right: calc(50% - 365px);
  animation-delay: -2.1s;
}

.portfolio-float-skills {
  bottom: 23%;
  left: calc(50% - 335px);
  animation-delay: -1.3s;
}

.portfolio-particle {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #37d5ff;
  box-shadow: 0 0 16px rgba(55, 213, 255, 0.85);
  animation: portfolioParticleFloat 5s ease-in-out infinite;
}

.portfolio-particle-one {
  top: 21%;
  left: 25%;
}

.portfolio-particle-two {
  top: 17%;
  right: 26%;
  width: 7px;
  height: 7px;
  animation-delay: -1.4s;
}

.portfolio-particle-three {
  right: 23%;
  bottom: 24%;
  animation-delay: -3.1s;
}

.portfolio-particle-four {
  bottom: 19%;
  left: 35%;
  width: 3px;
  height: 3px;
  animation-delay: -2.2s;
}

.portfolio-particle-five {
  top: 40%;
  right: 16%;
  width: 3px;
  height: 3px;
  animation-delay: -0.7s;
}

@keyframes portfolioLoaderEnter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes portfolioOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes portfolioProfileFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-7px) scale(1.03);
  }
}

@keyframes portfolioDotPulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes portfolioProgressLoad {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

@keyframes portfolioProgressShine {
  to {
    transform: translateX(380%);
  }
}

@keyframes portfolioTypingDots {
  from {
    width: 0;
  }

  to {
    width: 20px;
  }
}

@keyframes portfolioStatusPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes portfolioFloatCard {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-14px) rotate(-1deg);
  }
}

@keyframes portfolioParticleFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  50% {
    transform: translateY(-28px);
    opacity: 1;
  }
}

@keyframes portfolioBackgroundPulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes portfolioGlowFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(45px, -35px);
  }
}

@keyframes portfolioGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 50px 50px;
  }
}

@media (max-width: 760px) {
  .portfolio-loader-card {
    width: min(360px, calc(100% - 32px));
    padding: 29px 22px 25px;
    border-radius: 27px;
  }

  .portfolio-loader-card h2 {
    font-size: 28px;
  }

  .portfolio-float-card {
    min-width: auto;
    padding: 9px 11px;
  }

  .portfolio-float-card strong {
    font-size: 9px;
  }

  .portfolio-float-card small {
    display: none;
  }

  .portfolio-float-code {
    top: 18%;
    left: 6%;
  }

  .portfolio-float-projects {
    top: 24%;
    right: 5%;
  }

  .portfolio-float-skills {
    bottom: 18%;
    left: 8%;
  }
}

@media (max-width: 430px) {
  .portfolio-float-card {
    display: none;
  }

  .portfolio-loader-card {
    width: min(340px, calc(100% - 28px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-loader-screen *,
  .portfolio-loader-screen::before,
  .portfolio-loader-screen::after {
    animation: none !important;
  }
}

/* ==========================================
   STUDY HUB — YEAR & SEMESTER NAVIGATOR
========================================== */

.study-path-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 290px;
  padding: 13px 16px;
  border: 1px solid rgba(55, 213, 255, 0.48);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;

  color: #ffffff;
  text-align: left;

  background:
    linear-gradient(
      135deg,
      rgba(47, 132, 255, 0.30),
      rgba(55, 213, 255, 0.10)
    );

  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.10),
    0 0 25px rgba(47, 132, 255, 0.22);

  transition: 0.25s ease;
}

.study-path-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-20deg);
  animation: studyPathShine 3s infinite;
}

.study-path-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 213, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.22),
    0 0 36px rgba(55, 213, 255, 0.30);
}

.study-path-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;

  color: #37d5ff;
  font-size: 27px;
  font-weight: 900;

  background: rgba(55, 213, 255, 0.12);
  border: 1px solid rgba(55, 213, 255, 0.20);
}

.study-path-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  font-size: 14px;
  font-weight: 900;
}

.study-path-text small {
  color: #37d5ff;
  font-size: 9px;
  letter-spacing: 0.12em;
}

.study-path-arrow {
  position: relative;
  z-index: 1;
  color: #37d5ff;
  font-size: 22px;
  font-weight: 900;
}

.study-path-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.study-path-modal.active {
  display: flex;
}

.study-path-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 5, 15, 0.76);
  backdrop-filter: blur(13px);
}

.study-path-panel {
  position: relative;
  z-index: 2;
  width: min(470px, 100%);
  padding: 34px 30px 28px;
  border: 1px solid rgba(55, 213, 255, 0.35);
  border-radius: 28px;
  overflow: hidden;
  text-align: center;

  background:
    radial-gradient(circle at 50% 0%, rgba(47, 132, 255, 0.20), transparent 40%),
    linear-gradient(145deg, #0a1b3a, #030916);

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(47, 132, 255, 0.22);

  animation: studyPathPanelIn 0.35s ease both;
}

.study-path-close {
  position: absolute;
  top: 13px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;

  color: rgba(255, 255, 255, 0.82);
  font-size: 27px;
  line-height: 1;

  background: rgba(255, 255, 255, 0.08);
}

.study-path-panel-icon {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 21px;

  color: #ffffff;
  font-size: 31px;

  background: linear-gradient(135deg, #2f84ff, #37d5ff);
  box-shadow: 0 0 28px rgba(55, 213, 255, 0.35);
}

.study-path-label {
  margin-bottom: 8px;
  color: #37d5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.study-path-panel h2 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.05em;
}

.study-path-panel h2 span {
  color: #37d5ff;
}

.study-path-panel > p {
  margin: 11px auto 22px;
  max-width: 340px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.55;
}

.study-path-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}

.study-path-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: rgba(222, 240, 255, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.study-path-fields select {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(100, 181, 255, 0.28);
  border-radius: 12px;
  outline: none;

  color: #ffffff;
  font-size: 14px;
  font-weight: 700;

  background: rgba(2, 7, 19, 0.70);
}

.study-path-message {
  margin: 15px 0;
  padding: 11px 13px;
  border: 1px solid rgba(55, 213, 255, 0.14);
  border-radius: 12px;

  color: rgba(220, 240, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;

  background: rgba(55, 213, 255, 0.06);
}

.study-path-continue {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;

  color: #ffffff;
  font-size: 14px;
  font-weight: 900;

  background: linear-gradient(135deg, #2f84ff, #37d5ff);
  box-shadow: 0 12px 30px rgba(47, 132, 255, 0.28);

  transition: 0.25s ease;
}

.study-path-continue:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(55, 213, 255, 0.30);
}

.study-path-mini-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.study-path-mini-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39d985;
  box-shadow: 0 0 12px rgba(57, 217, 133, 0.75);
}

@keyframes studyPathPanelIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes studyPathShine {
  0% {
    left: -80%;
  }

  50%,
  100% {
    left: 130%;
  }
}

@media (max-width: 520px) {
  .study-path-btn {
    width: 100%;
    min-width: 0;
  }

  .study-path-panel {
    padding: 31px 20px 24px;
  }

  .study-path-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   UNIVERSAL SLIIT STUDY HUB — 2026 UPGRADE
   Dynamic year / semester / module interface
========================================== */

/* The earlier popup navigator remains in the stylesheet for backward safety,
   but the universal Study Areas selector below is the active interface. */

.study-path-btn {
  text-decoration: none;
}

.universal-year-grid {
  align-items: stretch;
}

.selection-year-card {
  width: 100%;
  min-height: 250px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.selection-year-card.is-selected {
  border-color: rgba(55, 213, 255, 0.72);
  background:
    radial-gradient(circle at 80% 0%, rgba(47, 132, 255, 0.24), transparent 46%),
    rgba(8, 22, 46, 0.92);
  box-shadow: 0 18px 58px rgba(47, 132, 255, 0.18);
}

.selection-year-card.has-resources .year-card-status {
  color: #73f1c0;
  border-color: rgba(57, 217, 133, 0.26);
  background: rgba(57, 217, 133, 0.09);
}

.selection-year-card.is-coming {
  opacity: 0.88;
}

.year-card-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(55, 213, 255, 0.20);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(55, 213, 255, 0.06);
  font-size: 11px;
  font-weight: 900;
}

.semester-navigator {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: 26px;
  border: 1px solid rgba(47, 132, 255, 0.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(55, 213, 255, 0.10), transparent 34%),
    rgba(6, 15, 32, 0.78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.20);
}

.semester-navigator h3 {
  margin-top: 6px;
  font-size: 28px;
  letter-spacing: -0.045em;
}

.semester-navigator-copy > p:not(.section-label) {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.6;
}

.semester-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.semester-select-card {
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 19px;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: rgba(4, 12, 28, 0.76);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.semester-select-card:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 213, 255, 0.55);
}

.semester-select-card.is-selected {
  border-color: rgba(55, 213, 255, 0.78);
  background:
    linear-gradient(145deg, rgba(47, 132, 255, 0.25), rgba(55, 213, 255, 0.08)),
    rgba(5, 15, 33, 0.94);
  box-shadow: 0 16px 42px rgba(47, 132, 255, 0.17);
}

.semester-select-card.is-coming {
  opacity: 0.72;
}

.semester-select-card strong,
.semester-select-card small {
  display: block;
}

.semester-select-step {
  display: inline-flex;
  margin-bottom: 15px;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(55, 213, 255, 0.10);
  font-size: 11px;
  font-weight: 900;
}

.semester-select-card strong {
  font-size: 20px;
}

.semester-select-card small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.35;
}

.selection-summary {
  max-width: 540px;
  margin-top: 11px;
  color: var(--muted);
  line-height: 1.65;
}

.collection-action-btn {
  cursor: pointer;
  font: inherit;
}

.dynamic-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dynamic-module-card {
  position: relative;
  min-height: 282px;
  padding: 12px;
  color: #ffffff;
  font: inherit;
  text-align: left;
}

.dynamic-module-card img,
.module-generic-visual {
  width: 100%;
  height: 138px;
  margin-bottom: 16px;
  border-radius: 18px;
}

.module-generic-visual {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 20%, rgba(55, 213, 255, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(47, 132, 255, 0.42), rgba(7, 20, 47, 0.86));
  border: 1px solid rgba(55, 213, 255, 0.20);
}

.module-generic-visual span {
  color: #ffffff;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.06em;
  text-shadow: 0 0 24px rgba(55, 213, 255, 0.40);
}

.module-card-content {
  display: block;
}

.module-card-content strong,
.module-card-content small,
.module-card-content em {
  display: block;
}

.module-card-content strong {
  font-size: 24px;
}

.module-card-content small {
  min-height: 40px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.module-card-content em {
  margin-top: 11px;
  color: var(--cyan);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.collection-empty-card {
  grid-column: 1 / -1;
  padding: 42px 24px;
  border: 1px dashed rgba(55, 213, 255, 0.24);
  border-radius: 24px;
  text-align: center;
  background: rgba(6, 15, 32, 0.50);
}

.collection-empty-card > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: 17px;
  color: var(--cyan);
  font-size: 23px;
  background: rgba(55, 213, 255, 0.11);
}

.collection-empty-card h3 {
  font-size: 23px;
}

.collection-empty-card p {
  max-width: 500px;
  margin: 9px auto 0;
  color: var(--muted);
  line-height: 1.6;
}

.student-tools-section {
  padding-block: 76px;
}

.student-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.student-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: start;
  min-height: 200px;
  padding: 25px;
  border: 1px solid rgba(100, 181, 255, 0.20);
  border-radius: 24px;
  color: #ffffff;
  background: rgba(6, 15, 32, 0.78);
  box-shadow: 0 22px 62px rgba(0, 0, 0, 0.20);
}

.student-tool-card-featured {
  overflow: hidden;
  border-color: rgba(55, 213, 255, 0.36);
  background:
    radial-gradient(circle at 90% 0%, rgba(55, 213, 255, 0.15), transparent 42%),
    radial-gradient(circle at 10% 100%, rgba(47, 132, 255, 0.18), transparent 45%),
    rgba(6, 15, 32, 0.90);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.student-tool-card-featured:hover {
  transform: translateY(-7px);
  border-color: rgba(55, 213, 255, 0.74);
  box-shadow: 0 28px 76px rgba(47, 132, 255, 0.21);
}

.student-tool-card-coming {
  opacity: 0.80;
}

.student-tool-icon {
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 15px;
  color: var(--cyan);
  background: rgba(55, 213, 255, 0.12);
  border: 1px solid rgba(55, 213, 255, 0.18);
  font-size: 14px;
  font-weight: 900;
}

.tool-card-label {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
}

.student-tool-card h3 {
  margin-top: 7px;
  font-size: 21px;
  letter-spacing: -0.035em;
}

.student-tool-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.tool-card-arrow {
  color: var(--cyan);
  font-size: 24px;
  font-weight: 900;
}

.tool-coming-pill {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.universal-resource-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-field > span {
  padding-left: 2px;
  color: rgba(215, 238, 255, 0.70);
  font-size: 12px;
  font-weight: 800;
}

.resource-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -4px 0 25px;
}

.resource-library-action {
  border-radius: 13px;
  padding: 12px 16px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.resource-library-action:hover {
  transform: translateY(-3px);
}

.resource-library-action.primary-action {
  border: 1px solid rgba(55, 213, 255, 0.42);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(47, 132, 255, 0.85), rgba(55, 213, 255, 0.72));
  box-shadow: 0 12px 28px rgba(47, 132, 255, 0.20);
}

.resource-library-action.secondary-action {
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 1020px) {
  .semester-navigator {
    grid-template-columns: 1fr;
  }

  .student-tools-grid {
    grid-template-columns: 1fr;
  }

  .universal-resource-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .universal-year-grid {
    grid-template-columns: 1fr !important;
  }

  .selection-year-card {
    min-height: 210px;
  }

  .semester-navigator {
    padding: 20px;
    border-radius: 22px;
  }

  .semester-selector,
  .universal-resource-filters {
    grid-template-columns: 1fr !important;
  }

  .semester-select-card {
    min-height: 122px;
  }

  .dynamic-module-grid {
    grid-template-columns: 1fr !important;
  }

  .dynamic-module-card {
    min-height: 0;
  }

  .student-tool-card {
    min-height: 0;
    padding: 21px;
  }

  .resource-library-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .resource-library-action {
    width: 100%;
  }
}


/* ==========================================
   STUDY HUB — COMPACT MOBILE + CLEAR ACTIONS
   Final usability refinement (June 2026)
========================================== */

/* Restore the global background glows after loader styles reuse .glow-one/.glow-two. */
.glow.glow-one {
  width: 360px !important;
  height: 360px !important;
  top: -120px !important;
  right: 12% !important;
  left: auto !important;
  bottom: auto !important;
  background: rgba(47, 132, 255, 0.13) !important;
}

.glow.glow-two {
  width: 340px !important;
  height: 340px !important;
  top: auto !important;
  right: auto !important;
  bottom: 10% !important;
  left: -120px !important;
  background: rgba(55, 213, 255, 0.075) !important;
}

body::before {
  background:
    radial-gradient(circle at 80% 8%, rgba(47, 132, 255, 0.105), transparent 28%),
    radial-gradient(circle at 10% 30%, rgba(42, 103, 205, 0.045), transparent 32%),
    linear-gradient(180deg, #030716 0%, #020713 45%, #02050d 100%) !important;
}

/* Hero: Year + Semester is the main action. */
.study-hero .study-path-btn {
  flex: 0 0 min(100%, 455px);
  min-height: 74px;
  border-color: rgba(85, 210, 255, 0.88) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(202, 250, 255, 0.24), transparent 28%),
    linear-gradient(135deg, #1762ff 0%, #258fff 52%, #20c8ed 100%) !important;
  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.18),
    0 18px 42px rgba(18, 98, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.study-hero .study-path-btn:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #d9fbff !important;
  box-shadow:
    0 0 0 1px rgba(215, 251, 255, 0.32),
    0 24px 52px rgba(35, 171, 255, 0.46) !important;
}

.study-hero .study-path-icon {
  color: #ffffff;
  background: rgba(3, 15, 43, 0.22);
  border-color: rgba(255, 255, 255, 0.26);
}

.study-hero .study-path-text small,
.study-hero .study-path-arrow {
  color: #e7fbff;
}

.university-tools-btn {
  border-color: rgba(55, 213, 255, 0.34) !important;
  color: #dffaff !important;
  background: rgba(16, 41, 78, 0.56) !important;
}

/* Selected collection action must remain readable on dark backgrounds. */
.collection-action-btn.secondary-btn {
  border: 1px solid rgba(55, 213, 255, 0.72) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1e66f4, #2499ee) !important;
  box-shadow: 0 14px 30px rgba(24, 104, 255, 0.26) !important;
}

.collection-action-btn.secondary-btn:hover {
  border-color: #e7fcff !important;
  background: linear-gradient(135deg, #2a74ff, #30c7eb) !important;
}

/* Keep ToolsByJ visually linked to the wider university-tools platform. */
.toolsbyj-tool-card {
  border-color: rgba(55, 213, 255, 0.42) !important;
}

.toolsbyj-tool-card .student-tool-icon {
  font-size: 12px;
  letter-spacing: -0.06em;
}

/* Desktop supports four concise cards without changing the resource layout. */
.student-tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Mobile: compact cards, no long single-column scrolling. */
@media (max-width: 760px) {
  .study-hero {
    padding-block: 28px 36px !important;
  }

  .study-hero .live-learners {
    position: absolute !important;
    top: 104px !important;
    right: 0 !important;
    max-width: 148px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
    gap: 5px !important;
    z-index: 30 !important;
  }

  .study-hero .live-learners strong {
    font-size: 13px !important;
  }

  .study-hero .live-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .study-hero h1 {
    max-width: 235px !important;
  }

  .study-hero .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 26px !important;
  }

  .study-hero .study-path-btn,
  .study-hero .gpa-tool-btn {
    grid-column: 1 / -1;
    width: 100% !important;
  }

  .study-hero .study-path-btn {
    min-height: 68px;
  }

  .study-hero .primary-btn,
  .study-hero .university-tools-btn {
    width: 100%;
    min-height: 50px;
    padding: 11px 9px !important;
    font-size: 12px;
    text-align: center;
  }

  .study-hero .gpa-tool-btn {
    margin-top: 0 !important;
  }

  .year-section,
  .modules-section,
  .resources-section,
  .student-tools-section {
    padding-block: 46px !important;
  }

  .universal-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .selection-year-card {
    min-height: 124px !important;
    padding: 15px 13px !important;
    border-radius: 18px !important;
  }

  .selection-year-card .year-number {
    font-size: 10px !important;
  }

  .selection-year-card h3 {
    margin-top: 8px !important;
    font-size: 19px !important;
  }

  .selection-year-card p {
    display: none !important;
  }

  .selection-year-card .year-card-status {
    max-width: 100%;
    margin-top: 10px !important;
    padding: 5px 7px !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: normal;
  }

  .semester-navigator {
    gap: 14px !important;
    margin-top: 14px !important;
    padding: 17px !important;
    border-radius: 20px !important;
  }

  .semester-navigator h3 {
    margin-top: 4px !important;
    font-size: 22px !important;
  }

  .semester-navigator-copy > p:not(.section-label) {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .semester-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .semester-select-card {
    min-height: 94px !important;
    padding: 12px !important;
    border-radius: 15px !important;
  }

  .semester-select-step {
    margin-bottom: 8px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  .semester-select-card strong {
    font-size: 15px !important;
  }

  .semester-select-card small {
    margin-top: 4px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .dynamic-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dynamic-module-card {
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 17px !important;
  }

  .dynamic-module-card img,
  .dynamic-module-card .module-generic-visual {
    height: 82px !important;
    margin-bottom: 9px !important;
    border-radius: 12px !important;
  }

  .module-generic-visual span {
    font-size: 25px !important;
  }

  .module-card-content strong {
    font-size: 18px !important;
  }

  .module-card-content small {
    display: none !important;
  }

  .module-card-content em {
    margin-top: 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.03em !important;
  }

  .collection-action-btn.secondary-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px !important;
  }

  .student-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .student-tool-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 138px !important;
    padding: 14px !important;
    border-radius: 17px !important;
    gap: 7px !important;
  }

  .student-tool-card .student-tool-icon {
    width: 37px !important;
    height: 37px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .student-tool-card h3 {
    margin-top: 4px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  .student-tool-card p {
    display: none !important;
  }

  .tool-card-label {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
  }

  .tool-card-arrow,
  .tool-coming-pill {
    position: absolute;
    top: 13px;
    right: 13px;
  }

  .tool-card-arrow {
    font-size: 17px !important;
  }

  .tool-coming-pill {
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  .resource-library-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .resource-library-action {
    min-height: 48px;
    padding: 10px 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 420px) {
  .study-hero .live-learners {
    top: 101px !important;
    right: 0 !important;
    max-width: 135px !important;
    font-size: 9px !important;
  }

  .study-hero h1 {
    max-width: 205px !important;
    font-size: 47px !important;
  }

  .study-hero h1 span {
    font-size: 51px !important;
  }
}

/* ==========================================
   FIX UNIVERSITY TOOLS — DESKTOP ONLY
   Keeps mobile compact layout unchanged
========================================== */

@media (min-width: 761px) {
  .student-tools-section {
    padding-block: 92px !important;
  }

  .student-tools-section .center-heading {
    max-width: 760px;
    margin: 0 auto 38px;
  }

  /* Change from 4 narrow cards to a clean 2 × 2 layout */
  .student-tools-grid {
    width: min(100%, 1040px) !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .student-tool-card {
    min-height: 190px !important;
    padding: 24px !important;
    border-radius: 22px !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    gap: 16px !important;
  }

  /* Main active tools */
  .student-tool-card-featured {
    min-height: 215px !important;
  }

  .student-tool-card h3 {
    margin-top: 6px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  .student-tool-card p {
    max-width: 340px;
    margin-top: 9px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .student-tool-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
  }

  .tool-card-label {
    font-size: 10px !important;
  }

  .tool-card-arrow {
    font-size: 25px !important;
  }

  /* Planned tools should look smaller and quieter */
  .student-tool-card-coming {
    min-height: 165px !important;
    opacity: 0.82 !important;
    background:
      linear-gradient(145deg, rgba(7, 16, 34, 0.92), rgba(4, 10, 23, 0.88)) !important;
  }

  .student-tool-card-coming h3 {
    font-size: 20px !important;
  }

  .student-tool-card-coming p {
    max-width: 300px;
    font-size: 13px !important;
  }

  .tool-coming-pill {
    padding: 7px 10px !important;
    font-size: 10px !important;
  }

  .toolsbyj-tool-card {
    border-color: rgba(55, 213, 255, 0.48) !important;
  }

  .toolsbyj-tool-card:hover,
  .student-tool-card-featured:hover {
    transform: translateY(-6px) !important;
  }
}
/* ==========================================
   CLEAR MAIN YEAR & SEMESTER BUTTON
========================================== */

.study-path-btn {
  min-width: 0 !important;
  width: min(100%, 500px) !important;
  min-height: 82px !important;
  padding: 15px 20px !important;
  border-radius: 18px !important;

  font-family: inherit !important;
  background: linear-gradient(
    135deg,
    #216cff 0%,
    #2f84ff 48%,
    #37c9ed 100%
  ) !important;

  border: 1px solid rgba(151, 231, 255, 0.78) !important;

  box-shadow:
    0 14px 35px rgba(47, 132, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.study-path-btn:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow:
    0 18px 42px rgba(55, 213, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.study-path-btn::before {
  opacity: 0.7;
}

.study-path-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;

  color: #ffffff !important;
  font-size: 27px !important;

  background: rgba(4, 23, 65, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
}

.study-path-text {
  gap: 4px !important;
  color: #ffffff !important;
}

.study-path-text small {
  color: rgba(235, 250, 255, 0.82) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.study-path-text strong {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

.study-path-arrow {
  color: #ffffff !important;
  font-size: 29px !important;
}

@media (max-width: 520px) {
  .study-path-btn {
    min-height: 76px !important;
    padding: 13px 16px !important;
  }

  .study-path-text strong {
    font-size: 16px !important;
  }

  .study-path-icon {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ==========================================
   CLEAN START LEARNING BUTTON
========================================== */

.study-hero .study-path-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;

  width: min(100%, 480px);
  min-height: 76px;
  padding: 14px 18px;

  overflow: hidden;
  cursor: pointer;

  color: #ffffff;
  text-align: left;
  font-family: inherit;

  background: transparent !important;
  border: 1px solid rgba(55, 213, 255, 0.62) !important;
  border-radius: 17px;

  box-shadow:
    0 0 0 1px rgba(47, 132, 255, 0.10),
    0 0 25px rgba(47, 132, 255, 0.16) !important;

  transition: 0.25s ease;
}

/* Small cyan highlight line instead of full blue background */
.study-hero .study-path-btn::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;

  background: linear-gradient(#37d5ff, #2f84ff);
  border-radius: 0 8px 8px 0;

  animation: startLearningPulse 1.8s ease-in-out infinite;
}

.study-hero .study-path-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 245, 255, 0.95) !important;

  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.18),
    0 0 34px rgba(55, 213, 255, 0.24) !important;
}

.study-hero .study-path-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex-shrink: 0;

  color: #37d5ff;
  font-size: 25px;
  font-weight: 900;

  background: rgba(47, 132, 255, 0.13) !important;
  border: 1px solid rgba(55, 213, 255, 0.26) !important;
  border-radius: 13px;
}

.study-hero .study-path-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.study-hero .study-path-text small {
  color: #37d5ff !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.study-hero .study-path-text strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.study-hero .study-path-arrow {
  color: #37d5ff !important;
  font-size: 28px;
  font-weight: 900;
}

@keyframes startLearningPulse {
  0%,
  100% {
    opacity: 0.45;
    box-shadow: 0 0 8px rgba(55, 213, 255, 0.30);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(55, 213, 255, 0.72);
  }
}

@media (max-width: 520px) {
  .study-hero .study-path-btn {
    width: 100%;
    min-height: 70px;
    padding: 12px 15px;
  }

  .study-hero .study-path-text strong {
    font-size: 15px;
  }

  .study-hero .study-path-icon {
    width: 40px;
    height: 40px;
  }
}
/* Make Start Learning button text match GPA Calculator button */

.study-hero .study-path-btn,
.study-hero .study-path-btn * {
  font-family: inherit !important;
}

.study-hero .study-path-text {
  gap: 3px !important;
}

.study-hero .study-path-text small {
  color: #37d5ff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

.study-hero .study-path-text strong {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.study-hero .study-path-arrow {
  color: #37d5ff !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 520px) {
  .study-hero .study-path-text strong {
    font-size: 16px !important;
  }
}
/* ==========================================
   UNIVERSITY TOOLS — FINAL RESPONSIVE CARDS
========================================== */

.university-tools-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.university-tools-grid .student-tool-card {
  position: relative;
  min-height: 210px;
  padding: 22px;

  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 0 14px;
  align-content: start;

  color: #ffffff;
  text-decoration: none;

  background:
    linear-gradient(145deg, rgba(8, 25, 51, 0.96), rgba(3, 10, 24, 0.96));
  border: 1px solid rgba(55, 213, 255, 0.34);
  border-radius: 22px;

  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.university-tools-grid .student-tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(55, 213, 255, 0.80);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.30),
    0 0 28px rgba(47, 132, 255, 0.18);
}

.university-tools-grid .tool-card-featured {
  border-color: rgba(55, 213, 255, 0.62);
  background:
    radial-gradient(circle at 100% 0%, rgba(55, 213, 255, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(8, 30, 61, 0.98), rgba(3, 10, 24, 0.96));
}

.university-tools-grid .more-tools-card {
  border-color: rgba(47, 132, 255, 0.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 132, 255, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(8, 23, 49, 0.98), rgba(3, 10, 24, 0.96));
}

.university-tools-grid .student-tool-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  grid-row: span 2;

  color: #37d5ff;
  font-size: 13px;
  font-weight: 900;

  background: rgba(47, 132, 255, 0.14);
  border: 1px solid rgba(55, 213, 255, 0.24);
  border-radius: 16px;
}

.university-tools-grid .tool-card-content {
  min-width: 0;
}

.university-tools-grid .tool-card-label {
  display: block;
  margin-bottom: 7px;

  color: #37d5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.10em;
}

.university-tools-grid h3 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.university-tools-grid p {
  margin: 12px 0 0;
  color: rgba(235, 244, 255, 0.70);
  font-size: 14px;
  line-height: 1.55;
}

.university-tools-grid .tool-card-arrow {
  color: #37d5ff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}

/* Tablet */
@media (max-width: 1050px) {
  .university-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile – compact 2-column layout */
@media (max-width: 620px) {
  .university-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .university-tools-grid .student-tool-card {
    min-height: 174px;
    padding: 14px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0 10px;
    border-radius: 17px;
  }

  .university-tools-grid .student-tool-icon {
    width: 38px;
    height: 38px;
    grid-row: auto;
    border-radius: 12px;
    font-size: 10px;
  }

  .university-tools-grid .tool-card-arrow {
    position: absolute;
    top: 15px;
    right: 14px;
    font-size: 18px;
  }

  .university-tools-grid .tool-card-content {
    grid-column: 1 / -1;
    margin-top: 12px;
  }

  .university-tools-grid .tool-card-label {
    margin-bottom: 5px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .university-tools-grid h3 {
    padding-right: 20px;
    font-size: 15px;
    line-height: 1.15;
  }

  .university-tools-grid p {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: rgba(235, 244, 255, 0.63);
    font-size: 11px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .university-tools-grid {
    grid-template-columns: 1fr;
  }

  .university-tools-grid .student-tool-card {
    min-height: 142px;
  }
}
/* ==========================================
   PORTFOLIO STUDENT PLATFORMS
========================================== */

.platform-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, 0.86fr);
  gap: 18px;
  align-items: center;

  margin-top: 26px;
  margin-bottom: 0;
}

.platform-card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;

  padding: 26px;
  border: 1px solid rgba(47, 132, 255, 0.34);
  border-radius: 26px;

  background:
    radial-gradient(circle at 100% 0%, rgba(55, 213, 255, 0.12), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(47, 132, 255, 0.12), transparent 38%),
    rgba(6, 15, 32, 0.88);

  box-shadow:
    0 0 0 1px rgba(55, 213, 255, 0.04),
    0 24px 80px rgba(47, 132, 255, 0.14);
}

.platform-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    115deg,
    transparent,
    rgba(55, 213, 255, 0.08),
    transparent
  );

  transform: translateX(-120%);
  animation: platformCardShine 6s infinite;
  pointer-events: none;
}

@keyframes platformCardShine {
  0% {
    transform: translateX(-120%);
  }

  45%,
  100% {
    transform: translateX(120%);
  }
}

.platform-card-study {
  min-height: 202px;
}

.platform-card-tools {
  min-height: 176px;
  padding: 22px;
  border-color: rgba(55, 213, 255, 0.25);
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 132, 255, 0.18), transparent 38%),
    rgba(6, 15, 32, 0.82);
}

.platform-card-icon {
  position: relative;
  z-index: 1;

  width: 72px;
  height: 72px;

  display: grid;
  place-items: center;

  color: #ffffff;
  font-size: 31px;

  border: 1px solid rgba(55, 213, 255, 0.24);
  border-radius: 21px;

  background: linear-gradient(
    135deg,
    rgba(47, 132, 255, 0.30),
    rgba(55, 213, 255, 0.10)
  );

  box-shadow: 0 18px 48px rgba(47, 132, 255, 0.18);
}

.toolsbyj-icon {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.platform-card-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.platform-card-badge {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 6px 10px;

  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;

  border: 1px solid rgba(55, 213, 255, 0.18);
  border-radius: 999px;
  background: rgba(55, 213, 255, 0.08);
}

.platform-card h2 {
  color: #ffffff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.platform-card-tools h2 {
  font-size: clamp(27px, 2.4vw, 34px);
}

.platform-card p {
  margin-top: 11px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 14px;
  line-height: 1.65;
}

.platform-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.platform-card-tags span {
  padding: 6px 9px;

  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.platform-card-button {
  position: relative;
  z-index: 1;

  grid-column: 2;
  justify-self: start;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

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

  color: #020713;
  font-size: 13px;
  font-weight: 900;

  border-radius: 13px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));

  box-shadow: 0 14px 36px rgba(47, 132, 255, 0.25);
  transition: 0.25s ease;
}

.platform-card-button:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(47, 132, 255, 0.38);
}

.platform-tools-button {
  color: #ffffff;
  background: rgba(47, 132, 255, 0.20);
  border: 1px solid rgba(55, 213, 255, 0.32);
}

/* Removes the large empty gap before hero */
.platform-showcase + .hero {
  min-height: auto;
  padding-top: 38px;
  padding-bottom: 26px;
}

/* ToolsByJ project image without needing an image file */
.thumb-toolsbyj {
  display: flex;
  align-items: center;
  gap: 15px;

  padding: 22px;

  background:
    radial-gradient(circle at 90% 5%, rgba(55, 213, 255, 0.24), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(47, 132, 255, 0.26), transparent 42%),
    linear-gradient(145deg, #071936, #030a19);
}

.toolsbyj-thumb-mark {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;
  flex: 0 0 auto;

  color: var(--cyan);
  font-size: 18px;
  font-weight: 900;

  border: 1px solid rgba(55, 213, 255, 0.30);
  border-radius: 18px;
  background: rgba(55, 213, 255, 0.10);
}

.toolsbyj-thumb-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.toolsbyj-thumb-content small {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.toolsbyj-thumb-content strong {
  color: #ffffff;
  font-size: 25px;
  letter-spacing: -0.05em;
}

.toolsbyj-thumb-content span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

/* Tablet and mobile */
@media (max-width: 900px) {
  .platform-showcase {
    grid-template-columns: 1fr;
  }

  .platform-card-tools {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .platform-showcase {
    gap: 14px;
    margin-top: 18px;
  }

  .platform-card,
  .platform-card-tools {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
  }

  .platform-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 25px;
  }

  .toolsbyj-icon {
    font-size: 15px;
  }

  .platform-card h2,
  .platform-card-tools h2 {
    font-size: 28px;
  }

  .platform-card p {
    font-size: 13px;
  }

  .platform-card-button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
  }

  .platform-showcase + .hero {
    padding-top: 28px;
  }
}
/* ==========================================
   ABOUT — BUILDER VISUAL CARD
========================================== */

.about-visual {
  min-width: 0;
}

.builder-visual-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(55, 213, 255, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 8%, rgba(55, 213, 255, 0.17), transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(47, 132, 255, 0.24), transparent 38%),
    linear-gradient(145deg, rgba(8, 25, 54, 0.96), rgba(3, 10, 25, 0.96));
  box-shadow:
    0 0 0 1px rgba(47, 132, 255, 0.08),
    0 28px 80px rgba(0, 0, 0, 0.32);
}

.builder-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(55, 213, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
}

.builder-topbar,
.builder-core,
.builder-skill-grid,
.builder-footer {
  position: relative;
  z-index: 1;
}

.builder-topbar {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.builder-topbar small {
  margin-left: auto;
  padding: 6px 10px;
  color: #93ffd1;
  font-size: 10px;
  letter-spacing: 0;
  border: 1px solid rgba(57, 217, 133, 0.26);
  border-radius: 999px;
  background: rgba(57, 217, 133, 0.08);
}

.builder-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d985;
  box-shadow: 0 0 14px rgba(57, 217, 133, 0.9);
}

.builder-core {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
}

.builder-mark {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 54px;
  font-weight: 900;
  letter-spacing: -0.12em;
  border: 1px solid rgba(55, 213, 255, 0.30);
  border-radius: 30px;
  background:
    radial-gradient(circle at 28% 25%, rgba(55, 213, 255, 0.26), transparent 38%),
    linear-gradient(145deg, rgba(47, 132, 255, 0.38), rgba(8, 21, 46, 0.80));
  box-shadow:
    0 0 38px rgba(47, 132, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.builder-mark span {
  color: var(--cyan);
  font-size: 28px;
  transform: translateY(-14px);
}

.builder-core p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.builder-core h3 {
  color: #ffffff;
  font-size: clamp(28px, 3vw, 39px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.builder-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 42px;
}

.builder-skill {
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: rgba(2, 10, 25, 0.62);
  transition: 0.25s ease;
}

.builder-skill:hover {
  transform: translateY(-5px);
  border-color: rgba(55, 213, 255, 0.50);
  background: rgba(47, 132, 255, 0.12);
}

.builder-skill span {
  display: block;
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
}

.builder-skill strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
}

.builder-skill small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.35;
}

.builder-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.builder-footer span {
  color: #93ffd1;
}

.builder-footer b {
  color: var(--cyan);
}

@media (max-width: 760px) {
  .builder-visual-card {
    min-height: auto;
    padding: 20px;
    border-radius: 23px;
  }

  .builder-core {
    gap: 15px;
    margin-top: 34px;
  }

  .builder-mark {
    width: 82px;
    height: 82px;
    border-radius: 23px;
    font-size: 39px;
  }

  .builder-mark span {
    font-size: 21px;
    transform: translateY(-10px);
  }

  .builder-core h3 {
    font-size: 28px;
  }

  .builder-skill-grid {
    gap: 10px;
    margin-top: 28px;
  }

  .builder-skill {
    min-height: 102px;
    padding: 13px;
  }

  .builder-skill strong {
    font-size: 13px;
  }

  .builder-footer {
    font-size: 11px;
  }
}
/* ToolsByJ project image */

.thumb-toolsbyj {
  position: relative;
  background: #050b17;
}

.thumb-toolsbyj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.toolsbyj-project-overlay {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(55, 213, 255, 0.24);
  border-radius: 14px;
  background: rgba(3, 12, 29, 0.78);
  backdrop-filter: blur(12px);
}

.toolsbyj-project-overlay span {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.toolsbyj-project-overlay strong {
  color: #ffffff;
  font-size: 20px;
  letter-spacing: -0.05em;
}
/* ==========================================
   INTERACTIVE NEXUS SYSTEMS CORE
========================================== */

.nexus-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative;
  isolation: isolate;
  min-height: 525px;
  overflow: hidden;
  padding: 24px;

  border: 1px solid rgba(55, 213, 255, 0.34);
  border-radius: 30px;

  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(55, 213, 255, 0.17), transparent 31%),
    radial-gradient(circle at 12% 95%, rgba(47, 132, 255, 0.27), transparent 42%),
    linear-gradient(145deg, #071d42 0%, #041126 48%, #020816 100%);

  box-shadow:
    0 0 0 1px rgba(47, 132, 255, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.42),
    0 0 65px rgba(47, 132, 255, 0.13);
}

.nexus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.78;
  pointer-events: none;

  background:
    linear-gradient(90deg, transparent 0%, rgba(55, 213, 255, 0.11) 50%, transparent 100%);

  transform: translateX(-130%);
  animation: nexusBeam 7s linear infinite;
}

.nexus-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;

  border-radius: 29px;
  border: 1px solid rgba(255, 255, 255, 0.035);
}

@keyframes nexusBeam {
  0% {
    transform: translateX(-130%);
  }

  55%,
  100% {
    transform: translateX(130%);
  }
}

.nexus-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.52;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(55, 213, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 255, 0.075) 1px, transparent 1px);

  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 93%);
}

.nexus-scanline {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(90deg, transparent, rgba(55, 213, 255, 0.85), transparent);
  box-shadow: 0 0 22px rgba(55, 213, 255, 0.65);

  animation: nexusScan 5.8s ease-in-out infinite;
}

@keyframes nexusScan {
  0%,
  100% {
    transform: translateY(-70px);
    opacity: 0;
  }

  15%,
  75% {
    opacity: 0.9;
  }

  55% {
    transform: translateY(550px);
    opacity: 0.15;
  }
}

.nexus-particle {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  pointer-events: none;

  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 13px var(--cyan);

  animation: nexusParticle 5s ease-in-out infinite;
}

.nexus-particle-1 { top: 17%; left: 16%; animation-delay: -1s; }
.nexus-particle-2 { top: 28%; right: 11%; animation-delay: -2.5s; }
.nexus-particle-3 { bottom: 28%; left: 9%; animation-delay: -3.3s; }
.nexus-particle-4 { bottom: 15%; right: 19%; animation-delay: -0.5s; }
.nexus-particle-5 { top: 54%; right: 4%; animation-delay: -4.2s; }

@keyframes nexusParticle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0.25;
  }

  50% {
    transform: translate3d(15px, -22px, 0) scale(1.5);
    opacity: 1;
  }
}

.nexus-header,
.nexus-stage,
.nexus-mode-grid,
.nexus-footer {
  position: relative;
  z-index: 3;
}

.nexus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nexus-header-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.nexus-header-title i,
.nexus-footer i {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 auto;

  border-radius: 50%;
  background: #3ff69a;
  box-shadow: 0 0 16px rgba(63, 246, 154, 0.9);

  animation: nexusLive 1.8s ease-in-out infinite;
}

@keyframes nexusLive {
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

.nexus-status {
  padding: 7px 11px;

  color: #9bffd0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;

  border: 1px solid rgba(63, 246, 154, 0.28);
  border-radius: 999px;
  background: rgba(63, 246, 154, 0.08);
}

.nexus-stage {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  align-items: center;
  gap: 24px;

  margin-top: 30px;

  transform:
    perspective(1150px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));

  transform-style: preserve-3d;
  transition: transform 0.28s ease-out;
}

.nexus-card.is-interacting .nexus-stage {
  transition: none;
}

.nexus-orbital-system {
  position: relative;
  width: 195px;
  height: 195px;
  display: grid;
  place-items: center;

  transform-style: preserve-3d;
}

.nexus-ring {
  position: absolute;
  border: 1px solid rgba(55, 213, 255, 0.28);
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(47, 132, 255, 0.10);
}

.nexus-ring-one {
  width: 190px;
  height: 190px;
  border-style: dashed;
  animation: nexusRotate 14s linear infinite;
}

.nexus-ring-two {
  width: 145px;
  height: 145px;
  border-color: rgba(47, 132, 255, 0.58);
  transform: rotateX(64deg) rotateZ(18deg);
  animation: nexusRotateReverse 9s linear infinite;
}

.nexus-ring-three {
  width: 110px;
  height: 110px;
  border-color: rgba(55, 213, 255, 0.52);
  transform: rotateY(65deg) rotateZ(-15deg);
  animation: nexusRotate 6s linear infinite;
}

@keyframes nexusRotate {
  to {
    rotate: 360deg;
  }
}

@keyframes nexusRotateReverse {
  to {
    rotate: -360deg;
  }
}

.nexus-orbit-node {
  position: absolute;
  width: 10px;
  height: 10px;

  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}

.nexus-node-one {
  top: 10px;
  left: 48px;
  animation: nexusNodeFloat 3.6s ease-in-out infinite;
}

.nexus-node-two {
  right: 11px;
  bottom: 47px;
  background: #7f9dff;
  box-shadow: 0 0 18px #7f9dff;
  animation: nexusNodeFloat 4.2s ease-in-out infinite -1.2s;
}

.nexus-node-three {
  left: 20px;
  bottom: 27px;
  width: 7px;
  height: 7px;
  background: #3ff69a;
  box-shadow: 0 0 14px #3ff69a;
  animation: nexusNodeFloat 3.2s ease-in-out infinite -2.1s;
}

@keyframes nexusNodeFloat {
  50% {
    transform: translateY(-11px) scale(1.4);
  }
}

.nexus-core {
  position: relative;
  z-index: 2;
  width: 104px;
  height: 104px;

  display: grid;
  place-items: center;

  color: #ffffff;

  border: 1px solid rgba(55, 213, 255, 0.42);
  border-radius: 30px;

  background:
    radial-gradient(circle at 30% 25%, rgba(55, 213, 255, 0.38), transparent 32%),
    linear-gradient(145deg, rgba(47, 132, 255, 0.53), rgba(5, 16, 37, 0.95));

  box-shadow:
    0 0 0 8px rgba(47, 132, 255, 0.06),
    0 0 46px rgba(47, 132, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  animation: nexusCorePulse 3s ease-in-out infinite;
}

@keyframes nexusCorePulse {
  50% {
    box-shadow:
      0 0 0 14px rgba(47, 132, 255, 0.025),
      0 0 70px rgba(55, 213, 255, 0.52),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
}

.nexus-core-letter {
  font-size: 48px;
  font-weight: 950;
  letter-spacing: -0.12em;
  transform: translateX(-2px);
}

.nexus-core small {
  position: absolute;
  bottom: 17px;

  color: var(--cyan);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.nexus-data-panel {
  min-width: 0;
}

.nexus-kicker {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.nexus-data-panel h3 {
  margin-top: 9px;
  color: #ffffff;
  font-size: clamp(30px, 3vw, 41px);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.nexus-data-panel p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 13px;
  line-height: 1.68;
}

.nexus-data-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 11px;
  margin-top: 19px;
}

.nexus-data-row div {
  padding: 11px 12px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(2, 9, 23, 0.58);
}

.nexus-data-row small {
  display: block;
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.nexus-data-row strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.nexus-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 30px;
}

.nexus-mode {
  position: relative;
  min-height: 72px;
  overflow: hidden;
  padding: 12px 10px;
  cursor: pointer;

  color: rgba(255, 255, 255, 0.62);
  text-align: left;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background: rgba(2, 10, 25, 0.62);

  transition: 0.25s ease;
}

.nexus-mode::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0;
  background: linear-gradient(135deg, rgba(47, 132, 255, 0.25), rgba(55, 213, 255, 0.08));
  transition: 0.25s ease;
}

.nexus-mode:hover,
.nexus-mode.is-active {
  color: #ffffff;
  border-color: rgba(55, 213, 255, 0.58);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(47, 132, 255, 0.18);
}

.nexus-mode:hover::before,
.nexus-mode.is-active::before {
  opacity: 1;
}

.nexus-mode span,
.nexus-mode b,
.nexus-mode small {
  position: relative;
  z-index: 1;
  display: block;
}

.nexus-mode span {
  color: var(--cyan);
  font-size: 16px;
}

.nexus-mode b {
  margin-top: 5px;
  font-size: 12px;
}

.nexus-mode small {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 9px;
  font-weight: 900;
}

.nexus-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin-top: 17px;
  padding-top: 16px;

  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;

  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.nexus-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nexus-footer button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  cursor: pointer;

  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;

  border: 1px solid rgba(55, 213, 255, 0.20);
  border-radius: 10px;
  background: rgba(55, 213, 255, 0.07);

  transition: 0.25s ease;
}

.nexus-footer button:hover {
  transform: translateY(-3px);
  color: #ffffff;
  border-color: rgba(55, 213, 255, 0.60);
  background: rgba(47, 132, 255, 0.18);
}

.nexus-footer button b {
  font-size: 14px;
}

/* Mobile */
@media (max-width: 760px) {
  .nexus-card {
    min-height: auto;
    padding: 19px;
    border-radius: 24px;
  }

  .nexus-stage {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 25px;
  }

  .nexus-orbital-system {
    width: 165px;
    height: 165px;
    margin-inline: auto;
  }

  .nexus-ring-one {
    width: 160px;
    height: 160px;
  }

  .nexus-ring-two {
    width: 122px;
    height: 122px;
  }

  .nexus-ring-three {
    width: 91px;
    height: 91px;
  }

  .nexus-core {
    width: 88px;
    height: 88px;
    border-radius: 26px;
  }

  .nexus-core-letter {
    font-size: 41px;
  }

  .nexus-data-panel {
    text-align: center;
  }

  .nexus-data-panel h3 {
    font-size: 32px;
  }

  .nexus-data-row {
    text-align: left;
  }

  .nexus-mode-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 23px;
  }

  .nexus-mode {
    min-height: 66px;
  }

  .nexus-footer {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-card *,
  .nexus-card::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   NEXUS — BUILT BY J BRANDING
========================================== */

.nexus-core {
  overflow: hidden;
}

.nexus-core-watermark {
  position: absolute;
  top: 11px;
  right: 10px;

  color: rgba(55, 213, 255, 0.24);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.14em;

  transform: rotate(90deg);
}

.nexus-core-letter {
  position: relative;
  z-index: 2;

  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.45),
    0 0 28px rgba(55, 213, 255, 0.30);
}

.nexus-core small {
  bottom: 14px;
  color: #37d5ff;
  font-size: 7px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.nexus-builtby {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.nexus-builtby b {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.nexus-builtby em {
  color: #37d5ff;
  font-style: normal;
  font-weight: 900;
}

/* ==========================================
   PROJECT IMAGE PATHS — FINAL FIX
========================================== */

.project-grid .thumb-pos {
  background-image: url("../assets/images/project-pos.png") !important;
}

.project-grid .thumb-daily {
  background-image: url("../assets/images/project-dailydo.webp") !important;
}

.project-grid .thumb-booking {
  background-image: url("../assets/images/project-booking.png") !important;
}

.project-grid .thumb-fitness {
  background-image: url("../assets/images/project-fitness.webp") !important;
}

.project-grid .thumb-finance {
  background-image: url("../assets/images/project-finance.png") !important;
}

.project-grid .thumb-gaming {
  background-image: url("../assets/images/project-gaming.webp") !important;
}

.project-grid .thumb-gpa-calculator {
  background-image: url("../assets/images/project-gpa-calculator.webp") !important;
}

.project-grid .thumb-toolsbyj {
  background-image: url("../assets/images/project-toolsbyj.webp") !important;
}

.project-grid .project-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================
   PROJECT SHOW MORE SYSTEM
========================================== */

/* Desktop: first 6 projects only */
#projectGrid > .project-card:nth-child(n + 7) {
  display: none;
}

/* When button is pressed: show every project */
#projectGrid.projects-expanded > .project-card {
  display: block;
}

.projects-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.show-more-projects {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-width: 220px;
  padding: 14px 21px;

  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 900;

  cursor: pointer;

  border: 1px solid rgba(55, 213, 255, 0.32);
  border-radius: 14px;

  background:
    linear-gradient(135deg, rgba(47, 132, 255, 0.24), rgba(55, 213, 255, 0.10));

  box-shadow:
    0 15px 40px rgba(47, 132, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  transition: 0.25s ease;
}

.show-more-projects:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 213, 255, 0.75);
  box-shadow:
    0 20px 48px rgba(47, 132, 255, 0.28),
    0 0 25px rgba(55, 213, 255, 0.12);
}

.show-more-projects b {
  color: var(--cyan);
  font-size: 19px;
  line-height: 1;
}

/* Mobile: first 4 projects only */
@media (max-width: 760px) {
  #projectGrid > .project-card:nth-child(n + 5) {
    display: none;
  }

  #projectGrid.projects-expanded > .project-card {
    display: block;
  }

  .projects-more {
    margin-top: 24px;
  }

  .show-more-projects {
    width: 100%;
    min-height: 52px;
  }
}

/* ==========================================
   PROJECT IMAGES — CORRECT FINAL PATHS
========================================== */

.thumb-pos {
  background-image: url("../assets/images/project-pos.png") !important;
}

.thumb-daily {
  background-image: url("../assets/images/project-dailydo.webp") !important;
}

.thumb-booking {
  background-image: url("../assets/images/project-booking.png") !important;
}

.thumb-fitness {
  background-image: url("../assets/images/project-fitness.webp") !important;
}

.thumb-finance {
  background-image: url("../assets/images/project-finance.png") !important;
}

.thumb-gaming {
  background-image: url("../assets/images/project-gaming.webp") !important;
}

.thumb-gpa-calculator {
  background-image: url("../assets/images/project-gpa-calculator.webp") !important;
}

.thumb-toolsbyj {
  background-image: url("../assets/images/project-toolsbyj.webp") !important;
}

.project-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================
   DAILYDOBYJ APK DOWNLOAD POPUP
========================================== */

.dailydo-project-card {
  cursor: pointer;
}

.dailydo-project-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}

body.app-modal-open {
  overflow: hidden;
}

.app-download-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 18px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.app-download-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.app-download-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(1, 5, 16, 0.78);
  backdrop-filter: blur(12px);
}

.app-download-dialog {
  position: relative;
  z-index: 1;

  width: min(100%, 470px);
  overflow: hidden;

  padding: 34px 30px 28px;
  text-align: center;

  border: 1px solid rgba(55, 213, 255, 0.34);
  border-radius: 28px;

  background:
    radial-gradient(circle at 50% 0%, rgba(55, 213, 255, 0.18), transparent 38%),
    radial-gradient(circle at 8% 100%, rgba(47, 132, 255, 0.17), transparent 42%),
    linear-gradient(145deg, #081b3b, #030a18);

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.60),
    0 0 55px rgba(47, 132, 255, 0.22);

  transform: translateY(18px) scale(0.96);
  transition: transform 0.3s ease;
}

.app-download-modal.is-open .app-download-dialog {
  transform: translateY(0) scale(1);
}

.app-download-close {
  position: absolute;
  top: 14px;
  right: 16px;

  width: 35px;
  height: 35px;

  color: rgba(255, 255, 255, 0.76);
  font-size: 28px;
  line-height: 1;

  cursor: pointer;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);

  transition: 0.2s ease;
}

.app-download-close:hover {
  color: #ffffff;
  border-color: rgba(55, 213, 255, 0.55);
  background: rgba(47, 132, 255, 0.16);
}

.app-download-icon {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  margin: 0 auto 18px;

  color: var(--cyan);
  font-size: 31px;
  font-weight: 900;

  border: 1px solid rgba(55, 213, 255, 0.35);
  border-radius: 24px;

  background:
    radial-gradient(circle at 30% 25%, rgba(55, 213, 255, 0.28), transparent 38%),
    rgba(47, 132, 255, 0.16);

  box-shadow: 0 0 36px rgba(47, 132, 255, 0.26);
}

.app-download-label {
  display: inline-flex;

  padding: 6px 10px;

  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;

  border: 1px solid rgba(55, 213, 255, 0.20);
  border-radius: 999px;
  background: rgba(55, 213, 255, 0.08);
}

.app-download-dialog h2 {
  margin-top: 14px;
  color: #ffffff;
  font-size: 32px;
  letter-spacing: -0.055em;
}

.app-download-dialog p {
  margin: 13px auto 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
}

.app-download-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  margin: 20px 0;
}

.app-download-info span {
  padding: 7px 10px;

  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 700;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.app-download-primary,
.app-download-secondary {
  width: 100%;
  min-height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;

  border-radius: 14px;
  font: inherit;
  font-weight: 900;

  transition: 0.25s ease;
}

.app-download-primary {
  color: #020713;

  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 16px 42px rgba(47, 132, 255, 0.28);
}

.app-download-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 21px 48px rgba(47, 132, 255, 0.40);
}

.app-download-primary span {
  font-size: 20px;
}

.app-download-secondary {
  margin-top: 11px;

  color: rgba(255, 255, 255, 0.76);

  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.app-download-secondary:hover {
  color: #ffffff;
  border-color: rgba(55, 213, 255, 0.45);
}

.app-download-note {
  display: block;
  margin-top: 16px;

  color: rgba(255, 255, 255, 0.43);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .app-download-dialog {
    padding: 30px 20px 22px;
    border-radius: 24px;
  }

  .app-download-dialog h2 {
    font-size: 28px;
  }
}

/* CV DOWNLOAD BUTTON */

.cv-download-btn {
  color: #ffffff;
  border-color: rgba(55, 213, 255, 0.40);
  background:
    linear-gradient(135deg, rgba(47, 132, 255, 0.22), rgba(55, 213, 255, 0.08));
  box-shadow: 0 14px 38px rgba(47, 132, 255, 0.16);
}

.cv-download-btn span {
  color: var(--cyan);
  font-size: 19px;
  font-weight: 900;
}

.cv-download-btn:hover {
  border-color: var(--cyan);
  background:
    linear-gradient(135deg, rgba(47, 132, 255, 0.34), rgba(55, 213, 255, 0.14));
}

/* ==========================================
   HERO BUTTONS — PREMIUM INTERACTION SYSTEM
========================================== */

.hero-actions-fx {
  perspective: 1100px;
}

.hero-actions-fx .hero-action-fx {
  --fx-x: 50%;
  --fx-y: 50%;
  --move-x: 0px;
  --move-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --ripple-x: 50%;
  --ripple-y: 50%;

  position: relative;
  isolation: isolate;
  overflow: visible;

  transform:
    translate3d(var(--move-x), var(--move-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));

  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transition:
    transform 0.24s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;

  background-size: 100% 100%, 220% 100% !important;
}

.hero-actions-fx .hero-action-fx::before {
  content: "";
  position: absolute;
  z-index: -1;

  top: var(--ripple-y);
  left: var(--ripple-x);

  width: 18px;
  height: 18px;

  opacity: 0;
  pointer-events: none;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);

  transform: translate(-50%, -50%) scale(0);
}

.hero-actions-fx .hero-action-fx.is-rippling::before {
  animation: heroActionRipple 0.72s ease-out;
}

@keyframes heroActionRipple {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

.hero-actions-fx .hero-action-fx::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: calc(100% + 14px);

  width: max-content;
  max-width: 230px;
  padding: 9px 12px;

  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;

  border: 1px solid rgba(55, 213, 255, 0.28);
  border-radius: 11px;
  background: rgba(3, 12, 29, 0.94);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(47, 132, 255, 0.14);
  backdrop-filter: blur(12px);

  opacity: 0;
  pointer-events: none;

  transform: translate(-50%, 10px) scale(0.94);
  transition: 0.25s ease;
}

.hero-actions-fx .hero-action-fx:hover::after,
.hero-actions-fx .hero-action-fx:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hero-actions-fx .hero-action-fx > span {
  display: inline-block;
  position: relative;
  transition: transform 0.25s ease;
}

.hero-actions-fx .hero-action-fx:hover > span,
.hero-actions-fx .hero-action-fx:focus-visible > span {
  transform: translateX(7px);
}

/* View Projects – strong blue energy */
.project-action-fx {
  background:
    radial-gradient(
      circle at var(--fx-x) var(--fx-y),
      rgba(115, 220, 255, 0.52),
      transparent 34%
    ),
    linear-gradient(115deg, #1d66ff, #2f84ff, #4b8fff, #1d66ff) !important;

  box-shadow:
    0 16px 42px rgba(47, 132, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.project-action-fx:hover,
.project-action-fx:focus-visible {
  border-color: rgba(135, 229, 255, 0.90) !important;
  box-shadow:
    0 26px 58px rgba(47, 132, 255, 0.48),
    0 0 36px rgba(55, 213, 255, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* CV button – cyan scanner style */
.cv-action-fx {
  background:
    radial-gradient(
      circle at var(--fx-x) var(--fx-y),
      rgba(55, 213, 255, 0.30),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      rgba(47, 132, 255, 0.19),
      rgba(55, 213, 255, 0.10),
      rgba(47, 132, 255, 0.19)
    ) !important;
}

.cv-action-fx:hover,
.cv-action-fx:focus-visible {
  border-color: rgba(55, 213, 255, 0.88) !important;
  box-shadow:
    0 24px 52px rgba(47, 132, 255, 0.28),
    0 0 30px rgba(55, 213, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.cv-action-fx:hover > span,
.cv-action-fx:focus-visible > span {
  transform: translateY(5px);
}

/* Study Hub – soft purple/cyan sparkle energy */
.study-action-fx {
  background:
    radial-gradient(
      circle at var(--fx-x) var(--fx-y),
      rgba(139, 92, 246, 0.28),
      transparent 38%
    ),
    linear-gradient(
      115deg,
      rgba(47, 132, 255, 0.12),
      rgba(139, 92, 246, 0.12),
      rgba(55, 213, 255, 0.08)
    ) !important;
}

.study-action-fx:hover,
.study-action-fx:focus-visible {
  border-color: rgba(139, 92, 246, 0.72) !important;
  box-shadow:
    0 23px 52px rgba(139, 92, 246, 0.20),
    0 0 30px rgba(55, 213, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.study-action-fx:hover > span,
.study-action-fx:focus-visible > span {
  transform: rotate(14deg) scale(1.16);
}

/* Better keyboard focus */
.hero-actions-fx .hero-action-fx:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}

/* Mobile and touch: clean, stable, no tooltip overlap */
@media (max-width: 760px), (hover: none) {
  .hero-actions-fx .hero-action-fx {
    transform: none !important;
  }

  .hero-actions-fx .hero-action-fx::after {
    display: none;
  }

  .hero-actions-fx .hero-action-fx:active {
    transform: scale(0.97) !important;
  }

  .hero-actions-fx .hero-action-fx > span {
    transform: none !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-actions-fx .hero-action-fx,
  .hero-actions-fx .hero-action-fx::before,
  .hero-actions-fx .hero-action-fx::after,
  .hero-actions-fx .hero-action-fx > span {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================
   REAL PROJECT CARD HORIZONTAL GALLERY
========================================== */

#projects .projects-more {
  display: none !important;
}

.project-gallery {
  position: relative;
  padding: 16px;
  overflow: hidden;

  border: 1px solid rgba(47, 132, 255, 0.24);
  border-radius: 26px;

  background:
    radial-gradient(circle at 88% 0%, rgba(55, 213, 255, 0.10), transparent 28%),
    radial-gradient(circle at 8% 100%, rgba(47, 132, 255, 0.14), transparent 35%),
    rgba(4, 12, 28, 0.68);

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.project-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;

  background-image:
    linear-gradient(rgba(55, 213, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 213, 255, 0.05) 1px, transparent 1px);

  background-size: 28px 28px;
}

.project-gallery-toolbar,
.project-gallery-viewport,
.project-gallery-note {
  position: relative;
  z-index: 1;
}

.project-gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.project-gallery-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.project-gallery-live span {
  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: #3ff69a;
  box-shadow: 0 0 14px rgba(63, 246, 154, 0.9);

  animation: projectGalleryPulse 1.7s ease-in-out infinite;
}

@keyframes projectGalleryPulse {
  50% {
    opacity: 0.35;
    transform: scale(0.72);
  }
}

.project-gallery-controls {
  display: flex;
  gap: 8px;
}

.project-gallery-arrow {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: #ffffff;
  font-size: 18px;
  font-weight: 900;

  cursor: pointer;

  border: 1px solid rgba(55, 213, 255, 0.25);
  border-radius: 12px;
  background: rgba(47, 132, 255, 0.12);

  transition: 0.22s ease;
}

.project-gallery-arrow:hover {
  color: var(--cyan);
  transform: translateY(-3px);
  border-color: rgba(55, 213, 255, 0.72);
  background: rgba(47, 132, 255, 0.24);
  box-shadow: 0 12px 28px rgba(47, 132, 255, 0.20);
}

.project-gallery-viewport {
  overflow-x: auto;
  overflow-y: visible;

  padding: 8px 5px 22px;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;

  cursor: grab;

  scrollbar-width: none;
}

.project-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.project-gallery-viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

#projectGallery #projectGrid {
  display: flex !important;
  width: max-content;
  gap: 22px;

  grid-template-columns: none !important;
}

#projectGallery #projectGrid > .project-card {
  display: block !important;

  flex: 0 0 clamp(292px, 30vw, 350px);
  min-height: 100%;

  scroll-snap-align: start;

  opacity: 1 !important;
  filter: none !important;

  transform: none !important;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

/* Overrides old Show More hiding rules */
#projectGallery #projectGrid > .project-card:nth-child(n) {
  display: block !important;
}

@media (hover: hover) and (pointer: fine) {
  .project-gallery-viewport:hover #projectGrid > .project-card:not(:hover) {
    opacity: 0.56 !important;
    transform: scale(0.965) !important;
  }

  .project-gallery-viewport #projectGrid > .project-card:hover {
    z-index: 4;

    opacity: 1 !important;
    transform: translateY(-10px) scale(1.025) !important;

    border-color: rgba(55, 213, 255, 0.65);
    box-shadow:
      0 28px 80px rgba(47, 132, 255, 0.22),
      0 0 28px rgba(55, 213, 255, 0.10);
  }
}

.project-gallery-note {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin-top: 2px;

  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.project-gallery-note span {
  color: var(--cyan);
  font-weight: 900;
}

@media (max-width: 760px) {
  .project-gallery {
    padding: 13px;
    border-radius: 20px;
  }

  .project-gallery-live {
    font-size: 9px;
  }

  .project-gallery-arrow {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  #projectGallery #projectGrid {
    gap: 14px;
  }

  #projectGallery #projectGrid > .project-card {
    flex-basis: min(84vw, 340px);
  }

  .project-gallery-note {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery-live span {
    animation: none !important;
  }

  .project-gallery-viewport {
    scroll-behavior: auto;
  }
}

/* ==========================================
   PROJECT GALLERY — AUTO MOTION POPUP
========================================== */

#projectGallery #projectGrid > a.project-card {
  cursor: pointer;
}

.gallery-project-popup {
  position: fixed;
  z-index: 9999;

  display: grid;
  gap: 4px;

  width: 210px;
  padding: 11px 13px;

  color: #ffffff;

  pointer-events: none;
  opacity: 0;

  border: 1px solid rgba(55, 213, 255, 0.38);
  border-radius: 14px;

  background:
    radial-gradient(circle at 20% 0%, rgba(55, 213, 255, 0.16), transparent 50%),
    rgba(3, 12, 29, 0.96);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.40),
    0 0 26px rgba(47, 132, 255, 0.18);

  backdrop-filter: blur(14px);

  transform: translateY(8px) scale(0.94);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.gallery-project-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gallery-project-popup strong {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.25;
}

.gallery-project-popup span {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 760px), (hover: none) {
  .gallery-project-popup {
    display: none !important;
  }
}

/* Allow smooth automatic movement */
.project-gallery-viewport.is-auto-scrolling {
  scroll-snap-type: none !important;
}

/* Auto-scroll must not snap back to the first card */

.project-gallery-viewport.is-auto-moving {
  scroll-snap-type: none !important;
}
/* Smooth GPU-friendly auto gallery movement */
.project-gallery-viewport,
.project-gallery-viewport.is-auto-moving {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch;
}

.project-gallery-viewport.is-dragging {
  scroll-behavior: auto !important;
}

/* Project gallery click and drag fix */

.project-gallery-viewport.is-auto-moving {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

#projectGallery a.project-card {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.project-gallery-viewport.is-dragging {
  user-select: none;
}
/* ==========================================
   MOBILE STABILITY + SMOOTH SCROLL FIX
========================================== */

@media (max-width: 760px) {

  /* Stop the full page moving sideways */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  main,
  section,
  .container,
  .platform-showcase,
  .hero,
  .about,
  .skills,
  .projects,
  .contact,
  .project-gallery {
    min-width: 0;
    max-width: 100%;
  }

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

  /* Keep wide gallery inside its own swipe area */
  #projectGallery,
  #projectGallery .project-gallery-viewport {
    width: 100%;
    max-width: 100%;
  }

  #projectGallery .project-gallery-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* Prevent visual sections leaking outside phone width */
  .hero-visual,
  .about-visual,
  .nexus-card,
  .project-gallery {
    overflow: hidden;
  }

  /* Mobile Study Hub floating bar — smoother fixed position */
  .mobile-study-float {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 24px);

    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 12px 28px rgba(47, 132, 255, 0.28);
  }

  .site-header,
  .top-btn {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Remove expensive desktop-only effects on phones */
  .noise,
  .glow,
  .side-dock {
    display: none !important;
  }

  .nexus-scanline,
  .nexus-ring,
  .nexus-orbit-node,
  .nexus-particle,
  .orbit {
    animation: none !important;
  }
}

/* Project type badges */

.project-thumb {
  position: relative;
  overflow: hidden;
}

.project-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;

  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.project-type-badge span {
  font-size: 11px;
}

.app-badge {
  background: rgba(22, 176, 112, 0.88);
  border-color: rgba(107, 255, 183, 0.55);
}

.website-badge {
  background: rgba(25, 121, 255, 0.88);
  border-color: rgba(103, 191, 255, 0.55);
}

/* ==========================================
   DAILYDOBYJ — PREMIUM MOBILE APP BADGE
========================================== */

.thumb-daily {
  position: relative;
  overflow: hidden;
}

.app-showcase-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 8;

  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 142px;
  padding: 8px 10px 8px 8px;

  overflow: hidden;
  pointer-events: none;

  border: 1px solid rgba(184, 255, 215, 0.62);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(101, 255, 181, 0.34),
      rgba(14, 136, 95, 0.26) 48%,
      rgba(1, 29, 28, 0.72)
    );

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(89, 255, 174, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);

  transform: translateZ(0);
}

.app-showcase-badge::before {
  content: "";
  position: absolute;
  inset: -80% auto -80% -35%;
  width: 42%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );

  transform: rotate(20deg) translateX(-240%);
  animation: appBadgeShine 4.5s ease-in-out infinite;
}

.app-showcase-badge::after {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0.55;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(179, 255, 221, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 255, 221, 0.1) 1px, transparent 1px);

  background-size: 8px 8px;
  mask-image: linear-gradient(to right, black, transparent);
}

.app-showcase-orbit {
  position: absolute;
  width: 90px;
  height: 90px;
  top: -38px;
  left: -32px;

  border: 1px solid rgba(156, 255, 210, 0.34);
  border-radius: 50%;

  animation: appBadgeOrbit 8s linear infinite;
}

.app-showcase-icon {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 31px;
  height: 31px;
  flex: 0 0 31px;

  border: 1px solid rgba(223, 255, 238, 0.7);
  border-radius: 10px;

  color: #dffff0;

  background:
    linear-gradient(145deg, rgba(133, 255, 192, 0.45), rgba(9, 89, 65, 0.55));

  box-shadow:
    0 0 16px rgba(105, 255, 179, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.app-showcase-icon svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.app-showcase-copy {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 1px;

  line-height: 1;
}

.app-showcase-copy small {
  color: rgba(222, 255, 237, 0.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.app-showcase-copy strong {
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.app-showcase-signal {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: end;
  gap: 2px;

  height: 14px;
  margin-left: auto;
}

.app-showcase-signal i {
  display: block;
  width: 3px;

  border-radius: 99px;
  background: #a6ffd0;
  box-shadow: 0 0 8px rgba(116, 255, 183, 0.9);

  animation: appBadgeSignal 1.5s ease-in-out infinite;
}

.app-showcase-signal i:nth-child(1) {
  height: 5px;
  animation-delay: 0s;
}

.app-showcase-signal i:nth-child(2) {
  height: 9px;
  animation-delay: 0.18s;
}

.app-showcase-signal i:nth-child(3) {
  height: 13px;
  animation-delay: 0.36s;
}

@keyframes appBadgeShine {
  0%,
  65% {
    transform: rotate(20deg) translateX(-240%);
  }

  88%,
  100% {
    transform: rotate(20deg) translateX(620%);
  }
}

@keyframes appBadgeOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes appBadgeSignal {
  0%,
  100% {
    opacity: 0.38;
    transform: scaleY(0.72);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (max-width: 760px) {
  .app-showcase-badge {
    top: 10px;
    right: 10px;
    min-width: 128px;
    padding: 7px 8px 7px 7px;
  }

  .app-showcase-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .app-showcase-copy strong {
    font-size: 9px;
  }

  .app-showcase-badge::before,
  .app-showcase-orbit,
  .app-showcase-signal i {
    animation: none;
  }
}
/* ==========================================
   DAILYDOBYJ — HIGH VISIBILITY APP BADGE
========================================== */

.thumb-daily {
  position: relative;
  overflow: hidden;
}

.dailydo-app-badge-v2 {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 186px;
  padding: 10px 13px 10px 10px;

  overflow: hidden;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(0, 195, 255, 0.98),
      rgba(66, 104, 255, 0.98) 48%,
      rgba(137, 59, 255, 0.98)
    );

  box-shadow:
    0 12px 28px rgba(18, 86, 255, 0.5),
    0 0 20px rgba(72, 213, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  transform: translateZ(0);
}

.dailydo-app-badge-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255, 255, 255, 0.85) 48%,
      transparent 70%
    );

  transform: translateX(-120%);
  animation: dailyDoBadgeShine 4s ease-in-out infinite;
}

.dailydo-app-phone {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  color: #1760ff;

  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;

  background: #ffffff;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 0 12px rgba(54, 124, 255, 0.18);
}

.dailydo-app-phone svg {
  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dailydo-app-text {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 2px;
}

.dailydo-app-text small {
  color: rgba(237, 251, 255, 0.9);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.dailydo-app-text strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.dailydo-app-status {
  position: relative;
  z-index: 1;

  width: 9px;
  height: 9px;
  margin-left: auto;

  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;

  background: #5dffba;

  box-shadow: 0 0 13px rgba(93, 255, 186, 1);

  animation: dailyDoBadgePulse 1.5s ease-in-out infinite;
}

@keyframes dailyDoBadgeShine {
  0%,
  55% {
    transform: translateX(-120%);
  }

  85%,
  100% {
    transform: translateX(150%);
  }
}

@keyframes dailyDoBadgePulse {
  0%,
  100% {
    transform: scale(0.78);
    opacity: 0.65;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .dailydo-app-badge-v2 {
    top: 10px;
    right: 10px;
    min-width: 166px;
    padding: 8px 10px 8px 8px;
  }

  .dailydo-app-phone {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .dailydo-app-text strong {
    font-size: 10px;
  }

  .dailydo-app-text small {
    font-size: 7px;
  }

  .dailydo-app-badge-v2::before,
  .dailydo-app-status {
    animation: none;
  }
}

/* Smaller DailyDo mobile application badge */

.dailydo-app-badge-v2 {
  top: 10px;
  right: 10px;
  min-width: 155px;
  padding: 7px 9px 7px 7px;
  gap: 7px;
  border-radius: 13px;
}

.dailydo-app-phone {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 9px;
}

.dailydo-app-phone svg {
  width: 16px;
  height: 16px;
}

.dailydo-app-text small {
  font-size: 7px;
}

.dailydo-app-text strong {
  font-size: 9px;
}

.dailydo-app-status {
  width: 7px;
  height: 7px;
}

/* DailyDo badge — sharper, clearer text */

.dailydo-app-badge-v2 {
  background: linear-gradient(
    135deg,
    rgba(0, 155, 255, 0.98),
    rgba(75, 82, 255, 0.98) 52%,
    rgba(142, 62, 255, 0.98)
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dailydo-app-badge-v2::before {
  opacity: 0.12 !important;
}

.dailydo-app-text {
  position: relative;
  z-index: 5;

  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.dailydo-app-text small {
  color: #dff8ff !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.dailydo-app-text strong {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: 0.045em !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 0 5px rgba(255, 255, 255, 0.18);
}

.dailydo-app-phone,
.dailydo-app-status {
  position: relative;
  z-index: 5;
}
/* ==========================================================
   STUDY HUB LOGIN  (added for auth system)
   ========================================================== */
.auth-slot { display: inline-flex; align-items: center; }
.auth-signin-btn {
  padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  transition: .25s ease;
}
.auth-signin-btn:hover { background: rgba(47,132,255,.18); border-color: var(--blue); }
.auth-account { display: inline-flex; align-items: center; gap: 10px; }
.auth-hello { font-size: 13px; color: var(--muted); white-space: nowrap; }
.auth-signout {
  padding: 9px 14px; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg,#1d66ff,var(--blue));
  border: 0; box-shadow: 0 10px 26px rgba(47,132,255,.28);
}

/* Toast shown when a not-signed-in visitor tries to open a resource */
.auth-lock-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  z-index: 9999; max-width: 92vw; width: 360px; text-align: center;
  background: rgba(9,20,43,.96); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 18px; box-shadow: 0 24px 70px rgba(0,40,120,.45);
  transition: transform .35s ease; backdrop-filter: blur(10px);
}
.auth-lock-toast.show { transform: translate(-50%, 0); }
.auth-lock-toast p { margin: 0 0 12px; color: #fff; font-size: 14.5px; }
.auth-lock-btn {
  display: inline-block; padding: 11px 20px; border-radius: 12px;
  background: linear-gradient(135deg,#1d66ff,var(--blue)); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 14px;
}

/* ===== Premium resources + account nav (added) ===== */
.premium-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 900;
  letter-spacing: .4px; color: #3a2a00;
  background: linear-gradient(135deg,#ffce5a,#ffb347);
  box-shadow: 0 8px 20px rgba(255,180,60,.35);
}
.resource-card.is-premium-card { border-color: rgba(255,206,90,.45); }
.premium-resource-link {
  background: linear-gradient(135deg,#ffb347,#ffce5a) !important;
  color: #3a2a00 !important; border: 0 !important; font-weight: 800;
}
.premium-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #3a2a00; background: linear-gradient(135deg,#ffce5a,#ffb347); white-space: nowrap;
}
.auth-admin-link {
  padding: 9px 14px; border-radius: 11px; font-size: 13px; font-weight: 700;
  color: #fff; text-decoration: none; border: 1px solid var(--line);
  background: rgba(255,255,255,.05); white-space: nowrap;
}
.auth-hello {
  font-size: 13px; color: var(--muted); white-space: nowrap;
  text-decoration: none; padding: 8px 6px; border-radius: 8px;
}
.auth-hello:hover { color: #fff; }

/* ===== Resource level badges (Members / Premium) ===== */
.members-badge, .premium-badge{
  position:absolute;top:14px;right:14px;left:auto;bottom:auto;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(4px);
}
.members-badge{
  color:#03263f;background:linear-gradient(135deg,#8fe9ff,#37c6ff);
  box-shadow:0 6px 18px rgba(55,170,255,.4);
}
.premium-badge{
  color:#3a2600;background:linear-gradient(135deg,#ffe08a,#ffb43d);
  box-shadow:0 6px 20px rgba(255,180,60,.5);
}

/* NEW / LATEST badge -> bottom right */
.new-badge{ top:auto !important; bottom:14px !important; right:14px !important; left:auto !important; z-index:3; }

/* ===== Card highlighting ===== */
.resource-card.is-members-card{
  border:1px solid rgba(55,200,255,.45);
}
.resource-card.is-premium-card{
  border:1px solid rgba(255,190,70,.6);
  background:linear-gradient(180deg, rgba(60,44,8,.25), transparent 60%);
  box-shadow:0 0 0 1px rgba(255,200,90,.25), 0 18px 50px rgba(120,80,0,.25);
}
/* soft animated glow ring on premium cards */
.resource-card.is-premium-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 22px rgba(255,190,70,.35);opacity:.85;
  animation:premiumGlow 2.8s ease-in-out infinite;
}
@keyframes premiumGlow{
  0%,100%{opacity:.35;} 50%{opacity:.85;}
}

/* level button styles */
.members-resource-link{
  background:linear-gradient(135deg,#37c6ff,#2f84ff) !important;color:#fff !important;border:0 !important;
}
.premium-resource-link{
  background:linear-gradient(135deg,#ffb43d,#ffd06a) !important;color:#3a2600 !important;border:0 !important;
  box-shadow:0 10px 26px rgba(255,180,60,.4);
}

/* ===== Compact University Tools cards (reduce height / spacing) ===== */
.university-tools-grid{ gap:14px !important; align-items:start !important; }
.university-tools-grid .student-tool-card{
  min-height:0 !important;      /* was 210px — let the card hug its content */
  padding:16px 18px !important; /* was 22px */
  grid-template-columns:44px minmax(0,1fr) auto !important;
  gap:0 12px !important;
  align-self:start !important;
}
.university-tools-grid .student-tool-icon{
  width:44px !important;height:44px !important;border-radius:13px !important;font-size:12px !important;
}
.university-tools-grid .tool-card-label{ margin-bottom:4px !important;font-size:9.5px !important; }
.university-tools-grid h3{ font-size:18px !important; }
.university-tools-grid p{ margin-top:6px !important;font-size:13.5px !important;line-height:1.45 !important; }
.university-tools-grid .tool-card-arrow{ font-size:22px !important; }

/* ===== Compact "Important Notice" section ===== */
.notice-card{ padding:26px !important; border-radius:22px !important; }
.notice-card h2{ font-size:30px !important; line-height:1.12 !important; max-width:680px !important; }
.notice-text{ margin-top:12px !important; line-height:1.6 !important; font-size:14.5px !important; max-width:820px !important; }
.notice-grid{ margin-top:18px !important; gap:14px !important; }
.notice-grid div{ padding:16px !important; border-radius:16px !important; }
.notice-grid span{ margin-bottom:8px !important; padding:5px 11px !important; font-size:12px !important; }
.notice-grid p{ line-height:1.5 !important; font-size:13.5px !important; }

/* ============================================
   Creative animated top bar
   ============================================ */
.site-header{ position:relative; }
/* moving gradient line under the bar */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#2f84ff,#37d5ff,#8b5cf6,#37d5ff,#2f84ff,transparent);
  background-size:220% 100%;
  animation:navLine 7s linear infinite;opacity:.85;
}
@keyframes navLine{ 0%{background-position:0% 0;} 100%{background-position:220% 0;} }

/* glowing, gently spinning brand diamond */
.brand-mark{ display:inline-block;color:#37d5ff;
  text-shadow:0 0 10px rgba(55,213,255,.7);
  animation:brandPulse 2.8s ease-in-out infinite; }
@keyframes brandPulse{
  0%,100%{ text-shadow:0 0 7px rgba(55,213,255,.45);transform:rotate(0); }
  50%{ text-shadow:0 0 18px rgba(55,213,255,.95);transform:rotate(20deg); }
}

/* sliding underline on nav links */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;
  background:linear-gradient(90deg,#37d5ff,#2f84ff);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* shine sweep on the Back-to-Portfolio button */
.talk-btn{ position:relative;overflow:hidden; }
.talk-btn::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.talk-btn:hover::before{ left:130%; }

/* ===== Cleaner nav spacing (single-line links, even gaps) ===== */
.nav{ gap:14px !important; }
.nav-links{ gap:26px !important; align-items:center !important; }
.nav-links a{ white-space:nowrap !important; line-height:1 !important; display:inline-flex; align-items:center; }









.video-preview {
  position: relative;
  overflow: hidden;
  margin: 18px 0 16px;
  border: 1px solid rgba(100, 180, 255, 0.24);
  border-radius: 16px;
  aspect-ratio: 16 / 8;
  background: #071120;
}

.video-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.78;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.resource-card:hover .video-preview img {
  transform: scale(1.04);
  opacity: 0.95;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(74, 133, 255, 0.92);
  color: white;
  font-size: 21px;
  padding-left: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.video-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(3, 11, 25, 0.84);
  color: #dceeff;
  font-size: 12px;
  font-weight: 800;
}


/* ==========================================
   grid css */

   /* =========================================
   RESOURCE CARDS – NATURAL HEIGHT FIX
   Prevent normal cards becoming tall because
   a Lecture Video card has a thumbnail.
========================================= */

.resources-grid,
.resource-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.resources-grid > .resource-card,
.resource-grid > .resource-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Remove forced equal-height card styling */
.resource-card {
  height: auto !important;
  min-height: 0 !important;
}

/* Keep badges inside the natural card height */
.resource-card .latest-badge,
.resource-card .resource-latest,
.resource-card .latest {
  margin-top: 18px !important;
}

/* =====================================================
   HERO STATS — online + registered pills (under heading)
   Placed in the LEFT column right under "SLIIT Study Hub".
   Appended last + high specificity so it overrides the old
   single-floating-badge rules on every screen size.
   ===================================================== */

/* keep pills in normal flow everywhere (kill absolute-badge rules) */
.study-hero .live-learners,
.study-hero .hero-stats .live-learners{
  position: static !important;
  transform: none !important;
  animation: none !important;
  float: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* row of pills directly under the heading */
.study-hero .hero-stats{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin: 16px 0 6px !important;
  width: 100% !important;
  max-width: 560px !important;
}

.study-hero .hero-stats .live-learners{
  width: auto !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
}
.study-hero .hero-stats .live-learners strong{ font-size: 16px !important; }

/* online pill keeps its green look (from earlier rules) */
/* registered pill = static gold, clearly different */
.study-hero .hero-stats .live-learners--reg{
  border: 1px solid rgba(255,206,90,.32) !important;
  background: rgba(255,206,90,.08) !important;
  box-shadow: none !important;
  cursor: default !important;
  animation: none !important;
}
.study-hero .hero-stats .live-learners--reg strong{ color: #ffce5a !important; }
.live-learners--reg .reg-dot{
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: #ffce5a; display: inline-block;
}
.hero-stats .view-hint{ font-size: 11px; font-weight: 800; color: #37d5ff; }

/* small phones: keep them under the heading, allow stacking */
@media (max-width: 600px){
  .study-hero .hero-stats{ gap: 8px !important; margin: 14px 0 4px !important; }
  .study-hero .hero-stats .live-learners{
    padding: 9px 13px !important;
    font-size: 12.5px !important;
  }
  .study-hero .hero-stats .live-learners strong{ font-size: 14px !important; }
}

/* ==========================================
   SHOPPOS + CUSTOMFLOW PORTFOLIO PROJECTS
========================================== */

.project-brand-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  overflow: hidden;
}

.project-brand-thumb::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -65px;
  bottom: -90px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.project-brand-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 42%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 27px,
      rgba(255,255,255,.035) 28px
    );
  pointer-events: none;
}

.project-brand-thumb-shoppos {
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 196, 69, .28), transparent 30%),
    linear-gradient(135deg, #162208, #07140f 58%, #04131a);
}

.project-brand-thumb-customflow {
  background:
    radial-gradient(circle at 84% 15%, rgba(161, 95, 255, .30), transparent 30%),
    linear-gradient(135deg, #1a0d35, #0c1230 58%, #06141e);
}

.project-live-label {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  padding: 6px 9px;
  border: 1px solid rgba(118, 255, 182, .38);
  border-radius: 999px;
  background: rgba(22, 183, 102, .16);
  color: #8effc2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.project-brand-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
}

.project-brand-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 950;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 25px rgba(0,0,0,.24);
}

.project-brand-main small {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
}

.project-brand-main strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

.project-brand-mini-ui {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  margin-top: 24px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(2, 8, 21, .48);
  backdrop-filter: blur(8px);
}

.project-brand-mini-ui span,
.project-brand-mini-ui small {
  color: rgba(255,255,255,.64);
  font-size: 10px;
  font-weight: 700;
}

.project-brand-mini-ui b {
  color: #ffffff;
  font-size: 17px;
}

@media (max-width: 760px) {
  .project-brand-main strong {
    font-size: 20px;
  }
}
.thumb-shoppos {
  background-image: url("../assets/images/project-shoppos.png");
}

.thumb-customflow {
  background-image: url("../assets/images/project-customflow.png");
}
/* GuruDesk image — show full screenshot */
.project-thumb.thumb-gurudesk img {
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff;
}

/* ===== Project thumbnails: fill the frame like ToolsByJ ===== */
.project-thumb.thumb-andumpola,
.project-thumb.thumb-gurudesk {
  background: #ffffff;
}

.project-thumb.thumb-andumpola img,
.project-thumb.thumb-gurudesk img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* fills the whole frame */
  object-position: top center !important; /* keeps the top of the site visible */
  display: block;
}


/* ============================================================
   Study Hub By J  -  LIGHT THEME
   Auto-generated from styles.css. The DARK theme is untouched
   and remains the default. These rules only apply when the
   student turns light mode on (html[data-theme="light"]).
   ============================================================ */

html[data-theme="light"] {
  --bg: #f6f8fc;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: #ffffff;
  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.66);
  --soft: rgba(15, 23, 42, 0.06);
  --blue: #1d5fd0;
  --cyan: #0898bd;
  --purple: #6d38d6;
  --line: rgba(15, 23, 42, 0.14);
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  color-scheme: light;
}

html[data-theme="light"] .site-header {
  border-bottom: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .secondary-btn {
  background: rgba(15, 23, 42, 0.004);
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .side-dock {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .side-dock a {
  color: rgba(71, 85, 105, 0.83);
}

html[data-theme="light"] .availability {
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .role {
  color: rgb(71, 85, 105);
}

html[data-theme="light"] .socials a {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .socials a small {
  color: rgba(71, 85, 105, 0.87);
}

html[data-theme="light"] .socials .tiktok:hover::before {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.018), rgba(0,242,234,.16), rgba(255,0,80,.16));
}

html[data-theme="light"] .stats div:not(:last-child)::after {
  background: rgba(15, 23, 42, 0.015);
}

html[data-theme="light"] .info-grid div {
  color: rgb(71, 85, 105);
}

html[data-theme="light"] .info-grid span {
  color: rgba(71, 85, 105, 0.85);
}

html[data-theme="light"] .photo-caption {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.042);
}

html[data-theme="light"] .study-preview-card {
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .tech-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.006), rgba(15, 23, 42, 0.003));
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .service-list article {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .project-card {
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .project-thumb {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03), 0 18px 45px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .project-card p {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .contact-card {
  background: linear-gradient(135deg, rgba(47,132,255,.12), rgba(15, 23, 42, 0.004), rgba(121,73,255,.10));
}

html[data-theme="light"] .top-btn {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .study-terminal pre {
  color: rgba(0, 116, 204, 0.86);
}

html[data-theme="light"] .year-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .semester-link {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .muted-link {
  color: rgba(71, 85, 105, 0.97);
}

html[data-theme="light"] .coming-pill {
  background: rgba(15, 23, 42, 0.006);
}

html[data-theme="light"] .filter-panel select {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .resource-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .empty-state {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .howto-steps div {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .disabled-sem:hover {
  border-color: rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .managed-points div {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .resource-filters select {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .resource-card {
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .resource-card h3 {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .resource-card p {
  color: rgba(71, 85, 105, 0.93) !important;
}

html[data-theme="light"] .notice-card {
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .notice-text {
  color: rgba(71, 85, 105, 0.97);
}

html[data-theme="light"] .notice-grid div {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .notice-grid p {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .contact-card p:not(.section-label) {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .home-study-banner h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .home-study-banner p {
  color: rgba(71, 85, 105, 0.97);
}

html[data-theme="light"] .study-banner-tags span {
  color: rgb(71, 85, 105);
  background: rgba(15, 23, 42, 0.006);
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .side-dock {
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .side-dock a {
  color: rgba(71, 85, 105, 0.87);
}

html[data-theme="light"] .side-dock a::before {
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .feedback-card {
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .feedback-copy p:not(.section-label) {
  color: rgba(71, 85, 105, 0.95);
}

html[data-theme="light"] .feedback-form input, html[data-theme="light"] .feedback-form select, html[data-theme="light"] .feedback-form textarea {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .live-learners {
  color: rgb(71, 85, 105);
}

html[data-theme="light"] .live-learners {
  color: rgb(71, 85, 105) !important;
}

html[data-theme="light"] .whatsapp-channel-box h3 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .whatsapp-channel-box p {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .study-hero-right .live-learners {
  color: rgb(71, 85, 105) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.12),
    0 22px 70px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero-right .live-learners strong {
  color: rgb(0, 204, 52) !important;
}

html[data-theme="light"] .study-hero-right .live-learners {
  color: rgb(71, 85, 105) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.12),
    0 22px 70px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero-right .live-learners strong {
  color: rgb(0, 204, 52) !important;
}

html[data-theme="light"] .study-hero-right .live-learners {
  color: rgb(71, 85, 105) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.15),
    0 22px 70px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero-right .live-learners strong {
  color: rgb(0, 204, 52) !important;
}

html[data-theme="light"] .study-hero .hero-description {
  color: rgba(71, 85, 105, 0.93) !important;
}

html[data-theme="light"] .study-hero .live-learners {
  color: rgb(71, 85, 105) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.15),
    0 18px 55px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero .live-learners strong {
  color: rgb(0, 204, 52) !important;
}

html[data-theme="light"] .study-hero .live-learners {
  color: rgb(71, 85, 105) !important;
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.15),
    0 18px 55px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero .live-learners strong {
  color: rgb(0, 204, 52) !important;
}

html[data-theme="light"] .new-badge {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .resource-popup-card {
  box-shadow: 0 30px 100px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .popup-close {
  background: rgba(15, 23, 42, 0.008);
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .resource-popup-card p {
  color: rgba(71, 85, 105, 0.97);
}

html[data-theme="light"] .resource-popup-card b {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .popup-cancel {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.006);
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .module-update-badge {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .gpa-tool-btn {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .gpa-tool-btn::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 23, 42, 0.022),
    transparent
  );
}

html[data-theme="light"] .gpa-new-badge {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-hero-actions .gpa-tool-btn {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .gpa-tool-btn .gpa-new-badge {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .gpa-tool-btn::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 23, 42, 0.02),
    transparent
  );
}

html[data-theme="light"] .gpa-loading-card {
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.14),
    0 0 45px rgba(47, 132, 255, 0.20),
    inset 0 0 25px rgba(55, 213, 255, 0.04);
}

html[data-theme="light"] .calc-grid span {
  background: rgba(15, 23, 42, 0.016);
}

html[data-theme="light"] .gpa-loading-card p {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .gpa-progress {
  background: rgba(15, 23, 42, 0.008);
}

html[data-theme="light"] .gpa-loading-steps span {
  color: rgb(71, 85, 105);
}

html[data-theme="light"] .site-loader-card {
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.14),
    0 0 48px rgba(47, 132, 255, 0.18);
}

html[data-theme="light"] .site-loader-logo {
  color: rgb(15, 23, 42);
  box-shadow: 0 0 28px rgba(55, 213, 255, 0.38),
    inset 0 0 16px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .site-loader-card h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .site-loader-card p {
  color: rgba(71, 85, 105, 0.89);
}

html[data-theme="light"] .site-loader-progress {
  background: rgba(15, 23, 42, 0.008);
}

html[data-theme="light"] .study-loader-card {
  box-shadow: 0 34px 100px rgba(15, 23, 42, 0.14),
    0 0 60px rgba(47, 132, 255, 0.20),
    inset 0 1px 0 rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .study-loader-card::before {
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.007), transparent 28%, transparent 70%, rgba(55, 213, 255, 0.06));
}

html[data-theme="light"] .study-loader-emblem {
  box-shadow: 0 0 30px rgba(55, 213, 255, 0.52),
    inset 0 1px 10px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .study-loader-label {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-loader-card h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-loader-card h2 span {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-loader-message {
  color: rgba(0, 94, 204, 0.68);
}

html[data-theme="light"] .study-loader-progress {
  background: rgba(15, 23, 42, 0.008);
}

html[data-theme="light"] .study-loader-status {
  color: rgba(0, 116, 204, 0.67);
}

html[data-theme="light"] .study-floating-card {
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.14);
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-floating-card strong {
  color: rgb(0, 126, 204);
}

html[data-theme="light"] .study-floating-card small {
  color: rgba(28, 103, 175, 0.58);
}

html[data-theme="light"] .float-card-symbol {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .portfolio-loader-card {
  box-shadow: 0 34px 100px rgba(15, 23, 42, 0.14),
    0 0 60px rgba(47, 132, 255, 0.20),
    inset 0 1px 0 rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .portfolio-loader-card::before {
  background: linear-gradient(
      120deg,
      rgba(15, 23, 42, 0.007),
      transparent 30%,
      transparent 70%,
      rgba(55, 213, 255, 0.06)
    );
}

html[data-theme="light"] .portfolio-loader-label {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .portfolio-loader-card h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .portfolio-loader-card h2 span {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .portfolio-loader-message {
  color: rgba(0, 94, 204, 0.68);
}

html[data-theme="light"] .portfolio-loader-progress {
  background: rgba(15, 23, 42, 0.008);
}

html[data-theme="light"] .portfolio-loader-status {
  color: rgba(0, 116, 204, 0.67);
}

html[data-theme="light"] .portfolio-float-card {
  box-shadow: 0 16px 50px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .portfolio-float-card strong {
  color: rgb(0, 126, 204);
}

html[data-theme="light"] .portfolio-float-card small {
  color: rgba(28, 103, 175, 0.58);
}

html[data-theme="light"] .portfolio-float-icon {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-btn {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-path-btn::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 23, 42, 0.018),
    transparent
  );
}

html[data-theme="light"] .study-path-icon {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-text small {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-arrow {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-panel {
  box-shadow: 0 30px 100px rgba(15, 23, 42, 0.14),
    0 0 60px rgba(47, 132, 255, 0.22);
}

html[data-theme="light"] .study-path-close {
  color: rgb(71, 85, 105);
  background: rgba(15, 23, 42, 0.008);
}

html[data-theme="light"] .study-path-panel-icon {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-path-label {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-panel h2 span {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-path-panel > p {
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="light"] .study-path-fields label {
  color: rgba(0, 111, 204, 0.74);
}

html[data-theme="light"] .study-path-fields select {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-path-message {
  color: rgba(0, 116, 204, 0.78);
}

html[data-theme="light"] .study-path-continue {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-path-mini-status {
  color: rgba(71, 85, 105, 0.73);
}

html[data-theme="light"] .selection-year-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .selection-year-card.has-resources .year-card-status {
  color: rgb(18, 185, 120);
}

html[data-theme="light"] .semester-navigator {
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .semester-select-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .semester-select-card small {
  color: rgba(71, 85, 105, 0.8);
}

html[data-theme="light"] .dynamic-module-card {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .module-generic-visual span {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .student-tool-card {
  color: rgb(15, 23, 42);
  box-shadow: 0 22px 62px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .tool-coming-pill {
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: rgba(71, 85, 105, 0.83);
}

html[data-theme="light"] .filter-field > span {
  color: rgba(0, 117, 204, 0.7);
}

html[data-theme="light"] .resource-library-action.primary-action {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .resource-library-action.secondary-action {
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: rgb(71, 85, 105);
  background: rgba(15, 23, 42, 0.004);
}

html[data-theme="light"] .study-hero .study-path-btn {
  box-shadow: 0 0 0 1px rgba(55, 213, 255, 0.18),
    0 18px 42px rgba(18, 98, 255, 0.38),
    inset 0 1px 0 rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-hero .study-path-icon {
  color: rgb(15, 23, 42);
  border-color: rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .study-hero .study-path-text small, html[data-theme="light"] .study-hero .study-path-arrow {
  color: rgb(0, 169, 204);
}

html[data-theme="light"] .university-tools-btn {
  color: rgb(0, 172, 204) !important;
}

html[data-theme="light"] .collection-action-btn.secondary-btn {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .study-path-btn {
  box-shadow: 0 14px 35px rgba(47, 132, 255, 0.34),
    inset 0 1px 0 rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-path-btn:hover {
  box-shadow: 0 18px 42px rgba(55, 213, 255, 0.38),
    inset 0 1px 0 rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .study-path-icon {
  color: rgb(15, 23, 42) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
}

html[data-theme="light"] .study-path-text {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .study-path-text small {
  color: rgba(0, 153, 204, 0.82) !important;
}

html[data-theme="light"] .study-path-text strong {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .study-path-arrow {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .study-hero .study-path-btn {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-hero .study-path-icon {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .study-hero .study-path-text small {
  color: rgb(0, 161, 204) !important;
}

html[data-theme="light"] .study-hero .study-path-text strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .study-hero .study-path-arrow {
  color: rgb(0, 161, 204) !important;
}

html[data-theme="light"] .study-hero .study-path-text small {
  color: rgb(0, 161, 204) !important;
}

html[data-theme="light"] .study-hero .study-path-text strong {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .study-hero .study-path-arrow {
  color: rgb(0, 161, 204) !important;
}

html[data-theme="light"] .university-tools-grid .student-tool-card {
  color: rgb(15, 23, 42);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .university-tools-grid .student-tool-card:hover {
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14),
    0 0 28px rgba(47, 132, 255, 0.18);
}

html[data-theme="light"] .university-tools-grid .student-tool-icon {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .university-tools-grid .tool-card-label {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .university-tools-grid h3 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .university-tools-grid p {
  color: rgba(0, 91, 204, 0.7);
}

html[data-theme="light"] .university-tools-grid .tool-card-arrow {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .platform-card-icon {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .platform-card h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .platform-card p {
  color: rgba(71, 85, 105, 0.95);
}

html[data-theme="light"] .platform-card-tags span {
  color: rgb(71, 85, 105);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.005);
}

html[data-theme="light"] .platform-tools-button {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .toolsbyj-thumb-content strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .toolsbyj-thumb-content span {
  color: rgba(71, 85, 105, 0.97);
}

html[data-theme="light"] .builder-visual-card {
  box-shadow: 0 0 0 1px rgba(47, 132, 255, 0.08),
    0 28px 80px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .builder-topbar small {
  color: rgb(0, 204, 117);
}

html[data-theme="light"] .builder-mark {
  color: rgb(15, 23, 42);
  box-shadow: 0 0 38px rgba(47, 132, 255, 0.25),
    inset 0 1px 0 rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .builder-core p {
  color: rgba(71, 85, 105, 0.87);
}

html[data-theme="light"] .builder-core h3 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .builder-skill {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .builder-skill strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .builder-skill small {
  color: rgba(71, 85, 105, 0.83);
}

html[data-theme="light"] .builder-footer {
  color: rgba(71, 85, 105, 0.83);
  border-top: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .builder-footer span {
  color: rgb(0, 204, 117);
}

html[data-theme="light"] .toolsbyj-project-overlay strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-card {
  box-shadow: 0 0 0 1px rgba(47, 132, 255, 0.08),
    0 28px 90px rgba(15, 23, 42, 0.14),
    0 0 65px rgba(47, 132, 255, 0.13);
}

html[data-theme="light"] .nexus-card::after {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .nexus-status {
  color: rgb(0, 204, 108);
}

html[data-theme="light"] .nexus-core {
  color: rgb(15, 23, 42);
  box-shadow: 0 0 0 8px rgba(47, 132, 255, 0.06),
    0 0 46px rgba(47, 132, 255, 0.42),
    inset 0 1px 0 rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .nexus-data-panel h3 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-data-panel p {
  color: rgba(71, 85, 105, 0.92);
}

html[data-theme="light"] .nexus-data-row div {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .nexus-data-row small {
  color: rgba(71, 85, 105, 0.71);
}

html[data-theme="light"] .nexus-data-row strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-mode {
  color: rgba(71, 85, 105, 0.87);
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .nexus-mode:hover, html[data-theme="light"] .nexus-mode.is-active {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-mode small {
  color: rgba(71, 85, 105, 0.61);
}

html[data-theme="light"] .nexus-footer {
  color: rgba(71, 85, 105, 0.83);
  border-top: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .nexus-footer button:hover {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-core-watermark {
  color: rgba(0, 161, 204, 0.24);
}

html[data-theme="light"] .nexus-core-letter {
  text-shadow: 0 0 14px rgba(15, 23, 42, 0.14),
    0 0 28px rgba(55, 213, 255, 0.30);
}

html[data-theme="light"] .nexus-core small {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .nexus-builtby b {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .nexus-builtby em {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .show-more-projects {
  color: rgb(15, 23, 42);
  box-shadow: 0 15px 40px rgba(47, 132, 255, 0.16),
    inset 0 1px 0 rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .app-download-dialog {
  box-shadow: 0 30px 100px rgba(15, 23, 42, 0.14),
    0 0 55px rgba(47, 132, 255, 0.22);
}

html[data-theme="light"] .app-download-close {
  color: rgb(71, 85, 105);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.005);
}

html[data-theme="light"] .app-download-close:hover {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .app-download-dialog h2 {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .app-download-dialog p {
  color: rgba(71, 85, 105, 0.93);
}

html[data-theme="light"] .app-download-info span {
  color: rgb(71, 85, 105);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.005);
}

html[data-theme="light"] .app-download-secondary {
  color: rgb(71, 85, 105);
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.005);
}

html[data-theme="light"] .app-download-secondary:hover {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .app-download-note {
  color: rgba(71, 85, 105, 0.68);
}

html[data-theme="light"] .cv-download-btn {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .hero-actions-fx .hero-action-fx::after {
  color: rgb(15, 23, 42);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14),
    0 0 22px rgba(47, 132, 255, 0.14);
}

html[data-theme="light"] .project-action-fx {
  box-shadow: 0 16px 42px rgba(47, 132, 255, 0.34),
    inset 0 1px 0 rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .project-action-fx:hover, html[data-theme="light"] .project-action-fx:focus-visible {
  box-shadow: 0 26px 58px rgba(47, 132, 255, 0.48),
    0 0 36px rgba(55, 213, 255, 0.23),
    inset 0 1px 0 rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .cv-action-fx:hover, html[data-theme="light"] .cv-action-fx:focus-visible {
  box-shadow: 0 24px 52px rgba(47, 132, 255, 0.28),
    0 0 30px rgba(55, 213, 255, 0.18),
    inset 0 1px 0 rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .study-action-fx:hover, html[data-theme="light"] .study-action-fx:focus-visible {
  box-shadow: 0 23px 52px rgba(139, 92, 246, 0.20),
    0 0 30px rgba(55, 213, 255, 0.12),
    inset 0 1px 0 rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .project-gallery {
  box-shadow: 0 25px 80px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .project-gallery-arrow {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .project-gallery-note {
  color: rgba(71, 85, 105, 0.73);
}

html[data-theme="light"] .gallery-project-popup {
  color: rgb(15, 23, 42);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14),
    0 0 26px rgba(47, 132, 255, 0.18);
}

html[data-theme="light"] .gallery-project-popup strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .project-type-badge {
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: rgb(15, 23, 42);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .app-showcase-badge {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14),
    0 0 22px rgba(89, 255, 174, 0.25),
    inset 0 1px 0 rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .app-showcase-icon {
  color: rgb(0, 204, 108);
  box-shadow: 0 0 16px rgba(105, 255, 179, 0.42),
    inset 0 1px 0 rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .app-showcase-copy small {
  color: rgba(0, 204, 92, 0.72);
}

html[data-theme="light"] .app-showcase-copy strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .dailydo-app-badge-v2 {
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 12px 28px rgba(18, 86, 255, 0.5),
    0 0 20px rgba(72, 213, 255, 0.55),
    inset 0 1px 0 rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .dailydo-app-phone {
  border: 2px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14),
    inset 0 0 12px rgba(54, 124, 255, 0.18);
}

html[data-theme="light"] .dailydo-app-text small {
  color: rgba(0, 158, 204, 0.9);
}

html[data-theme="light"] .dailydo-app-text strong {
  color: rgb(15, 23, 42);
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .dailydo-app-status {
  border: 2px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .dailydo-app-text small {
  color: rgb(0, 159, 204) !important;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .dailydo-app-text strong {
  color: rgb(15, 23, 42) !important;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.14),
    0 0 5px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .auth-signin-btn {
  color: rgb(15, 23, 42);
  background: rgba(15, 23, 42, 0.006);
}

html[data-theme="light"] .auth-signout {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .auth-lock-toast p {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .auth-lock-btn {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .auth-admin-link {
  color: rgb(15, 23, 42);
  background: rgba(15, 23, 42, 0.005);
}

html[data-theme="light"] .auth-hello:hover {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .members-badge, html[data-theme="light"] .premium-badge {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .members-resource-link {
  color: rgb(15, 23, 42) !important;
}

html[data-theme="light"] .brand-mark {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .video-play {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .video-label {
  color: rgb(0, 104, 204);
}

html[data-theme="light"] .study-hero .hero-stats .live-learners--reg strong {
  color: rgb(204, 143, 0) !important;
}

html[data-theme="light"] .hero-stats .view-hint {
  color: rgb(0, 161, 204);
}

html[data-theme="light"] .project-brand-thumb::before {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .project-brand-thumb::after {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.01), transparent 42%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 27px,
      rgba(15, 23, 42, 0.004) 28px
    );
}

html[data-theme="light"] .project-live-label {
  color: rgb(0, 204, 93);
}

html[data-theme="light"] .project-brand-icon {
  color: rgb(15, 23, 42);
  background: rgba(15, 23, 42, 0.012);
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .project-brand-main small {
  color: rgba(71, 85, 105, 0.9);
}

html[data-theme="light"] .project-brand-main strong {
  color: rgb(15, 23, 42);
}

html[data-theme="light"] .project-brand-mini-ui {
  border: 1px solid rgba(203, 213, 225, 0.9);
}

html[data-theme="light"] .project-brand-mini-ui span, html[data-theme="light"] .project-brand-mini-ui small {
  color: rgba(71, 85, 105, 0.89);
}

html[data-theme="light"] .project-brand-mini-ui b {
  color: rgb(15, 23, 42);
}

@media (max-width: 760px) {
  html[data-theme="light"] .nav-links {
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.14);
  }
}

@media (max-width: 620px) {
  html[data-theme="light"] .university-tools-grid p {
    color: rgba(0, 91, 204, 0.63);
  }
}


/* ---- safety nets: make sure nothing is white-on-white ---- */
html[data-theme="light"] body {
  background: #f6f8fc;
  color: #0f172a;
}
html[data-theme="light"] .noise,
html[data-theme="light"] .glow,
html[data-theme="light"] .glow-one,
html[data-theme="light"] .glow-two,
html[data-theme="light"] .glow-three,
html[data-theme="light"] body::before {
  opacity: .35 !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] b,
html[data-theme="light"] strong,
html[data-theme="light"] label,
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] small,
html[data-theme="light"] td,
html[data-theme="light"] th {
  color: #0f172a;
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .18) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(15, 23, 42, .42) !important;
}
html[data-theme="light"] option { background: #ffffff; color: #0f172a; }

/* keep gradient-text headings readable */
html[data-theme="light"] h1 span,
html[data-theme="light"] h2 span {
  color: #1d5fd0;
}

/* buttons that sit on brand gradients keep white text */
html[data-theme="light"] .primary-btn,
html[data-theme="light"] .primary,
html[data-theme="light"] .talk-btn,
html[data-theme="light"] .platform-card-button,
html[data-theme="light"] .project-modal-primary {
  color: #ffffff !important;
}

/* ============================================================
   PAGE-LEVEL + JS-WIDGET OVERRIDES
   These pages (leaderboard, premium, account, login, news,
   my-progress, dashboard, admin pages) and the JS widgets define
   their own dark colours inside the page, so they need explicit
   light-mode rules or they would stay dark / go invisible.
   ============================================================ */

/* --- generic surfaces used across the sub-pages --- */
html[data-theme="light"] .card,
html[data-theme="light"] .row,
html[data-theme="light"] .item,
html[data-theme="light"] .m,
html[data-theme="light"] .pro-card,
html[data-theme="light"] .hw-lead,
html[data-theme="light"] .howitworks,
html[data-theme="light"] .notice-card,
html[data-theme="light"] .fbm-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}

html[data-theme="light"] .card h1,
html[data-theme="light"] .card h2,
html[data-theme="light"] .card h3,
html[data-theme="light"] .m-name,
html[data-theme="light"] .nm,
html[data-theme="light"] .hw-rank .nm,
html[data-theme="light"] .fbm-card p,
html[data-theme="light"] .m-body b,
html[data-theme="light"] .kv b {
  color: #0f172a !important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] .meta,
html[data-theme="light"] .m-sub,
html[data-theme="light"] .empty,
html[data-theme="light"] .note,
html[data-theme="light"] .kv span,
html[data-theme="light"] .hint,
html[data-theme="light"] .filter-col label,
html[data-theme="light"] .back {
  color: rgba(15, 23, 42, .62) !important;
}

/* --- tabs / chips / filters --- */
html[data-theme="light"] .tab,
html[data-theme="light"] .chip {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .14) !important;
  color: rgba(15, 23, 42, .70) !important;
}
html[data-theme="light"] .tab.active,
html[data-theme="light"] .chip.active {
  background: linear-gradient(135deg, #1d66ff, #2f84ff) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="light"] .filters select,
html[data-theme="light"] .search {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .18) !important;
}
html[data-theme="light"] .filters option,
html[data-theme="light"] .filters optgroup {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* --- leaderboard rows: keep premium gold readable --- */
html[data-theme="light"] .row.pro,
html[data-theme="light"] .hw-rank.pro {
  background: linear-gradient(90deg, rgba(255, 196, 60, .20), rgba(255, 255, 255, 1)) !important;
  border-color: rgba(200, 145, 10, .45) !important;
}
html[data-theme="light"] .row.pro .nm,
html[data-theme="light"] .hw-rank.pro .nm { color: #7a4d00 !important; }
html[data-theme="light"] .tag-pro { color: #3a2700 !important; }
html[data-theme="light"] .hw-sub,
html[data-theme="light"] .pts b,
html[data-theme="light"] .hw-rank .pt { color: #a06a00 !important; }
html[data-theme="light"] .rank { color: #334155 !important; }
html[data-theme="light"] .pts span { color: rgba(15, 23, 42, .55) !important; }
html[data-theme="light"] .row.me,
html[data-theme="light"] .hw-rank.me .nm { color: #1d5fd0 !important; }

/* --- header / nav / account menu (js/auth.js) --- */
html[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .brand { color: #0f172a !important; }
html[data-theme="light"] .acc-trigger {
  background: rgba(15, 23, 42, .05) !important;
  border-color: rgba(15, 23, 42, .12) !important;
}
html[data-theme="light"] .acc-menu {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .16) !important;
}
html[data-theme="light"] .acc-item,
html[data-theme="light"] .acc-fullname { color: #0f172a !important; }
html[data-theme="light"] .acc-email { color: rgba(15, 23, 42, .58) !important; }
html[data-theme="light"] .acc-item:hover { background: rgba(15, 23, 42, .05) !important; }

/* --- popups built in JS (welcome, profile, gate, ticker, feedback) --- */
html[data-theme="light"] .wp-card,
html[data-theme="light"] .pc-card,
html[data-theme="light"] .itp-card,
html[data-theme="light"] .ps-card,
html[data-theme="light"] .rg-card,
html[data-theme="light"] .fbm-modal,
html[data-theme="light"] .nt-banner {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .14) !important;
  color: #0f172a !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .18) !important;
}
html[data-theme="light"] .wp-card h2,
html[data-theme="light"] .pc-card h3,
html[data-theme="light"] .wp-list li,
html[data-theme="light"] .nt-title { color: #0f172a !important; }
html[data-theme="light"] .wp-sub,
html[data-theme="light"] .pc-sub,
html[data-theme="light"] .pc-hint { color: rgba(15, 23, 42, .62) !important; }
html[data-theme="light"] .wp-overlay,
html[data-theme="light"] .pc-ov,
html[data-theme="light"] .itp-ov,
html[data-theme="light"] .ps-ov {
  background: rgba(15, 23, 42, .35) !important;
}

/* --- tables (dashboard / admin) --- */
html[data-theme="light"] table,
html[data-theme="light"] thead th {
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .10) !important;
}
html[data-theme="light"] tbody td { border-color: rgba(15, 23, 42, .07) !important; }

/* --- buttons that must keep white text on coloured fills --- */
html[data-theme="light"] .primary,
html[data-theme="light"] .primary-btn,
html[data-theme="light"] .btn.gold,
html[data-theme="light"] .pc-save,
html[data-theme="light"] .wp-signin,
html[data-theme="light"] .auth-signin-btn { color: #ffffff !important; }
html[data-theme="light"] .btn.gold,
html[data-theme="light"] .tag-pro { color: #3a2700 !important; }

/* --- secondary/ghost buttons --- */
html[data-theme="light"] .btn,
html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .primary.ghost {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .16) !important;
  color: #0f172a !important;
}

/* --- feedback widget bubble --- */
html[data-theme="light"] .fw-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
}

/* ============================================================
   LIGHT MODE FIX PACK  (from local testing)
   1) kill the dark grain/glow so the page is clean white
   2) flip every remaining dark card (year, semester, module,
      tools, whatsapp, feedback, filters) so text is readable
   ============================================================ */

/* --- 1. clean background: remove the dark grain + heavy glows --- */
html[data-theme="light"] .noise { display: none !important; }
html[data-theme="light"] .glow,
html[data-theme="light"] .glow-one,
html[data-theme="light"] .glow-two,
html[data-theme="light"] .glow-three { opacity: .18 !important; }
html[data-theme="light"] body { background: #f6f8fc !important; }
html[data-theme="light"] body::before { display: none !important; }

/* --- 2. year / semester selection cards --- */
html[data-theme="light"] .year-card,
html[data-theme="light"] .selection-year-card,
html[data-theme="light"] .semester-select-card,
html[data-theme="light"] .semester-selector,
html[data-theme="light"] .semester-navigator,
html[data-theme="light"] .semester-select-step,
html[data-theme="light"] .collection-empty-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}
html[data-theme="light"] .year-card h3,
html[data-theme="light"] .year-card b,
html[data-theme="light"] .semester-select-card h3,
html[data-theme="light"] .semester-navigator-copy h3,
html[data-theme="light"] .semester-navigator-copy h2 { color: #0f172a !important; }
html[data-theme="light"] .year-card p,
html[data-theme="light"] .year-card-status,
html[data-theme="light"] .semester-select-card small,
html[data-theme="light"] .semester-navigator-copy p { color: rgba(15, 23, 42, .62) !important; }

/* selected / active year+semester keep the brand blue, white text */
html[data-theme="light"] .year-card[aria-pressed="true"],
html[data-theme="light"] .year-card.is-active,
html[data-theme="light"] .semester-select-card.is-active,
html[data-theme="light"] .active-sem {
  background: linear-gradient(135deg, #1d66ff, #2f84ff) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="light"] .year-card[aria-pressed="true"] h3,
html[data-theme="light"] .year-card[aria-pressed="true"] p,
html[data-theme="light"] .year-card[aria-pressed="true"] .year-card-status,
html[data-theme="light"] .year-card.is-active h3,
html[data-theme="light"] .year-card.is-active p,
html[data-theme="light"] .semester-select-card.is-active h3,
html[data-theme="light"] .semester-select-card.is-active small { color: #ffffff !important; }

/* --- 3. module cards (IP / DCN / MC / FC / EAC) --- */
html[data-theme="light"] .module-card,
html[data-theme="light"] .module-card-content {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}
html[data-theme="light"] .module-card h3,
html[data-theme="light"] .module-card b { color: #0f172a !important; }
html[data-theme="light"] .module-card p,
html[data-theme="light"] .module-card small { color: rgba(15, 23, 42, .62) !important; }
/* the big module tile (IP/DCN) keeps its blue gradient + white letters */
html[data-theme="light"] .module-generic-visual { color: #ffffff !important; }

/* --- 4. resource cards + filters --- */
html[data-theme="light"] .resource-card,
html[data-theme="light"] .resource-panel,
html[data-theme="light"] .filter-panel,
html[data-theme="light"] .filter-field,
html[data-theme="light"] .resource-popup-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .resource-card h3 { color: #0f172a !important; }
html[data-theme="light"] .resource-card p,
html[data-theme="light"] .resource-meta { color: rgba(15, 23, 42, .62) !important; }

/* --- 5. student tool cards --- */
html[data-theme="light"] .student-tool-card,
html[data-theme="light"] .student-tool-card-featured,
html[data-theme="light"] .student-tool-card-coming {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}
html[data-theme="light"] .student-tool-card h3 { color: #0f172a !important; }
html[data-theme="light"] .student-tool-card p { color: rgba(15, 23, 42, .62) !important; }

/* --- 6. WhatsApp channel box --- */
html[data-theme="light"] .whatsapp-channel-box {
  background: #ffffff !important;
  border-color: rgba(25, 196, 99, .35) !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
}
html[data-theme="light"] .whatsapp-channel-box h3 { color: #0f172a !important; }
html[data-theme="light"] .whatsapp-channel-box p { color: rgba(15, 23, 42, .62) !important; }

/* --- 7. feedback section --- */
html[data-theme="light"] .feedback-section,
html[data-theme="light"] .feedback-card,
html[data-theme="light"] .feedback-form,
html[data-theme="light"] .feedback-copy {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .feedback-section h2,
html[data-theme="light"] .feedback-copy h2 { color: #0f172a !important; }
html[data-theme="light"] .feedback-copy p { color: rgba(15, 23, 42, .62) !important; }

/* --- 8. hero how-it-works + quicklinks --- */
html[data-theme="light"] .howitworks {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .12) !important;
}
html[data-theme="light"] .hiw-step b { color: #0f172a !important; }
html[data-theme="light"] .hiw-step small { color: rgba(15, 23, 42, .60) !important; }
html[data-theme="light"] .hero-hint { color: rgba(15, 23, 42, .70) !important; }
html[data-theme="light"] .hero-ql {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .14) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .study-path-btn {
  background: #ffffff !important;
  border-color: rgba(47, 132, 255, .45) !important;
}
html[data-theme="light"] .study-path-btn .study-path-text strong { color: #0f172a !important; }

/* --- 9. footer / notice / misc dark panels --- */
html[data-theme="light"] footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .notice-card,
html[data-theme="light"] .notice-text {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, .10) !important;
}

/* --- 10. anything still using a near-black inline panel --- */
html[data-theme="light"] .study-terminal,
html[data-theme="light"] .terminal-bar,
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ============================================================
   LIGHT MODE FIX PACK 2
   ============================================================ */

/* --- 1. SIGN IN button (was white-on-white / invisible) --- */
html[data-theme="light"] .auth-signin-btn {
  background: linear-gradient(135deg, #12a854, #2fd47f) !important;
  border: 1px solid rgba(18, 168, 84, .55) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(18, 168, 84, .28) !important;
  text-shadow: none !important;
}
html[data-theme="light"] .auth-signin-btn:hover { filter: brightness(1.05); }

/* --- 2. "students online" + "Members Registered" pills --- */
html[data-theme="light"] .live-learners {
  background: rgba(25, 196, 99, .12) !important;
  border: 1px solid rgba(25, 196, 99, .40) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}
html[data-theme="light"] .live-learners span,
html[data-theme="light"] .live-learners b,
html[data-theme="light"] .live-learners strong {
  color: #0f172a !important;
}
html[data-theme="light"] .live-learners b,
html[data-theme="light"] .live-learners strong { color: #0b7a3f !important; }

html[data-theme="light"] .live-learners--reg {
  background: rgba(255, 176, 32, .14) !important;
  border-color: rgba(200, 140, 10, .45) !important;
}
html[data-theme="light"] .live-learners--reg b,
html[data-theme="light"] .live-learners--reg strong { color: #a06a00 !important; }

/* --- 3. MODULE tiles (IP / DCN / MC / FC / EAC): strong blue + white letters --- */
html[data-theme="light"] .module-generic-visual {
  background:
    radial-gradient(circle at 28% 20%, rgba(120, 220, 255, .40), transparent 34%),
    linear-gradient(135deg, #2f84ff, #1546b8) !important;
  border: 1px solid rgba(29, 95, 208, .35) !important;
}
html[data-theme="light"] .module-generic-visual span,
html[data-theme="light"] .module-generic-visual b {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .22) !important;
}

/* module card meta */
html[data-theme="light"] .module-card .module-update-badge {
  color: #ffffff !important;
}

/* --- 4. EXAM COUNTDOWN bar (uses inline styles -> needs !important) --- */
html[data-theme="light"] #examCountdown {
  background: rgba(47, 132, 255, .10) !important;
  border: 1px solid rgba(29, 95, 208, .35) !important;
  color: #14418f !important;
}
html[data-theme="light"] #examCountdown b,
html[data-theme="light"] #examCountdown strong,
html[data-theme="light"] #examCountdown span {
  color: #14418f !important;
}

/* --- 5. "View Selected Resources" button --- */
html[data-theme="light"] .resource-library-action,
html[data-theme="light"] .collection-action-btn {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .16) !important;
  color: #0f172a !important;
}
/* ============================================================
   FIX: mobile "View All Resources" — hide resources past the
   first 4 on mobile until the toggle button is pressed.
   The JS (main.js) already adds/removes .mobile-hidden-resource;
   this rule is what actually hides them. Mobile only (<=760px),
   so desktop is completely unaffected.
   ============================================================ */
@media (max-width: 760px) {
  .resource-card.mobile-hidden-resource { display: none !important; }
}

/* ============================================================
   "View All Resources" mobile button — styled (was plain text)
   Additive only. Shows on mobile where the JS un-hides it.
   ============================================================ */
.resource-mobile-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.resource-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid rgba(55, 213, 255, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(47, 132, 255, 0.18), rgba(55, 213, 255, 0.10));
  color: #eaf6ff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(47, 132, 255, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.resource-view-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(55, 213, 255, 0.85);
  background: linear-gradient(135deg, rgba(47, 132, 255, 0.28), rgba(55, 213, 255, 0.16));
  box-shadow: 0 16px 40px rgba(47, 132, 255, 0.32);
}
.resource-view-btn:active { transform: translateY(0); }
.resource-view-btn span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #37d5ff, #2f84ff);
  color: #04121f;
  font-size: 13px;
  font-weight: 900;
  transition: transform 0.2s ease;
}
.resource-view-btn:hover span { transform: translateY(2px); }

/* light theme */
html[data-theme="light"] .resource-view-btn {
  background: #ffffff;
  border-color: rgba(29, 95, 208, 0.35);
  color: #14418f;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .resource-view-btn:hover {
  border-color: rgba(29, 95, 208, 0.7);
  box-shadow: 0 16px 40px rgba(29, 95, 208, 0.20);
}
/* ============================================================
   RESOURCE OPEN COUNTS + POPULAR TAG + SORT CONTROL
   Additive only. Counts + Popular tag sit in their own inline row
   ABOVE the actions, so they never overlap the Open button.
   ============================================================ */
.resource-open-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 4px 0 14px;
  position: relative;
  z-index: 1;
}
.opens-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #cfe7ff;
  background: rgba(47, 132, 255, 0.14);
  border: 1px solid rgba(55, 213, 255, 0.28);
}
.popular-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #3a1a00;
  background: linear-gradient(135deg, #ffb347, #ff8a3d);
  border: 1px solid rgba(255, 140, 60, 0.5);
  box-shadow: 0 6px 16px rgba(255, 130, 40, 0.28);
}
html[data-theme="light"] .opens-badge {
  color: #14418f;
  background: rgba(47, 132, 255, 0.10);
  border-color: rgba(29, 95, 208, 0.30);
}

.resource-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.resource-sort-bar .rsb-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  margin-right: 2px;
}
.resource-sort-bar .rsb-btn {
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(100, 181, 255, 0.24);
  transition: .16s ease;
}
.resource-sort-bar .rsb-btn:hover {
  color: #fff;
  border-color: rgba(120, 190, 255, 0.55);
}
.resource-sort-bar .rsb-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #1d66ff, #2f84ff);
  border-color: transparent;
}

/* light theme */
html[data-theme="light"] .opens-badge {
  color: #14418f;
  background: rgba(47, 132, 255, 0.10);
  border-color: rgba(29, 95, 208, 0.30);
}
html[data-theme="light"] .resource-sort-bar .rsb-btn {
  background: #ffffff;
  color: rgba(15, 23, 42, 0.70);
  border-color: rgba(15, 23, 42, 0.14);
}
html[data-theme="light"] .resource-sort-bar .rsb-btn.is-active {
  color: #ffffff;
}
/* admin-only "HIDDEN" marker on resource cards (students never see hidden ones) */
.hidden-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #fff;
  background: linear-gradient(135deg, #c6304a, #e2536c);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(160,20,50,.35);
}

/* student-only "Unlocked for you" tag (admin-granted semester access) */
.unlocked-badge {
  position: relative;
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #04240f;
  background: linear-gradient(135deg, #19c463, #56e08a);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(25,196,99,.3);
}