/* Scoped styles for the dropdown menu only. Does NOT touch page backgrounds. */
.app-menu{position:fixed!important;z-index:100000;position:fixed;top:14px;right:16px;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.app-menu .menu-btn{appearance:none;border:0;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer;background:#fff;color:#111;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .06s ease, box-shadow .2s ease}
.app-menu .menu-btn:hover{box-shadow:0 20px 40px rgba(0,0,0,.18)}
.app-menu .menu-btn:focus{outline:2px solid #6ca0ff;outline-offset:2px}
.app-menu .menu-btn:active{transform:translateY(1px)}
.app-menu .menu-list{position:absolute;right:0;margin-top:8px;width:260px;background:#fff;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.18);padding:8px;display:none;color:#111}
.app-menu .menu-list.open{display:block}
.app-menu .menu-list a,
.app-menu .menu-list button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;text-decoration:none;color:#111;background:transparent;border:0;cursor:pointer;font-size:15px}
.app-menu .menu-list a:hover,
.app-menu .menu-list button:hover,
.app-menu .menu-list a:focus,
.app-menu .menu-list button:focus{background:#f3f4f6;outline:none}
.app-menu .icon{width:20px;height:20px;display:inline-block;margin-right:10px;opacity:.8}
/* Hide old floating controls only when this CSS is loaded (quiz pages) */
.floating#lbToggle{display:none !important;}
.icon-btn#openSettings{display:none !important;}


/* --- Mobile tweaks: keep Menu away from hero title --- */
@media (max-width: 640px){
  .app-menu{ top: 6px; right: 10px; }
  .app-menu .menu-btn{ padding: 8px 10px; font-size: 14px; }
  /* Spacer appears only on mobile to push content down a bit */
  .app-menu-spacer{ display:block; height:64px; }
}
/* Hidden by default on larger screens */
.app-menu-spacer{ display:none; height:0; }


/* ++ Stronger mobile spacing (header & menu no longer collide) */
@media (max-width: 640px){
  .app-menu{ top: 4px; right: 8px; }
  .app-menu .menu-btn{ padding: 8px 12px; font-size: 15px; }
  .app-menu-spacer{ display:block; height:88px; } /* was 64px */
}

@media (max-width: 380px){
  .app-menu{ top: 2px; right: 6px; }
  .app-menu-spacer{ height:96px; }
}

/* Fix: remove extra white space on mobile by killing the spacer */
.app-menu-spacer{display:none !important;height:0 !important;}
@media (max-width: 640px){.app-menu-spacer{display:none !important;height:0 !important;}}
@media (max-width: 380px){.app-menu-spacer{display:none !important;height:0 !important;}}