/* =====================================================================
   ExamNexus AI — Home "Glow-Up" Theme  (examnexus-glowup.css)
   ---------------------------------------------------------------------
   ADDITIVE, REVERSIBLE skin layer. Loaded as the LAST stylesheet at the
   end of <body> in base.html so it wins the cascade over styles.css and
   the inline <style> block in index.html. It only restyles existing
   classes — no markup or JS changes — so every Jinja condition / link /
   permission keeps working. Remove the <link> to fully revert.
   Uses the locally-hosted "Space Grotesk" face already declared in
   styles.css, so it stays 100% offline.
   ===================================================================== */

:root {
  --enx-bg-0:#070b1c;
  --enx-bg-1:#0b1230;
  --enx-cyan:#34e0e6;
  --enx-blue:#5b86ff;
  --enx-violet:#9a6bff;
  --enx-pink:#ff5ea0;
  --enx-amber:#ffb240;
  --enx-ink:#eef2ff;
  --enx-muted:#9aa6cc;
  --enx-line:rgba(255,255,255,.10);
  --enx-line-2:rgba(255,255,255,.16);
  --enx-disp:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --enx-grad:linear-gradient(110deg,var(--enx-cyan),var(--enx-blue));
  --enx-grad-play:linear-gradient(115deg,var(--enx-violet),var(--enx-blue) 55%,var(--enx-cyan));
}

/* ---- Background: richer, more energetic glow on the existing dark base */
body::before{
  background:
    radial-gradient(820px 520px at 82% -6%, rgba(91,134,255,.26), transparent 60%),
    radial-gradient(720px 480px at 4% 8%, rgba(154,107,255,.20), transparent 60%),
    radial-gradient(680px 520px at 50% 110%, rgba(52,224,230,.14), transparent 62%) !important;
  animation:none !important;
}

/* ---- Display typography */
h1,h2,h3,h4,.navbar-brand,.welcome-title,.cta-title,.plan-title,
.category-title,.updates-heading,.section-card .card-title,.app-label,
.stat-number,.feature-content h4{
  font-family:var(--enx-disp) !important;
  letter-spacing:-.4px;
}

/* =====================================================================
   NAVBAR
   ===================================================================== */
.navbar{
  background:linear-gradient(180deg,rgba(10,16,38,.92),rgba(10,16,38,.72)) !important;
  border-bottom:1px solid var(--enx-line) !important;
  backdrop-filter:blur(14px);
}
.navbar-brand{font-weight:700 !important;}
/* Top-level nav links only — NOT the .sub-nav-link items inside the dropdowns
   (which keep their own light/dark-on-panel colours from styles.css). */
.navbar-nav > .nav-item > .nav-link{
  color:rgba(220,228,255,.78) !important;
  border-radius:10px;
  transition:color .2s ease, background .2s ease, transform .2s ease !important;
}
.navbar-nav > .nav-item > .nav-link:hover{
  color:var(--enx-cyan) !important;
  background:rgba(91,134,255,.12) !important;
  transform:translateY(-1px);
}
.user-avatar-dot{background:var(--enx-grad) !important;}

/* Subscribe / trial pill keeps its warning intent but glows */
.pulse-shadow{box-shadow:0 6px 22px rgba(255,178,64,.45) !important;}

/* =====================================================================
   LATEST NEWS & UPDATES  (index.html updates-section)
   ===================================================================== */
.updates-heading{
  font-weight:700 !important;
  font-size:clamp(1.6rem,3vw,2.1rem) !important;
  background:linear-gradient(120deg,#fff 35%,#bcd4ff) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}
.updates-subheading{color:var(--enx-muted) !important;}

/* News cards — playful, rounded, lift + image-zoom on hover */
.news-card{
  border:1px solid var(--enx-line) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28) !important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s !important;
  overflow:hidden;
}
.news-card:hover{
  transform:translateY(-7px) !important;
  border-color:rgba(127,233,255,.45) !important;
  box-shadow:0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(127,233,255,.25) !important;
}
.news-card-featured{
  border-color:rgba(255,178,64,.45) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,178,64,.28) !important;
}
.news-card .card-img-wrapper{height:200px;}
.news-card-featured .card-img-wrapper{height:260px;}
.news-card .card-img-wrapper img,
.news-card .card-img-wrapper iframe{
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.news-card:hover .card-img-wrapper img{transform:scale(1.06);}
.news-card .news-title{
  font-family:var(--enx-disp) !important;
  font-weight:700 !important;letter-spacing:-.4px;
}
/* category / featured / media badges */
.news-card .badge.bg-primary{
  background:var(--enx-grad) !important;color:#04122b !important;
  font-weight:800 !important;border:none !important;letter-spacing:.4px;
}
.news-card .badge.bg-warning{
  background:linear-gradient(135deg,var(--enx-amber),#ff7a59) !important;
  color:#1a1205 !important;border:none !important;font-weight:800 !important;
  box-shadow:0 6px 16px rgba(255,140,60,.45);
}
.news-card .badge.bg-secondary{           /* tag chips */
  background:rgba(91,134,255,.24) !important;
  border:1px solid rgba(130,170,255,.55) !important;
  color:#eaf1ff !important;border-radius:20px !important;
  font-weight:600 !important;font-size:.78rem !important;letter-spacing:.2px;
  padding:.42em .9em !important;transition:.18s;
}
.news-card .badge.bg-secondary:hover{
  background:var(--enx-grad) !important;border-color:transparent !important;color:#04122b !important;
}
/* Datetime / meta — brighter than Bootstrap's text-white-50, cyan clock icon */
.news-card small.text-white-50{color:rgba(228,236,255,.82) !important;font-weight:500;}
.news-card small.text-white-50 i{color:var(--enx-cyan) !important;opacity:1 !important;}
.news-card .btn-outline-light{
  border-radius:50px !important;font-weight:700 !important;
  border-color:var(--enx-line-2) !important;
}
.news-card .btn-outline-light:hover{
  background:var(--enx-grad) !important;color:#04122b !important;border-color:transparent !important;
}
.updates-view-all-desktop,.updates-view-all-mobile .btn{
  border:1px solid var(--enx-line-2) !important;color:var(--enx-ink) !important;
  background:rgba(255,255,255,.05) !important;border-radius:50px !important;font-weight:700 !important;
}
.updates-view-all-desktop:hover,.updates-view-all-mobile .btn:hover{
  background:var(--enx-grad) !important;color:#04122b !important;border-color:transparent !important;
}

/* =====================================================================
   AUTHENTICATED DASHBOARD — section cards + app tiles
   ===================================================================== */
.section-card{
  border-radius:24px !important;
  border:1px solid var(--enx-line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important;
}
.section-card .card-title{font-weight:700 !important;}
.section-card-purple{box-shadow:inset 0 0 0 1px rgba(154,107,255,.18),0 12px 34px rgba(0,0,0,.3) !important;}
.section-card-blue{box-shadow:inset 0 0 0 1px rgba(91,134,255,.18),0 12px 34px rgba(0,0,0,.3) !important;}
.section-card-green{box-shadow:inset 0 0 0 1px rgba(52,224,230,.18),0 12px 34px rgba(0,0,0,.3) !important;}
.section-card-orange{box-shadow:inset 0 0 0 1px rgba(255,178,64,.20),0 12px 34px rgba(0,0,0,.3) !important;}
.section-card-pink{box-shadow:inset 0 0 0 1px rgba(255,94,160,.20),0 12px 34px rgba(0,0,0,.3) !important;}
.section-icon-purple{color:var(--enx-violet) !important;}
.section-icon-blue{color:var(--enx-blue) !important;}
.section-icon-green{color:var(--enx-cyan) !important;}
.section-icon-orange{color:var(--enx-amber) !important;}
.section-icon-pink{color:var(--enx-pink) !important;}

/* App tiles (My Roadmaps, Questions, Generate Paper, …) */
.app-button .app-icon-container{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  padding:1.4rem .8rem;border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--enx-line);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,border-color .25s,box-shadow .25s;
  height:100%;text-align:center;
}
.app-button:hover .app-icon-container{
  transform:translateY(-6px);
  background:rgba(91,134,255,.12);
  border-color:rgba(127,233,255,.4);
  box-shadow:0 16px 36px rgba(0,0,0,.4);
}
.app-button .app-icon{
  font-size:1.7rem;width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#04122b;
  background:var(--enx-grad);box-shadow:0 8px 22px rgba(52,200,230,.4);
  transition:transform .25s;
}
.app-button:hover .app-icon{transform:scale(1.08) rotate(-3deg);}
.app-button .app-label{
  font-weight:600 !important;color:var(--enx-ink) !important;font-size:.95rem;line-height:1.25;
}

/* =====================================================================
   WELCOME / HERO  (non-authenticated)
   ===================================================================== */
.welcome-hero{
  background:linear-gradient(165deg,rgba(91,134,255,.14),rgba(154,107,255,.10) 45%,rgba(52,224,230,.10)) !important;
  border:1px solid rgba(127,233,255,.22) !important;
  border-radius:32px !important;
  padding:clamp(2.2rem,5vw,4rem) clamp(1.2rem,4vw,3rem) !important;
  position:relative;overflow:hidden;
}
.welcome-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 50% -12%,rgba(52,224,230,.18),transparent 60%);
}
.welcome-hero > *{position:relative;z-index:1;}

.score-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800 !important;font-size:.82rem;letter-spacing:.8px;text-transform:uppercase;
  color:var(--enx-cyan) !important;
  background:rgba(52,224,230,.10) !important;
  border:1px solid rgba(52,224,230,.30) !important;
  padding:.6rem 1.1rem !important;border-radius:40px !important;
}
.score-badge i{color:var(--enx-amber) !important;}

.welcome-title{
  font-size:clamp(2.6rem,7vw,5rem) !important;
  font-weight:700 !important;line-height:1 !important;letter-spacing:-2px !important;
  text-shadow:none !important;margin-bottom:1rem !important;
}
.gradient-text{
  background:var(--enx-grad-play) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.welcome-title-sub{
  display:block;color:rgba(220,228,255,.92);
  font-size:clamp(1.2rem,3vw,2rem);font-weight:600;letter-spacing:-.5px;margin-top:.35rem;
}
.welcome-subtitle{
  color:var(--enx-muted) !important;font-size:clamp(1rem,1.6vw,1.2rem) !important;line-height:1.6 !important;
}

/* stat strip */
.stats-bar{
  display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1.5rem,6vw,4rem);
  margin-top:2rem;
}
.stats-bar .stat-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;}
.stats-bar .stat-number{
  font-size:clamp(2.2rem,4vw,3rem) !important;font-weight:700 !important;line-height:1;
  background:var(--enx-grad) !important;-webkit-background-clip:text !important;
  background-clip:text !important;color:transparent !important;
}
.stats-bar .stat-label{font-size:.85rem;font-weight:600;color:var(--enx-muted);letter-spacing:.4px;text-transform:uppercase;}

/* =====================================================================
   PRO PLAN — section + feature cards
   ===================================================================== */
.plan-section{margin-top:clamp(2.5rem,5vw,4rem);}
.plan-header{text-align:center;margin-bottom:2.2rem;}
.plan-title{
  font-size:clamp(1.7rem,3.4vw,2.6rem) !important;font-weight:700 !important;
  margin-bottom:.7rem !important;letter-spacing:-1px;
}
.plan-description{color:var(--enx-muted) !important;max-width:700px;margin:0 auto;line-height:1.6;}

.feature-category{
  border-radius:22px !important;
  border:1px solid var(--enx-line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important;
  padding:1.8rem !important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s !important;
}
.feature-category:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 20px 46px rgba(0,0,0,.42) !important;
}
.category-header{border-bottom:1px solid var(--enx-line) !important;}
.category-icon{
  font-size:1.2rem !important;width:46px;height:46px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;color:#04122b !important;
  margin-right:.85rem !important;
}
.category-title{font-weight:700 !important;}

/* per-category accent (maps existing colour classes to the new palette) */
.feature-cat-blue   .category-icon{background:linear-gradient(135deg,var(--enx-cyan),var(--enx-blue));box-shadow:0 8px 20px rgba(52,200,230,.4);}
.feature-cat-blue:hover  {border-color:rgba(91,134,255,.5) !important;}
.feature-cat-green  .category-icon{background:linear-gradient(135deg,#34e6c0,#2bb6e6);box-shadow:0 8px 20px rgba(43,182,230,.4);}
.feature-cat-green:hover {border-color:rgba(52,224,200,.5) !important;}
.feature-cat-purple .category-icon{background:linear-gradient(135deg,var(--enx-violet),var(--enx-blue));box-shadow:0 8px 20px rgba(120,100,255,.42);}
.feature-cat-purple:hover{border-color:rgba(154,107,255,.5) !important;}
.feature-cat-orange .category-icon{background:linear-gradient(135deg,var(--enx-amber),#ff7a59);box-shadow:0 8px 20px rgba(255,140,60,.42);}
.feature-cat-orange:hover{border-color:rgba(255,178,64,.5) !important;}

.feature-item{
  border-radius:14px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.05);
  transition:transform .25s ease, background .25s ease !important;
}
.feature-item:hover{transform:translateX(6px) !important;background:rgba(255,255,255,.09) !important;}
.feature-icon{
  font-size:1rem !important;width:32px;height:32px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--enx-cyan) !important;background:rgba(52,224,230,.12);border:1px solid rgba(52,224,230,.22);
  margin-top:0 !important;
}
.feature-content h4{font-weight:700 !important;color:var(--enx-ink) !important;}
.feature-content p{color:var(--enx-muted) !important;}

/* =====================================================================
   FINAL CTA + buttons
   ===================================================================== */
.welcome-cta{
  background:linear-gradient(120deg,rgba(91,134,255,.22),rgba(154,107,255,.16) 55%,rgba(52,224,230,.16)) !important;
  border:1px solid rgba(127,233,255,.26) !important;
  border-radius:28px !important;position:relative;overflow:hidden;
}
.welcome-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 88% -20%,rgba(52,224,230,.28),transparent 60%);
}
.welcome-cta > *{position:relative;z-index:1;}
.cta-title{font-size:clamp(1.8rem,3.6vw,2.6rem) !important;font-weight:700 !important;letter-spacing:-1px;}
.cta-description{color:rgba(225,232,255,.9) !important;}

.btn-cta-primary,
.welcome-cta .btn-success{
  background:var(--enx-grad) !important;border:none !important;color:#04122b !important;
  font-weight:800 !important;border-radius:50px !important;
  box-shadow:0 10px 28px rgba(52,200,230,.45) !important;
}
.btn-cta-primary:hover,
.welcome-cta .btn-success:hover{
  transform:translateY(-2px) !important;box-shadow:0 14px 34px rgba(52,200,230,.6) !important;color:#04122b !important;
}
.welcome-cta .btn-outline-light{
  border-radius:50px !important;font-weight:700 !important;border-color:var(--enx-line-2) !important;
}
.welcome-cta .btn-outline-light:hover{background:rgba(255,255,255,.12) !important;color:#fff !important;}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{
  background:rgba(6,9,22,.6) !important;
  border-top:1px solid var(--enx-line) !important;
}
footer a{color:rgba(154,166,204,.9) !important;text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--enx-cyan) !important;}

/* =====================================================================
   NEWS & UPDATES feed — Spotlight harmonisation (info/list.html)
   ---------------------------------------------------------------------
   The feed already ships its own glassy styling; these rules only nudge
   its accent colours toward the glow-up palette and lay out the optional
   full-width "Spotlight" featured hero. Pure visual, no markup coupling.
   ===================================================================== */
.feed-eyebrow{color:var(--enx-cyan) !important;background:rgba(52,224,230,.10) !important;border-color:rgba(52,224,230,.28) !important;}
.cat-chip.active{box-shadow:0 8px 22px rgba(120,100,255,.4) !important;}
.feed-card-link{color:var(--enx-cyan) !important;}
.read-min,.feed-card-summary a,.mini-tag{color:var(--enx-cyan) !important;}

/* Spotlight: featured hero spanning the row, media + body side by side */
.feed-spotlight{
  display:grid;grid-template-columns:1.05fr 1fr;
  border-radius:24px !important;margin-bottom:1.75rem;min-height:340px;
}
/* Show the whole banner (no crop); let the letterbox area match the card's
   own glass background instead of the colourful category gradient. */
.feed-spotlight .feed-card-media{height:100%;min-height:300px;background:transparent;padding:1.5rem;}
.feed-spotlight .feed-card-media img{object-fit:contain;object-position:center;border-radius:14px;}
.feed-spotlight .feed-card-body{padding:2.1rem 2.3rem;}
.feed-spotlight .feed-card-title{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;}
.feed-spotlight .feed-card-summary{font-size:1rem;}
.feed-spotlight-flag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--enx-violet);margin-bottom:.4rem;
}
@media (max-width:767.98px){
  .feed-spotlight{grid-template-columns:1fr;}
  .feed-spotlight .feed-card-media{min-height:200px;height:200px;}
  .feed-spotlight .feed-card-body{padding:1.3rem 1.3rem 1.5rem;}
}

/* =====================================================================
   NEWS & UPDATES — Admin screens (info/manage.html, info/form.html)
   ---------------------------------------------------------------------
   Bring the CRUD pages in line with the public feed: gradient Space Grotesk
   header, cyan eyebrow, glass cards, and a cyan→blue primary action button.
   Purely visual — form ids, table markup, and JS hooks are untouched.
   ===================================================================== */
.info-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.info-admin-eyebrow{
  display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--enx-cyan);
  background:rgba(52,224,230,.10);border:1px solid rgba(52,224,230,.28);
  padding:.32rem .85rem;border-radius:50px;
}
.info-admin-title{
  font-family:var(--enx-disp);font-weight:700;line-height:1.08;
  font-size:clamp(1.7rem,3.2vw,2.4rem);margin:.55rem 0 .3rem;
  background:linear-gradient(120deg,#fff 35%,#bcd4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.info-admin-sub{color:var(--enx-muted) !important;margin:0;}

/* Glass cards on the admin pages get the feed's softer radius + border */
.info-admin .glass-card,.glass-card.info-admin-card{
  border-radius:18px !important;border:1px solid var(--enx-line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) !important;
}

/* Cyan→blue primary action (Create / Save) */
.btn-enx{
  background:var(--enx-grad) !important;border:none !important;color:#04122b !important;
  font-weight:700 !important;border-radius:50px !important;
  box-shadow:0 8px 22px rgba(52,200,230,.4) !important;transition:transform .2s,box-shadow .2s !important;
}
.btn-enx:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(52,200,230,.55) !important;color:#04122b !important;}
.info-admin .btn-outline-light{border-radius:50px !important;border-color:var(--enx-line-2) !important;}
.info-admin .btn-outline-light:hover{background:rgba(255,255,255,.10) !important;color:#fff !important;}
.info-admin .card-header h6.text-primary,.info-admin .card-header .text-primary{color:var(--enx-cyan) !important;}

/* =====================================================================
   RESPONSIVE polish (Bootstrap grid already stacks the columns)
   ===================================================================== */
@media (max-width:575.98px){
  .welcome-hero{border-radius:24px !important;}
  .stats-bar{gap:1.4rem;}
  .cta-actions .btn{width:100%;margin-right:0 !important;}
  .cta-actions .btn + .btn{margin-top:.75rem;}
  .news-card-featured .card-img-wrapper{height:210px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}
