@media (max-width:850px){

  .mobile-menu-backdrop:not([hidden]){
    background:rgba(5,34,31,.34) !important;
    backdrop-filter:blur(7px) saturate(108%) !important;
    -webkit-backdrop-filter:blur(7px) saturate(108%) !important;
  }

  #mobileNav.mobile-menu:not([hidden]){
    width:min(83vw,360px) !important;
    max-width:360px !important;

    padding:22px 20px 24px !important;

    background:
      linear-gradient(
        180deg,
        #fbfdfc 0%,
        #f7fbf9 52%,
        #eff7f4 100%
      ) !important;

    border-left:1px solid rgba(20,77,71,.10) !important;
    border-radius:32px 0 0 32px !important;

    box-shadow:
      -26px 0 70px rgba(7,43,39,.22),
      -2px 0 0 rgba(255,255,255,.55) inset !important;
  }

  /* ---------- Header ---------- */

  #mobileNav .mobile-menu-head{
    padding:2px 0 20px !important;
    margin:0 0 12px !important;

    border-bottom:1px solid rgba(30,89,82,.10) !important;
  }

  #mobileNav .mobile-menu-head > div{
    position:relative;

    min-height:46px;

    padding-left:54px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }

  #mobileNav .mobile-menu-head > div::before{
    content:"GiC";

    position:absolute;
    left:0;
    top:50%;

    transform:translateY(-50%);

    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    border-radius:15px;

    background:
      linear-gradient(145deg,#0d5f56,#0a4640);

    color:#fff;

    font-size:14px;
    font-weight:900;
    letter-spacing:-.4px;

    box-shadow:
      0 8px 20px rgba(8,76,68,.18),
      inset 0 0 0 1px rgba(255,255,255,.16);
  }

  #mobileNav .mobile-menu-head strong{
    color:#123f3a !important;

    font-size:18px !important;
    font-weight:800 !important;
    letter-spacing:-.2px;
  }

  #mobileNav .mobile-menu-head small{
    color:#8a9b97 !important;

    font-size:12px !important;
    font-weight:650 !important;
  }

  /* ---------- Close ---------- */

  #mobileNav .mobile-menu-close{
    width:48px !important;
    height:48px !important;

    border-radius:16px !important;

    background:rgba(255,255,255,.86) !important;

    color:#184f49 !important;

    border:1px solid rgba(20,75,69,.11) !important;

    box-shadow:
      0 7px 20px rgba(10,58,52,.075) !important;

    font-size:23px !important;
  }

  /* ---------- Links ---------- */

  #mobileNav .mobile-menu-links{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }

  #mobileNav .mobile-menu-links a{
    position:relative;

    min-height:56px !important;

    padding:0 12px !important;

    border:1px solid transparent !important;
    border-radius:16px !important;

    color:#54746f !important;

    font-size:17px !important;
    font-weight:700 !important;

    background:transparent !important;

    transition:
      background .18s ease,
      color .18s ease,
      box-shadow .18s ease,
      transform .18s ease !important;

    opacity:0;
    animation:gicPremiumMenuItem .28s ease forwards;
  }

  /* line-style icons */

  #mobileNav .mobile-menu-links a::before{
    display:grid;
    place-items:center;

    flex:0 0 34px;

    width:34px;
    height:34px;

    margin-right:10px;

    color:#668680;

    font-size:19px;
    font-weight:500;
  }

  #mobileNav a[href="/method"]::before{
    content:"⌁";
  }

  #mobileNav a[href="/dashboard"]::before{
    content:"▦";
  }

  #mobileNav a[href="/learn"]::before{
    content:"▤";
  }

  #mobileNav a[href="/review"]::before{
    content:"↻";
  }

  #mobileNav a[href="/curriculum"]::before{
    content:"◇";
  }

  #mobileNav a[href="/pricing"]::before{
    content:"✦";
    color:#b58935;
  }

  #mobileNav a[href="/account"]::before{
    content:"◎";
  }

  #mobileNav a[href="/login"]::before{
    content:"→";
  }

  #mobileNav .mobile-menu-links a:hover,
  #mobileNav .mobile-menu-links a:active{
    color:#0c5b53 !important;

    background:rgba(255,255,255,.60) !important;

    transform:translateX(-2px);
  }

  /* ---------- Active page ---------- */

  #mobileNav .mobile-menu-links a[aria-current="page"]{
    color:#0b584f !important;

    background:#fff !important;

    border-color:rgba(22,92,84,.09) !important;

    font-weight:800 !important;

    box-shadow:
      0 10px 28px rgba(8,60,54,.09),
      inset 3px 0 0 #c79b49 !important;
  }

  #mobileNav .mobile-menu-links a[aria-current="page"]::before{
    color:#0a776c !important;
  }

  /* ---------- Premium badge ---------- */

  #mobileNav a[href="/pricing"]::after{
    content:"PREMIUM";

    margin-left:auto;

    padding:5px 8px;

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        rgba(206,166,88,.16),
        rgba(191,143,48,.08)
      );

    border:1px solid rgba(183,137,47,.20);

    color:#9b752c;

    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
  }

  /* ---------- Small footer ---------- */

  #mobileNav.mobile-menu:not([hidden])::after{
    content:"German in Context · Learning System";

    display:block;

    margin-top:auto;
    padding:24px 8px 4px;

    color:#9aaba7;

    font-size:11px;
    font-weight:650;
    letter-spacing:.25px;

    text-align:center;
  }

  /* ---------- Item entry ---------- */

  #mobileNav .mobile-menu-links a:nth-child(1){
    animation-delay:.035s;
  }

  #mobileNav .mobile-menu-links a:nth-child(2){
    animation-delay:.060s;
  }

  #mobileNav .mobile-menu-links a:nth-child(3){
    animation-delay:.085s;
  }

  #mobileNav .mobile-menu-links a:nth-child(4){
    animation-delay:.110s;
  }

  #mobileNav .mobile-menu-links a:nth-child(5){
    animation-delay:.135s;
  }

  #mobileNav .mobile-menu-links a:nth-child(6){
    animation-delay:.160s;
  }

  #mobileNav .mobile-menu-links a:nth-child(7){
    animation-delay:.185s;
  }

  #mobileNav .mobile-menu-links a:nth-child(8){
    animation-delay:.210s;
  }

  @keyframes gicPremiumMenuItem{
    from{
      opacity:0;
      transform:translateX(14px);
    }

    to{
      opacity:1;
      transform:translateX(0);
    }
  }

  @media (prefers-reduced-motion:reduce){
    #mobileNav .mobile-menu-links a{
      animation:none !important;
      opacity:1 !important;
      transition:none !important;
    }
  }
}

/* ===== GiC drawer logo clean crop ===== */
@media (max-width:850px){

  #mobileNav .mobile-menu-head img{
    width:58px !important;
    height:58px !important;

    object-fit:cover !important;
    object-position:center !important;

    /* remove the black outer area baked into the image */
    clip-path:inset(9% round 15px);

    transform:scale(1.14);
    transform-origin:center;

    background:transparent !important;

    box-shadow:
      0 7px 18px rgba(154,112,32,.15) !important;
  }

}

/* ===== GiC GREEN BRAND BADGE v2 ===== */
@media (max-width:850px){

  /* hide previous image/logo implementations */
  #mobileNav .mobile-menu-head > img,
  #mobileNav .gic-drawer-logo{
    display:none !important;
  }

  /* disable older CSS-generated GiC logo */
  #mobileNav .mobile-menu-head > div::before,
  #mobileNav .mobile-menu-head > div::after{
    content:none !important;
    display:none !important;
  }

  #mobileNav .mobile-menu-head{
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 48px !important;
    gap:13px !important;
    align-items:center !important;
  }

  #mobileNav .mobile-menu-head > div{
    padding-left:0 !important;
    min-width:0 !important;
  }

  #mobileNav .gic-logo-badge{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:17px;

    background:
      linear-gradient(145deg,#14796d 0%,#07564f 100%);

    border:1px solid rgba(255,255,255,.22);

    box-shadow:
      0 9px 22px rgba(6,74,66,.20),
      inset 0 1px 0 rgba(255,255,255,.22);
  }

  #mobileNav .gic-logo-text{
    display:flex;
    align-items:baseline;
    justify-content:center;

    font-family:Georgia,serif;
    font-weight:800;
    line-height:1;

    letter-spacing:-1.5px;
  }

  #mobileNav .gic-logo-text .gic-g,
  #mobileNav .gic-logo-text .gic-c{
    color:#ffffff;
    font-size:19px;
  }

  #mobileNav .gic-logo-text .gic-i{
    color:#e2b85e;
    font-size:15px;
    font-weight:900;

    margin:0 1px;

    transform:translateY(-1px);
  }
}


/* ===== FINAL DRAWER LOGO CLEANUP ===== */
@media (max-width:850px){

  /* kill every old image logo in drawer header */
  #mobileNav .mobile-menu-head img,
  #mobileNav .mobile-menu-head picture,
  #mobileNav .mobile-menu-head .gic-drawer-logo{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    position:absolute !important;
    pointer-events:none !important;
  }

  #mobileNav .gic-logo-badge{
    position:relative !important;
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
    overflow:hidden !important;
  }

  #mobileNav .gic-logo-text .gic-g,
  #mobileNav .gic-logo-text .gic-c{
    color:#fff !important;
  }

  #mobileNav .gic-logo-text .gic-i{
    color:#e3b95e !important;
    font-size:15px !important;
  }
}

/* ===== GIC DRAWER HEADER ALIGN FIX ===== */
@media (max-width:850px){

  /* header row */
  #mobileNav .mobile-menu-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
  }

  /* left brand block */
  #mobileNav .gic-brand{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  /* logo badge */
  #mobileNav .gic-logo-badge{
    width:60px !important;
    height:60px !important;
    flex:0 0 60px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:linear-gradient(145deg,#17867f 0%,#0b5e58 100%) !important;
    box-shadow:
      0 10px 24px rgba(10,76,70,.18),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  /* text logo inside badge */
  #mobileNav .gic-logo-text{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;

    position:static !important;
    inset:auto !important;
    transform:none !important;

    line-height:1 !important;
    letter-spacing:-0.03em !important;
    white-space:nowrap !important;
    overflow:visible !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-weight:700 !important;
  }

  #mobileNav .gic-logo-text span{
    display:block !important;
    line-height:1 !important;
  }

  #mobileNav .gic-logo-text .gic-g,
  #mobileNav .gic-logo-text .gic-c{
    color:#ffffff !important;
    font-size:30px !important;
  }

  #mobileNav .gic-logo-text .gic-i{
    color:#e2b85a !important;
    font-size:22px !important;
    margin:0 1px !important;
    position:relative !important;
    top:1px !important;
  }

  /* brand copy */
  #mobileNav .gic-brand-copy{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }

  #mobileNav .gic-brand-copy strong{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    font-size:18px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    color:#163f3b !important;
    margin:0 !important;
  }

  #mobileNav .gic-brand-copy small{
    display:block !important;
    margin-top:6px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    color:#90a19d !important;
  }
}

/* GiC canonical Settings item */
#mobileNav a[href="/settings"]::before{content:"⚙";font-size:18px;color:#668680}