/* NBDS v542 - colourful student-first visual polish + lightweight motion.
   Pure CSS/inline-vector friendly: no heavy background photos or animation libraries. */
:root{
  --nbds-forest:#075b3f;
  --nbds-emerald:#0b8f59;
  --nbds-mint:#dff8ec;
  --nbds-sky:#e7f5ff;
  --nbds-blue:#2f80ed;
  --nbds-sun:#ffd45a;
  --nbds-coral:#ff7a6d;
  --nbds-purple:#8b6cf6;
  --nbds-ink:#102f27;
  --nbds-fun-shadow:0 14px 34px rgba(25,92,66,.10);
  --nbds-fun-shadow-hover:0 20px 46px rgba(25,92,66,.16);
}

/* Gentle colour in the canvas without reducing text contrast. */
html:not(.nbds-printing) body{
  background-image:
    radial-gradient(circle at 8% 8%, rgba(255,212,90,.11), transparent 22rem),
    radial-gradient(circle at 92% 18%, rgba(47,128,237,.08), transparent 24rem),
    radial-gradient(circle at 72% 82%, rgba(139,108,246,.07), transparent 22rem);
  background-attachment:scroll;
}

/* Main student/public cards get a more playful but still academic surface. */
body.nbds-fun-student :is(.card,[class$="-card"],[class*=" card"],article),
body.nbds-fun-public :is(.card,[class$="-card"],[class*=" card"],article),
body.nbds-fun-tools :is(.card,[class$="-card"],[class*=" card"],article){
  border-color:rgba(20,128,84,.15)!important;
  box-shadow:var(--nbds-fun-shadow);
}

/* Alternating accent edge: visual variety with zero extra image requests. */
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(.card,[class$="-card"],[class*=" card"],article):nth-of-type(4n+1){--nbds-card-accent:var(--nbds-sun)}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(.card,[class$="-card"],[class*=" card"],article):nth-of-type(4n+2){--nbds-card-accent:#7ddfc0}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(.card,[class$="-card"],[class*=" card"],article):nth-of-type(4n+3){--nbds-card-accent:#9ec8ff}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(.card,[class$="-card"],[class*=" card"],article):nth-of-type(4n){--nbds-card-accent:#c2b3ff}

body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready{
  position:relative;
  isolation:isolate;
  transition:transform .22s cubic-bezier(.2,.75,.3,1),box-shadow .22s ease,border-color .22s ease;
}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready::after{
  content:"";
  position:absolute;
  inset:auto 16px 0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:var(--nbds-card-accent,#7ddfc0);
  opacity:.7;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready:hover{
    transform:translateY(-4px) scale(1.008);
    box-shadow:var(--nbds-fun-shadow-hover);
    border-color:rgba(20,128,84,.25)!important;
  }
}

/* Buttons feel responsive without expensive ripples or JS libraries. */
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(button,.btn,[class*="button"],a[class*="btn"]):not(.nbds-chat-fab):not(.nbds-whatsapp-float){
  transition:transform .16s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(button,.btn,[class*="button"],a[class*="btn"]):not(:disabled):hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
  }
}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(button,.btn,[class*="button"],a[class*="btn"]):not(:disabled):active{
  transform:translateY(0) scale(.98);
}

/* Cheerful pills / chips. */
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(.badge,.pill,.chip,[class*="badge"],[class*="pill"],[class*="chip"]){
  box-shadow:0 5px 14px rgba(23,87,64,.07);
}

/* Lightweight vector sticker tray injected only into suitable heroes. */
.nbds-fun-hero{position:relative!important;overflow:hidden!important;isolation:isolate}
.nbds-fun-sticker-tray{
  position:absolute;
  z-index:1;
  right:clamp(14px,3vw,34px);
  top:clamp(14px,3vw,30px);
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
  opacity:.96;
}
.nbds-fun-sticker{
  width:clamp(36px,4.4vw,54px);
  height:clamp(36px,4.4vw,54px);
  display:grid;
  place-items:center;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 10px 24px rgba(3,48,33,.18);
  transform:rotate(var(--nbds-sticker-tilt,0deg));
  animation:nbdsStickerFloat 4.8s ease-in-out infinite;
  animation-delay:var(--nbds-sticker-delay,0s);
  backdrop-filter:blur(4px);
}
.nbds-fun-sticker svg{width:72%;height:72%;display:block}
.nbds-fun-sticker:nth-child(1){background:#fff3b0;--nbds-sticker-tilt:-7deg;--nbds-sticker-delay:-.8s}
.nbds-fun-sticker:nth-child(2){background:#dff3ff;--nbds-sticker-tilt:5deg;--nbds-sticker-delay:-2.1s}
.nbds-fun-sticker:nth-child(3){background:#eee8ff;--nbds-sticker-tilt:-2deg;--nbds-sticker-delay:-3.2s}
@keyframes nbdsStickerFloat{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:0 -6px;rotate:2deg}
}

/* Decorative sparkles stay behind real content. */
.nbds-fun-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  width:180px;height:180px;
  right:-45px;bottom:-55px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.24) 0 10%,transparent 11%),
             radial-gradient(circle at 65% 55%,rgba(255,212,90,.28) 0 7%,transparent 8%),
             rgba(255,255,255,.06);
  pointer-events:none;
}
.nbds-fun-hero > *:not(.nbds-fun-sticker-tray){position:relative;z-index:2}

/* Quick page arrival: 260ms only, GPU-friendly and disabled when requested. */
html.nbds-fun-page-enter body{animation:nbdsPageIn .26s ease-out both}
@keyframes nbdsPageIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Student dashboard headings get small energetic accent marks. */
body.nbds-fun-student :is(h1,h2).nbds-fun-heading::after,
body.nbds-fun-tools :is(h1,h2).nbds-fun-heading::after{
  content:"✦";
  display:inline-block;
  margin-left:.32em;
  color:#f3b800;
  font-size:.58em;
  vertical-align:top;
  transform:rotate(9deg);
  text-shadow:0 3px 8px rgba(243,184,0,.2);
}

/* Fast off-screen rendering; JS only marks safe below-the-fold blocks. */
.nbds-perf-lazy-section{
  content-visibility:auto;
  contain-intrinsic-size:auto 520px;
}

/* Immediate click feedback while the next document is loading. */
html.nbds-nav-pending a.nbds-nav-pressed,
html.nbds-nav-pending button.nbds-nav-pressed{
  transform:scale(.97)!important;
  filter:saturate(1.12) brightness(.98);
}

/* Installed PWA uses the same lively canvas. */
html.nbds-mobile-app-mode body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools){
  background-color:#f7fcfa;
}

@media (max-width:720px){
  .nbds-fun-sticker-tray{right:10px;top:10px;gap:6px;opacity:.90}
  .nbds-fun-sticker{width:34px;height:34px;border-radius:12px;box-shadow:0 7px 16px rgba(3,48,33,.15)}
  body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready::after{inset:auto 12px 0;height:2px}
  html:not(.nbds-printing) body{background-attachment:scroll}
}

@media (prefers-reduced-motion:reduce){
  html.nbds-fun-page-enter body,
  .nbds-fun-sticker,
  body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready,
  body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) :is(button,.btn,[class*="button"],a[class*="btn"]){
    animation:none!important;transition:none!important;transform:none!important;translate:none!important;
  }
}

@media print{
  html body{background-image:none!important}
  .nbds-fun-sticker-tray{display:none!important}
  .nbds-fun-card-ready::after{display:none!important}
  .nbds-perf-lazy-section{content-visibility:visible!important;contain-intrinsic-size:none!important}
}

/* v542 fallback accent sequencing for cards whose class list has extra tokens. */
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready:nth-child(4n+1){--nbds-card-accent:var(--nbds-sun)}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready:nth-child(4n+2){--nbds-card-accent:#7ddfc0}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready:nth-child(4n+3){--nbds-card-accent:#9ec8ff}
body:is(.nbds-fun-student,.nbds-fun-public,.nbds-fun-tools) .nbds-fun-card-ready:nth-child(4n){--nbds-card-accent:#c2b3ff}