/* v99 — approved compact header system + mobile lessons drawer polish */
:root{
  --abs-green:#123f31;
  --abs-green-dark:#0f3329;
  --abs-green-mid:#174b3a;
  --abs-gold:#c89c4a;
  --abs-cream:#fff8ea;
  --abs-cream-2:#f5ecd8;
  --abs-ink:#102c24;
}

/* LOGOTIP / WORDMARK ----------------------------------------------------- */
.abs-wordmark,
#topnav .abs-wordmark,
body.page-index nav#topnav .nav-logo.abs-wordmark,
body.page-app #topnav .logo.nav-logo.abs-wordmark{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:.18em!important;
  text-decoration:none!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  height:auto!important;
  max-width:none!important;
}
.abs-wordmark-main,
.abs-wordmark-sub,
#topnav .abs-wordmark-main,
#topnav .abs-wordmark-sub{
  display:inline-block!important;
  position:static!important;
  top:auto!important;
  transform:none!important;
  vertical-align:baseline!important;
  line-height:1!important;
  letter-spacing:-.048em!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-weight:900!important;
  text-shadow:0 1px 0 rgba(0,0,0,.16)!important;
}
.abs-wordmark-main,#topnav .abs-wordmark-main{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.abs-wordmark-sub,#topnav .abs-wordmark-sub{color:var(--abs-gold)!important;-webkit-text-fill-color:var(--abs-gold)!important;font-size:.72em!important;}
#topnav .brand-logo-img,#topnav .site-brand-logo{display:none!important;}

/* SHARED HEADER ---------------------------------------------------------- */
body.page-index nav#topnav,
body.page-app #topnav,
body:not(.page-index) #topnav{
  height:72px!important;
  min-height:72px!important;
  padding:0 clamp(1.35rem,3vw,3rem)!important;
  background:radial-gradient(circle at 50% 50%, rgba(38,83,65,.70) 0%, rgba(18,63,49,.98) 44%, #0f3329 100%)!important;
  border-bottom:1px solid rgba(200,156,74,.50)!important;
  box-shadow:0 8px 22px rgba(12,35,28,.16)!important;
  overflow:visible!important;
  color:#fff!important;
}

/* INDEX DESKTOP ---------------------------------------------------------- */
body.page-index nav#topnav{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr)!important;
  align-items:center!important;
  gap:clamp(1rem,2vw,2rem)!important;
}
body.page-index nav#topnav .nav-logo.abs-wordmark{
  grid-column:1!important;
  justify-self:start!important;
  font-size:clamp(1.75rem,2vw,2.05rem)!important;
}
body.page-index nav#topnav .nav-links{
  grid-column:2!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(1.05rem,1.9vw,1.7rem)!important;
  margin:0!important;
  flex:none!important;
}
body.page-index nav#topnav .nav-links a:not(.nav-cta){
  color:rgba(255,255,255,.88)!important;
  -webkit-text-fill-color:rgba(255,255,255,.88)!important;
  font-weight:850!important;
  font-size:.98rem!important;
  text-decoration:none!important;
  text-shadow:0 1px 0 rgba(0,0,0,.15)!important;
}
body.page-index nav#topnav .nav-links a:not(.nav-cta):hover{color:#fff!important;-webkit-text-fill-color:#fff!important;}
body.page-index nav#topnav #nav-auth-area{
  grid-column:3!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  flex:none!important;
}

/* BUTTONS --------------------------------------------------------------- */
body.page-index nav#topnav .nav-cta,
body.page-index nav#topnav .nav-links a.nav-cta,
body.page-index nav#topnav #nav-auth-area .nav-login-btn,
body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
body.page-index nav#topnav #nav-auth-area a:not(.user-menu-btn):not(.nav-user),
body.page-app #topnav .nav-login-btn,
body.page-app #topnav .nav-unlock-btn,
#topnav .nav-login-btn,
#topnav .nav-unlock-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 1.35rem!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffaf0 0%,#f5ecd8 100%)!important;
  border:1.5px solid var(--abs-gold)!important;
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
  font-weight:900!important;
  font-size:.95rem!important;
  line-height:1!important;
  text-shadow:none!important;
  text-decoration:none!important;
  box-shadow:0 7px 18px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.86)!important;
  opacity:1!important;
  filter:none!important;
  white-space:nowrap!important;
}
body.page-index nav#topnav .nav-cta,
body.page-index nav#topnav .nav-links a.nav-cta{
  min-width:210px!important;
  margin-left:.55rem!important;
}
body.page-index nav#topnav #nav-auth-area .nav-login-btn,
body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
body.page-index nav#topnav #nav-auth-area a:not(.user-menu-btn):not(.nav-user),
body.page-app #topnav .nav-login-btn{
  min-width:102px!important;
}
body.page-index nav#topnav .nav-cta *,
body.page-index nav#topnav #nav-auth-area .nav-login-btn *,
body.page-app #topnav .nav-login-btn *{
  color:var(--abs-ink)!important;-webkit-text-fill-color:var(--abs-ink)!important;text-shadow:none!important;
}
body.page-index nav#topnav .nav-cta:hover,
body.page-index nav#topnav #nav-auth-area .nav-login-btn:hover,
body.page-app #topnav .nav-login-btn:hover{
  background:linear-gradient(180deg,#ffffff 0%,#f6e8c8 100%)!important;
  color:var(--abs-ink)!important;-webkit-text-fill-color:var(--abs-ink)!important;
  transform:translateY(-1px)!important;
}

/* APP DESKTOP ------------------------------------------------------------ */
body.page-app #topnav,
body:not(.page-index) #topnav{
  display:flex!important;
  align-items:center!important;
  gap:1rem!important;
}
body.page-app #topnav .logo.nav-logo.abs-wordmark{
  display:inline-flex!important;
  font-size:clamp(1.75rem,2vw,2.05rem)!important;
  margin-right:auto!important;
}
body.page-app #topnav .app-mobile-brand{display:none!important;}
body.page-app #topnav #progress-bar-wrap{display:none!important;}
body.page-app #topnav #nav-auth-area{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:1rem!important;
  width:auto!important;
}
body.page-app #topnav #progress-label,
body.page-app #topnav .nav-help-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.12)!important;
}
body.page-app #topnav #progress-label{
  min-width:66px!important;
  padding:0 .85rem!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-weight:900!important;
  font-size:1rem!important;
}
body.page-app #topnav .nav-help-btn{
  width:46px!important;min-width:46px!important;
  color:#ff3f76!important;-webkit-text-fill-color:#ff3f76!important;
  font-weight:900!important;font-size:1.05rem!important;
}
body.page-app #topnav .nav-hamburger,
body.page-app #topnav #nav-unlock-banner{display:none!important;}

/* HERO / CTA buttons outside header ------------------------------------- */
body.page-index .hero-actions .btn-primary,
body.page-index .demo-secondary-cta .btn-primary,
body.page-index .real-stories-cta .btn-primary,
body.page-index section .btn-primary,
body.page-index a.btn-primary:not(.nav-cta){
  background:linear-gradient(135deg,#1F3A2E 0%,#173428 100%)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1.5px solid rgba(31,58,46,.95)!important;
  box-shadow:0 14px 30px rgba(31,58,46,.22)!important;
  text-shadow:none!important;
}

/* MOBILE ---------------------------------------------------------------- */
@media(max-width:760px){
  body.page-index nav#topnav,
  body.page-app #topnav,
  body:not(.page-index) #topnav{
    height:64px!important;min-height:64px!important;padding:0 16px!important;gap:.75rem!important;
  }
  body.page-index nav#topnav{
    display:flex!important;grid-template-columns:none!important;
  }
  body.page-index nav#topnav .nav-logo.abs-wordmark{
    display:inline-flex!important;flex:1 1 auto!important;min-width:0!important;font-size:1.45rem!important;
  }
  body.page-index nav#topnav .nav-links{
    display:flex!important;align-items:center!important;justify-content:flex-end!important;margin-left:auto!important;gap:.7rem!important;flex:0 0 auto!important;
  }
  body.page-index nav#topnav .nav-links a:not(.nav-cta){display:none!important;}
  body.page-index nav#topnav .nav-cta{
    height:40px!important;min-height:40px!important;min-width:0!important;padding:0 1rem!important;margin:0!important;font-size:.86rem!important;
  }
  body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
  body.page-index nav#topnav #nav-auth-area a:not(.user-menu-btn):not(.nav-user){
    height:40px!important;min-height:40px!important;min-width:82px!important;padding:0 .85rem!important;font-size:.86rem!important;
  }

  body.page-app #topnav .logo.nav-logo.abs-wordmark{display:none!important;}
  body.page-app #topnav .app-mobile-brand.abs-wordmark{display:none!important;}
  body.page-app #topnav #nav-auth-area{width:100%!important;margin-left:0!important;justify-content:flex-end!important;gap:.7rem!important;}
  body.page-app #topnav #progress-label{height:40px!important;min-height:40px!important;min-width:58px!important;padding:0 .65rem!important;font-size:.92rem!important;}
  body.page-app #topnav .nav-help-btn{height:40px!important;width:40px!important;min-width:40px!important;font-size:.95rem!important;}
  body.page-app #topnav .nav-login-btn{height:40px!important;min-height:40px!important;min-width:84px!important;padding:0 .85rem!important;font-size:.86rem!important;}
}
@media(max-width:430px){
  body.page-index nav#topnav{padding:0 12px!important;gap:.5rem!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:1.18rem!important;}
  body.page-index nav#topnav .nav-cta{height:38px!important;min-height:38px!important;padding:0 .78rem!important;font-size:.76rem!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn{height:38px!important;min-height:38px!important;min-width:72px!important;padding:0 .65rem!important;font-size:.78rem!important;}
}

/* MOBILE LESSONS DRAWER -------------------------------------------------- */
#sidebar .sidebar-mobile-topbar{
  min-height:68px!important;height:68px!important;padding:0 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(15,44,36,.08)!important;background:#fffdf8!important;
}
#sidebar .sidebar-mobile-brand-block{padding:0!important;margin:0!important;min-height:0!important;display:flex!important;align-items:center!important;}
#sidebar .sidebar-kicker{font-size:.82rem!important;letter-spacing:.14em!important;color:#102c24!important;-webkit-text-fill-color:#102c24!important;font-weight:900!important;}
#sidebar .sidebar-close-btn{width:46px!important;height:46px!important;min-width:46px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;background:#fff!important;border:1px solid rgba(15,44,36,.08)!important;box-shadow:0 8px 22px rgba(16,44,36,.10)!important;}
#sidebar .unit-title,#sidebar .lesson-title,#sidebar .unit-btn,#sidebar button{color:#102c24!important;-webkit-text-fill-color:#102c24!important;}
body.sidebar-open,body.sidebar-open-mobile{overflow:hidden!important;}


/* v100 — verified compact header to match approved mockup */
:root{--abs-green:#123f31;--abs-green-dark:#0f3329;--abs-gold:#c89c4a;--abs-ink:#102c24;}
body.page-index nav#topnav,
body.page-app #topnav,
body:not(.page-index) #topnav{
  width:calc(100% - 48px)!important;
  max-width:1840px!important;
  margin:16px auto 0!important;
  height:68px!important;
  min-height:68px!important;
  padding:0 34px!important;
  border-radius:7px!important;
  background:radial-gradient(circle at 50% 50%,rgba(42,83,67,.72) 0%,rgba(18,63,49,.98) 46%,#0f3329 100%)!important;
  border:1px solid rgba(200,156,74,.32)!important;
  box-shadow:0 8px 18px rgba(9,30,23,.22)!important;
  overflow:visible!important;
}
body.page-index nav#topnav{display:grid!important;grid-template-columns:330px 1fr auto!important;align-items:center!important;gap:24px!important;}
body.page-index nav#topnav .nav-logo.abs-wordmark{grid-column:1!important;justify-self:start!important;font-size:1.82rem!important;}
body.page-index nav#topnav .nav-links{grid-column:2!important;justify-self:center!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:34px!important;margin:0!important;}
body.page-index nav#topnav #nav-auth-area{grid-column:3!important;justify-self:end!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;margin:0!important;}
body.page-index nav#topnav .nav-links a:not(.nav-cta){font-size:1rem!important;font-weight:850!important;color:rgba(255,255,255,.9)!important;-webkit-text-fill-color:rgba(255,255,255,.9)!important;text-decoration:none!important;}
body.page-index nav#topnav .nav-cta,
body.page-index nav#topnav .nav-links a.nav-cta,
body.page-index nav#topnav #nav-auth-area .nav-login-btn,
body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
body.page-index nav#topnav #nav-auth-area a:not(.user-menu-btn):not(.nav-user),
body.page-app #topnav .nav-login-btn,
body.page-app #topnav .nav-unlock-btn,
#topnav .nav-login-btn,
#topnav .nav-unlock-btn{
  height:46px!important;min-height:46px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0 1.35rem!important;border-radius:999px!important;
  background:linear-gradient(180deg,#fffaf0 0%,#f5ecd8 100%)!important;
  border:1.5px solid var(--abs-gold)!important;color:var(--abs-ink)!important;-webkit-text-fill-color:var(--abs-ink)!important;
  font-weight:900!important;font-size:.98rem!important;line-height:1!important;text-shadow:none!important;text-decoration:none!important;
  box-shadow:0 7px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;opacity:1!important;filter:none!important;
}
body.page-index nav#topnav .nav-cta,body.page-index nav#topnav .nav-links a.nav-cta{min-width:230px!important;margin-left:0!important;}
body.page-index nav#topnav #nav-auth-area .nav-login-btn,body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),body.page-app #topnav .nav-login-btn{min-width:104px!important;}
body.page-index nav#topnav .nav-cta *,body.page-index nav#topnav .nav-cta,body.page-index nav#topnav #nav-auth-area .nav-login-btn *,body.page-index nav#topnav #nav-auth-area .nav-login-btn,body.page-app #topnav .nav-login-btn,body.page-app #topnav .nav-login-btn *{color:var(--abs-ink)!important;-webkit-text-fill-color:var(--abs-ink)!important;text-shadow:none!important;}
.abs-wordmark,#topnav .abs-wordmark{display:inline-flex!important;align-items:baseline!important;gap:.16em!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important;}
.abs-wordmark-main,.abs-wordmark-sub,#topnav .abs-wordmark-main,#topnav .abs-wordmark-sub{font-family:Georgia,'Times New Roman',serif!important;font-weight:900!important;line-height:1!important;letter-spacing:-.055em!important;position:static!important;top:auto!important;transform:none!important;vertical-align:baseline!important;}
.abs-wordmark-main,#topnav .abs-wordmark-main{color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:1em!important;}
.abs-wordmark-sub,#topnav .abs-wordmark-sub{color:var(--abs-gold)!important;-webkit-text-fill-color:var(--abs-gold)!important;font-size:.72em!important;}
body.page-app #topnav{display:flex!important;align-items:center!important;gap:1rem!important;}
body.page-app #topnav .logo.nav-logo.abs-wordmark{display:inline-flex!important;font-size:1.82rem!important;margin-right:auto!important;}
body.page-app #topnav #nav-auth-area{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:1rem!important;width:auto!important;}
body.page-app #topnav #progress-label,body.page-app #topnav .nav-help-btn{height:46px!important;min-height:46px!important;border-radius:999px!important;background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.24)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 14px rgba(0,0,0,.12)!important;}
body.page-app #topnav #progress-label{min-width:66px!important;padding:0 .85rem!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:900!important;font-size:1rem!important;}
body.page-app #topnav .nav-help-btn{width:46px!important;min-width:46px!important;color:#ff3f76!important;-webkit-text-fill-color:#ff3f76!important;font-weight:900!important;font-size:1.05rem!important;}
body.page-app #topnav .nav-hamburger,body.page-app #topnav #nav-unlock-banner,body.page-app #topnav #progress-bar-wrap{display:none!important;}
body.page-app #topnav .app-mobile-brand{display:none!important;}
@media(max-width:760px){
  body.page-index nav#topnav,body.page-app #topnav,body:not(.page-index) #topnav{width:calc(100% - 24px)!important;margin:10px auto 0!important;height:58px!important;min-height:58px!important;padding:0 14px!important;border-radius:6px!important;}
  body.page-index nav#topnav{display:flex!important;grid-template-columns:none!important;gap:.65rem!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:1.28rem!important;flex:1 1 auto!important;min-width:0!important;}
  body.page-index nav#topnav .nav-links{display:flex!important;margin-left:auto!important;gap:.65rem!important;}
  body.page-index nav#topnav .nav-links a:not(.nav-cta){display:none!important;}
  body.page-index nav#topnav .nav-cta{height:38px!important;min-height:38px!important;min-width:0!important;padding:0 .85rem!important;font-size:.8rem!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn,body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){height:38px!important;min-height:38px!important;min-width:74px!important;padding:0 .7rem!important;font-size:.8rem!important;}
  body.page-app #topnav .logo.nav-logo.abs-wordmark{display:none!important;}
  body.page-app #topnav #nav-auth-area{width:100%!important;margin-left:0!important;gap:.65rem!important;}
  body.page-app #topnav #progress-label,body.page-app #topnav .nav-help-btn,body.page-app #topnav .nav-login-btn{height:38px!important;min-height:38px!important;}
  body.page-app #topnav #progress-label{min-width:56px!important;font-size:.9rem!important;padding:0 .62rem!important;}
  body.page-app #topnav .nav-help-btn{width:38px!important;min-width:38px!important;font-size:.92rem!important;}
  body.page-app #topnav .nav-login-btn{min-width:76px!important;font-size:.8rem!important;padding:0 .72rem!important;}
}
@media(max-width:430px){body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:1.05rem!important;}body.page-index nav#topnav .nav-cta{font-size:.72rem!important;padding:0 .62rem!important;}body.page-index nav#topnav #nav-auth-area .nav-login-btn{font-size:.74rem!important;min-width:68px!important;}}

/* v100.1 — mobile header fits all three items without covering logo */
@media(max-width:760px){
  body.page-index nav#topnav{padding:0 10px!important;gap:8px!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark{
    flex:0 1 124px!important;
    min-width:96px!important;
    max-width:124px!important;
    font-size:1.02rem!important;
    overflow:hidden!important;
  }
  body.page-index nav#topnav .nav-links{gap:8px!important;margin-left:auto!important;}
  body.page-index nav#topnav .nav-cta{
    width:150px!important;min-width:150px!important;max-width:150px!important;
    height:38px!important;min-height:38px!important;
    padding:0 .45rem!important;font-size:.74rem!important;
  }
  body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){
    width:66px!important;min-width:66px!important;max-width:66px!important;
    height:38px!important;min-height:38px!important;
    padding:0 .35rem!important;font-size:.74rem!important;
  }
}
@media(max-width:370px){
  body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:.92rem!important;min-width:86px!important;max-width:104px!important;}
  body.page-index nav#topnav .nav-cta{width:132px!important;min-width:132px!important;font-size:.68rem!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn{width:62px!important;min-width:62px!important;font-size:.7rem!important;}
}

/* v100.2 — stronger mobile overrides for CTA/auth in index header */
@media(max-width:760px){
  body.page-index nav#topnav .nav-links a.nav-cta,
  body.page-index nav#topnav .nav-cta{
    width:150px!important;min-width:150px!important;max-width:150px!important;
    height:38px!important;min-height:38px!important;
    padding:0 .45rem!important;font-size:.74rem!important;
  }
  body.page-index nav#topnav #nav-auth-area,
  body.page-index nav#topnav .nav-links #nav-auth-area{flex:0 0 auto!important;margin:0!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  body.page-index nav#topnav #nav-auth-area > .nav-login-btn,
  body.page-index nav#topnav #nav-auth-area button.nav-login-btn,
  body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){
    width:66px!important;min-width:66px!important;max-width:66px!important;
    height:38px!important;min-height:38px!important;
    padding:0 .35rem!important;font-size:.74rem!important;
    transform:none!important;
  }
}
@media(max-width:370px){
  body.page-index nav#topnav .nav-links a.nav-cta,body.page-index nav#topnav .nav-cta{width:132px!important;min-width:132px!important;max-width:132px!important;font-size:.68rem!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn{width:62px!important;min-width:62px!important;max-width:62px!important;font-size:.7rem!important;}
}

/* v100.3 — preserve full mobile wordmark */
@media(max-width:760px){
  body.page-index nav#topnav .nav-logo.abs-wordmark{
    flex:0 0 112px!important;width:112px!important;min-width:112px!important;max-width:112px!important;
    font-size:.82rem!important;overflow:visible!important;
  }
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-main,
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-sub{letter-spacing:-.06em!important;}
}

/* v100.4 — mobile wordmark scaled to fit with CTA and login */
@media(max-width:760px){
  body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:.67rem!important;}
}

/* v100.5 — force mobile child wordmark font size too */
@media(max-width:760px){
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-main{font-size:.72rem!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-sub{font-size:.52rem!important;}
}

/* v100.6 — better balanced index mobile header */
@media(max-width:760px){
  body.page-index nav#topnav{padding:0 8px!important;gap:6px!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark{flex:0 0 136px!important;width:136px!important;min-width:136px!important;max-width:136px!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-main{font-size:.92rem!important;}
  body.page-index nav#topnav .nav-logo.abs-wordmark .abs-wordmark-sub{font-size:.66rem!important;}
  body.page-index nav#topnav .nav-links{gap:6px!important;}
  body.page-index nav#topnav .nav-links a.nav-cta,body.page-index nav#topnav .nav-cta{width:132px!important;min-width:132px!important;max-width:132px!important;font-size:.68rem!important;padding:0 .32rem!important;}
  body.page-index nav#topnav #nav-auth-area .nav-login-btn,body.page-index nav#topnav #nav-auth-area button.nav-login-btn,body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){width:60px!important;min-width:60px!important;max-width:60px!important;font-size:.68rem!important;padding:0 .25rem!important;}
}

/* v101 — match approved visual mockup more closely: compact card headers, clear controls */
:root{
  --abs-green:#123f31;
  --abs-green-dark:#0d3027;
  --abs-green-soft:#1b4b3b;
  --abs-gold:#c89c4a;
  --abs-cream:#fff8ea;
  --abs-cream-2:#f5ecd8;
  --abs-ink:#102c24;
}

/* shared header card */
html body.page-index nav#topnav,
html body.page-app #topnav,
html body:not(.page-index) #topnav{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:calc(100% - 60px)!important;
  max-width:none!important;
  height:94px!important;
  min-height:94px!important;
  margin:26px auto 0!important;
  padding:0 34px!important;
  border-radius:8px!important;
  background:
    radial-gradient(circle at 52% 50%, rgba(36,82,63,.70) 0%, rgba(18,63,49,.98) 50%, #0d3027 100%)!important;
  border:1px solid rgba(200,156,74,.36)!important;
  box-shadow:0 12px 22px rgba(9,30,23,.28), inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:visible!important;
  color:#fff!important;
}

/* wordmark */
html #topnav .abs-wordmark,
html #topnav .nav-logo.abs-wordmark,
html body.page-app #topnav .logo.nav-logo.abs-wordmark{
  display:inline-flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:.18em!important;
  line-height:.95!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-decoration:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
html #topnav .abs-wordmark-main,
html #topnav .abs-wordmark-sub{
  display:inline-block!important;
  position:static!important;
  top:auto!important;
  transform:none!important;
  vertical-align:baseline!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-weight:900!important;
  line-height:.95!important;
  letter-spacing:-.06em!important;
  text-shadow:0 2px 1px rgba(0,0,0,.22)!important;
}
html #topnav .abs-wordmark-main{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:1em!important;
}
html #topnav .abs-wordmark-sub{
  color:var(--abs-gold)!important;
  -webkit-text-fill-color:var(--abs-gold)!important;
  font-size:.74em!important;
  transform:translateY(0)!important;
}

/* index desktop layout */
html body.page-index nav#topnav{
  display:grid!important;
  grid-template-columns:360px 1fr auto!important;
  align-items:center!important;
  column-gap:30px!important;
}
html body.page-index nav#topnav .nav-logo.abs-wordmark{
  grid-column:1!important;
  justify-self:start!important;
  font-size:2.25rem!important;
}
html body.page-index nav#topnav .nav-links{
  grid-column:2!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:34px!important;
  margin:0!important;
  flex:none!important;
}
html body.page-index nav#topnav .nav-links a:not(.nav-cta){
  color:rgba(255,255,255,.90)!important;
  -webkit-text-fill-color:rgba(255,255,255,.90)!important;
  font-size:1.12rem!important;
  line-height:1!important;
  font-weight:850!important;
  text-decoration:none!important;
  text-shadow:0 1px 1px rgba(0,0,0,.18)!important;
}
html body.page-index nav#topnav .nav-links a:not(.nav-cta):hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body.page-index nav#topnav #nav-auth-area{
  grid-column:3!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
}

/* header buttons */
html body.page-index nav#topnav .nav-cta,
html body.page-index nav#topnav .nav-links a.nav-cta,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
html body.page-index nav#topnav #nav-auth-area a:not(.user-menu-btn):not(.nav-user),
html body.page-app #topnav .nav-login-btn,
html body.page-app #topnav .nav-unlock-btn,
html #topnav .nav-login-btn,
html #topnav .nav-unlock-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:58px!important;
  min-height:58px!important;
  padding:0 1.55rem!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffdf6 0%,#f4ead5 100%)!important;
  border:1.5px solid var(--abs-gold)!important;
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
  opacity:1!important;
  filter:none!important;
  text-shadow:none!important;
  font-weight:900!important;
  font-size:1.05rem!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 9px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.92)!important;
  white-space:nowrap!important;
}
html body.page-index nav#topnav .nav-cta,
html body.page-index nav#topnav .nav-links a.nav-cta{
  min-width:275px!important;
  margin-left:24px!important;
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
}
html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn),
html body.page-app #topnav .nav-login-btn{
  min-width:124px!important;
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
}
html body.page-index nav#topnav .nav-cta *,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn *,
html body.page-app #topnav .nav-login-btn *{
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
  text-shadow:none!important;
}
html body.page-index nav#topnav .nav-cta:hover,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn:hover,
html body.page-app #topnav .nav-login-btn:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(180deg,#fff 0%,#f7e6c3 100%)!important;
}

/* app desktop layout */
html body.page-app #topnav{
  display:flex!important;
  align-items:center!important;
  gap:1.55rem!important;
}
html body.page-app #topnav .logo.nav-logo.abs-wordmark{
  display:inline-flex!important;
  font-size:2.25rem!important;
  margin-right:auto!important;
  flex:0 0 auto!important;
}
html body.page-app #topnav #nav-auth-area{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:1.45rem!important;
  width:auto!important;
  flex:0 0 auto!important;
}
html body.page-app #topnav #progress-label,
html body.page-app #topnav .nav-help-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:56px!important;
  min-height:56px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 7px 16px rgba(0,0,0,.18)!important;
}
html body.page-app #topnav #progress-label{
  min-width:80px!important;
  padding:0 1rem!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:900!important;
  font-size:1.16rem!important;
  opacity:1!important;
}
html body.page-app #topnav .nav-help-btn{
  width:56px!important;
  min-width:56px!important;
  color:#ff3f76!important;
  -webkit-text-fill-color:#ff3f76!important;
  font-size:1.15rem!important;
  font-weight:900!important;
  padding:0!important;
}
html body.page-app #topnav .nav-login-btn{height:56px!important;min-height:56px!important;min-width:124px!important;}
html body.page-app #topnav .nav-hamburger,
html body.page-app #topnav #nav-unlock-banner,
html body.page-app #topnav #progress-bar-wrap,
html body.page-app #topnav .app-mobile-brand{display:none!important;}

/* lesson drawer as in approved mockup */
html #sidebar .sidebar-mobile-topbar{
  height:74px!important;
  min-height:74px!important;
  padding:0 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  background:#fffdf8!important;
  border-bottom:1px solid rgba(15,44,36,.10)!important;
}
html #sidebar .sidebar-mobile-brand-block{padding:0!important;margin:0!important;display:flex!important;align-items:center!important;min-height:0!important;}
html #sidebar .sidebar-kicker{
  color:#102c24!important;
  -webkit-text-fill-color:#102c24!important;
  font-size:.86rem!important;
  letter-spacing:.16em!important;
  font-weight:900!important;
  line-height:1!important;
}
html #sidebar .sidebar-close-btn{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid rgba(15,44,36,.10)!important;
  box-shadow:0 9px 22px rgba(16,44,36,.12)!important;
}
html #sidebar .unit-title,
html #sidebar .lesson-title,
html #sidebar .unit-btn,
html #sidebar button{
  color:#102c24!important;
  -webkit-text-fill-color:#102c24!important;
}
body.sidebar-open,body.sidebar-open-mobile{overflow:hidden!important;}

/* responsive: preserve mockup feel but fit real phones */
@media(max-width:900px){
  html body.page-index nav#topnav{
    display:flex!important;
    align-items:center!important;
    gap:1rem!important;
    grid-template-columns:none!important;
  }
  html body.page-index nav#topnav .nav-logo.abs-wordmark{
    flex:1 1 auto!important;
    min-width:0!important;
    font-size:1.85rem!important;
  }
  html body.page-index nav#topnav .nav-links{
    margin-left:auto!important;
    flex:0 0 auto!important;
    gap:.85rem!important;
  }
  html body.page-index nav#topnav .nav-links a:not(.nav-cta){display:none!important;}
}
@media(max-width:760px){
  html body.page-index nav#topnav,
  html body.page-app #topnav,
  html body:not(.page-index) #topnav{
    width:calc(100% - 24px)!important;
    height:64px!important;
    min-height:64px!important;
    margin:12px auto 0!important;
    padding:0 16px!important;
    border-radius:7px!important;
  }
  html body.page-index nav#topnav{gap:.75rem!important;}
  html body.page-index nav#topnav .nav-logo.abs-wordmark{
    flex:1 1 auto!important;
    min-width:116px!important;
    font-size:1.18rem!important;
  }
  html body.page-index nav#topnav .nav-links{gap:.65rem!important;}
  html body.page-index nav#topnav .nav-cta,
  html body.page-index nav#topnav .nav-links a.nav-cta{
    height:42px!important;
    min-height:42px!important;
    min-width:154px!important;
    width:154px!important;
    max-width:154px!important;
    padding:0 .65rem!important;
    font-size:.80rem!important;
    margin-left:0!important;
  }
  html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){
    height:42px!important;
    min-height:42px!important;
    min-width:82px!important;
    width:82px!important;
    max-width:82px!important;
    padding:0 .6rem!important;
    font-size:.80rem!important;
  }
  html body.page-app #topnav .logo.nav-logo.abs-wordmark{display:none!important;}
  html body.page-app #topnav #nav-auth-area .app-mobile-brand{display:inline-flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:center!important;min-width:0!important;text-decoration:none!important;color:#fff!important;gap:.38rem!important;}
  html body.page-app #topnav #nav-auth-area{
    width:100%!important;
    margin-left:0!important;
    justify-content:flex-end!important;
    gap:.8rem!important;
  }
  html body.page-app #topnav #progress-label,
  html body.page-app #topnav .nav-help-btn,
  html body.page-app #topnav .nav-login-btn{
    height:42px!important;
    min-height:42px!important;
  }
  html body.page-app #topnav #progress-label{min-width:62px!important;font-size:.94rem!important;padding:0 .68rem!important;}
  html body.page-app #topnav .nav-help-btn{width:42px!important;min-width:42px!important;font-size:.95rem!important;}
  html body.page-app #topnav .nav-login-btn{min-width:84px!important;font-size:.82rem!important;padding:0 .78rem!important;}
  html #sidebar .sidebar-mobile-topbar{height:72px!important;min-height:72px!important;padding:0 24px!important;}
  html #sidebar .sidebar-close-btn{width:50px!important;height:50px!important;min-width:50px!important;}
}
@media(max-width:430px){
  html body.page-index nav#topnav{padding:0 9px!important;gap:6px!important;}
  html body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:.95rem!important;min-width:124px!important;}
  html body.page-index nav#topnav .nav-cta,
  html body.page-index nav#topnav .nav-links a.nav-cta{width:132px!important;min-width:132px!important;max-width:132px!important;font-size:.68rem!important;padding:0 .35rem!important;}
  html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){width:64px!important;min-width:64px!important;max-width:64px!important;font-size:.68rem!important;padding:0 .25rem!important;}
}

/* v101.1 — keep all app header controls grouped on the right like the mockup */
html body.page-app #topnav .logo.nav-logo.abs-wordmark{margin-right:auto!important;}
html body.page-app #topnav #progress-label{margin:0!important;flex:0 0 auto!important;}
html body.page-app #topnav #nav-auth-area{margin-left:0!important;flex:0 0 auto!important;}

/* v101.2 — index mobile uses 3-column grid so Prijava never gets cropped */
@media(max-width:760px){
  html body.page-index nav#topnav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    column-gap:7px!important;
    padding:0 9px!important;
    overflow:visible!important;
  }
  html body.page-index nav#topnav .nav-logo.abs-wordmark{
    grid-column:1!important;
    justify-self:start!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    font-size:.92rem!important;
    overflow:visible!important;
  }
  html body.page-index nav#topnav .nav-links{
    grid-column:2!important;
    justify-self:end!important;
    display:flex!important;
    margin:0!important;
    gap:0!important;
    flex:none!important;
  }
  html body.page-index nav#topnav .nav-links a:not(.nav-cta){display:none!important;}
  html body.page-index nav#topnav .nav-cta,
  html body.page-index nav#topnav .nav-links a.nav-cta{
    width:126px!important;
    min-width:126px!important;
    max-width:126px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 .32rem!important;
    font-size:.66rem!important;
    margin:0!important;
  }
  html body.page-index nav#topnav #nav-auth-area{
    grid-column:3!important;
    justify-self:end!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
  }
  html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 .2rem!important;
    font-size:.66rem!important;
  }
}
@media(max-width:360px){
  html body.page-index nav#topnav .nav-logo.abs-wordmark{font-size:.78rem!important;}
  html body.page-index nav#topnav .nav-cta,html body.page-index nav#topnav .nav-links a.nav-cta{width:116px!important;min-width:116px!important;max-width:116px!important;font-size:.6rem!important;}
  html body.page-index nav#topnav #nav-auth-area .nav-login-btn,html body.page-index nav#topnav #nav-auth-area button:not(.user-menu-btn){width:58px!important;min-width:58px!important;max-width:58px!important;font-size:.6rem!important;}
}

/* v102 — user-approved direction: full-width header, flush to top, no bright center */
:root{
  --abs-green-solid:#123f31;
  --abs-green-solid-2:#184838;
}
html body.page-index nav#topnav,
html body.page-app #topnav,
html body:not(.page-index) #topnav{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1000!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:0!important;
  height:74px!important;
  min-height:74px!important;
  padding:0 28px!important;
  background:linear-gradient(90deg,var(--abs-green-solid) 0%, var(--abs-green-solid-2) 48%, var(--abs-green-solid) 100%)!important;
  border:0!important;
  border-bottom:1px solid rgba(200,156,74,.40)!important;
  box-shadow:0 4px 16px rgba(9,30,23,.18)!important;
}
html body.page-index nav#topnav{
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  column-gap:28px!important;
}
html body.page-index nav#topnav .nav-logo.abs-wordmark{
  grid-column:1!important;
  justify-self:start!important;
  font-size:2.05rem!important;
}
html body.page-index nav#topnav .nav-links{
  grid-column:2!important;
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:30px!important;
  margin:0!important;
}
html body.page-index nav#topnav #nav-auth-area{
  grid-column:3!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0!important;
}
html body.page-index nav#topnav .nav-links a:not(.nav-cta){
  font-size:1rem!important;
  font-weight:850!important;
}
html body.page-index nav#topnav .nav-cta,
html body.page-index nav#topnav .nav-links a.nav-cta,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
html body.page-app #topnav .nav-login-btn{
  height:46px!important;
  min-height:46px!important;
  border-radius:999px!important;
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
  font-size:.97rem!important;
  font-weight:900!important;
}
html body.page-index nav#topnav .nav-cta,
html body.page-index nav#topnav .nav-links a.nav-cta{
  min-width:220px!important;
  margin-left:0!important;
}
html body.page-index nav#topnav .nav-cta,
html body.page-index nav#topnav .nav-cta *,
html body.page-index nav#topnav .nav-links a.nav-cta,
html body.page-index nav#topnav .nav-links a.nav-cta *,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
html body.page-index nav#topnav #nav-auth-area .nav-login-btn *,
html body.page-app #topnav .nav-login-btn,
html body.page-app #topnav .nav-login-btn *{
  color:var(--abs-ink)!important;
  -webkit-text-fill-color:var(--abs-ink)!important;
  opacity:1!important;
  text-shadow:none!important;
}
html body.page-app #topnav{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}
html body.page-app #topnav .logo.nav-logo.abs-wordmark{
  display:inline-flex!important;
  font-size:2.05rem!important;
  margin-right:auto!important;
}
html body.page-app #topnav #nav-auth-area{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
html body.page-app #topnav #progress-label,
html body.page-app #topnav .nav-help-btn{
  height:46px!important;
  min-height:46px!important;
}
html body.page-app #topnav #progress-label{
  min-width:68px!important;
  font-size:1rem!important;
}
html body.page-app #topnav .nav-help-btn{
  width:46px!important;
  min-width:46px!important;
}
html body.page-app #topnav .nav-login-btn{
  min-width:104px!important;
}
@media (max-width:760px){
  html body.page-index nav#topnav,
  html body.page-app #topnav,
  html body:not(.page-index) #topnav{
    width:100%!important;
    margin:0!important;
    height:62px!important;
    min-height:62px!important;
    padding:0 12px!important;
    border-radius:0!important;
  }
  html body.page-index nav#topnav{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  html body.page-index nav#topnav .nav-logo.abs-wordmark{
    flex:1 1 auto!important;
    min-width:0!important;
    font-size:1.28rem!important;
  }
  html body.page-index nav#topnav .nav-links{
    gap:8px!important;
    margin-left:auto!important;
  }
  html body.page-index nav#topnav .nav-links a:not(.nav-cta){display:none!important;}
  html body.page-index nav#topnav .nav-cta,
  html body.page-index nav#topnav .nav-links a.nav-cta{
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 .95rem!important;
    font-size:.82rem!important;
  }
  html body.page-index nav#topnav #nav-auth-area .nav-login-btn,
  html body.page-app #topnav .nav-login-btn{
    min-width:82px!important;
    width:auto!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 .9rem!important;
    font-size:.82rem!important;
  }
  html body.page-app #topnav .logo.nav-logo.abs-wordmark{display:none!important;}
  html body.page-app #topnav #nav-auth-area .app-mobile-brand{display:inline-flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:center!important;min-width:0!important;text-decoration:none!important;color:#fff!important;gap:.38rem!important;}
  html body.page-app #topnav #nav-auth-area{width:100%!important;justify-content:flex-end!important;gap:10px!important;}
  html body.page-app #topnav #progress-label,
  html body.page-app #topnav .nav-help-btn{
    height:40px!important;
    min-height:40px!important;
  }
  html body.page-app #topnav #progress-label{min-width:56px!important;font-size:.92rem!important;}
  html body.page-app #topnav .nav-help-btn{width:40px!important;min-width:40px!important;}
}

/* v104 — mobile app header like approved example */
@media (max-width: 760px) {
  html body.page-app #topnav,
  html body:not(.page-index) #topnav {
    width: 100% !important;
    margin: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #123f31 0%, #184838 50%, #123f31 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(200,156,74,.38) !important;
    box-shadow: 0 3px 10px rgba(9,30,23,.16) !important;
    display: flex !important;
    align-items: center !important;
  }

  html body.page-app #topnav > .logo.nav-logo.abs-wordmark,
  html body.page-app #topnav > .logo.nav-logo,
  html body.page-app #topnav #progress-bar-wrap,
  html body.page-app #topnav #progress-label,
  html body.page-app #topnav #nav-unlock-banner,
  html body.page-app #topnav .nav-help-btn {
    display: none !important;
  }

  html body.page-app #topnav #nav-auth-area {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.page-app #topnav #nav-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 108px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: rgba(248,244,238,.10) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid rgba(248,244,238,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    font-weight: 800 !important;
    justify-self: start !important;
  }

  html body.page-app #topnav #nav-hamburger .nav-hamburger-label {
    display: inline !important;
    font-size: .96rem !important;
    line-height: 1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  html body.page-app #topnav .app-mobile-brand.abs-wordmark {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    justify-self: center !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    gap: .14em !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: 1.02rem !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .74rem !important;
    color: var(--abs-gold) !important;
    -webkit-text-fill-color: var(--abs-gold) !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    height: 42px !important;
    min-height: 42px !important;
    min-width: 86px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,#fffdf6 0%,#f4ead5 100%) !important;
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    border: 1.5px solid rgba(200,156,74,.82) !important;
    font-weight: 900 !important;
    font-size: .95rem !important;
    text-shadow: none !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  html body.page-app #topnav .nav-user .nav-avatar,
  html body.page-app #topnav .nav-user .nav-username,
  html body.page-app #topnav .nav-user svg {
    display: none !important;
  }

  html body.page-app #topnav .nav-user::before {
    content: 'Račun';
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 420px) {
  html body.page-app #topnav {
    padding: 0 8px !important;
  }
  html body.page-app #topnav #nav-hamburger {
    min-width: 94px !important;
    padding: 0 11px !important;
  }
  html body.page-app #topnav #nav-hamburger .nav-hamburger-label {
    font-size: .88rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .88rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .64rem !important;
  }
  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    min-width: 80px !important;
    font-size: .88rem !important;
    padding: 0 12px !important;
  }
}

/* v105 — tighten mobile app header + robustly hide CTA when logged in */
body.page-index.user-logged-in .mobile-sticky-cta{
  display:none !important;
}

@media (max-width: 760px) {
  html body.page-app #topnav #nav-auth-area{
    position: relative !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 108px 1fr 88px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.page-app #topnav #nav-auth-area > .nav-hamburger{
    grid-column: 1 !important;
    justify-self: start !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    flex: 0 0 108px !important;
  }

  html body.page-app #topnav #nav-auth-area > .app-mobile-brand.abs-wordmark{
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
  }

  html body.page-app #topnav #nav-auth-area > .nav-login-btn,
  html body.page-app #topnav #nav-auth-area > .nav-user{
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
  }

  html body.page-app #topnav #nav-auth-area > .nav-user{
    gap: 0 !important;
  }

  html body.page-app #topnav #nav-auth-area > .nav-user .nav-avatar,
  html body.page-app #topnav #nav-auth-area > .nav-user .nav-username,
  html body.page-app #topnav #nav-auth-area > .nav-user svg{
    display: none !important;
  }

  html body.page-app #topnav #nav-auth-area > .nav-user::before{
    content: 'Račun';
    display: block;
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav #nav-auth-area > #user-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 1200 !important;
  }
}

@media (max-width: 420px) {
  html body.page-app #topnav #nav-auth-area{
    grid-template-columns: 98px 1fr 80px !important;
    gap: 6px !important;
  }
  html body.page-app #topnav #nav-auth-area > .nav-hamburger{
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    padding: 0 10px !important;
  }
  html body.page-app #topnav #nav-auth-area > .nav-login-btn,
  html body.page-app #topnav #nav-auth-area > .nav-user{
    min-width: 80px !important;
    max-width: 80px !important;
    font-size: .88rem !important;
    padding: 0 10px !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main{
    font-size: .84rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub{
    font-size: .62rem !important;
  }
}

/* v106 — centered mobile app brand, compact account chip, readable account dropdown */
body.page-index.user-logged-in .mobile-sticky-cta {
  display: none !important;
}

@media (max-width: 760px) {
  html body.page-app #topnav #nav-auth-area {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    min-height: 42px !important;
  }

  html body.page-app #topnav #nav-hamburger,
  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
  }

  html body.page-app #topnav .app-mobile-brand.abs-wordmark {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    max-width: calc(100% - 220px) !important;
    margin: 0 !important;
    justify-content: center !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  html body.page-app #topnav #nav-hamburger {
    min-width: 102px !important;
    width: 102px !important;
    max-width: 102px !important;
    justify-content: center !important;
  }

  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    min-width: 88px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 14px !important;
    justify-content: center !important;
    justify-self: auto !important;
  }

  html body.page-app #topnav .nav-user {
    gap: 0 !important;
  }

  html body.page-app #topnav .nav-user .nav-avatar,
  html body.page-app #topnav .nav-user .nav-username,
  html body.page-app #topnav .nav-user svg {
    display: none !important;
  }

  html body.page-app #topnav .nav-user::before {
    content: 'Račun';
    display: block !important;
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.page-app .user-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(240px, calc(100vw - 16px)) !important;
    background: #fffdfa !important;
    border: 1px solid rgba(15,44,36,.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 36px rgba(15,44,36,.16) !important;
    overflow: hidden !important;
    z-index: 1400 !important;
  }

  html body.page-app .user-menu-info {
    padding: 0.95rem 1rem 0.8rem !important;
    border-bottom: 1px solid rgba(15,44,36,.08) !important;
  }

  html body.page-app .user-menu-name {
    color: #1b2e26 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

  html body.page-app .user-menu-email {
    color: #9b948a !important;
    font-size: .82rem !important;
    margin-top: 4px !important;
  }

  html body.page-app .user-menu .user-menu-btn,
  html body.page-app .user-menu a.user-menu-btn,
  html body.page-app .user-menu button.user-menu-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 0.8rem 1rem !important;
    color: #24352d !important;
    -webkit-text-fill-color: #24352d !important;
    font-size: .94rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    justify-content: flex-start !important;
  }

  html body.page-app .user-menu .user-menu-btn:hover,
  html body.page-app .user-menu a.user-menu-btn:hover,
  html body.page-app .user-menu button.user-menu-btn:hover {
    background: #f6f2ea !important;
  }

  html body.page-app .user-menu .user-menu-btn.danger {
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
  }
}

@media (max-width: 420px) {
  html body.page-app #topnav #nav-hamburger {
    min-width: 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    padding: 0 10px !important;
  }

  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    min-width: 82px !important;
    padding: 0 12px !important;
    font-size: .88rem !important;
  }

  html body.page-app #topnav .app-mobile-brand.abs-wordmark {
    max-width: calc(100% - 200px) !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .9rem !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .64rem !important;
  }
}

/* v107 — hide only floating sticky CTA for logged-in users, nav-cta stays visible */
body.page-index.user-logged-in .mobile-sticky-cta,
body.page-index .mobile-sticky-cta.auth-hidden-cta {
  display: none !important;
}

/* v107 — mobile app header centered logo + compact account */
@media (max-width: 760px) {
  html body.page-app #topnav #nav-auth-area {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 104px 1fr 104px !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }

  html body.page-app #topnav #nav-hamburger {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  html body.page-app #topnav #nav-hamburger .nav-hamburger-label {
    font-size: .93rem !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav .app-mobile-brand.abs-wordmark {
    grid-column: 2 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: .14em !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .98rem !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .73rem !important;
    line-height: 1 !important;
  }

  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 104px !important;
    text-align: center !important;
  }

  html body.page-app #topnav .nav-user .nav-avatar,
  html body.page-app #topnav .nav-user .nav-username,
  html body.page-app #topnav .nav-user svg {
    display: none !important;
  }

  html body.page-app #topnav .nav-user::before {
    content: 'Račun';
    display: block !important;
    font-weight: 900 !important;
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    line-height: 1 !important;
  }

  html body.page-app .user-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(250px, calc(100vw - 16px)) !important;
    border-radius: 18px !important;
    background: #fffdfa !important;
    border: 1px solid rgba(19,63,49,.10) !important;
    box-shadow: 0 16px 32px rgba(10,30,23,.16) !important;
    overflow: hidden !important;
  }

  html body.page-app .user-menu,
  html body.page-app .user-menu * {
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  html body.page-app .user-menu-info {
    padding: .95rem 1rem .8rem !important;
    border-bottom: 1px solid rgba(19,63,49,.08) !important;
  }

  html body.page-app .user-menu-name {
    color: #1b2e26 !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
  }

  html body.page-app .user-menu-email {
    color: #9a9388 !important;
    font-size: .82rem !important;
    margin-top: 4px !important;
  }

  html body.page-app .user-menu .user-menu-btn,
  html body.page-app .user-menu a.user-menu-btn,
  html body.page-app .user-menu button.user-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: .8rem 1rem !important;
    background: transparent !important;
    border: 0 !important;
    color: #24352d !important;
    -webkit-text-fill-color: #24352d !important;
    font-size: .93rem !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  html body.page-app .user-menu .user-menu-btn:hover,
  html body.page-app .user-menu a.user-menu-btn:hover,
  html body.page-app .user-menu button.user-menu-btn:hover {
    background: #f6f2ea !important;
  }

  html body.page-app .user-menu .user-menu-btn.danger {
    color: #c0392b !important;
    -webkit-text-fill-color: #c0392b !important;
  }
}

@media (max-width: 420px) {
  html body.page-app #topnav #nav-auth-area {
    grid-template-columns: 96px 1fr 96px !important;
  }
  html body.page-app #topnav #nav-hamburger,
  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .9rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .66rem !important;
  }
}

/* v108 — final cache-busted fixes: hide only floating CTA for logged-in, nav-cta stays */
body.page-index.user-logged-in .mobile-sticky-cta,
body.page-index .mobile-sticky-cta.auth-hidden-cta,
body.page-index .mobile-sticky-cta[hidden] {
  display: none !important;
}

/* readable account dropdown on index and app */
#nav-auth-area .user-menu,
body.page-index #nav-auth-area .user-menu,
body.page-app #nav-auth-area .user-menu {
  background: #fffdfa !important;
  border: 1px solid rgba(19,63,49,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 38px rgba(10,30,23,.18) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
#nav-auth-area .user-menu *,
body.page-index #nav-auth-area .user-menu *,
body.page-app #nav-auth-area .user-menu * {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
#nav-auth-area .user-menu-info {
  padding: .95rem 1rem .8rem !important;
  border-bottom: 1px solid rgba(19,63,49,.08) !important;
}
#nav-auth-area .user-menu-name {
  color: #1b2e26 !important;
  -webkit-text-fill-color: #1b2e26 !important;
  font-weight: 850 !important;
}
#nav-auth-area .user-menu-email {
  color: #8f857a !important;
  -webkit-text-fill-color: #8f857a !important;
}
#nav-auth-area .user-menu .user-menu-btn,
#nav-auth-area .user-menu a.user-menu-btn,
#nav-auth-area .user-menu button.user-menu-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: .8rem 1rem !important;
  background: transparent !important;
  border: 0 !important;
  color: #24352d !important;
  -webkit-text-fill-color: #24352d !important;
  font-size: .93rem !important;
  font-weight: 750 !important;
  text-align: left !important;
}
#nav-auth-area .user-menu .user-menu-btn:hover,
#nav-auth-area .user-menu a.user-menu-btn:hover,
#nav-auth-area .user-menu button.user-menu-btn:hover {
  background: #f6f2ea !important;
}
#nav-auth-area .user-menu .user-menu-btn.danger {
  color: #c0392b !important;
  -webkit-text-fill-color: #c0392b !important;
}

@media (max-width: 760px) {
  html body.page-app #topnav,
  html body:not(.page-index) #topnav {
    width: 100% !important;
    margin: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #123f31 0%, #184838 50%, #123f31 100%) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(200,156,74,.38) !important;
    box-shadow: 0 3px 10px rgba(9,30,23,.16) !important;
    display: flex !important;
    align-items: center !important;
  }

  html body.page-app #topnav > .logo.nav-logo.abs-wordmark,
  html body.page-app #topnav #progress-bar-wrap,
  html body.page-app #topnav #progress-label,
  html body.page-app #topnav #nav-unlock-banner,
  html body.page-app #topnav .nav-help-btn {
    display: none !important;
  }

  html body.page-app #topnav #nav-auth-area {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 100px 1fr 100px !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }

  html body.page-app #topnav #nav-hamburger {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }
  html body.page-app #topnav #nav-hamburger .nav-hamburger-label {
    display: inline !important;
    font-size: .9rem !important;
    line-height: 1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  html body.page-app #topnav .app-mobile-brand.abs-wordmark {
    grid-column: 2 !important;
    position: static !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: .14em !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .95rem !important;
    line-height: 1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .70rem !important;
    line-height: 1 !important;
    color: var(--abs-gold) !important;
    -webkit-text-fill-color: var(--abs-gold) !important;
  }

  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    flex: 0 0 100px !important;
    gap: 0 !important;
    text-align: center !important;
    border-radius: 999px !important;
  }
  html body.page-app #topnav .nav-user .nav-avatar,
  html body.page-app #topnav .nav-user .nav-username,
  html body.page-app #topnav .nav-user svg {
    display: none !important;
  }
  html body.page-app #topnav .nav-user::before {
    content: 'Račun';
    display: block !important;
    color: #143629 !important;
    -webkit-text-fill-color: #143629 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.page-app #nav-auth-area .user-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(250px, calc(100vw - 16px)) !important;
    z-index: 1400 !important;
  }
}

@media (max-width: 420px) {
  html body.page-app #topnav #nav-auth-area {
    grid-template-columns: 94px 1fr 94px !important;
    gap: 6px !important;
  }
  html body.page-app #topnav #nav-hamburger,
  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }
  html body.page-app #topnav #nav-hamburger .nav-hamburger-label,
  html body.page-app #topnav .nav-login-btn,
  html body.page-app #topnav .nav-user::before {
    font-size: .84rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-main {
    font-size: .82rem !important;
  }
  html body.page-app #topnav .app-mobile-brand .abs-wordmark-sub {
    font-size: .60rem !important;
  }
}

/* Hide sidebar topbar (Lekcije header + X button) on desktop */
@media(min-width:761px){
  html #sidebar .sidebar-mobile-topbar{display:none!important;}
}

/* Desktop: show nav logo (hidden by default via inline style to prevent mobile flash) */
@media(min-width:761px){
  body.page-app #topnav .logo.nav-logo{display:inline-flex!important;}
}

/* FINAL FIX: app-mobile-brand mora biti viden na mobilnem ne glede na vse */
@media(max-width:760px){
  html body.page-app #topnav #nav-auth-area > .app-mobile-brand,
  html body.page-app #topnav #nav-auth-area .app-mobile-brand:not(.abs-wordmark){
    display:inline-flex!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    text-decoration:none!important;
    color:#fff!important;
    gap:.38rem!important;
  }
  html body.page-app #topnav #nav-auth-area > .app-mobile-brand .app-mobile-brand-book{display:inline-flex!important;color:#c89c4a!important;width:26px!important;flex:0 0 26px!important;}
  html body.page-app #topnav #nav-auth-area > .app-mobile-brand .app-mobile-brand-wordmark{display:flex!important;flex-direction:column!important;align-items:flex-start!important;line-height:1!important;}
  html body.page-app #topnav #nav-auth-area > .app-mobile-brand .app-mobile-brand-main{display:block!important;font-family:Georgia,serif!important;font-size:.96rem!important;font-weight:800!important;color:#fff!important;letter-spacing:-.03em!important;white-space:nowrap!important;}
  html body.page-app #topnav #nav-auth-area > .app-mobile-brand .app-mobile-brand-sub{display:block!important;font-size:.62rem!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#c89c4a!important;white-space:nowrap!important;margin-top:2px!important;}
}

/* FINAL: nav-cta gumb vedno viden na index strani, ne glede na auth stanje */
body.page-index nav#topnav .nav-cta,
body.page-index nav#topnav .nav-links .nav-cta {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  height: auto !important;
}

/* === PATCH: bel napis v zelenih krogelcah === */
#sidebar .unit-btn.done .num,
#sidebar .unit-btn.done .num *,
.sidebar-current-dot,
.sidebar-current-dot * {
  color: white !important;
  -webkit-text-fill-color: white !important;
}


/* v127 – calm first lesson refinements */
.completion-banner {
  background: linear-gradient(135deg, #F2FAF4, #FFFFFF) !important;
  border: 1px solid rgba(45,74,62,0.20) !important;
  box-shadow: 0 14px 36px rgba(26,20,16,0.08) !important;
  text-align: left !important;
}
.completion-banner h3 {
  color: #2D4A3E !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  margin-bottom: .35rem !important;
}
.completion-banner > p {
  color: #5F5146 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}
.calm-completion-summary .learned-title {
  color: #2D4A3E !important;
  font-size: 1.08rem !important;
  margin-bottom: .75rem !important;
}
.completion-can-do-list {
  margin: .35rem 0 .9rem !important;
  padding-left: 1.2rem !important;
  color: #2D4A3E !important;
  line-height: 1.75 !important;
  font-size: 1rem !important;
}
.learned-phrase-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .65rem;
  margin-top: .55rem;
}
.learned-phrase-card {
  background: #fff;
  border: 1px solid rgba(45,74,62,.12);
  border-radius: 14px;
  padding: .8rem .9rem;
}
.learned-phrase-card strong {
  display:block;
  color:#1A1410;
  font-size:1.02rem;
  margin-bottom:.2rem;
}
.learned-phrase-card span {
  color:#6B5D52;
  font-size:.94rem;
}
.completion-actions {
  justify-content: flex-start !important;
  gap: .65rem !important;
  flex-wrap: wrap !important;
}
#review-screen.mini-review-mode .review-header-card {
  background: linear-gradient(135deg, #F7F2EA, #FFFFFF) !important;
  border: 1px solid rgba(200,146,58,.18);
}
#review-screen.mini-review-mode .review-summary {
  background: #fff !important;
  border-left: 3px solid #C8923A;
  padding: .9rem 1rem;
  border-radius: 14px;
  color:#5F5146;
}
#review-screen.mini-review-mode .review-unit-title span {
  background: #2D4A3E !important;
  color: #fff !important;
}
#review-screen.mini-review-mode .review-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
#review-screen.mini-review-mode .review-unit-mini {
  box-shadow: 0 14px 32px rgba(26,20,16,.08) !important;
}
.sidebar-roadmap-title small { text-transform:none !important; }
.sidebar-gentle-cta span { line-height:1.35; }
@media (max-width: 640px) {
  .completion-banner { padding: 1rem !important; }
  .completion-actions .btn { width: 100%; justify-content: center; }
  .learned-phrase-cards { grid-template-columns: 1fr; }
}


/* v130 — pomoč gumbi: bel zapis, brez roza/temnega override-a */
html body.page-app #topnav .nav-help-btn,
html body.page-app #topnav .nav-help-btn:hover,
html body.page-app .sidebar-help-btn,
html body.page-app .sidebar-help-btn:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.page-app .sidebar-help-btn * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* v131 — final hard fix: Pomoč button text/icon white */
html body.page-app #sidebar button.sidebar-help-btn,
html body.page-app #sidebar button.sidebar-help-btn:hover,
html body.page-app #sidebar button.sidebar-help-btn:focus,
html body.page-app #topnav button.nav-help-btn,
html body.page-app #topnav button.nav-help-btn:hover,
html body.page-app #topnav button.nav-help-btn:focus {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.page-app #sidebar button.sidebar-help-btn .help-mark,
html body.page-app #sidebar button.sidebar-help-btn .help-text,
html body.page-app #topnav button.nav-help-btn .help-mark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* v135 – jasen signal za izgovorjavo brez dodatnega navodilnega bloka */
.speak-live-status {
  display: none;
  align-items: center;
  gap: .7rem;
  margin: .8rem 0 .1rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.25;
}
.speak-live-status.show { display: flex; }
.speak-live-status.waiting {
  background: #f7faf8;
  border: 1px solid rgba(45, 74, 62, 0.16);
  color: #2D4A3E;
}
.speak-live-status.active {
  background: #fff7ed;
  border: 1px solid rgba(217, 119, 6, 0.28);
  color: #7c2d12;
}
.speak-live-status small {
  color: inherit;
  opacity: .82;
  font-size: .82rem;
}
.speak-live-dot {
  width: .95rem;
  height: .95rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.35);
  flex: 0 0 auto;
}
.speak-live-status.active .speak-live-dot {
  animation: speakLivePulse 1s ease-out infinite;
}
@keyframes speakLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(217,119,6,.38); transform: scale(1); }
  70% { box-shadow: 0 0 0 11px rgba(217,119,6,0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); transform: scale(1); }
}
.btn-record {
  background: #fff7ed !important;
  color: #8a4b09 !important;
  border: 1px solid rgba(217, 119, 6, 0.18) !important;
  border-radius: 999px !important;
}
.btn-record:hover {
  background: #f59e0b !important;
  color: white !important;
}
.btn-record.recording {
  background: #b45309 !important;
  color: white !important;
  border-color: #b45309 !important;
  animation: recordPulse 0.8s infinite alternate;
}
@media (max-width: 640px) {
  .speak-item-top { align-items: stretch; }
  .speak-actions { width: 100%; }
  .speak-actions .btn-listen,
  .speak-actions .btn-record { flex: 1; justify-content: center; }
  .speak-live-status { font-size: .86rem; padding: .75rem .85rem; }
}

/* v134 – večji, jasen popup za trenutek izgovorjave */
.pronunciation-cue-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  background: rgba(20, 36, 30, 0.08);
  backdrop-filter: blur(2px);
}
.pronunciation-cue-modal.active {
  display: flex;
  animation: pronunciationCueIn .18s ease-out both;
}
.pronunciation-cue-modal.fade-out {
  animation: pronunciationCueOut .34s ease-in both;
}
.pronunciation-cue-card {
  width: min(92vw, 520px);
  border-radius: 30px;
  padding: 2rem 1.7rem;
  text-align: center;
  background: #fffdf8;
  border: 1px solid rgba(45, 74, 62, .18);
  box-shadow: 0 28px 80px rgba(31, 59, 50, .22);
  color: #18372d;
}
.pronunciation-cue-pulse {
  width: 4.8rem;
  height: 4.8rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: #2D4A3E;
  position: relative;
  box-shadow: 0 0 0 0 rgba(45, 74, 62, .32);
  animation: pronunciationCuePulse 1s ease-out infinite;
}
.pronunciation-cue-pulse::before {
  content: '🎤';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
}
.pronunciation-cue-eyebrow {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: #6f7f78;
  margin-bottom: .35rem;
}
.pronunciation-cue-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1.05;
  font-weight: 900;
  margin-bottom: .75rem;
  color: #1f3b32;
}
.pronunciation-cue-text {
  font-size: clamp(1rem, 4.5vw, 1.28rem);
  line-height: 1.42;
  color: #2D4A3E;
}
.pronunciation-cue-text strong {
  font-weight: 900;
  color: #111827;
}
@keyframes pronunciationCueIn {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pronunciationCueOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.98); }
}
@keyframes pronunciationCuePulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 74, 62, .32); transform: scale(1); }
  70% { box-shadow: 0 0 0 24px rgba(45, 74, 62, 0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(45, 74, 62, 0); transform: scale(1); }
}
@media (max-width: 640px) {
  .pronunciation-cue-card {
    border-radius: 26px;
    padding: 1.7rem 1.25rem;
  }
  .pronunciation-cue-pulse {
    width: 4.2rem;
    height: 4.2rem;
  }
}

/* v140 — fixed app header on desktop and mobile */
:root {
  --abs-app-header-top: 26px;
  --abs-app-header-height: 94px;
  --abs-app-header-offset: calc(var(--abs-app-header-top) + var(--abs-app-header-height));
}
html body.page-app {
  padding-top: calc(var(--abs-app-header-offset) + 12px) !important;
}
html body.page-app #topnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1200 !important;
  transform: translateZ(0);
  will-change: transform;
}
html body.page-app #app {
  min-height: calc(100dvh - var(--abs-app-header-offset) - 12px) !important;
}
html body.page-app #main {
  scroll-margin-top: calc(var(--abs-app-header-offset) + 16px) !important;
}
@media (max-width: 760px) {
  :root {
    --abs-app-header-top: 12px;
    --abs-app-header-height: 64px;
    --abs-app-header-offset: calc(var(--abs-app-header-top) + var(--abs-app-header-height));
  }
  html body.page-app {
    padding-top: calc(var(--abs-app-header-offset) + 10px) !important;
  }
  html body.page-app #topnav {
    position: fixed !important;
    top: 0 !important;
  }
  html body.page-app #app {
    min-height: calc(100dvh - var(--abs-app-header-offset) - 10px) !important;
  }
  html body.page-app #sidebar {
    top: calc(var(--abs-app-header-offset) + 8px) !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--abs-app-header-offset) - 8px) !important;
    max-height: calc(100dvh - var(--abs-app-header-offset) - 8px) !important;
  }
  html body.page-app.sidebar-open-mobile #sidebar,
  html body.page-app.sidebar-open #sidebar {
    top: calc(var(--abs-app-header-offset) + 8px) !important;
    height: calc(100dvh - var(--abs-app-header-offset) - 8px) !important;
    max-height: calc(100dvh - var(--abs-app-header-offset) - 8px) !important;
  }
}


/* v141 — fixed header follow-ups */
html body.page-app #quiz-score,
html body.page-app #quiz-box,
html body.page-app .quiz-topbar {
  scroll-margin-top: calc(var(--abs-app-header-offset, 92px) + 18px) !important;
}
html body.page-index {
  scroll-padding-top: 96px;
}
html body.page-index nav#topnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1200 !important;
}
@media (max-width: 760px) {
  html body.page-index { scroll-padding-top: 88px; }
}


/* v142 – ensure white numbers on dark circular badges */
#sidebar .unit-btn.active .num,
#sidebar .unit-btn.active .num *,
#sidebar .unit-btn.done .num,
#sidebar .unit-btn.done .num *,
.sidebar-current-dot,
.sidebar-current-dot *,
.sidebar-current-lesson .sidebar-current-dot,
.sidebar-current-lesson .sidebar-current-dot * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}